DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base al sistema de etiquetas HTML y XHTML Objetivos específicos Analizar sobre los entornos de trabajo para el World Wide Web y necesidades para la creación de un sitio Web. Herramientas para la construcción de páginas HTML Introducción Browsers Evolución de los visualizadores Browsers para WWW: Internet Explorer, Firefox, Google Chrome, Safari, Opera. Visualizadores auxiliares Navegación off-line Diseño del sitio Web Diseño de la paginas Población a quien se dirige un sitio Web. Características y necesidades para un sitio Web. Estructura de un sitio Web Análisis sobre la cantidad de páginas que necesita un sitio Web. Diseño y creación de mapas de estructura de un sitio Web. Editores Editores HTML "modo texto" Editores WYSIWYG Ventajas y desventajas de la herramienta. Ejemplo de código innecesario Creación y gestión de espacios Web Sitios de Hosting de almacenamiento Hosting gratuitos y de pago Uso de FTP Investiga sobre la historia de Internet apoyado de bibliografía convencional y electrónica. En parejas externa su opinión sobre los aportes que esta tecnología presenta. Analiza las características de los navegadores más populares, haciendo búsquedas en motores de búsqueda para Internet. En grupo crean un ejemplo de un sitio Web, y definen en papel las necesidades que tendrá el mismo. Buscan en Internet ejemplos de sitios Web, y definen en papel sobre el diseño y características que poseen, y en mesa redonda se discute sobre los resultados obtenidos. Elabora y expone diagramas que sinteticen la utilidad de los mapas de los sitos web. Analizan en grupo sobre los diferentes sistemas de alojamiento que existen en la Web. Explica la relación existente entre los diferentes tipos de navegadores para Internet y el lenguaje de etiquetas HTML. 4 Página 1 de 7
Manipular la estructura básica de etiquetas para crear una página web con HTML. El lenguaje HTML Introducción Las versiones de HTML Qué es XHTML Historia y versiones del XHTML Característica Normativa del XHTML Diferencias entre el HTML y XHTML Semejanzas entre el XHTML y el XML Elementos del lenguaje Caracteres especiales Directivas Comentarios Espacios, tabuladores y líneas Los browsers y el aspecto final del documento Estructura básica de un documento XHTML Estructura de un documento HTML Doctype, conceptos, ubicación en la página y sus tipos La etiqueta: <HTML>, <HEAD>, <TITLE>, <BASE>, <LINK>, <META>, <BODY>. Web Standards: Estructura, Presentación y Funcionalidad Importancia de una buena estructura en la implementación de capa de presentación y funcionalidad Analiza con artículos descargados del web las diferentes versiones de HTML existentes. Genera una lista de caracteres especiales en un procesador de palabras, propios del sistema de etiquetas HTML En grupo investigan sobre la aplicación y versiones del XHTML En mesa redonda discuten sobre la importancia y como evolucionó el XHTML. Realizar un ejemplo basado en la normativa del XHTML Reconoce a partir de conceptos teóricos de usabilidad, la distribución de las zonas de una página web. Visitando sitios en Internet, se identificarán las diferentes partes de una página web. Deshabilitar el CSS de la página que ellos escojan y vean la estructura del HTML utilizando el add-on de Firefox : Web Devbeloper Toolbar Escribe una página web con HTML, explicando el alcance de cada una de las etiquetas utilizadas 5 Página 2 de 7
Aplicar características especiales de formato al texto en HTML Organización del texto Uso de Div en la maquetación Wrapper Header Content Footer Saltos de línea y párrafos. Etiquetas fundamentales: <p>, <a>, <i>, <em>,<div> Alineación Dirección del texto División de líneas Formatos especiales El estilo del texto Estilos físicos Estilos lógicos Estilos físicos frente a lógicos Cabeceras Incluir H1, H2 y H3 en una página Importancia del H1 en SEO Separadores Listas Marcadas, numeradas, de definiciones, menús, menú con listas "planas", "directorios", varios niveles y márgenes Construye páginas sencillas que contengan texto, uso de maquetación, y etiquetas fundamentales. Observa de otros sitios web, diferentes posibilidades de alineación de texto. Aplica saltos de línea para la construcción de párrafos. Efectúa formatos de texto especiales a las páginas web. Aplica cabeceras en páginas web. Crea menús de diferentes estilos para páginas web. Observa cómo se muestran listas simples de elementos en una página web con diferentes formatos. Aplica opciones de multinivel a listas ordenadas y desordenadas. Aplica características de formato desde el código a una página web y lo expone ante el grupo. Página 3 de 7
Insertar imágenes y hipervínculos dentro de páginas Web Imágenes Formatos gráficos: GIF, JPEG y PNG Elección de formato gráfico La directiva <IMG> Textos alternativos y barras de comandos Alinear texto e imágenes Tamaño y disposición de las imágenes Etiqueta <map> Hipervínculos Hipertexto e hipergráficos Referencias locales Referencias internas a un documento Referencias a documentos HTML externos Enlaces a otros recursos Internet Hipervínculos en base a imágenes Concepto: Pixel Perfect Utilización del Add-on Pixel Perfect de Firefox En grupo define los conceptos básicos que caracterizan los diferentes formatos de imágenes. Discrimina entre imágenes vectoriales y mapas de bits. Implementa la introducción de imágenes con la etiqueta IMG. Establece relaciones entre el acoplamiento del texto y de las imágenes. Aplica atributos que permiten manipular a gusto las imágenes. Crea ejemplos de imágenes utilizando la etiqueta map. En parejas descarga información de Internet acerca de la teoría hipertextual. Construye páginas que conformen un pequeño proyecto y las vincula mediante enlaces de texto. Aplica enlaces a partir de gráficos que permitan vincular distintas páginas web. Construye hipertextos asociados a direcciones URL. Elabora vínculos que conecten a direcciones de correo electrónico o de transferencia de archivos. Dentro de una página web, se crean vínculos que permitan desplazarse a diferentes zonas de la misma página. Investiga en Internet y en bibliografía convencional, como manipular los atributos de un hipertexto. Inserta imágenes y manipula sus parámetros, con el código HTML. Construye páginas web, implementando hipervínculos locales y a otras páginas. Página 4 de 7
Confeccionar tablas en HTML que permitan organizar información en una página web. Manipulación de editores Web y del reglamento del uso de etiquetas HTML estandarizado por el W3C. Tablas Tablas básicas Tablas avanzadas Opciones especiales de formato Agrupaciones de filas y columnas Aplicaciones de las tablas Tablas de imágenes y enlaces Notas al margen Texto en dos o más columnas Tabulación Estilos de tablas Usabilidad para Web Editores WYSIWYG Uso del Aptana Studio Uso del Komodo Edit Concepto de Crossbrowser Firebug e Internet Developer Toolbar Como seleccionar elementos de HTML Validación de páginas, W3C Conocimiento y manipulación de la normativa de la W3C. Herramientas de validación de páginas web. Herramientas web para validar páginas y contenido web. Ejemplifica a partir de páginas activas en el web, la utilidad de la herramienta de tablas. Inserta tablas simples, manipulando su estructura. Diseña modelos complejos, insertando tablas dentro de tablas. Modifica atributos propios de las tablas, como anchos de celdas y bordes. Construye tablas que le permitan insertar imágenes e hipervínculos. Crea ejemplos de tablas usando combinaciones de diseños de tablas diferentes. Individualmente busca en Internet sobre algunas reglas de usabilidad que se debería de utilizar en la creación de páginas de Internet. Crea ejemplos de páginas Web, utilizando editores Web. En grupo crean un sitio Web. En grupo buscan en Internet sobre las normativas para el etiquetado de HTML. En base a herramientas de validación de W3C en Internet, se prueban las páginas de Internet realizadas anteriormente. Se buscan diferencias entre como se visualiza una página de ejemplo en IE, IE7 y Firefox Edita contenido dinámicamente con la ayuda de firebug En grupo discuten sobre las normativas de la W3C. Buscan ejemplos de sitios Web de Internet y discuten sobre la usabilidad utilizada en esas páginas. Ejemplifica la construcción de páginas y la tabulación de datos dentro de una página web, con la herramienta de tablas. Manipula el uso de editores Web para la creación de páginas Web. Domina la digitación de etiquetas HTML respectando la normativa de la W3C. Página 5 de 7
Incorporar objetos multimedia y complementos a documentos HTML. Generar hojas de estilos para aplicar a diferentes documentos de HTML. Objetos multimedia Formatos multimedia. Introducción a los plug-ins Asociando un plug-in a un formato multimedia Mecanismos generales de inserción de objetos <MARQUEE> y <BGSOUND> La directiva <APPLET> <PARAM> Atributos de <APPLET> La directiva <EMBED>, <OBJECT> Atributos básicos de <OBJECT> Atributos adicionales de <OBJECT> Hojas de estilo La directiva <STYLE> Tipos de selectores Mecanismos alternativos para asociar estilos a documentos Enlace a documentos externos (importancia sobre su uso y porqué en la práctica es lo mejor) Importar estilos El atributo style Propiedades de las hojas de estilo Unidades de longitud Propiedades Propiedades asociadas a fuentes de letra Propiedades asociadas a colores y fondos Propiedades asociadas al texto Propiedades asociadas a cajas de texto Propiedades asociadas a la posición de un elemento Consejos sobre la utilización de hojas de estilo Establece la importancia de aplicar objetos Multimediales a la página web. Caracteriza los formatos más comunes asociados al trabajo web. Considera la necesidad de utilizar distintos tipos de software para la utilización de un objeto multimedia. Define y manipula distintos atributos que se aplican al uso de objetos multimedia. Define el concepto de hojas de estilo, su importancia, ventajas y desventajas. Enumera los diferentes tipos de selectores. Crea y configura distintos tipos de estilos. Utiliza los estilos que diseña en la aplicación a documentos externos. Importa estilos para sus trabajos. Discrimina con prácticas dirigidas las propiedades de las hojas de estilos. Manipula atributos de fuentes, colores, texto, alineamientos y otros. Inserta con etiquetas del lenguaje HTML objetos Multimediales. Produce una página web, a partir de la construcción de una hoja de estilos en cascada. 3 9 Página de 7
Elaborar formularios en HTML que permitan interactuar con el usuario. Formularios La entrada de usuario Introducción a los Formularios La directiva INPUT, TEXTAREA, SELECT, BUTTON, FIELDSET y LEGEND Estilo y formularios Tabulaciones Formularios y listas Matrices de selección Botones de varias funciones Frames Qué son los frames? Estructura de un documento con frames: <FRAMESET> La directiva <FRAME> Modificando el aspecto de los frames El atributo target <NOFRAMES> Frames flotantes Ventajas y desventajas de la utilización de frames Plantillas de Correo Diseño y creación de plantillas para correo electrónico Incorpora objetos simples para el trabajo con formularios dentro de una página web. Relaciona aspectos de estilo a la implementación de formularios. Diseña botones para manipular la entrada de datos por parte del usuario de la página web. Crea una página web implementando un formulario y sus respectivos controles. Construir frames para web y plantillas para correo electrónico. Define la aplicación de frames para páginas web. Caracteriza las ventajas y sus desventajas evaluando diferentes criterios. Construye frames horizontales y verticales. Aplica etiquetas que permiten modificar el aspecto de los frames. Individualmente crea plantillas para correo electrónico. Elabora ejercicios dirigidos brindados por el docente. Elabora una página web utilizando la herramienta de frames. Crea diseños de plantillas para correo electrónico. 3 Diseñar páginas web con HTML 5 Nuevas versiones HTML 5 Qué es HTML 5 Nuevas etiquetas y reglas utilizadas en el HTML 5 Normativa del W3C para HTML 5 Utilización en el mercado del HTML 5 Individualmente busca las etiquetas nuevas del HTML 5 Crea ejemplos basados en HTML 5. diferencias entre los encabezados de HTML4 y HTML5. En grupo discute sobre su utilización en el mercado (se comenta el casos de tecnología móvil, ejemplo iphone, etc.) y en los navegadores más populares. Construye una página web usando las etiquetas de HTML 5. Crea una página web usando HTML 5 9 Página 7 de 7