PROTOTIPO O BOCETO

Un prototipo no es más que un boceto donde se representa visualmente, de una forma muy
sencilla y esquemática la estructura de una página web. El objetivo de estos es definir el contenido
y la posición de los diversos bloques de tu web. Esto incluye Encabezados, menús de navegación,
bloques de contenido, etc.

Se recomienda elaborar los bocetos antes de comenzar a maquetar, para que tengas una idea
clara sobre la distribución de elementos como: la cabecera, el menú de navegación, las
secciones, las columnas, los titulares, párrafos, imágenes, banners de publicidad, etc

Esta etapa de esquematización, organización y plasmación de ideas se realiza antes de la

fase de diseño web.

Este esquema carece de estilo, color, imágenes, tipografía, etc. Su principal objetivo es
plasmar la funcionalidad, jerarquía y contenidos que van a aparecer en el sitio WEB.
escenarios de pantalla, los tipos de información a mostrar.

Elementos de un Prototipo o Boceto

Un Boceto se divide en tres componentes: diseño de información, diseño de navegación y

diseño de interfaz.

Diseño de información

El diseño de información es el área del diseño gráfico que representa la información de

manera efectiva para una comunicación clara. Estos elementos informativos deben estar
ordenados de manera que reflejen los objetivos de la empresa (compra, registro, descarga.).

Diseño de navegación

El diseño de navegación debe comunicar la relación entre los enlaces de la página web de
forma que los usuarios entiendan las opciones de navegar en el sitio.

Este diseño da una vista de manera global, de la ubicación y desplazamiento a través de las
diferentes páginas de un sitio web.

Diseño de interfaz

El diseño de la interfaz incluye seleccionar y ordenar los elementos de la interfaz para

permitir a los usuarios interactuar con la funcionalidad del sistema. El objetivo de este
diseño es facilitar la usabilidad del sitio online.
Elementos del diseño de interfaces son: botones de acción, campos de texto, cajas de
verificación, botones y menús desplegables.

MAQUETACION WEB.

La maquetación web es el proceso en el que el Boceto gráfico pasa a

transformase en código html, css, js y php (estándares web) para que los
navegadores puedan interpretarlo correctamente.

La maquetación permite distribuir los elementos de una página WEB

Como solo había HTML, los diseñadores Web utilizaban el único recurso que
tenían a mano para posicionar los elementos en la página eran las tablas.
Cuando apareció CSS tuvimos que aprender un lenguaje nuevo, no sabíamos que
CSS nos iba a servir para Maquetear.
La Maquetacion es tema fundamental para diseñar un sitio Web.

.
Organización

Cada diseñador crea sus propios diseños, pero en general podremos identificar dentro de
cada página web las siguientes secciones:
HTML dispone de etiquetas que puedes usar para establecer la semánticas o
estructura predeterminada de un documento html

1) Header

la Cabecera, que es el lugar donde solemos tener el logo, nombre, y pequeñas

descripciones de nuestra página web.

2) Nav

Debajo de la cabecera, podemos ver la Barra de Navegación, en la que casi

cualquier desarrollador utiliza para poder navegar por el sitio web.

Los usuarios son llevados desde esta barra a diferentes páginas o documento, normalmente
en el mismo sitio web.

3) Section

El contenido más importante de la página se localiza normalmente en el medio de la

distribución. Esta sección muestra la información importante y links. Casi siempre
está dividida en varias filas y columnas.

La sección de Información Principal, podría tener, por ejemplo, una lista de

artículos, descripciones de productos, entradas de blog y cualquier otra información
importante.

4) Article
5) Aside

La Barra Lateral podría tener, por ejemplo, una lista de links apuntando a cada uno
de estos enlaces.

6) Footer

Abajo tenemos una barra llamada Barra Institucional o Pie de Paginas. Se llama así
porque es el área de la página donde tenemos información general del sitio web, el autor o
la compañía, además de links con referencia a términos y condiciones, mapas e información
adicional que el desarrollador cree importante compartir.

La barra institucional es el complemento a la Cabecera, y es considerada como una parte

esencial de la estructura de la página.
<HTML>
<HEAD>
<style>
#encabezado{
background-color:red;
height: 10%;
MARGIN:15PX;
}
</style>
</HEAD>
<body>
<div id
="encabezado"><h1><p
align="center">NOMBRE
PROYECTOEMAS</h1></
p></div>
Margin:
La propiedad CSS margin establece el margen para los cuatro lados
Ej: MARGIN:5PX;

FLOAT
La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su
contenedor, permitiendo a los elementos de texto y en línea aparecer a su
costado.

float: LEFT Ubica a la izquierda

float: right ubica a la derecha
#izquierda{
height:55%;
background-color:BLUE;
float: LEFT;
width:40%;