Unidad I Fundamentos de Sitios Web

FUNDAMENTOS DE SITIOS WEB Objetivo El alumno desarrollar un sitio web a travs de una metodologa y el lenguaje XHTML para su publicacin. 1.1 Entorno de las aplicaciones Web (Internet, Intranet y Extranet) Internet Los grandes avances de la electrnica, en la segunda mitad del siglo XX, permitieron una rpida evolucin de las computadoras y las comunicaciones. sta evolucin ha permitido la construccin de equipo ms poderoso, rpido y econmico. La unin de las computadoras y las comunicaciones ha dado com resultado las redes de computadoras. Podemos conectar computadoras para crear redes de rea local, y redes de rea local para formar redes de rea amplia. La red de rea amplia de mayor envergadura es sin duda Internet. Internet es un sistema mundial, de acceso pblico, de redes de computadoras interconectadas que transmiten datos usando el protocolo estndar de Internet (IP). Consiste de millones de redes domsticas, acadmicas, comerciales y gubernamentales, que juntas transportan variados tipos de informacin y servicios, como correo electrnico, charlas en lnea, transferencia de archivos, pginas Web y otros documentos de la Red Mundial (WWW, siglas de World Wide Web). Contrario al uso comn, Internet y la Red Mundial no son sinnimos, Internet es una coleccin de redes de computadoras interconectadas mientras que la Red mundial es una coleccin de documentos interconectados, ligados por hipervnculos y Localizadores de Recursos Universales (URLs) que son accesibles usando Internet, en otras palabras, la Red Mundial es otro de los servicios prestados por Internet. Definiciones frecuentes para describir Internet: Red de redes - Establece cooperacin y colaboracin entre gran nmero de comunidades y grupos de inters por temas especficos. Formado por una gran cantidad de computadoras que pueden intercambiar informacin entre ellas.

Intranet Una intranet es una red de computadoras privada que usa los protocolos de Internet, conectividad de redes y posiblemente el sistema pblico de telecomunicaciones para compartir, en forma segura, parte de la informacin de la organizacin con sus empleados. Incluso, se utilizan las tecnologas de Internet para proveer de nuevas interfaces a los sistemas corporativos legados. Muchas veces, el trmino Intranet se refiere se refiere al servicio ms visible, el sitio Web interno. Tambin, el trmino Intranet se usa para referirse a la parte de la red privada a la que solamente tienen acceso los empleados de la empresa, usando el trmino Extranet para referirse a la parte de la red a la que tienen acceso los clientes, socios, proveedores de la empresa. El acceso en ambos casos es mediante una pgina de ingreso (login page) y por mecanismos de autentificacin.

L.I. Jos Raymundo Ceja Vzquez

Pgina 1

Unidad I Fundamentos de Sitios Web

No se requiere que la red interna de la organizacin tenga acceso a Internet. Si a hay, por lo general hay un cortafuego con un ruteador a travs de los cuales tiene lugar todo acceso, adicionalmente a la autentificacin de los usuarios y el encriptado de los mensajes, y el uso de redes privadas virtuales (VPNs). Con estos dispositivos se puede compartir la informacin y los recursos de la compaa con los empleados trabajando en localidades externas. Cada vez se emplean ms las intranets para proporcionar herramientas y aplicaciones, por ejemplo herramientas colaborativas, administracin de proyectos, etc. De manera general, se describe como: Red donde se incluye el uso de Tecnologas Internet, una red corporativa o empresarial, y la posibilidad de aislarse de la Internet global. Una Intranet refiere al uso de tecnologas Internet dentro de una organizacin de una forma segura y fiable. Entorno aislado y protegido, aunque no totalmente seguro.

Extranet Una Extranet es una red de colaboracin que utiliza la tecnologa Internet. Esta interconecta a una empresa con sus proveedores, clientes u otros socios. El trmino ha sido acuado por Jim Barksdale y Mark Andreesen (Netscape Comunications) para describir el software que facilita la relacin entre diferentes compaas. La tecnologa Extranet puede ser concebida como parte de una Intranet que es accesible para otras empresas o como una herramienta que permite la colaboracin entre empresas, la informacin compartida puede ser slo para aquellos miembros colaboradores de la empresa que poseen Intranet y en algunos casos stos podran ser pblicos. Conceptos generales: Red externa de colaboracin que utiliza la tecnologa Internet, y que interconecta a una empresa con sus proveedores, clientes u otros socios.

La Extranet tambin es una red privada corporativa destinada a compartir determinadas operaciones e informaciones.

Otros trminos frecuentes Aplicacin Web: Aplicaciones que los usuarios utilizan accediendo a un servidor web a travs de Internet o de una intranet mediante un navegador. Aplicacin que se codifica en un lenguaje soportado por navegadores web en la que se confa la ejecucin al navegador. Sitio Web: Coleccin de pginas web relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. Pgina Web: Documento HTML/XHTML accesible generalmente mediante el protocolo HTTP de Internet.

L.I. Jos Raymundo Ceja Vzquez

Pgina 2

Unidad I Fundamentos de Sitios Web

HTML: Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin 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 (<,>). XHTML: Acrnimo en ingls de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estndar para las pginas web. Los navegadores no necesitan implementar heursticas para detectar qu quiso poner el autor.

Introduccin al diseo de Pginas Web El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado Los navegadores. Compatibilidad Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.

L.I. Jos Raymundo Ceja Vzquez

Pgina 3

Unidad I Fundamentos de Sitios Web

Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina. Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas etiquetas. Como resultado a estas extensiones, habr pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados. En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador. Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuenta estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado. Editores Un editor es un programa que nos permite redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas. Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft FrontPage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML

Etiquetas Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>

L.I. Jos Raymundo Ceja Vzquez

Pgina 4

Unidad I Fundamentos de Sitios Web

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. La estructura bsica de una pgina es: <html> <head> <title>Aqu escribo mi ttulo</title> </head> <body> ... </body> </html>

L.I. Jos Raymundo Ceja Vzquez

Pgina 5