{"id":5109,"date":"2018-04-06T09:00:53","date_gmt":"2018-04-06T12:00:53","guid":{"rendered":"http:\/\/www.marcelosoler.com\/?p=5109"},"modified":"2018-10-24T13:28:29","modified_gmt":"2018-10-24T16:28:29","slug":"ejemplo-de-pagina-paso-a-paso","status":"publish","type":"post","link":"https:\/\/marcelosoler.com\/b4\/ejemplo-de-pagina-paso-a-paso\/","title":{"rendered":"Ejemplo de p\u00e1gina paso a paso"},"content":{"rendered":"

La arquitectura de la informaci\u00f3n y las interfaces humanas<\/h3>\n
\n\t

Nos proponemos, a partir de un documento HTML 5<\/strong> vac\u00edo, agregar contenidos ficticios y elaborar: primero una arquitectura de informaci\u00f3n<\/em> jer\u00e1rquica b\u00e1sica que organice la sintaxis<\/em>, luego agregarle elementos de interfaz<\/strong> que hagan posible una navegaci\u00f3n m\u00ednima,<\/em> enriquecer esa interfaz<\/em> para mejorar la experiencia del usuario<\/strong>, y darle adaptabilidad<\/em> para diferentes dispositivos y medios<\/em> a trav\u00e9s de la creaci\u00f3n de estilos CSS<\/strong>.<\/p>\n

Un documento b\u00e1sico de HTML se compone de los elementos que se muestran debajo:<\/p>\n

<!doctype html>
\n<html>
\n<head>
\n<meta charset=\"UTF-8\">
\n<title>Taller Multimedia<\/title>
\n<\/head><body>
\nEjemplo
\n<\/body>
\n<\/html><\/div>\n
<\/div>\n<\/div>\n<\/div><\/div>

El documento HTML elemental<\/h3>\n
\n\t
As\u00ed compuesto, el documento se ver\u00e1 como en el ejemplo del enlace:<\/div>\n
<\/div><\/div>\n
<\/i> Ejemplo 0Abrir el enlace para experimentar con el emulador<\/small><\/span><\/a><\/div>\n
<\/div><\/div>\n
Podemos experimentar con el cambio de contenidos, por ejemplo, copiar y pegar en el <body><\/strong> de nuestro primer documento, la siguiente informaci\u00f3n de prueba:<\/div>\n
<\/div><\/div>\n

T\u00edtulo de mi art\u00edculo<\/span><\/h1>\n

Subt\u00edtulo<\/span><\/h2>\n
Texto que ejemplifica un contenido ficticio con formatos de notaci\u00f3n secundaria y estilo<\/em>. Este contenido, copiado y pegado sin m\u00e1s en un documento HTML<\/strong>, produce un resultado confuso<\/strong> porque no est\u00e1 ordenado ni estructurado<\/strong><\/em> de modo que pueda resultar accesible e inteligible en cualquier intento \u2013humano o automatizado\u2013 de b\u00fasqueda de datos.<\/span><\/div>\n
<\/div><\/div>\n
Se comprueba entonces que, si no se organiza la informaci\u00f3n de acuerdo con una estructura que la jerarquice, resulta muy dificultosa la lectura, ya sea que la haga una persona, un buscador u otro tipo de aplicaci\u00f3n inform\u00e1tica.<\/div>\n
Es preciso entonces introducir elementos que nos permitan elaborar una estructura de la informaci\u00f3n coherente.<\/div>\n<\/div>\n<\/div><\/div>

El documento HTML organizado<\/h3>\n
\n\t
Vamos a ordenar la informaci\u00f3n<\/strong> de la prueba anterior mediante una serie reducida de etiquetas HTML<\/strong> para conferirle coherencia estructural<\/strong>:<\/div>\n
<\/div><\/div>\n
<\/i> Ejemplo 1Abrir el enlace para experimentar con el emulador<\/small><\/span><\/a><\/div>\n
<\/div><\/div>\n
En este primer paso hemos conseguido una representaci\u00f3n<\/strong>, si bien muy elemental, coherente y jer\u00e1rquica<\/strong> de la informaci\u00f3n de los contenidos.<\/div>\n
El etiquetado del contenido cargado en <body>\u00a0permite hacerlo m\u00e1s comprensible<\/em> cuando se lo presenta a trav\u00e9s del navegador.<\/div>\n
<\/div><\/div>\n
\n
<body><\/span><\/div>\n
<h1><\/span>T\u00edtulo de mi art\u00edculo<\/h1><\/span><\/div>\n
<h2><\/span>Subt\u00edtulo<\/h2><\/span><\/div>\n
<p><\/span>Texto que ejemplifica <em><\/span>un contenido ficticio con formatos de notaci\u00f3n secundaria y estilo<\/em><\/span>. Este contenido, copiado y pegado sin m\u00e1s en un documento <strong><\/span>HTML<\/strong><\/span>, produce <strong><\/span>un resultado confuso<\/strong><\/span> porque <em><strong><\/span>no est\u00e1 ordenado ni estructurado<\/strong><\/em><\/span> de modo que pueda resultar accesible e inteligible en cualquier intento \u2013humano o automatizado\u2013 de b\u00fasqueda de datos.<\/p><\/span><\/div>\n
<\/body><\/span><\/div>\n<\/div>\n
<\/div><\/div>\n
En el ejemplo, las etiquetas<\/strong> cumplen funciones organizativas sem\u00e1nticas:<\/div>\n