{"id":5105,"date":"2018-04-10T08:00:15","date_gmt":"2018-04-10T11:00:15","guid":{"rendered":"http:\/\/www.marcelosoler.com\/?p=5105"},"modified":"2018-10-24T07:12:13","modified_gmt":"2018-10-24T10:12:13","slug":"introduccion-a-un-esquema-basico","status":"publish","type":"post","link":"https:\/\/marcelosoler.com\/b4\/introduccion-a-un-esquema-basico\/","title":{"rendered":"Introducci\u00f3n a un esquema b\u00e1sico"},"content":{"rendered":"

El dise\u00f1o de la interfaz del usuario sobre un navegador<\/h3>\n
\n\t

El objetivo de este art\u00edculo es iniciar un desarrollo elemental de una p\u00e1gina<\/em> HTML 5,<\/strong> agregarle contenido y generar una serie de elementos de estilo en CSS<\/strong> con la intenci\u00f3n de mejorar la interfaz del usuario para su uso en dispositivos variados<\/em> (dise\u00f1o adaptable o\u00a0responsive<\/strong>).<\/p>\n<\/div>\n<\/div><\/div>

Trabajo pr\u00e1ctico introductorio<\/h3>\n
\n\t
\n
Para realizar el TP sobre computadora, primero vamos a acceder\u00a0al siguiente enlace:<\/a><\/div>\n
<\/div>\n
\n

Inicio \u00bb<\/a>\u00a0https:\/\/www.w3schools.com\/code\/tryit.asp?filename=FVKWF0XZN0NT<\/a><\/p>\n<\/blockquote>\n

<\/div>\n
En la ventana se visualiza una divisi\u00f3n vertical coronada por una cabecera.<\/div>\n
<\/div>\n
Observar el c\u00f3digo que aparece a la izquierda:<\/div>\n
\n
    \n
  1. Observar la declaraci\u00f3n\u00a0<!DOCTYPE html><\/b>\u00a0que define que el documento del ejemplo es del tipo HTML5.<\/li>\n
  2. Identificar las etiquetas\u00a0<html><\/b>\u00a0(apertura) y\u00a0<\/html><\/b>\u00a0(cierre) que aparecen en la segunda y en la \u00faltima l\u00ednea de c\u00f3digo:\u00a0estas etiquetas son contenedoras de todo lo que puede interpretar un navegador corriente<\/b>, y definen el elemento\u00a0ra\u00edz<\/b>\u00a0(root) de una p\u00e1gina HTML.<\/li>\n
  3. Identificar las etiquetas\u00a0<head><\/b>\u00a0y\u00a0<head><\/b>: el contenido de\u00a0head\u00a0<\/b>es invisible para el usuario,<\/i>\u00a0y abarca una serie de instrucciones y datos (metainformaci\u00f3n<\/i>) que se utilizan\u00a0para modificar la representaci\u00f3n de los datos<\/b>\u00a0que se muestran en la ventana del navegador y realizar algunas operaciones complementarias. Este primer ejemplo, se limitan a:\n
      \n
    1. El t\u00edtulo en lenguaje natural de la p\u00e1gina queda especificado por las etiquetas\u00a0<title><\/title><\/b>\u00a0y\u00a0eventualmente ser\u00e1 visible para el usuario final,<\/i>\u00a0pero\u00a0no dentro de la ventana de representaci\u00f3n de informaci\u00f3n<\/i><\/b>\u00a0del navegador.<\/li>\n
    2. La instrucci\u00f3n\u00a0meta\u00a0<\/b>del\u00a0viewport<\/b>,\u00a0cuyo significado no nos interesa por ahora.<\/i><\/li>\n<\/ol>\n<\/li>\n
    3. Identificar las etiquetas\u00a0<body><\/b>\u00a0y\u00a0<\/body><\/b>, tal vez la m\u00e1s significativas para los productores de contenidos, porque en ellas se anida toda la informaci\u00f3n relevante (visible, audible, etc.) para los usuarios (y para los motores de b\u00fasqueda), y en la que m\u00e1s cuidado tienen que poner los dise\u00f1adores de la arquitectura de la informaci\u00f3n y los desarrolladores de interfaces.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
      \n
      \n

      Paso 1
      \n<\/span><\/b><\/p>\n

      \n
      El primer objetivo es\u00a0reconocer algunos de los elementos b\u00e1sicos<\/b>\u00a0con los que se compone una p\u00e1gina cualquiera en HTML5 y lenguajes relacionados, y\u00a0c\u00f3mo se expresan en la ventana de contenidos<\/i>\u00a0de un navegador.<\/div>\n
      <\/div>\n
      Para ello, comenzamos por oprimir el bot\u00f3n verde\u00a0\u00a0[ Run \u00bb]\u00a0<\/span>\u00a0para visualizar\u00a0sobre el cuadro de la derecha<\/b>\u00a0la expresi\u00f3n del\u00a0c\u00f3digo de la izquierda<\/b>.<\/div>\n<\/div>\n
      <\/div>\n
      As\u00ed se presenta una p\u00e1gina HTML5 b\u00e1sica, sin ning\u00fan tipo de estilo.<\/div>\n
      <\/div>\n
      L\u00ednea por l\u00ednea, pueden reconocerse, a un lado y otro de la divisi\u00f3n, los contenidos de\u00a0<body><\/b>:<\/div>\n
      \n