Colegio Nacional de Educación Profesional Técnica
Diseño y Elaboración de Páginas WEB











Elabora páginas web estáticas haciendo uso del lenguaje de etiquetas HTML 5

Identificación de las Normas mínimas para facilitar el acceso.

■ Peso de las Páginas.

Los Sitios Web deben tener un peso máximo permitido por página que no supere una cantidad razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo razonable dependerá directamente del tipo de sitio que se esté desarrollando y de la conexión con la que cuente la mayor parte de los usuarios.

■ Diagramación de las Páginas.

Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las Hojas de Cascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se dispongan en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.

■ Uso de Presentaciones en Flash.

Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada del sitio, se recomienda no hacerlo ya que actualmente es una tecnología que ya no se utiliza.

■ Uso de Marcos o Frames.

La tecnología de marcos o frames consiste en agrupar varios archivos para que se desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.

■ Uso de imágenes de fondo.

Una tecnología muy popular que se puso de moda en el año 1996 cuando el software Netscape Navigator lo implementó, fue el uso de imágenes como fondos o backgrounds de las páginas web.

■ Uso de meta tags adecuados.

Los meta tags son marcas en lenguaje HTML que van en la parte superior del código fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para hacer una correcta indexación del contenido que incluye.

Uso de las Normas requeridas en la incorporación de elementos gráficos y multimedia.

■ Optimización del peso de las imágenes.

Se debe bajar al máximo posible el peso de las imágenes; cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores disponibles y la resolución (72 dpi es la norma).

■ Formato de imágenes.

Hoy en día podemos hacer uso de una gran cantidad de formatos de imagen, para implementarlos en el diseño del sitio WEB.

■ Ubicación de imágenes.

Se recomienda usar un solo directorio para almacenar las imágenes repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes páginas del sitio. Al ubicarlos en un directorio único se puede aprovechar la función de caché del programa visualizador para mejorar el rendimiento de las páginas. Para efectos de seguridad, se recomienda impedir que un programa visualizador pueda ver el contenido de dicho directorio o cualquier otro dentro del sitio.

■ Uso del atributo ALT.

En el código HTML se debe usar el atributo ALT (texto alterno) en las imágenes para que éste se despliegue antes que las imágenes y facilite de esta forma la comprensión del contenido a los usuarios.

■ Imágenes con alto y ancho

Las imágenes (dibujos, fotos, iconos, botones) deben tener tamaño para el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para dicho contenido antes de que se realice su despliegue visual.

■ Manejo de Plugins.

Cuando se utilizan archivos multimediales que requieren el uso de plugins (programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente válido en sitios que ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadas para que el usuario tenga la opción de verlas o avanzar directo al sitio.

Establecimiento del entorno para el desarrollo de un sitio web.

■ Herramientas para el desarrollo:

En el desarrollo de un sitio Web hay 6 etapas clave, comenzando con la investigación del proyecto en el que se establece el modelo de negocio a través de la página Web:

■ Establecimiento del entorno para el desarrollo de un sitio web.

En casi cualquier proyecto de diseño y desarrollo de sitios web se hace necesario dividir planteamientos en fases más definidas o acotadas en el tiempo, para irse completando por partes que pueden ensamblarse posteriormente y ser verificadas o testadas durante todo el proceso.

■ Multimedia y sus elementos:

El término Multimedia en el mundo de la computación es la forma de presentar información que emplea una combinación de texto, sonido, imágenes, vídeo y animación. MultimediaEntre las aplicaciones informáticas multimedia más comunes podemos mencionar juegos, programas de aprendizaje y material de referencia.

Implementación del código HTML 5 para el desarrollo de páginas Web.

■ Elementos básicos de un sitio Web y sus partes.

Los componentes de una página web son: imágenes, texto, audio, video, animaciones y otros contenidos multimedia interactuando con usuarios de Internet.

■ Enlaces HTML - Hipervínculos, links Etiqueta TAG a href

Una de las etiquetas más importantes de HTML (sino la que más) es la etiqueta . Esta etiqueta se utiliza para crear los llamados enlaces, vínculos o hipervínculos. La idea es establecer una referencia a una dirección o URL donde está alojado ese otro documento de destino, que puede ser una página web, un archivo PDF, una imagen o cualquier otro tipo de documento.

■ Incorporación de Imágenes y elementos multimedia a las páginas web.

La incorporación de estos elementos hacen referencia a la Multimedia, esta se refiere a cualquier presentación por ordenador o aplicación que integra dos o más de los siguientes elementos: texto, gráficos, animaciones, audio, video y realidad virtual. Una presentación en PowerPoint que combina texto, gráficos y clips de vídeo es un ejemplo de una aplicación multimedia.

■ Listas.

Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.

■ Tablas.

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos,…

■ Formularios.

Los formularios HTML son elementos de las páginas web que nos sirven para recuperar información del usuario y enviarla al servidor para que pueda ser procesada.


Profr José Pablo Ruíz S. pruizs.acad016@ags.conalep.edu.mx