Elaboracin de Pginas Web

Profr. Rodolfo Caraveo de Dios

MANUAL DEL ALUMNO

Alumno: ___________________________________________________ Sexto Semestre Grupo: _____ Turno: _______________

PREFECO Profr. Augusto Hernndez Oliv

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

ELABORACION DE PGINAS WEB.

1. Analizar los elementos fundamentales del diseo
1.1. Analizar las teoras del diseo 1.2. Identificar el impacto y el enfoque en diseos existentes. 1.3. Disear formatos considerando las zonas ureas, direccin sentido y equilibrio. 1.4. Aplicar la teora del color considerando el crculo cromtico, contrastes, el RGB y CMY.

2. Manejar los elementos bsicos de un lenguaje usado en la creacin de pginas web.

2.1. Definir objetivos y contenidos de la pgina web. 2.2. Esquematizar la estructura general de una pgina web. 2.3. Utilizar etiquetas en una pgina web. 2.4. Establecer vnculos e hipervnculos. 2.5. Manipular objetos y formularios en una pgina web. 2.6. Manipular tablas en una pgina web. 2.7. Manipular imgenes y animaciones en una pgina web. 2.8. Definir secciones de mapeo de imgenes en una pgina web. 2.9. Insertar sonido y video en una pgina web. 2.10. Implementar servicios de correo en una pgina web.

3. Disear una pgina web con un software de aplicacin.

3.1. Definir objetivos y contenidos de la pgina web. 3.2. Establecer etiquetas en la pgina web. 3.3. Establecer links dentro de la pgina web, entre pginas web y entre servidores. 3.4. Manipular imgenes dentro de la pgina web. 3.5. Estructurar tablas en una pgina web. 3.6. Insertar sonido y video en una pgina web. 3.7. Almacenar pginas web en un servidor dedicado o gratuito.

4. Publicar pginas web en los servidores de internet

4.1. Identificar los servidores de internet disponibles para publicacin de informacin. 4.2. Seleccionar un servidor de internet considerando las caractersticas de la pgina web. 4.3. Utilizar la pgina del servidor de internet para alojar una pgina web. 4.4. Verificar el funcionamiento de la pgina web dentro del servidor seleccionado.

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

1. Analizar los elementos fundamentales del diseo

Qu es el diseo? Proceso de creacin visual con un propsito, el cual cumple con exigencias practicas. Un buen diseo es la mejor expresin visual de la esencia de `algo` cuya creacin no debe ser solo esttica sino tambin funcional.

Elementos del diseo

Los siguientes elementos son las bases que construyen el Diseo. Lnea Una lnea es definida como una marca con longitud y direccin, creada mediante un punto que se mueve a lo largo de una superficie. Una lnea puede variar en longitud, ancho, direccin, curvatura y color. La lnea puede ser de dos dimensiones (una lnea de lpiz sobre papel), o tres dimensiones implcitas. Forma Una figura plana o una forma es creada cuando lneas actuales o implcitas se encuentran alrededor de un espacio. Un cambio en el color o el sombreado puede definir una forma. Las formas pueden ser clasificadas en varios tipos: geomtricas (cuadrado, tringulo, crculo) y orgnicas (irregulares en contorno).

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Tamao Este se refiere a las variaciones de las proporciones de los objetos, lneas o formas. Hay una variacin de tamao en objetos ya sean reales o imaginarios.

Espacio Espacio es el rea vaca o abierta entre, alrededor, arriba, debajo o entre objetos. Figuras y formas son realizadas en el espacio alrededor y entre l. El espacio tambin es llamado bidimensional o tridimensional. El espacio positivo es rellenado con formas o figuras. El espacio negativo rodea una forma o figura.

Color El Color es el carcter percibido de una superficie de acuerdo con la longitud de onda o la luz reflejada desde esta. El Color posee tres dimensiones: TINTE (otra palabra para color, indicada por su nombre as como rojo o amarillo), VALOR (su luminosidad o oscuridad), INTENSIDAD (su brillo u opacidad).

Textura La Textura es la forma como se siente la superficie (textura actual) o como puede ser observada (textura implcita). Las Texturas son descritas con palabras como spero, sedoso o rugoso. Valores El Valor es que tan oscuro o claro se ve algo. Podemos alcanzar cambios de valores en el color por medio de la adicin de blanco o negro a dicho color. Claroscuro usa valores en los dibujo mediante contrastes de claros y oscuros en una composicin.

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

Principios de Diseo
Los principios emplean elementos del diseo para crear composiciones. Balance El Balance es el sentido de equidad visual en una forma, figura, valor, color, etc. El Balance se puede hacer simtrica o uniformemente en objetos, valores, colores, texturas, formas, etc.,

Contraste El contraste es la yuxtaposicin (fusin) de los elementos opuestos.

nfasis El nfasis es usado para crear ciertas partes de sus trabajos artsticos a travs de llamado atencin de manera especial. El centro de inters o punto foco es el lugar del dibujo que le invita a enfocar su mirada.

Proporcin

La Proporcin describe el tamao, ubicacin o el monto de una cosa comparada con otra.

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Patrones Los Patrones son creados mediante la repeticin de un elemento (lnea, forma o color) una y otra vez.

Gradacin La Gradacin es el tamao y direccin producidos por una perspectiva lineal. La Gradacin del color es desde gamas calidas a fras y por su parte los tonos oscuros a claros producen una perspectiva area. La Gradacin puede agregar inters y movimiento a una forma

Composicin La combinacin de distintos elementos para formar un todo.

1.1. Analizar las teoras del diseo. Minimalismo. El minimalismo es una corriente esttica derivada de la reaccin al pop art. Frente al colorismo, a la importancia de los medios de comunicacin de masas, frente al fenmeno de lo comercial y de un arte que se basaba en la apariencia, el minimalismo utiliz conceptos diametralmente opuestos. El sentido de la individualidad de la obra de arte, la privacidad, una conversacin conceptual entre el artista, el espacio circundante y el espectador. As como la importancia del entorno como algo esencial para la comprensin y la vida de la obra. Los preceptos bsicos del minimalismo son: a. Utilizar colores puros,
Capacitacin de Informtica
6

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv b. Asignarle importancia al todo sobre las partes, c. Utilizar formas simples y geomtricas realizadas con precisin mecnica, d. Trabajar con materiales industriales de la manera ms neutral posible y disear sobre superficies inmaculadas. e. Da gran importancia al espacio y a los materiales ecolgicos f. El resultado que define este estilo en un concepto es la palabra limpieza. Hay muchas variantes del minimalismo, con un toque ms o menos oriental, o ms o menos escandinavo. Actualmente tiene gran difusin en Europa, entre los ms jvenes, sumado a toda una corriente de muebles de diseo dans contemporneo.

La decoracin minimalista, se nutre de las formas puras, simples, y juega con sus volmenes, su iluminacin y sus superficies.

Los creadores minimalistas reducen al mximo los elementos propios del arte, los volmenes y formas en escultura. De forma anloga proceden en la arquitectura o en la pintura. Intentan condensar en escasos elementos sus principios artsticos y reflexiones.

Conceptualismo. El movimiento artstico surgido a finales de los aos sesenta, cuyos exponentes rechazan el arte como artculo de lujo, permanente, porttil y vendible, proponiendo un tipo de arte en el que cuenta primordialmente la idea o el concepto que respalda sus realizaciones Los artistas conceptuales utilizaron con frecuencia fotos, recortes de peridicos como parte de su creacin, para documentar o para expresar ideas, como por ejemplo:

Juan Camilo Uribe

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

Alicia Barney

LydiaAzout

Antonio Caro (1950-

Bernardo Salcedo

Becky Mayer

Alicia Barney

Rosemberg Sandoval

Inginio Caro

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

Adolfo Bernal

1.2. Identificar el impacto y el enfoque en diseos existentes. Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir que creatividad e innovacin, arte y diseo se parecern en la medida que las busquemos en mbitos cuyos modos de hacer mantengan alguna identidad y dejarn de parecerse en tanto nos alejemos de esos puntos en los que coinciden. El arte cuando se convierte en industria comercial va a tender a parecerse ms al diseo que al arte callejero, del mismo modo que la creatividad empresarial puede conducir a la innovacin de la misma forma que la innovacin tecnolgica puede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80s y 90s la incorporacin de los software digitales al proceso de diseo. Queda agregar que hay descripciones definitivas en los mbitos del diseo para evitar que comencemos a confrontar y asumir que nuestro radio de accin es permeable y sensible a un sinnmero de circunstancias. Que algunas de ellas no agotan la complejidad de la produccin en serie, que unas pocas se han vuelto ajenas a las urgencias del mercado, que otras muchas se han convertido en iconos de algunos productos o servicios y que unas cuantas han aceptado jugar el juego mundial de la creacin de valor, la identidad corporativa, los medios y los productos de consumo. El sector de servicios est creciendo, tanto en nmero de empleados como en su importancia en la economa, mientras el sector manufacturero decae. Sin embargo, as como los sectores manufactureros, los servicios deben ser diseados y su diseo debe ser gestionado. El diseo de servicios puede ser tangible como intangible. Puede involucrar artefactos y otras cosas incluyendo comunicacin, ambientes y conductas. Cualquier forma que adopte debe ser consistente, fcil de usar y ser aplicado estratgicamente. Slo recientemente los gerentes involucrados en el sector de servicios se han dado cuenta que un esfuerzo conciente por aplicar tcnicas de diseo a los servicios puede resultar en un incremento en la satisfaccin de clientes, mayor control sobre sus ofertas y mayores ganancias.

Capacitacin de Informtica

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv 1.3. Disear formatos considerando las zonas ureas, direccin, sentido y equilibrio. Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con medios visuales (grafismos). No es el creador del mensaje, sino su intrprete. El principal componente de toda composicin grfica es pues el mensaje a interpretar, la informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados, aunque los ms comunes son: Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas, etc.) Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc. Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales. Grficos varios: logotipos, iconos, etc. Ilustraciones Fotografas Cualquier otro elemento visual apto para comunicar un mensaje. a. Zonas ureas. La cre Vitruvio, la autoridad romana en arquitectura. Ide un sistema de clculo matemtico de la divisin pictrica, para seccionar los espacios en partes iguales y as conseguir una mejor composicin. Se basa en el principio general de contemplar un espacio rectangular dividido, a grandes rasgos, en terceras partes, tanto vertical como horizontalmente.

La escala se utiliza en planos y mapas para la representacin de una medicin proporcional real. La medicin nos permite adecuarnos a la realidad, pero ms importante es lo que colocamos junto al objeto visual o el marco en el que est colocado. La medicin universal es la propia medida del hombre, el tamao medio de las proporciones humanas. La pregunta que hacen todos los diseadores es: cmo podemos distribuir el espacio de diseo de una forma acertada? Pues bien, no hay una norma que nos indique la divisin perfecta, pero existe una frmula muy conocida en el mundo del diseo, que permite dividir el espacio en partes iguales, para lograr un efecto esttico agradable y que puede llegar a ser muy eficaz. Esta teora se denomina "La regla urea", tambin conocida como "seccin urea".

Capacitacin de Informtica

10

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv b. Direccin y sentido. En la comunicacin visual el diseador tendr que tener en cuenta tanto la vertiente psicolgica de la percepcin humana como las significaciones culturales que pueden tener ciertos elementos. El diseador grfico es una especie de arquitecto del espacio grfico y debe distribuir los elementos en funcin de una estructura interna que tenga una significacin, gua o intencin coincidente con el mensaje que se quiera transmitir. Esta estructura ser la responsable de la eleccin cromtica y su intencionalidad expresiva, de la eleccin de las imgenes o de la disposicin de los bloques de texto. Algunos factores psicolgicos que debemos conocer son: El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y los ejes en los cuales descansa. El desequilibrio crea provocacin e inestabilidad. Tendremos que analizar que es lo que queremos transmitir al receptor y con respecto a esto crear una composicin determinada. La referencia horizontal: Necesitamos ver que los objetos o partes que componen una composicin estn de alguna forma apoyados. La parte inferior se ver mejor que la superior, ya que ser donde se constituya la base. Angulo inferior izquierdo: Los hbitos de lectura occidentales han motivado propiciado que la atencin se centre ms en la parte izquierda y en concreto en la inferior izquierda. Relajamiento-tensin: psicolgicamente cuando tenemos una composicin equilibrada, simtrica o predecible; sin embargo generaremos tensin en el receptor si no es capaz de encontrar una lgica visual en la composicin que le presentamos.

c. Equilibrio. La utilizacin ms eficaz de los mecanismos de la percepcin visual consiste en identificar claves visuales en un sentido u en otro, en equilibrio o en desequilibrio, fuertes o dbiles. Podemos conseguir en nuestra composicin ese equilibrio de formas y lneas, es decir, los pesos de los elementos deben estar compensados. La manera de medir el peso de las formas y lneas del diseo es, analizando la importancia visual de estos dentro de nuestra composicin. Existen dos tipos de equilibrio: El equilibrio simtrico. El equilibrio asimtrico.

Si dividimos la composicin en dos extremos, el equilibrio simtrico se produce cuando encontramos igualdad de peso y tono en ambos lados de nuestra composicin, y el equilibrio asimtrico se produce cuando no existe las mismas dimensiones (ya sea de tamao, color...) en ambos lados, pero an as existe equilibrio entre los elementos.

Capacitacin de Informtica

11

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv El equilibrio que crea la simetra es un factor importante de la forma en que evaluamos el atractivo visual de un objeto. Sin embargo, el atractivo de la simetra tiene lmites; un toque de asimetra puede hacer que resulte an ms atractivo, aadiendo un toque de individualidad y singularidad. La simetra, en cierta manera, da sensacin de orden y alivia la tensin; la asimetra hace lo contrario, crea agitacin y tensin, pero puede conseguir que una imagen no sea montona. Podemos hacer otra divisin de equilibrio: El equilibrio formal. Y el equilibrio informal.

El equilibrio formal se basa en la bisimetra. Se busca un centro ptico dentro del diseo, que no tiene por qu coincidir con el centro geomtrico de la composicin. Una composicin que siga este esquema compositivo reflejar estabilidad, calma y estatismo, pero no supone una composicin muy audaz.

1.4. Aplicar la teora del color considerando el crculo cromtico, contrastes, el RGB y CMY. Empezaremos diciendo que el color en s no existe, no es una caracterstica del objeto, es ms bien una apreciacin subjetiva nuestra. Por tanto, podemos definirlo como, una sensacin que se produce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energa luminosa de ciertas longitudes de onda. El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca reflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda est comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista. En las artes grficas tenemos dos grandes categoras con respecto al color, imagen en color e imagen en blanco y negro, en stas ltimas podemos diferenciar: - imgenes a pluma. imgenes tramadas: mediante diferentes tipos de gris. Asimismo, las imgenes en color se pueden dividir en dos categoras: - colores planos: manchas uniformes de color. - degradados, tambin tramadas. El color es un elemento bsico a la hora de elaborar un mensaje visual. Muchas veces, el color no es un simple atributo que recubre la forma de las cosas en busca de la fidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajes es, precisamente, el Color, o lo que slo puede expresarse por el Color. El color est presente en todos los aspectos de la identidad empresarial y de marca. En la identidad, las empresas pueden hacer que el color sea el principal elemento de su identidad utilizando un nico color o una paleta de colores como parte de su identidad visual. Si el color se emplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en la rbrica de la empresa. d. Circulo cromtico. El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensiones fsicas del color para relacionar experiencias de percepcin con propiedades
Capacitacin de Informtica
12

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

materiales: saturacin, brillantez y tono. El crculo cromtico nos sirve para observar la organizacin bsica y la interrelacin de los colores. Tambin lo podemos emplear como forma para hacer la seleccin de color que nos parezca adecuada a nuestro diseo. Podemos encontrar diversos crculos de color, pero el que aqu vemos est compuesto de 12 colores bsicos.

Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos. En este crculo cromtico podemos encontrar: los colores primarios: rojo, azul y amarillo; los secundarios: verde, violeta y naranja; y los terciarios: rojo violceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violceo.

e. RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW) Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciarios se consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Los primarios son colores que se consideran absolutos y que no pueden crearse mediante la mezcla de otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un nmero infinito de colores. Dependiendo de qu mbito, podemos encontrar tres juegos de colores primarios:

Capacitacin de Informtica

13

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Los artistas y diseadores parten de un juego formado por el rojo, el amarillo y el azul. Mezclando pigmentos de stos colores pueden obtenerse todos los dems tonos. El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios aditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en la formacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, forman otros colores y si lo hacen en cantidades iguales producen la luz blanca. El tercer juego se compone de magenta, amarillo y cyan. Se tratan de los primarios sustractivos y son los empleados por los impresores. En imprenta, la separacin de colores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se obtienen los colores de impresin por proceso sustractivo.

f. Contrastes. El tono: Es el matiz del color, es decir el color en s mismo, supone su cualidad cromtica, es simplemente- un sinnimo de color. Es la cualidad que define la mezcla de un color con blanco y negro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puede decir que un color es rojo, amarillo, verde... Aqu podemos hacer una divisin entre: tonos clidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el fuego... y tonos fros (azul y verde). Los colores fros son aquellos que asociamos con el agua, la luz de la luna ...

Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichas cualidades; stos trminos se designan por lo que denominamos "temperatura de color". Las diferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papel blanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismo ocurre con el gris y el negro. La brillantez: Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de un color (la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono. Es una condicin variable, que puede alterar fundamentalmente la apariencia de un color. La luminosidad puede variar aadiendo negro o blanco a un tono. En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) se consiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente un valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras. La saturacin: Est relacionada con la pureza cromtica o falta de dilucin con el blanco. Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee.

Capacitacin de Informtica

14

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv

2. Manejar los elementos bsicos de un lenguaje usado en la creacin de pginas web.

Para crear una pgina web requerimos de un lenguaje especial de programacin, el cual es un programa con un conjunto de instrucciones detalladas que le dirn a la computadora que hacer exactamente, paso a paso. Un programa puede ser tan corto como de una sola lnea de cdigo, o tan largo como de varios millones de lneas de cdigo. Estos son algunos de ellos: HTML. El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatos ms populares que existen para la construccin de documentos. DHTML. El HTML Dinmico o DHTML (del ingls Dynamic HTML) designa el conjunto de tcnicas que permiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, un lenguaje interpretado en el lado del cliente (como JavaScript) y el lenguaje de Hojas de estilo en cascada (CSS). XHTML. XHTML (eXtensible Hyper Text Markup Language) es el lenguaje de marcas creado para sustituir al lenguaje HTML(Hyper Text Markup Language). Se podra decir que el XHTML es la versin XML de HTML, ya que tiene bsicamente las mismas funcionalidades, cumpliendo las especificaciones ms estrictas de XML. Su objetivo es avanzar en el proyecto del W3C (World Wide Web Consortium), de lograr pginas web donde la informacin y la forma de presentarla estn claramente separadas. XHTML es, por lo tanto, un lenguaje semntico, que quiere decir que no definimos el aspecto de las cosas sino lo que significan. ASP. Active Server Pages (ASP), es una tecnologa propietaria de Microsoft. Se trata bsicamente de un lenguaje de tratamiento de textos (scripts), basado en Basic, y que se denomina VBScript (Visual Basic Script). Se utiliza casi exclusivamente en los servidores Web de Microsoft (Internet Information Server y Personal Web Server). Los scripts ASP se ejecutan, por lo tanto, en el servidor y puede utilizarse conjuntamente con HTML y Javascript para realizar tareas interactivas y en tiempo real con el cliente. Con ASP se pueden realizar fcilmente pginas de consulta de bases de datos, funciones sencillas como obtener la fecha y la hora actual del sistema servidor, clculos matemticos simples, etc. JAVA SCRIPT. JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programacin basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

Capacitacin de Informtica

15

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Todos los navegadores modernos interpretan el cdigo JavaScript integrado dentro de las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del DOM (Document Object Model, podra ser Modelo en Objetos para la representacin de Documentos), abreviado DOM, es esencialmente un modelo computacional a travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido, estructura y estilo de los documentos HTML y XML.

2.1. Definir objetivos y contenidos de la pgina web.

Es importante tomar una decisin para elegir qu objetivos consideramos primordiales antes del desarrollo de la pgina web. La eleccin, condiciona de manera clave la concepcin y el diseo del proyecto, el cual debe ser coherente con los objetivos de la empresa. Por ejemplo: Conseguir 250 contactos comerciales en 1 ao. Ofrecer a los clientes una herramienta de seleccin del producto ms adecuado para que se informen y comparen sin presiones Impactar al visitante con una web espectacular que refuerce la imagen de marca. Vender software directamente desde Internet buscando el ahorro de costos de distribucin. Tu web puede ser algo ms. Ya que habla por ti, por tus productos, por tus servicios, por lo que adems puede: Ofrecer al visitante ocasional una motivacin para contactar, Una razn para recordarte o quizs una utilidad que le ahorra tiempo, Encontrar una informacin que estaba buscando. Facilitar y agilizar el trabajo de colaboradores y de empleados. Apoya la imagen de marca. Vende y completa el proceso de venta. Ofrece asistencia y soporte tcnico. Facilita una comunicacin gil y fluida con tus clientes y proveedores. Cada empresa o persona debe elegir aquellos que mejor encajen con sus objetivos y las expectativas del negocio. Piensa que la definicin de objetivos te ahorrar sorpresas como disear una web pensando en los clientes, para despus descubrir que slo te visitan "extraos" ... O un diseo de web muy espectacular e innovador, cuando lo nico que se pretende es que la persona deje sus datos de email para enviarle ofertas concretas, etc. Un mismo sitio web puede perfectamente intentar cumplir varios objetivos simultneamente aunque te recomiendo que lo abordes por fases. Empieza por 2 o 3 de ellos, y a medida que vayas viendo su evolucin y aprendiendo de los errores y aciertos, puedes ir planificando nuevos objetivos. Para ilustrar estas ideas, los objetivos podemos agruparlos en: a) Buscar leads o contactos. Ya sea para comprar, distribuir, vender, anunciarse, conseguir una visita comercial, una demostracin de producto, etc ... b) Fidelizacin de clientes y apoyo a la venta. Branding, amplia informacin, soporte tcnico, ayuda on-line, actualizaciones de producto, demostraciones interactivas, promociones, juegos, utilidades, foros, etc.

Capacitacin de Informtica

16

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv c) Ahorro de tiempo y dinero. Aplicaciones y utilidades para agilizar y facilitar tareas rutinarias: ventas on-line, introduccin de ofertas de trabajo, actualizaciones de producto, transferencia de archivos, buzn de sugerencias, quejas, trmites y gestiones on line, etc. Cada uno lo puede definir como quiera, ms o menos detallado, pensando en las implicaciones para la organizacin, buscando diferenciarse de la competencia, marcar objetivos a medio y largo plazo, etc. Es escribir con letras bien grandes LO QUE QUIERES. Otra tarea ser decidir las estrategias a emprender para cumplir los objetivos.

2.2. Esquematizar la estructura general de una pgina web.

Planifique la estructura antes de empezar
Antes de crear un conjunto de pginas web uno ha de tener una idea clara de cmo va a ser la estructura de dichas pginas, es conveniente hacer un esquema, para la mayora de los casos una hoja de papel y un lapicero bastar, pero si el emplazamiento va a albergar un gran nmero de pginas es recomendable usar algn tipo de programa que permita manejar estructuras de tipo grafo.

La estructura depende del contenido

No es lo mismo crear una estructura de navegacin para un sitio que desea publicar informacin al estilo de un libro cuya estructura estar formada por captulos, este tipo de informacin se adapta bastante bien a una estructura lineal como jerrquica. Mientras que un sitio donde se expone un tutorial o un tour es ms apropiada una estructura de tipo lineal. Para visualizar la estructura de directorios es recomendable dibujar una especie de organigrama, en el que vamos a ir colocando los directorios en funcin de su importancia, desde el nivel superior a otros inferiores. Se debe listar la informacin que se desea incluir en la Web. Esta informacin debe ser significativa y til para el pblico. Teniendo en cuenta lo que a ellos les interesa, no lo que a nosotros nos gustara que nos interese. En el caso de que existan otras formas de acceso a informacin disponible para esas mismas personas, el contenido de la Web deber ser superador de esos otros materiales. Es el momento de hacer un boceto de la pgina principal y de cada pgina que est enlazada a sta, sin preocuparnos demasiado por los detalles, ya que solo es un boceto. Es importante recordar que los visitantes de una web no lo van a leer completamente, sino que lo que desean es encontrar rpidamente lo que les interesa, por lo que habr de establecer una estructura adecuada de enlaces entre las pginas. El movimiento de un lado a otro de la web debe ser lo ms intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difcil encontrar lo que buscamos es abandonado rpidamente. Cuando un internauta ingresa a una pgina web, quiere encontrar entre otras cosas tres caractersticas: velocidad, simplicidad y claridad. Por su parte, el sitio web visitado pretende que la persona o personas que ingresen en sus pginas se queden el mayor tiempo posible; en lenguaje comercial buscan atraer clientes. Pero, cmo lograr las dos cosas?, es decir, ofrecer un producto agradable a la vista y con buenos contenidos.

Capacitacin de Informtica

17

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Este es un ejemplo con l debemos empezar a crear nuestra pgina, en el cual debemos tener claro los niveles que tendr.
ESTRUCTURA SUGERIDA DE UNA WEB MATERIA : ELABORACIN DE PAGINAS WEB

Nivel 1 Principal Bienvenida Ubicacin curricular Fundamentacin A quien va dirigido Introduccin Objetivo Contenido Metodologa Evaluacin Calendario Unidad I

Nivel 2

Nivel 3

Informacin

Materiales

Unidad II

Unidad III

Contenido Resumen Recursos Contenido Resumen Recursos Contenido Resumen Recursos Resumen Recursos 2 foros el inicial Foro final Por tema

Actividades Foros Referencias

Portafolio de aprendizaje para cada unidad

Creador

Bibliografa Lecturas complementarias Ligas de inters Glosario Datos personales Nivel acadmico Experiencia laboral Fotografa

Capacitacin de Informtica

18

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv En el desarrollo de los ejercicios contenidos dentro de este manual, se utilizar el lenguaje de creacin de pginas web XHTML.

Reglas del XHTML a tener en cuenta

1. Un documento XHTML no puede tener etiquetas abiertas. Un <p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y as todos los elementos. Ejemplo: <p>El pastor tiene el rebao a la sombra </p> 2. Los elementos en un documento XHTML, deben estar anidados de forma lgica, por lo tanto deben cerrarse en el orden inverso al que fueron abiertos. Ejemplo: <p>El <strong>pastor tiene el rebao a la sombra</strong></p> 3. Todas las etiquetas y sus atributos deben escribirse siempre en minsculas. Solo el valor del atributo puede contener maysculas. Ejemplo: <span class=Estilo azul>Bienvenidos al XHTML</span> 4. Todos los valores de los atributos de las etiquetas deben estar siempre entrecomillados. Ejemplo: <table width=100% border=2 cellspacing=2 cellpadding=5> 5. Recordemos que XHTML es un lenguaje semntico, por lo tanto, cuando desarrollemos un documento hay que pensar en la organizacin y estructuracin del mismo ms que en su maquetacin. Ejemplo: Las etiquetas mal escritas o desconocidas para un navegador son ignoradas. Sin embargo los errores de sintaxis, como por ejemplo olvidar delimitar una etiqueta, pueden provocar errores en la validacin y visualizacin del documento.

2.3. Utilizar etiquetas en una pgina web.

Estructura de un documento XHTML
Los elementos que componen la estructura de un documento web son: a) El DOCTYPE y la codificacin Para escribir un cdigo XHTML vlido, deberemos indicar al navegador el tipo de documento que va a abrir. La declaracin del tipo de documento XHTML es obligatoria (DTD). Las tres opciones de DTD que podemos utilizar son: 1. Estricto (Strict).Se utiliza cuando se quiere obtener una estructura limpia y clara dejando el aspecto y la maquetacin a las CSS (Hojas de estilo). Declaracin: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Capacitacin de Informtica

19

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv 2. Transicional (Transitional). Se utiliza cuando se describe la presentacin de los documentos por medio de etiquetas. Es el sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS. Declaracin: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 3. Marcos (Frameset). Es una variante de la opcin Transitional, que permite que el contenido del documento est estructurado con marcos. Declaracin: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> La codificacin por defecto de un documento es Unicode UTF-8. Para evitar conflictos con algunos caracteres del castellano, en la definicin de sitios estrictos se recomienda usar la codificacin ISO-8859-1. Declarada de la siguiente manera: <?xml versin=1.0 encoding=iso-8859-1?> Si el DTD no es estricto, es recomendable incluir el correspondiente comando meta en vez de la instruccin anterior: <meta http-equiv=Content-Type Content=text/html; charset=iso-8859-1/> b) El resto del documento HTML ha de estar delimitado por la etiqueta de inicio <html> y la de terminacin </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. A la etiqueta html debemos indicarle el lenguaje en el que est escrito el documento. As pues si escribimos en castellano, el cdigo sera el siguiente: <html xmlns=http://www.w3.org/1999/xhtml xml:lang=sp lang=sp> El resultado es un documento con la siguiente estructura: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... </head>

Capacitacin de Informtica

20

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html> Con todo lo que conocemos ya sobre HTML podemos construir una pgina web que ya tiene bastante sentido. Vemos un ejemplo a continuacin. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html> <head> <title>Elaboracin de Paginas Web</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Ests en la pgina <b>Elaboracin de Pginas Web de Tercer Semestre</b>.</p> <p>Aqu aprenders de manera personal a realizar tu pagina web.</p> </body> </html>
Cmo ya hemos dicho el XHTML es un lenguaje de marcas (etiquetas). As todo nuestro texto estar encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin. Funcionan de la siguiente manera: <etiqueta> inicio de una etiqueta </etiqueta> el cierre de una etiqueta. Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese caso se cierra, dentro de la propia etiqueta, tal y cmo vemos a continuacin. <etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de apertura, por ejemplo: <br /> Las etiquetas deben de ir siempre en minsculas. Encontrars muchas pginas WEB en las que las etiquetas estn en maysculas, hasta el HTML 4.0 era indiferente la utilizacin de minsculas o maysculas y muchos autores utilizaban las maysculas por claridad. Todo lo que vaya entre dos etiquetas HTML se ver afectado por stas, por ejemplo <h1>Esto es un encabezado</h1> <p>Pero esto no, esto es un prrafo</p> Estas son algunas de las etiquetas ms utilizadas: < html>marcan el inicio y el final de una pagina web< /html> < title>establece un titulo para la pagina< /title>
Capacitacin de Informtica
21

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv <body bgcolor="nombre del color"> Establece un color de fondo para la pagina. Los colores que podemos usar son: black, teal, blue,navy, lime, white, purple, yellow, olive, red, marron, gray, fuchsia, green, silver, aqua, etc. <body background="nombre del archivo grfico"> establece una imagen de fondo para la pgina. <body text="nombre del color">establece el color del texto en la pagina <hn>establece un encabezado en la pgina < /hn>; la n puede ser un valor de 1 a 6, donde 1 es la letra ms grande y el 6 la letra ms pequea. < hr>agrega una lnea horizontal separadora. Etiquetas de texto <strong>pone el texto en negrita</strong>; otra etiqueta que cumple con la DTD strict para poner texto en negrita es <b> </b>. <em>pone el texto en cursiva</em>; otra etiqueta que cumple con la DTD strict para poner texto en cursiva es <i> </i>. <font color="">cambia el color de texto <font size="">cambia el tamao del texto <font face=""> cambia el tipo de letra < font color=""size=""face=""> cambia el color el tamao y el tipo de letra< /font> <big></big> texto grande, el mayor tamao de fuente. <small></small> texto pequeo, el menor tamao de fuente.  superndice  subndice <basefont size=n> Pone todo el texto del documento en tamao n. Etiquetas de enlace Estructura de los enlaces: <a href=destino del enlace title=descripcin del enlace>texto indicativo del enlace </a> El atributo href contiene la URL de la pgina a visitar. El atributo title mostrar una descripcin del sitio. (Este atributo es opcional) <a ref0"">texto< /a>aade un enlace utilizado la palabra texto <a href="">< img src=" nombre o ruta del archivo de la imagen ">< /a>aade un enlace utilizando una imagen Etiquetas de imagen <img src="nombre o ruta del archivo de la imagen" alt=descripcin de la imagen/>permite aadir una imagen a la pgina <img src=""align="top"> alinea el ttulo de la imagen en la parte superior < img src=""align="middle"> alinea el ttulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la parte inferior
Capacitacin de Informtica
22

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Existen dos atributos de suma importancia para las imgenes: width y heigth (anchura y altura), con los que podemos redimensionar una imagen para adaptarla a nuestras necesidades o simplemente, indicarlos para que el navegador tenga ms informacin en el momento de abrir el documento. Ejemplo: <img src=img/amanecer.jpg alt=Cuadro sobre el amanecer width=32 heigth=32 /> Si queremos reducir o aumentar el tamao de una imagen (a nivel de visualizacin), podremos indicar el valor en pixeles o porcentaje. Etiquetas secundarias. Algunas veces, necesitaremos aadir dos etiquetas a un texto, por ejemplo, supongamos y esto es slo un ejemplo, que un ttulo sea tambin un enlace, veamos cmo lo haramos (utilizamos pseudocdigo puesto que todava no hemos visto el cdigo html). <ttulo><enlace> loquesea.com</enlace></ttulo> En cambio el siguiente cdigo sera incorrecto <ttulo><enlace> loquesea.com</titulo></enlace> Las etiquetas pueden a veces llevar atributos que nos permiten especificar ms las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta <hombre> y queremos especificar que es guapo. As que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedara apariencia ="guapo". As nuestro <hombre> nos quedara <hombre apariencia="guapo">. Veamos la etiqueta <html> nos dice que se trata de un documento html, pero podemos utilizar el atributo lang para especificar el idioma del contenido del documento, as nos quedara <html lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es). En castellano estaramos diciendo: esto es un documento html en espaol. Los atributos siempre se aaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas. Etiquetas de prrafo Para esto se utiliza la etiqueta <p > y </p>. Este comando es muy til debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma lnea. Para alinear un prrafo se utiliza el comando <align> y </align>, utilizado dentro de la etiqueta <p>. Se puede alinear de tres formas diferentes: <p align="left"> Prrafo... </p> Alinea a la izquierda. <p align="center"> Prrafo... </p> Realiza un centrado. <p align="right"> Prrafo... </p> Alinea a la derecha. <p> indica el inicio de un prrafo nuevo <br>cambia el texto a otra lnea <pre>aade un texto preformateado < /pre> <li>sirve para listar objetos <ul>aade numeracin a los objetos listados <ul>aade vietas a los objetos listados< /ul>
Capacitacin de Informtica
23

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv <blockquote>resalta una lnea ubicada en un prrafo </blockquote> indica el inicio de una definicin Cuando nosotros queremos que lo que escribimos aparezca en otra lnea utilizamos el comando <br>. Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un prrafo de otro que es <br> Etiquetas para darle formato al texto: Para el tamao y tipo de letra se usa la etiqueta <font> y </font>, que posee tres atributos: tamao (size), Tipo de letra o fuente (face) y color Formato: <b> y </b> Sirve para colocar un texto en Negrita. <u> y < /u> sirve para subrayar un texto <strike> y </strike> sirve para tachar un texto. <strong> y </strong> cumple la misma funcin que <b> <i> y <i> para colocar un texto en cursiva. <em>texto con nfasis</em> texto con nfasis <cite>citacin</cite> citacin <dfn>definicin</dfn> definicin <kbd>teclado</kbd> teclado <samp>ejemplo</samp> ejemplo size: regula el tamao de los caracteres. Ejemplo:<font size="3"> texto... </font>. face: es la fuente que se quiere usar, Arial, Times New Roman, etc. Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas que se utilizan para hacer esto son las siguientes: text="#nmero" Para el color del texto. link="#nmero" Para el color de los enlaces. vlink="#nmero" El color con que aparecern los enlaces ya visitados. alink="#nmero" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: <body background="/documentos/html/gifs/dragonball.gif">

Capacitacin de Informtica

24

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Las listas pueden ser: Lista desordenada, <ul> (Unordered List). Lista ordenada, <ol> (Ordered List). Ejemplos de diferentes tipos de listas: Lista con nmeros romanos: <ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga <li type=I>Tomate </ol> I Manzana II Zanahoria III Lechuga IV Tomate Lista numerada: <ol> <li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> 1 Manzana 2 Zanahoria 3 Lechuga 4 Tomate

2.4. Establecer vnculos e hipervnculos.

Normalmente se les llama enlaces.- Consisten en lneas de texto o imgenes que se encuentran dentro de ciertos documentos, generalmente en pginas web, y que permiten acceder a otros documentos. Estos enlaces establecen conexiones con otras pginas en Internet para que el navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrir automticamente la pgina de informacin a la que hace referencia. Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parmetro href="url" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y despus cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto XHTML: <a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a> Que se vera de esta forma: Pulse aqu para visitar a la NASA

Capacitacin de Informtica

25

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrir la imagen.gif. Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli@fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mndame un Email se abrir (por defecto) el Microsoft Outlook Express con la direccin del destinatario ya escrita.

2.5. Manipular objetos y formularios en una pgina web.

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletn o revista que editemos, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente (una base de datos por ejemplo). Aqu vamos a ver cmo crear el formulario bsico, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en SQL, en JavaScript o en otro lenguaje de programacin. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones. Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas etiquetas habr que insertar los diferentes objetos que formarn el formulario. la etiqueta <form>tiene los siguientes atributos: El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por defecto tiene el valor application/x-www-form-urlencoded. El atributo method indica el mtodo mediante el que se transferirn las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post.

Capacitacin de Informtica

26

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Por ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo: <form action="mailto:formularios@aulaclic.com" method="post" enctype="text/plain" > ... </form> A continuacin veamos los distintos elementos que se pueden incluir en un formulario. reas de texto <textarea> Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el rea de texto tenga algn valor etiquetas <textarea> y </textarea>. inicial, habr que insertarlo entre las

El atributo name indica el nombre del rea de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto por lo que determina al alto del rea de texto. El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el rea de texto por lo que determina al ancho del rea de texto. Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en el atributo rows, y ms caracteres por lnea de los especificados en el atributo cols. Por ejemplo, para insertar el rea de texto:

Habra que escribir: <textarea name="ejemploarea" cols="30" rows="3">Escribe quieras</textarea> el texto que

Elementos de entrada <input> Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual ser evaluado, y el atributo type indica el tipo de elemento de entrada. Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos. Campo de texto: Para insertar un campo de texto, el atributo type debe tener el valor text.

Capacitacin de Informtica

27

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de texto, determina el ancho de la caja. El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo de texto. El atributo value indica el valor inicial del campo de texto. Por ejemplo, para insertar el campo de texto:
Campo de texto

Habra que escribir: <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15"> Campo de contrasea: Para insertar un campo de contrasea, el atributo type debe tener el valor password. El resto de atributos son los mismos que para un campo de texto normal. La nica diferencia es que todas las letras escritas en el campo de contrasea sern visualizadas como asteriscos. Por ejemplo, para insertar el campo de contrasea:
**********

Habra que escribir: <input name="contra" type="password" value="contrasea" size="20" maxlength="15"> Botn: Para insertar un botn, el atributo type debe tener el valor submit, restore o button. Si el valor es submit, al pulsar sobre el botn se enviar el formulario. Si el valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botn no se realizar ninguna accin. El atributo value indica el texto que mostrar el botn. Por ejemplo, para insertar un botn: Habra que escribir: <input name="boton" type="submit" value="Enviar"> Casilla de verificacin: Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox. El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este atributo no toma valores. Por ejemplo, para insertar la casilla:

Capacitacin de Informtica

28

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Habra que escribir: <input name="casilla" type="checkbox" value="acepto" checked> Botn de opcin: Para insertar un botn de opcin, el atributo type debe tener el valor radio. El atributo value indica el valor asociado al botn de opcin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este atributo no toma valores. Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el mismo nombre (que indica la variable) y con distintos valores. Solamente uno de estos botones podr estar activado, el que est activado cuando se enva el formulario, su valor ser el que tendr la variable. Por ejemplo, para insertar los botones de opcin:

Habra que escribir: <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es un dato interno. <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es un dato interno. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habra que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. Para que el usuario enve un fichero suyo a travs del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos enve cualquier tipo de fichero nos podramos encontrar con sorpresas no siempre agradables. Campos de seleccin <select> ... Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de estos mens o etiquetas <select> y </select> en un formulario. listas es necesario insertar las

El atributo name indica el nombre del men o lista ser el nombre de la variable que contendr el valor seleccionado.
Capacitacin de Informtica
29

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores. La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario no podr seleccionar sus elementos. Este atributo tampoco toma valores. Cada uno de los elementos etiquetas <option> y </option>. de la lista ha de insertarse entre las

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviar el texto de la opcin, que se encuentra entre las etiquetas <option> y</option>. La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no toma valores. Por ejemplo, para insertar el men:
--- Elige mascota ---

Habra que escribir: <select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> Y para insertar la lista:
---Elige animales--Loro Perro

Habra que escribir: <select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>

2.6. Manipular tablas en una pgina web.

Una tabla est formada por filas y columnas y a la interseccin de estas le llamamos celdas, en las que se puede insertar texto y grficos. Las tablas son una buena herramienta para organizar los datos en una pgina web, adems nos permiten estructurar las pginas de nuestro sitio separando la cabecera, el men, el contenido...

Capacitacin de Informtica

30

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las tablas. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas ms atractivas y fciles de leer. Se debe utilizar una tabla para presentar la informacin en formato de cuadrcula, por ejemplo horarios, informacin acerca de productos, tarifas, calificaciones de alumnos, etc. Creacin de una tabla Para crear una tabla se debe usar la instruccin Table, seguida de parmetros que indican la anchura, el color o imagen de fondo, etc. Ejemplo: <table> </table> Estas dos instrucciones indican al explorador de Internet que en este lugar de la pgina se va a crear una tabla. Uso de encabezados de tabla Despus de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuntas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla. Ejemplo: <Table> <TH>Columna 1</th><TH>Columna 2<TH>Columna 3</TH> </table>

2.7. Manipular imgenes y animaciones en una pagina web.

Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos formatos: Formato GIF: Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animacin. Formato JPG: Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamao de la imagen es mayor y tarda ms en descargarse.

Capacitacin de Informtica

31

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Puedes incluir imgenes en otros formatos a travs de Dreamweaver, que podrn ser visualizadas en algunos navegadores. Este es el caso de las imgenes BMP y PNG. Si introduces una imagen BMP en Dreamweaver, te aparecer un cuadrado gris en su lugar. La imagen solo se mostrar correctamente en el navegador. Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows. Para insertar una imagen, debe utilizar la siguiente sintaxis: <img src="imagen.jpg"> En sta instruccin se da por defecto que la imagen que se inserta tiene la extensin JPG. Para insertar otro tipo de imagen slo deber especificar la extensin correspondiente. Las imgenes pueden ser adquiridas de la galera de imgenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algn programa de animacin, y usarlos en una pgina Web. Seleccin del formato Uno de los grandes dilemas a la hora de incluir grficos en sus pginas Web es elegir el formato adecuado para cada tipo de imagen, vamos a intentar guiarle en la seleccin de cada formato. Imgenes fotogrficas Imgenes obtenidas a travs de fotografas de personas o lugares. Para este tipo de imgenes el formato ms recomendado es el JPEG porque consigue una gran compresin con una mnima perdida de calidad. JPEG GIF PNG

6.565 bytes 24 bits

25.522 bytes 256 cols

52.361 bytes 24 bits

Capacitacin de Informtica

32

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Imgenes renderizadas Este tipo de imgenes son las obtenidas por un programa de generacin de imgenes sintticas mediante algn proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y lneas muy bien definidas. Para este tipo de imgenes es recomendable usar el formato PNG. Tenga presente que el formato PNG es el ms reciente y puede no estar soportado en todos los navegadores. JPEG GIF PNG

Imgenes sencillas Para las imgenes sencillas con pocos colores y con formas muy delimitadas, el formato ms recomendado es el GIF, ya que se puede adaptar al nmero de colores de una imagen. Con el paso del tiempo puede que el formato PNG desbanque al GIF ya que el primero es ms avanzado, pero como su uso todava no est muy extendido recomendamos el formato GIF. JPEG GIF PNG

4.974 bytes Realice pruebas

2.394 bytes

1.613 bytes

Capacitacin de Informtica

33

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Las recomendaciones dadas anteriormente no son indiscutibles, son recomendaciones basadas en la experiencia. Puede que para segn que casos, no sean del todo acertadas, as que le recomendamos que pruebe a grabar las imgenes en distintos formatos y seleccione el que le parezca ms adecuado. Formato Imgenes

JPEG 24Bits Baja compresin Media compresin Alta compresin 6028 bytes 2761 bytes 1815 bytes

GIF 256 Colores 12230 bytes 16 Colores 4304 bytes 255 Col. + Trans. 8703 bytes

PNG 24 Bits 29070 bytes 256 Colores 11640 bytes 255 Col. + Trans. 8795 bytes

Para utilizar imgenes como hipervnculos, se debe usar la misma instruccin que para los hipervnculos de texto, a excepcin de que a continuacin de la instruccin se debe incluir la instruccin de insercin de imgenes. La siguiente lnea de cdigo muestra el ejemplo de insercin de imgenes como hipervnculos. <a href="carrera.htm"><img border=0 src="carrera.jpg" ></A> La primera instruccin indica el nombre de la pgina a la que se desee acceder cuando se haga clic en el hipervnculo. La segunda instruccin inserta la imagen en la pgina Web.

2.8. Definir secciones de mapeo de imgenes en una pgina web.

Puede hacer que parte de la imagen sea un enlace a otra pgina, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces.

Capacitacin de Informtica

34

Sexto Semestre

Elaboracin de Pginas Web PREFECO Profr. Augusto Hernndez Oliv Debe saber que para que una imagen sea tratada como un mapa, adems de el cdigo, debe incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".

2.10. Implementar servicios de correo en una pgina web.

Correo electrnico, o en ingls e-mail (electronic mail), es un servicio de red que permite a los usuarios enviar y recibir mensajes rpidamente (tambin denominados mensajes electrnicos o cartas electrnicas) mediante sistemas de comunicacin electrnicos. Principalmente se usa este nombre para denominar al sistema que provee este servicio en Internet, mediante el protocolo SMTP, aunque por extensin tambin puede verse aplicado a sistemas anlogos que usen otras tecnologas. Por medio de mensajes de correo electrnico se puede enviar, no solamente texto, sino todo tipo de documentos digitales. Su eficiencia, conveniencia y bajo costo estn logrando que el correo electrnico desplace al correo ordinario para muchos usos habituales. Para poder usar enviar y recibir correo electrnico, generalmente hay que estar registrado en alguna empresa que ofrezca este servicio (gratuita o de pago). El registro permite tener una direccin de correo personal nica y duradera, a la que se puede acceder mediante un nombre de usuario y una Contrasea. Hay varios tipos de proveedores de correo, que se diferencian sobre todo por la calidad del servicio que ofrecen. Bsicamente, se pueden dividir en dos tipos: los correos gratuitos y los de pago. Una direccin de correo electrnico es un conjunto de palabras que identifican a una persona que puede enviar y recibir correo. Cada direccin es nica y pertenece siempre a la misma persona. Un ejemplo es persona@servicio.com, que se lee persona arroba servicio punto com. El signo @ (llamado arroba) siempre est en cada direccin de correo, y la divide en dos partes: el nombre de usuario (a la izquierda de la arroba; en este caso, persona), y el dominio en el que est (lo de la derecha de la arroba; en este caso, servicio.com). La arroba tambin se puede leer "en", ya que persona@servicio.com identifica al usuario persona que est en el servidor servicio.com (indica una relacin de pertenencia). Una direccin de correo se reconoce fcilmente porque siempre tiene la @, donde la @ significa "pertenece a..."; en cambio, una direccin de pgina web no. Por ejemplo, mientras que http://www.servicio.com/ puede ser una pgina web en donde hay informacin (como en un libro), persona@servicio.com es la direccin de un correo: un buzn a donde se puede escribir. Pulsa sobre el enlace y se abre una ventana para "escribir mensaje" con lo siguientes campos: subject: El asunto del mensaje. cc: Enviar una copia del mensaje a la direccin indicada. body: El texto del mensaje.

Capacitacin de Informtica

35

Sexto Semestre