• Author / Uploaded
• Rodrigo Ramos

Citation preview

DISEÑO DE INTERFACES DE PROGRAMACIÓN LABORATORIO N° 07

HTML 5 CODIGO DEL CURSO:

Alumno(s)

Grupo Ciclo Fecha de entrega

IV

DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS PROGRAMA DE FORMACIÓN REGULAR

Nota

Diseño de interfaces de programación HTML 5

Nro. DD-106 Página 1 de 10

I.- OBJETIVOS:   

Conocer los aspectos básicos para diseñar una página con HTML. Usar herramientas incorporadas a las tecnologías HTML5. Entender la estructura de una página HTML, el lenguaje de etiquetas.

II.- SEGURIDAD: Advertencia: En este laboratorio está prohibida la manipulación del hardware, conexiones eléctricas o de red; así como la ingestión de alimentos o bebidas.

III.- FUNDAMENTO TEÓRICO: Revise sus diapositivas del tema antes del desarrollo del laboratorio.

IV.- NORMAS EMPLEADAS: No aplica

V.- RECURSOS: 

En este laboratorio cada alumno trabará con un equipo con Windows 8.

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA: 

El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO: Nota: Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las herramientas de desarrollo en un equipo externo. CREANDO LA CARPETA DE TRABAJO 1. Una vez encendido el equipo cree una carpeta en la unidad D: con el nombre “D:\suNombre” y reemplace “suNombre” 2. Listo! Ahora la carpeta que acaba de crear será su carpeta de trabajo durante el resto del semestre. ESTRUCTURA GLOBAL Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del laboratorio vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5 EJECUTAR UNA PÁGINA WEB 1. Una vez copiado el código de la última imagen proceda a probar el código en un navegador. 2. Guarde el archivo de texto con el nombre miPagina con la extensión .html (reemplace la extensión .txt). 3. Por defecto el ícono del archivo cambiará de un archivo de bloc de notas a un archivo de página web.

4. Ahora haga doble click sobre el archivo html. 5. El resultado debe de asemejarse al siguiente:

Diseño de interfaces de programación HTML 5

Nro. DD-106 Página 2 de 10

Etiqueta Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento :

COMPRUEBE EL CÓDIGO 1. Ejecute el archivo html y observe el resultado. 2. Responda ¿A qué representa la etiqueta Nav y qué uso le da a su identificador

y
• ? _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ Etiqueta Siguiendo nuestro diseño estándar nos encontramos con las columnas que en la Figura 1-1 llamamos Información Principal y Barra Lateral. Como explicamos anteriormente, la columna Información Principal contiene la información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente :
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 3 de 10
  
  IMPORTANTE: Las etiquetas que representan cada sección del documento están localizadas en el código en forma de lista, unas sobre otras, pero en el sitio web algunas de estas secciones se ubicarán lado a lado (las columnas Información Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad por la representación de los elementos en la pantalla fue delegada a CSS. El diseño será logrado asignando estilos CSS a cada elemento HTML. Etiqueta En el diseño de un blog, por ejemplo, la Barra Lateral contendrá una lista de enlaces. En el ejemplo de la Figura, los enlaces apuntan a cada una de las entradas del blog y ofrecen información adicional sobre el autor (número 4). La información dentro de esta barra está relacionada con la información principal pero no es relevante por sí misma. Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes pero los enlaces y las pequeñas reseñas sobre esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa.
  
  NOTA: Cuando usamos el elemento “aside” no indicamos que va a ir posicionado en la parte izquierda, derecha o central, son los estilos los que definen la posición, tamaño, etc. De hecho una etiqueta “aside” puede ir dentro de un bloque “section”, solo representa la información que contiene.
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 4 de 10
  
  Etiqueta Ya que se cuenta con una cabecera del cuerpo, seguida de secciones con ayuda para la navegación, información importante y hasta una barra lateral con datos adicionales… Solo hace falta colocar el final del cuerpo. HTML 5 provee un elemento específico para este propósito llamado .
  
  DENTRO DEL CUERPO El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra en el interior de estas secciones. Etiqueta El diseño considerado anteriormente es el más común y representa una estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento nos permite identificar cada una de estas partes:
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 5 de 10
  
  Como puede observarse en el código, las etiquetas se encuentran ubicadas dentro del elemento . Las etiquetas en nuestro ejemplo pertenecen a esta sección, son sus hijos, del mismo modo que cada elemento dentro de las etiquetas es hijo del cuerpo. Y al igual que cada elemento hijo del cuerpo, las etiquetas son ubicadas una sobre otra como se observa a continuación:
  
  Como una parte independiente del documento, el contenido de cada elemento tendrá su propia estructura. Para definir esta estructura, podemos aprovechar la versatilidad de los elementos y estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento:
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 6 de 10
  
  Etiqueta Dentro de cada elemento , en la parte superior del cuerpo o al comienzo de cada , incorporamos elementos para declarar un título. Básicamente, las etiquetas son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular. De hecho, el elemento fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos. Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como , , , , y , pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento :
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 7 de 10
  
  Ejercicio 1: TAGs para estructurar y formatear texto; LISTAS. Formatea el texto de instituciones.html según se muestra. Formatos: • Color de fondo: #8CACD4 • Texto de título: fuente arial, color blanco, tamaño 2 puntos mayor que el estándar. • Resto del documento: listas numeradas y no numeradas; negrita; subrayado; itálica(cursiva); fuente arial / por defecto.
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 8 de 10
  
  Ejercicio 1.3: IMÁGENES; TABLAS. Añade la última columna de la tabla de turismo.html y modifica la tabla para que muestre este aspecto:
  
  TAREA: Investigue sobre algunas etiquetas adicionales que se han incorporado en html 5 y explique el funcionamiento de cada una de ellas.
  
  Diseño de interfaces de programación HTML 5
  
  Nro. DD-106 Página 9 de 10
  
  OBSERVACIONES: __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________
  
  CONCLUSIONES: __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________