vbvb

b prog
e
W
n
i
r
TML 5
Maste
ming H
r in
Maste

rogram

Web p

L5

HTM
g
n
i
m
am

ogr

eb pr
W
n
i
r
Sesión
ón
M9aste

eb pro

in W
aster

M

TML 5
H
g
n
i
gramm

Organización de la web por secciones
PLANEAMIENTO DE UNA PÁGINA WEB CON FRAMES

Los frames consisten en una técnica para insertar varios documentos
HTML en una sola ventana. Paraello, divide la pantalla en varias
zonas o secciones llamadas comúnmente «frames» o «marcos».
Cada uno de estos marcos realiza un trabajo independiente; es
decir, se trabajarán en varios archivos separados, pero unidos a la
vez por un documento web.

Entrevista
Análisis primario
Planteo de
Objetivos

Análisis e
Investigación
Estudio del Nicho
de Mercado
Estratégia de
MercadoBrainstorming
Conceptualización
Definición
Estratégica
Boceado
Planificación
Presentación de
Propuestas

“User Interface”
Diseño en Detalle
Encriptación
Codificación
Integración CMS
Puesta Online

Testeo
Usabilidad
“User Experience”
Análisis de
Conversiones
Capacitación al
Cliente

MAPAS DE SITIO

Un mapa de sitio representa, en forma gráfica o textual, la estructura de unproyecto web.
El mapa es un documento, muchas veces, usado para planificar el diseño de la Web; eso
quiere decir que antes de crear sus páginas web, debe planificarlo. Normalmente, se trata
de una lista de todas las páginas web que contendrá el proyecto o las más importantes.
Vea un ejemplo de un mapa de sitio web:

Vale más tener el respeto de los demás que su admiración.

95

ming Hrogram
n Web p

aster i

M

r in
Maste

b prog

We

ML 5

g HT
n
i
m
m
ra

r in
Maste

Web

g HTM

mmin
progra

Para confeccionar estos mapas, se puede usar aplicaciones que son gratuitas en la red,
como por ejemplo:
http://www.lovelycharts.com/web

Descargando la versión de prueba, podrá desarrollar fácilmente los mapas de su proyecto
web. Hasta aquí se havisto la planificación de todo el proyecto web; luego se revisará
la planificación a nivel del documento web, es decir, cómo se distribuirán los contenidos
dentro de la página web; en este punto considere la posición de las imágenes, videos,
textos y menús. Por ejemplo:

96

Master in Web programming HTML 5 - Sesión 9

ogra

eb pr
er in W

Mast

TML

ing H
m
m
a
r
g
proWeb
aster in
M
Master in Web programming HTML 5

ming H

gram
eb pro

r in W

Maste

En la figura anterior, se muestra un boceto de la futura página web cuyo objetivo es mostrar
un prototipo de la página; puede usar algunas aplicaciones desde:
http://lumzy.com

También, puede contar con http://www.mockflow.com; ambas aplicaciones son gratuitas.
Lo único que tendrá que realizar escrear una cuenta en dicha página y será suficiente para
empezar con el maquetado.

Master in Web programming HTML 5 - Sesión 9

97

ming H

rogram
n Web p

aster i

M

r in
Maste

b prog

We

ML 5

g HT
n
i
m
m
ra

r in
Maste

Web

g HTM

mmin
progra

ETIQUETA SECTION

El elemento section de HTML5 representa un agrupamiento de contenido con la mismatemática, dentro de un documento o aplicación; es decir, una sección trata de un tema
particular. Un section puede contener lo siguiente:


Una cabecera (header)
 Un artículo (Article)
 Un pie (Footer)
 Imágenes
 Tablas
 Listas, etc.
Su formato es el siguiente:

//Cuerpo de la sección


Vea el código HTML que permite implementar una sección que muestre el título «TradicionesPeruanas (Ricaldo Palma)» y un párrafo.



Tradiciones peruanas (Ricardo Palma)



Tradiciones peruanas (Ricardo Palma)
Las tradiciones tienen un gran valor ya que, además de ser la
invención de Palma, con él se da una revitalizacióiva de un pueblo. Palma
recurre a ella para conectar el relato con el lector.




98

Master in Web programming HTML 5 - Sesión 9

ogra

eb pr...