Modulo Curso Profundizacin en Diseo, Desarrollo y Publicacin de Pginas Web Dinmicas

Ingeniero Fabin Hoyos Paternina Universidad Nacional Abierta y a Distancia 2010

CONTENIDO UNIDAD 1. ......................................................................................... 3 1.1 Pginas Web ................................................................................. 3 Leccin Leccin Leccin Leccin Leccin 1. 2. 3. 4. 5. Que es una Pgina Web. ...................................................... Elementos que componen una Pgina Web ............................. Paginas Web Dinmicas ........................................................ Herramientas para Diseo Web. ............................................ Consejos para Disear una Pgina Web. ................................. 3 4 5 7 8

2.2 Sitios Web ................................................................................... 12 Leccin Leccin Leccin Leccin Leccin 6. Que es un Sitio Web............................................................ 12 7. Diseo de un sitio Web. ....................................................... 13 8. Arquitectura Cliente / Servidor. ............................................ 14 9. Conceptos Generales del Lenguaje HTML. .............................. 16 10. Hojas de Estilo en Cascada (CSS). ...................................... 19

UNIDAD 2 ......................................................................................... 21 2.1 Tecnologas Web .......................................................................... 21 2.2 Servidor IIS................................................................................. 23 2.3 Active Server Pages (ASP, .NET) .................................................... 24 2.4 Servidor TOMCAT ......................................................................... 25 2.5 Programacin De Pginas Web Con JAVA SERVLETS ......................... 26 BIBLIOGRAFIA................................................................................... 27 WEBGRAFIA ...................................................................................... 28 INFOGRAFIA ..................................................................................... 28

UNIDAD 1. 1.1 Pginas Web Leccin 1. Que es una Pgina Web.

Una pgina Web, tambin conocida como pgina de Internet, es un documento adaptado para la Web y normalmente forma parte de un sitio Web. Su principal caracterstica son los hiperenlaces a otras pginas Web, siendo esto el fundamento de la Web. Una pgina est compuesta principalmente por informacin (slo texto o multimedia) e hiperenlaces; adems puede contener o asociar datos de estilo para especificar cmo debe visualizarse o aplicaciones incrustadas para hacerla interactiva. La pgina se escribe en un lenguaje de marcado que provea la capacidad de insertar hiperenlaces, generalmente HTML. El contenido de la pgina puede ser predeterminado ("pgina Web esttica") o generado al momento de visualizarla o solicitarla a un servidor Web ("pgina Web dinmica"). Las pginas dinmicas que se generan al momento de la visualizacin se hacen a travs de lenguajes interpretados, generalmente JavaScript, y la aplicacin encargada de visualizar el contenido es la que debe generarlo. Las pginas dinmicas que se generan al ser solicitadas son creadas por una aplicacin en el servidor Web que alberga las mismas. Respecto a la estructura de las pginas Web algunos organismos, en especial el W3C, suelen establecer directivas con la intencin de normalizar el diseo para facilitar y simplificar la visualizacin e interpretacin del contenido.

Leccin 2. Elementos que componen una Pgina Web

En una pgina Web pueden colocarse distintos tipos de elementos. Los ms habituales son:

Texto: El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnologa de fuentes incrustadas, con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede marcarse con el ratn o el teclado y copiarse a otra aplicacin, como el bloc de notas (muchos de los elementos textuales de las pginas, en especial los ttulos, botones de navegacin, etc. son realmente grficos, y su texto no es editable.).

Imgenes: Son ficheros enlazados desde el fichero de la pgina propiamente dicho. Se puede hablar de tres formatos casi exclusivamente: GIF, JPG y PNG. Hablamos en detalle de este tema en la seccin de Grficos para la Web.

Animaciones: Flash.

Audio y vdeo: generalmente en MIDI, WAV y MP3(Audio). MPG, MP4, FLV (Vdeo). Mapas sensibles Escenas de realidad virtual Programas Enlaces

Leccin 3. Paginas Web Dinmicas

Una de las divisiones que podemos realizar entre todos los tipos de pginas Web existentes podra ser entre estticas y dinmicas. Una pgina Web esttica presenta las siguientes caractersticas:

Ausencia de movimiento y funcionalidades. Absoluta opacidad a los deseos o bsquedas del visitante a la pgina. Realizadas en XHTML o HTML. Para cambiar los contenidos de la pgina, es imprescindible acceder al servidor donde est alojada la pgina. El usuario no tiene ninguna posibilidad de seleccionar, ordenar o modificar los contenidos o el diseo de la pgina a su gusto. El proceso de actualizacin es lento, tedioso y esencialmente manual. No se pueden utilizar funcionalidades tales como bases de datos, foros, etc.

Por el contrario, una pgina Web dinmica tiene las siguientes caractersticas:

Gran nmero de posibilidades en su diseo y desarrollo.

El visitante puede alterar el diseo, contenidos o presentacin de la pgina a su gusto. En su realizacin se utilizan diversos lenguajes y tecnicas de programacin. El proceso de actualizacin es sumamente sencillo, sin necesidad de entrar en el servidor. Permite un gran nmero de funcionalidades tales como bases de datos, foros, contenido dinmico, etc. Pueden realizarse ntegramente con software de libre distribucin. Existe una amplia comunidad de programadores que brinda apoyo desinteresado. Cuenta con un gran nmero de soluciones prediseadas de libre disposicin.

En definitiva, el concepto de pgina Web dinmica se ha impuesto en el mundo del diseo y de la empresa en Internet. Pginas como Yahoo!, Google, Amazon e incluso sta, son excelentes ejemplos de pginas Web dinmicas que permiten interactuar con el visitante y le ofrecen posibilidades realmente sorprendentes: carritos de compra, posibilidad de incluir sus propias crticas en libros y discos, buscar en base a criterios determinados, participar en discusin... Las pginas Web dinmicas son aquellas cuya informacin que presentan se genera a partir de alguna accin o peticin del el usuario en la pgina. Contrariamente a las pginas estticas, en las que su contenido se encuentra predeterminado, en las dinmicas la informacin aparece inmediatamente despus de una solicitud echa por el usuario. Una pgina dinmica permite visualizar la informacin contenida en una base de datos, as como almacenar y hacer actualizaciones de cierta informacin a travs de un formulario. Adems se pueden manejar foros y el usuario tiene la posibilidad de cambiar a su gusto el diseo y el contenido de la pagina, entre otras cosas. Para la creacin de este tipo de pginas, adems de etiquetas HTML es necesaria la utilizacin de algn lenguaje de programacin que se ejecute del lado del servidor, as como la existencia de una base de datos. Los lenguajes utilizados para la generacin de este tipo de pginas son:

Perl CGI PHP JSP ASP

Los manejadores de bases de datos que pueden trabajar con pginas dinmicas son:

PostgresSQL MySQL Oracle Microsoft SQL Server

Las pginas Web dinmicas ofrecen muchas ventajas a diferencia de las pginas Web estticas, como una mayor interactividad con el usuario, mientras que el administrador le permitan una reduccin en tiempo y costos, as como una mayor facilidad en el mantenimiento de un sitio.

Leccin 4. Herramientas para Diseo Web.

Para la creacin de pginas Web, existe una gran variedad de Alternativas, a continuacin le mostramos las ms comunes:

Utilizar un editor de pginas Web Programar directamente en HTML Guardar en formato HTML un documento creado con otra aplicacin

Adems existen muchas herramientas auxiliares, que nos ayudaran en algn momento del proceso de creacin de pginas Web, a continuacin hacemos referencia a varias de ellas: Programas de diseo grfico, para la creacin y el tratamiento digital de imgenes y fotografas (PaintShop Pro, Adobe Photoshop, Corel PhotoPaint, Macromedia Fireworks). Editores de mapas sensibles, para crear mapas de imgenes (Mapedit). Programas de animacin, para crear animaciones GIF (GIF Construction Set) o vectoriales (Macromedia Flash). Programas de edicin de audio (GoldWave, Sonic Foundry SoundForge) y vdeo (Adobe Premiere), para editar audio y vdeo digital. Programas de modelado 3D (Kinetix 3D Studio, CorelWEB.WORLD, 3D Webmaster), para incluir mundos virtuales en VRML.

Conversores de formatos grficos y de texto, para incorporar a un documento HTML documentos realizados con otros programas y almacenados en diferentes formatos (Graphics Workshop). Analizadores de vnculos, para comprobar los enlaces entre las pginas. Entornos de desarrollo de programas, para escribir cdigo HTML, Java, JavaScript o VBScript (Eclipse). Programas de FTP, para la transferencia de las pginas al servidor Web (SSH Secure File Transfer, WS_FTP). Servidores web, para realizar pruebas en modo local (Apache, Microsoft Internet Information Server).

Leccin 5. Consejos para Disear una Pgina Web.

Consejos generales sobre las pginas: Reducir el desplazamiento dentro de una pgina. Usar tablas con bordes invisibles para formatear pginas con precisin. Utilizar las marcas semnticas preferiblemente a las fsicas. Utilizar mucho espacio en blanco. No colocar demasiados objetos en una misma pgina, ya que al establecerse una conexin independiente con el servidor para cada uno de ellos el tiempo de carga aumenta. Dar a la pgina un ttulo significativo, ya que este texto es el que se almacenar en la libreta de direcciones del visitante cuando agregue la pgina a su lista de favoritos. Utilizar los elementos META del encabezamiento para proporcionar a los buscadores informacin sobre la pgina. Incluir en la pgina informacin de contacto para el envo de comentarios o sugerencias.

Indicar la fecha de la ltima actualizacin de la pgina para que los visitantes asiduos sepan cundo se han producido cambios. Si la pgina ha dejado de mantenerse, indicarlo de alguna manera para evitar que los visitantes pierdan tiempo volviendo o puedan recibir informacin obsoleta. Disear las pginas pensando en distintos navegadores y plataformas. No abusar de elementos que no estn ampliamente soportados o al menos hacer que las pginas sean entendibles sin ellos. De otra forma se estar descartando de entrada a un buen puado de potenciales visitantes. Crear distintas versiones de la pgina si es imprescindible hacer uso de caractersticas especficas de un navegador concreto y utilizar un script para enviar de forma automtica al visitante a la pgina adecuada a su configuracin. Deben evitarse mensajes del tipo "lo siento, su navegador no es capaz de visualizar esta pgina".

Consejos sobre el texto No colocar demasiada cantidad, ya que el texto es ms difcil de leer en la pantalla que en el papel. Si es preciso, colocar la informacin en varias pginas. No utilizar muchas fuentes distintas en la misma pgina. Dos fuentes como mximo es lo recomendable. Utilizar fuentes de tamao suficientemente grande. Utilizar fuentes estndar. Si es necesario colocar un texto con una fuente especial es preferible crear un rtulo de texto. No utilizar prrafos vacos para aadir espaciado vertical, ya que el efecto puede variar de un navegador a otro. Usar en su lugar saltos de lnea o colocar los elementos mediante tablas para una mayor precisin. No abusar de las maysculas. El texto en minsculas resulta ms fcil de leer. No abusar del texto intermitente, ya que puede llegar a ser molesto.

Consejos sobre los enlaces Los enlaces deben poder identificarse con claridad. El usuario debe ser informado de alguna forma de cules son los elementos activos de la pgina. Indicar al usuario a dnde le van a llevar los enlaces. Limitar el nmero de enlaces dentro de una pgina. Comprobar que todos los enlaces apuntan al sitio deseado antes de publicar la pgina. No incluir espacios en blanco entre las marcas de comienzo y fin del ancla y el texto o imagen activos, ya que esto puede producir un antiesttico efecto de subrayado al visualizarse el enlace. Integrar el enlace en el texto de forma natural y sin interrumpirlo (evitar, por ejemplo, frases del estilo de 'pulsar aqu para ir a tal sitio'). El texto enlazado debe ser breve. Si el enlace est formado por una imagen y un texto simultneamente, es conveniente que ambos aparezcan juntos. Es interesante usar un URL como texto del enlace, ya que as quedar constancia escrita del mismo cuando se imprima la pgina. Agrupar los enlaces relacionados entre s colocndolos mediante listas organizadas o mens (grficos o textuales). No dejar pginas hurfanas, sin enlaces. Siempre se debe proporcionar al menos una forma de regresar a la pgina principal. Mantener los enlaces al da. No colocar enlaces a pginas no disponibles. Evitar el tpico icono de pgina en obras.

Consejos sobre las imgenes Utilizar el atributo ALT para proporcionar informacin a los usuarios que navegan sin imgenes. Utilizar los atributos HEIGHT presentacin de la pgina. y WIDTH para acelerar la

Evitar los bordes dentados y el efecto de halo en las imgenes transparentes. Reescalar la imagen al tamao deseado (nunca hacerlo en la propia pgina con los atributos WIDTH y HEIGHT), suavizndola antes para evitar el efecto de dentado. Suavizar los colores para uniformar colores prximos adyacentes y obtener as un mayor grado de compresin. Disminuir el nmero de colores de la imagen (profundidad de color). Con esto disminuye el tamao del fichero y se deja sitio libre en la paleta para otros colores. Utilizar siempre que sea posible la paleta de colores web. Si se utiliza una paleta adaptativa es necesario comprobar que la imagen se visualiza correctamente en el navegador. Utilizar paletas comunes (superpaletas) para las imgenes que aparezcan simultneamente en la pgina. Probar con distintos formatos y relaciones de compresin al grabar la imagen con el fin de encontrar la mejor relacin calidad/tamao. Guardar las imgenes de gran tamao en modo entrelazado. Incluir imgenes de baja resolucin para aquellas imgenes que puedan tardar en cargarse. Colocar versiones reducidas de las imgenes que enlacen con las versiones completas en el caso de que stas sean muy grandes o no vayan a ser accedidas por todos los visitantes. Trocear las imgenes que van a ser reutilizadas en parte (por ejemplo, las barras de navegacin) para aprovechar su almacenamiento en la memoria cach del ordenador. Cargar imgenes en segundo plano. Si una pgina no carga imgenes nuevas se puede aprovechar para cargar alguna imagen en segundo plano, de forma que cuando se necesite la imagen sta ya se encuentre en la memoria cach y se cargue rpidamente. Como consejo final, la suma de los tamaos de todas las imgenes nuevas de una pgina (es decir, sin contar las que se encuentran en la memoria cach) no debera exceder de los 50 60 K.

Consejos sobre las imgenes de fondo Utilizar fondos simples y discretos que faciliten la lectura de la pgina. Utilizar imgenes con poca profundidad de color para que no consuman mucho espacio de la paleta. Utilizar preferentemente la paleta de colores web para evitar el tramado. Modificar si es preciso el color del texto para que contraste claramente con el del fondo. Asegurarse de que los colores quedan bien en distintas mquinas y con distintos navegadores (sobre todo en pantallas de baja resolucin). Utilizar conjuntamente los atributos BACKGROUND y BGCOLOR para que la pgina sea legible mientras se carga la imagen de fondo.

2.2 Sitios Web Leccin 6. Que es un Sitio Web.

Un sitio Web (en ingls: Web site) es un conjunto de pginas web, tpicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. Una pgina Web es un documento HTML/XHTML generalmente mediante el protocolo HTTP de Internet. accesible

Todos los sitios Web pblicamente accesibles constituyen una gigantesca "World Wide Web" de informacin. A las pginas de un sitio Web se accede desde un URL raz comn llamado portada, que normalmente reside en el mismo servidor fsico. Los URL organizan las pginas en una jerarqua, aunque los hiperenlaces entre ellas controlan cmo el lector percibe la estructura general y cmo el trfico Web fluye entre las diferentes partes de los sitios.

Algunos sitios Web requieren una subscripcin para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripcin incluyen muchos sitios de pornografa en Internet, parte de muchos sitios de noticias, sitios de juegos, foros, servicios de correo electrnico basados en Web y sitios que proporcionan datos de bolsa en tiempo real.

Leccin 7. Diseo de un sitio Web.

Fases del diseo:

Definir los objetivos del sitio Definir la estructura de las pginas Disear la interaccin con el usuario Disear la interfaz grfica

Definir los objetivos del sitio La respuesta a las preguntas a quin va dirigido el sitio Web? y qu va a ofrecer el sitio Web a sus visitantes? determina los contenidos del sitio, tanto en el fondo (la informacin que se va a publicar) como en la forma (los tipos de medios que se van a utilizar para mostrar esta informacin). Definir la estructura de las pginas La informacin que se va a publicar en el sitio se estructura en pginas independientes conectadas entre s. La estructura ms tpica para un sitio web es la de rbol, con una pgina principal en la raz del mismo y las dems pginas repartidas en los diferentes niveles del rbol. Disear la interaccin con el usuario Se disea un mecanismo de navegacin que permita al visitante desplazarse cmodamente por las pginas. Tambin se decide la interaccin basada en formularios y scripts dinmicos. Disear la interfaz grfica Se disea el aspecto visual del sitio web, eligiendo un estilo global de diseo, diseando cada una de las pginas y los elementos grficos comunes a todas ellas. En esta fase es muy recomendable la creacin de una o varias hojas de estilo que permitan agrupar en un slo

punto todos los estilos de presentacin de las pginas, haciendo mucho ms fcil su posterior mantenimiento. Es muy interesante el uso de metforas, que son representaciones visuales cercanas al usuario y relacionadas con el tema de la pgina (ejemplo: inmobiliaria). Creacin de las pginas Tras las cuatro fases anteriores ya se puede pasar a la creacin de las pginas individuales del sitio con las herramientas adecuadas. Tambin se deber decidir si se van a usar tecnologas ms complejas como los lenguajes de servidor o los programas CGI, o el acceso a bases de datos, que exigen ciertos requisitos por parte del servidor Web. El pas final Una vez creadas las pginas an quedan una serie de tareas importantes por hacer:

Comprobar a fondo las pginas para detectar posibles errores antes de su publicacin. Realizar pruebas de usabilidad. Transferir las pginas a su ubicacin definitiva en el servidor Web. Dar de alta la pgina en distintos buscadores.

Leccin 8. Arquitectura Cliente / Servidor.

La Web funciona siguiendo el modelo cliente-servidor. Esta arquitectura consiste bsicamente en un cliente que realiza peticiones a otro programa -el servidor- que le da respuesta. Aunque esta idea se puede aplicar a programas que se ejecutan sobre una sola computadora es ms ventajosa en un sistema operativo multiusuario distribuido a travs de una red de computadoras. En esta arquitectura la capacidad de proceso est repartida entre los clientes y los servidores, aunque son ms importantes las ventajas de tipo organizativo debidas a la centralizacin de la gestin de la informacin y la separacin de responsabilidades, lo que facilita y clarifica el diseo del sistema.

La separacin entre cliente y servidor es una separacin de tipo lgico, donde el servidor no se ejecuta necesariamente sobre una sola mquina ni es necesariamente un slo programa. Los tipos especficos de servidores incluyen los servidores Web, los servidores de archivo, los servidores del correo, etc. Mientras que sus propsitos varan de unos servicios a otros, la arquitectura bsica seguir siendo la misma. Una disposicin muy comn son los sistemas multicapa en los que el servidor se descompone en diferentes programas que pueden ser ejecutados por diferentes computadoras aumentando as el grado de distribucin del sistema. La arquitectura cliente-servidor sustituye a la arquitectura monoltica en la que no hay distribucin, tanto a nivel fsico como a nivel lgico. Cliente Web Es un programa con el que el usuario interacciona para solicitar a un servidor Web el envo de pginas de informacin. Estas pginas se transfieren mediante el protocolo HTTP. Las pginas que se reciben son documentos de texto codificados en lenguaje HTML. El cliente web debe interpretar estos documentos para mostrrselos al usuario en el formato adecuado. Cuando lo que se recibe no es un documento de texto, sino un objeto multimedia (vdeo, sonido, ...) no reconocido por el cliente web, ste debe activar una aplicacin externa capaz de gestionarlo. Entre los clientes Web ms usuales estn Microsoft Internet Explorer, Mozilla Firefox y Netscape Navigator. Servidor Web Es un programa que est permanentemente escuchando las peticiones de conexin de los clientes mediante el protocolo HTTP. Funciona de la siguiente manera: si encuentra en su sistema de ficheros el documento HTML solicitado por el cliente, lo enva y cierra la conexin; en caso contrario, enva un cdigo de error y cierra la conexin. Tambin se ocupa de controlar los aspectos de seguridad.

Transferencia de pginas web

1. El usuario especifica en el cliente web la direccin (URL) de la pgina que desea consultar 2. El cliente establece la conexin con el servidor web 3. El cliente solicita la pgina o el objeto deseado 4. El servidor busca la pgina solicitada en su sistema de ficheros. Si la encuentra, la enva al cliente; en caso contrario, devuelve un cdigo de error. 5. El cliente interpreta los cdigos HTML y muestra la pgina al usuario. 6. Se cierra la conexin. Es probable que la pgina solicitada se cree en el momento de su peticin. La conexin siempre se libera al terminar la transmisin de la pgina. Adems, se establece una conexin independiente para cada documento u objeto que se transmite. La transferencia en sentido contrario (del cliente al servidor) es menos frecuente, pero tambin es posible. Para realizarla existen varias alternativas.

Leccin 9. Conceptos Generales del Lenguaje HTML.

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construccin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un

documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. HTML tambin es usado para referirse al contenido del text/html o todava ms ampliamente como un trmino el HTML, ya sea en forma descendida del XML (como posteriores) o en forma descendida directamente de HTML 4.01 y anteriores). Elementos Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere vlido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido est ubicado entre las dos etiquetas (p.ej. <nombre-deelemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML. tipo de MIME genrico para XHTML 1.0 y SGML (como

Estructura general de una lnea de cdigo en el lenguaje de etiquetas HTML El marcado estructural describe el propsito del texto. Por ejemplo, <h2>Golf</h2> establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostrara en un navegador de una manera similar al ttulo "Marcado HTML" al principio de esta seccin. El marcado estructural no define cmo se ver el elemento, pero la mayora de los navegadores Web han estandarizado el formato de los elementos. Un formato especfico puede ser aplicado al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su funcin. Por ejemplo, <b>negrita</b> indica que los navegadores Web visuales deben mostrar el texto en negrita, pero no indica qu deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itlica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza ms semntica: <strong>enfsis fuerte</strong> y <em>nfasis</em>. Es fcil ver cmo un lector de pantalla debera interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debera decir ms fuerte el nombre de un libro, aunque ste est en itlicas en una pantalla. La mayora del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en cascada. El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecer la direccin URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sera de la forma <a href=es.wikipedia.org>Wikipedia</a>. Tambin se pueden crear enlaces sobre otros objetos, tales como imgenes <a href=enlace><img src=imagen /></a>. Atributos La mayora de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, despus del nombre de ste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombreelemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img).

Para profundizar en el conocimiento del lenguaje, entregamos un link, donde encontrarn informacin adicional del tema. http://sestud.uv.es/manual.esp/

Leccin 10. Hojas de Estilo en Cascada (CSS).

CSS es un lenguaje artificial usado para definir la presentacin de documento estructurado escrito en HTML o XML (y por extensin XHTML). El WWWC (World Wide Web Consortium) es el encargado formular la especificacin de las hojas de estilo que servirn estndar para los agentes de usuario o navegadores. un en de de

La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Por ejemplo, el elemento de HTML <H1> indica que un bloque de texto es un encabezamiento y que es ms importante que un bloque etiquetado como <H2>. Versiones ms antiguas de HTML permitan atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamao de fuente). No obstante, cada etiqueta <H1> deba disponer de la informacin si se deseaba un diseo consistente para una pgina y, adems, una persona que lea esa pgina con un navegador pierde totalmente el control sobre la visualizacin del texto. Cuando se utiliza CSS, la etiqueta <H1> no debera proporcionar informacin sobre como va a ser visualizado, solamente marca la estructura del documento. La informacin de estilo separada en una hoja de estilo, especifica cmo se ha de mostrar <H1>: color, fuente, alineacin del texto, tamao y otras caractersticas no visuales como definir el volumen de un sintetizador de voz (vase Sintetizacin del habla), por ejemplo. La informacin de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style". Ventajas de usar las hojas de estilo Control centralizado de la presentacin de un sitio Web completo con lo que se agiliza de forma considerable la actualizacin del mismo. Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que ser aplicada a un sitio Web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamao del texto o remarcar ms los enlaces.

Una pgina puede disponer de diferentes hojas de estilo segn el dispositivo que la muestre o incluso a eleccin del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo mvil, o ser "leda" por un sintetizador de voz. El documento HTML en s mismo es ms claro de entender y se consigue reducir considerablemente su tamao (siempre y cuando no se utilice estilo en lnea).

Material adicional Como material adicional, entrego dos link, en los cuales se puede obtener informacin sobre CSS ejemplos y un Foro. http://www.manualdecss.com/ http://www.webtaller.com/manual-css/indice_manual_css.php

UNIDAD 2 2.1 Tecnologas Web

Las tecnologas web, no son ms que un conjunto de herramientas, que nos permiten de una manera fcil y efectiva, el desarrollo de un sitio Web. Estas herramientas las clasificamos en 3 grupos, Navegadores Web, Servidores Web y Lenguajes de Programacin. Navegadores web: Un navegador o navegador web (del ingls, web browser) es un programa que permite visualizar la informacin que contiene una pgina web (ya se encuentre sta alojada en un servidor dentro de la World Wide Web o en un servidor local). El navegador interpreta el cdigo, HTML generalmente, en el que est escrita la pgina web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervnculos1. Entre los Navegadores ms comunes y utilizados tenemos: Mozilla Firefox Google Chrome Amaya Internet Explorer Konqueror sobre linux Lynx sobre linux Netscape Navigator Opera Safari (Se utiliza principalmente en equipos Mac y en Telfonos Celulares como eI IPHONE)

Servidores web: Un servidor web es un programa que se ejecuta continuamente en un computador, mantenindose a la espera de peticiones de ejecucin que le har un cliente o un usuario de Internet. El servidor web se encarga de contestar a estas peticiones de forma adecuada, entregando como resultado una pgina web o informacin de todo tipo de acuerdo a los comandos solicitados. En este punto es necesario aclarar lo siguiente: mientras que comnmente se utiliza la palabra servidor para referirnos a una computadora con un software servidor instalado, en estricto rigor un servidor es el software que permite la realizacin de las funciones descritas2. A continuacin entrego, un listado de los servidores Web ms usados.
1 2

http://es.wikipedia.org/wiki/Navegador_web http://www.misrespuestas.com/que-es-un-servidor-web.html

CERN httpd Servidor HTTP Apache (libre, servidor ms usado del mundo) Servidor HTTP Cherokee IIS Resin

Lenguajes de Programacin Web: Entre los ms comunes y utilizados tenemos los siguientes: CFM Coldfusion DHTML PHP ASP CGI JSP (Tecnologa Java ) .NET

Para mayor informacin sobre este tema viste las pginas web. http://www.maestrosdelweb.com/principiantes/los-diferenteslenguajes-de-programacion-para-la-web/ www.lenguajes-de-programacion.com/programacion-web.shtml

2.2 Servidor IIS

Es una serie de servicios para los ordenadores que funcionan con Windows. Originalmente era parte del Option Pack para Windows NT. Luego fue integrado en otros sistemas operativos de Microsoft destinados a ofrecer servicios, como Windows 2000 o Windows Server 2003. Windows XP Profesional incluye una versin limitada de IIS. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS.

Tomada de - http://tydw.wordpress.com

Este servicio convierte a un ordenador en un servidor de Internet o Intranet es decir que en las computadoras que tienen este servicio instalado se pueden publicar pginas web tanto local como remotamente (servidor web). Los Servicios de Internet Information Services (IIS) proporcionan las herramientas y funciones necesarias para administrar de forma sencilla un servidor Web seguro. Si ha pensado alojar un sitio Web y FTP (File Transfer Protocol, Protocolo de transferencia de archivos) con IIS, configure el servidor como un servidor de aplicaciones. El servidor web se basa en varios mdulos que le dan capacidad para procesar distintos tipos de pginas, por ejemplo Microsoft incluye los de Active Server Pages (ASP) y ASP.NET. Tambin pueden ser incluidos los de otros fabricantes, como PHP o Perl3. Para mayor informacin pueden visitas las siguientes pginas Web. Informacin General: http://www.desarrolloweb.com/directorio/sistemas/iis/ Como instalar PHP en IIS: http://www.webtaller.com/construccion/lenguajes/php/lessons/phpiss /phpiss.php Como instalar IIS: http://technet.microsoft.com/eses/library/cc782498%28WS.10%29.aspx
3

http://es.wikipedia.org/wiki/Internet_Information_Services

2.3 Active Server Pages (ASP, .NET)

Microsoft introdujo esta tecnologa llamada Active Server Pages en diciembre de 1996, por lo que no es nada nueva. Es parte del Internet Information Server (IIS) desde la versin 3.0 y es una tecnologa de pginas activas que permite el uso de diferentes scripts y componentes en conjunto con el tradicional HTML para mostrar pginas generadas dinmicamente, traduciendo la definicin de Microsoft: Las Active Server Pages son un ambiente de aplicacin abierto y gratuito en el que se puede combinar cdigo HTML, scripts y componentes ActiveX del servidor para crear soluciones dinmicas y poderosas para el web.

Tomada de: http://cheap-web-server-hosting.co.in

El principio de la tecnologa ASP es el VBScript, pero existe otra diversidad de lenguajes de programacin que pueden ser utilizados como lo es Perl, JScript, etc. El ASP es una tecnologa dinmica funcionando del lado del servidor, lo que significa que cuando el usuario solicita un documento ASP, las instrucciones de programacin dentro del script son ejecutadas para enviar al navegador nicamente el cdigo HTML resultante. La ventaja principal de las tecnologas dependientes del servidor radica en la seguridad que tiene el programador sobre su cdigo, ya que ste se encuentra nicamente en los archivos del servidor que al ser solicitado a travs del web, es ejecutado, por lo que los usuario no tienen acceso ms que a la pgina resultante en su navegador4. Para mayor informacin puedes visitar las siguientes pginas Web Contenido General: www.asptutor.com/ Manuales de ASP: http://manuales.astalaweb.com/Manuales/ASP.asp Vdeos Tutoriales de ASP.NET : http://www.youtube.com/watch?v=PpyJ2IdJEfI&feature=related

http://www.maestrosdelweb.com/editorial/aspintro/

2.4 Servidor TOMCAT

Tomcat es el Servidor Web ms utilizado a la hora de trabajar con Java en entrornos web; Tomcat es una implementacin completamente funcional de los estndares de JSP y Servlets. Tomcat tambin puede especificarse como el manejador de las peticiones de JSP y servlets recibidas por servidores Web populares, como el servidor Apache HTTP de la Fundacin de software de Apache o el servidor Microsoft Internet Information Server (IIS). Tomcat est integrado en la implementacin de referencia Java 2 Enterprise Edition (J2EE) de Sun Microsystems5.

Tomada de: http://vulnerabilityteam.files.wordpress.com

Tomcat puede funcionar como servidor web por s mismo. En sus inicios existi la percepcin de que el uso de Tomcat de forma autnoma era slo recomendable para entornos de desarrollo y entornos con requisitos mnimos de velocidad y gestin de transacciones. Hoy en da ya no existe esa percepcin y Tomcat es usado como servidor web autnomo en entornos con alto nivel de trfico y alta disponibilidad. Dado que Tomcat fue escrito en Java, funciona en cualquier sistema operativo que disponga de la mquina virtual Java6. Para mayor informacin visites las siguientes pginas Web: Pgina Principal (Descargas e Informacin) : http://tomcat.apache.org/

5 6

http://casidiablo.net/el-servidor-apache-tomcat/ http://es.wikipedia.org/wiki/Tomcat

2.5

Programacin De Pginas Web Con JAVA SERVLETS

Java es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los aos 90. El lenguaje en s mismo toma mucha de su sintaxis de C y C++, pero tiene un modelo de objetos ms simple y elimina herramientas de bajo nivel, que suelen inducir a muchos errores, como la manipulacin directa de punteros o memoria. Las aplicaciones Java estn tpicamente compiladas en un bytecode, aunque la compilacin en cdigo mquina nativo tambin es posible. En el tiempo de ejecucin, el bytecode es normalmente interpretado o compilado a cdigo nativo para la ejecucin, aunque la ejecucin directa por hardware del bytecode por un procesador Java tambin es posible.

Tomada de: http://www.recursosmatematicos.com

La implementacin original y de referencia del compilador, la mquina virtual y las bibliotecas de clases de Java fueron desarrolladas por Sun Microsystems en 1995. Desde entonces, Sun ha controlado las especificaciones, el desarrollo y evolucin del lenguaje a travs del Java Community Process, si bien otros han desarrollado tambin implementaciones alternativas de estas tecnologas de Sun, algunas incluso bajo licencias de software libre. Entre noviembre de 2006 y mayo de 2007, Sun Microsystems liber la mayor parte de sus tecnologas Java bajo la licencia GNU GPL, de acuerdo con las especificaciones del Java Community Process, de tal forma que prcticamente todo el Java de Sun es ahora software libre (aunque la biblioteca de clases de Sun que se requiere para ejecutar los programas Java an no lo es)7. Programacion Wen con Java Servlets : http://xweb1.ousli.org/material/d_intro_servlets_jsp.pdf
7

http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Java

BIBLIOGRAFIA

HTML 4 iniciacin y referencias. Snchez Garcia Jos Ignacio y otros. Editorial Osborn McGraw Hill. Creacin de aplicaciones web con PHP4. Tobias Ratschiller y Hill Germen. Editorial Prentice Hall. JANSA, Kris. KING, Honrad. ANDERSON, Andy. Superutilidades para HTML y diseo WEB. Espaa. 2002. Mc Graw Hill. PARKER, Timothy. Aprendiendo TCP/IP. Mxico. 2001. Prentice Hall. MERCER, Dave. Fundamentos de Programacin en ASP.NET 3.0. Colombia. 2001. Mc Graw Hill. Jacobson, Booch and Rumbaugh. EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Editorial Addison Wesley. Tomas A. Powell. Diseo de sitios Web. Manual de referencia. Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall Ferry O` Brien. Administracin del IIS 5. Editorial Prentice Hall. Ing. Ruberney Ramos Victoria Ing. John Jairo Prez Burbano. Gua Didctica Diseo, Programacin Y Publicacin De Pginas Web Dinmicas.

WEBGRAFIA
http://www.lsi.us.es/cursos/cursoweb/ http://www.webtaller.com/maletin/articulos/paginas-web-dinamicasestaticas.php http://es.wikipedia.org

INFOGRAFIA
Programming via php - http://www.toves.org/books/php/ Java Sun official site : - http://java.sun.com PHP TUTORIAL : http://www.tizag.com/phpT/ ASP TUTORIAL: http://www.programatium.com/asp.htm Proyecto Apache: http://www.apache.org MYSQL site : http://www.mysql.org Servidor Tomcat: http://tomcat.apache.org/ Web Estilo para ASP: http://www.webestilo.com/asp/