Práctica 4 Contenedores(layers) Web y usabilidad

Práctica 4 Contenedores(layers) Web y usabilidad
Un sitio Web además de centrarse en el contenido debe de ser fácilmente accesible
por cualquier persona, a través de cualquier medio, en todo momento y lugar. Para
ello se necesita tener una serie de principios básicos de usabilidad (facilidad de uso,
amigabilidad, etc.)
La usabilidad puede darse a través de diversas formas entre ellas, un diseño íntegro
del sitio Web así como una estructura adecuada del código fuente para un fácil
mantenimiento.
El diseño correcto del código HTML y de otras tecnologías Web se puede dar a través
de validadores de código que se fundamentan en varios estándares y
recomendaciones. En el sitio: http://validator.w3.org/ se puede validar páginas Web.
Paso 1: Ir al sitio de validación anteriormente descrito y analizar el sitio Web
Personal desarrollado en la práctica 2. Capturar el resultado obtenido y señalar al
menos tres errores que les haya llamado la atención.
El diseño íntegro de un sitio Web se realiza estructurando las páginas Web en
secciones o capas. En nuestro curso se llamarán contenedores. Los contenedores se
forman con las etiquetas div y span.
Las etiquetas div y span son en esencia similares salvo por algunas pequeñas
diferencias (si se aplica inmediatamente el formato y no).
Paso 2: Del maquetado realizado de tarea sobre el sitio Web personal identificar las
diferentes secciones (contenedores) que debe de tener la página. Listar a continación
dichas secciones indicando si se repiten en todas las páginas.
El manejo de los contenedores es sencillo. El contenido que puede ser texto, etiquetas
y combinación de ambas va en cerrado entre los contenedores. Ejemplo:
<div id=”nombreContenedor”>
<!—contenido -->
</div>
Paso 3: El sitio Web debe de contener cuatro secciones: encabezado, menú de
opciones, contenido y pie de página. En el encabezado deberá ir el logo del sitio Web
(no preocuparse por el diseño). El menú de opciones irá en el segundo contenedor
Reestructurar todo el sitio Web para que contenga la estructura adecuada. Se revisará
el código fuente de todas las páginas del sitio.
Como se puede observar, los contenedores no manejan ningún tipo estilos ni formato.
Todo eso se hace a través de la especificación de hojas de estilo de cascada.
Nota: HTML5 posee algunas nuevas etiquetas para definir contenedores específicos.
Aun se manejan los contenedores tradicionales, los cuales están soportados pero no
recomendados ya su uso (posteriormente se verá más de este tema.)
Los estilos y formatos del documento html se pueden hacerse de tres formas: usando
hojas de estilo en cascada (se verá posteriormente), a través de etiquetas especiales y
a través
Existen etiquetas que dan formato como <strong>, <b>, <i>, <u>, <sub>, <sup> entre
otras que a parte de dar semántica al texto le dan formato. Las etiquetas que solo dan
formato están descontinuadas y no se recomienda su uso, como por ejemplo <font>
Muchas etiquetas tienen atributos predeterminados para especificar formatos, como
por ejemplo la etiqueta p tiene el atributo align para especificar la alineación del texto
o la etiqueta body que tiene el atributo bgcolor para especificar el color de fondo del
sitio Web.
La última forma de hacerlo es a través del atributo style que está presente en
prácticamente todas las etiquetas de contenido de HTML. Aunque se recomienda su
uso, maneja formato estático. Un ejemplo es el siguiente <p style=”color: blue”>
IBM</p>, el cual mostraría las letras IBM en color azul.
Paso 4: Dar formato al contenido de sitio Web para que muestre diversos formatos
como color de fondo, color en el texto, alineación de párrafos, etc.
Se revisará que todas las páginas contengan algún elemento de diseño visual
Tarea: Descargar aplicación Ultraedit o similar para manejo de forma fácil códigos
HTML.