PREPARANDO UN

SITIO WEB
RESPONSIVE

Adobe Dreamweaver
Temas a desarrollar
Tema 2: Preparando un sitio web Responsive en
Dreamweaver
• Espacio de trabajo de Dreamweaver
• Crear un nuevo sitio en Dreamweaver.
• Crear una página html5 boostrap (responsive).
• Estructura base HTML5.
• Pre-visualizar diseño de página web.

2
<article>
<h1>
COMENCEMOS
</h1>
</article>
3
Cuando creamos un sitio web debemos
considerar algunos aspectos importantes
para tener ÉXITO.

4
<DISEÑO>
Entre más simple, mejor.

</USABILIDAD>

5
 <CONTENIDO>
La información que se proporcione y publique deber
ser acorde al giro de la empresa y deben de brindar
un valor añadido para quien los lee, estos deben ser
una herramienta de uso para tus clientes.

</NAVEGABILIDAD>

6
 <MOVILIDAD>
La capacidad para verse en distintos dispositivos nos
acercará a clientes potenciales.

</FUNCIONALIDAD>

7
 <INNOVACIÓN>
El mercado es cambiante y las formas de
comunicación también lo son, por lo que debes
continuamente buscar nuevas oportunidades para
mejorar tu sitio.

</UI>

8
<RETROALIMENTACIÓN>
Escucha a los clientes, tendrá beneficios sumamente
importantes para la empresa.

</UX>

9
Un sitio nunca será eterno por lo que un
RE-DISEÑO del Sitio Web debe ser algo a
tomar en cuenta luego de unos años para
estar a la altura de las expectativas del
usuario y del avance de la tecnología.

10
Video REDISEÑO WEB

11
Recuerda que para hacer un SITIO WEB necesitas
realizar los siguientes pasos previamente:

1. Establecer el objetivo del sitio.

2. Arquitectura de la información.
3. Boceto – Sketch.
4. Wireframe.
5. Test de experiencia de usuario.
6. Diseño Visual.
7. Diseño comportamiento responsive.

12
 Todo ello basado en el USUARIO y utilizando
correctamente los Fundamentos del Diseño Web de
USABILIDAD, NAVEGABILIDAD y FUNCIONALIDAD.

13
Empecemos con algunos conceptos
básicos en la creación de una
página web

14
Estructura o Layout

Toda página web se organiza y estructura en cajas o contenedores.

Estos contenedores o cajas no son otra cosa que etiquetas que
contienen a otras etiquetas. La más común es la etiqueta <DIV>.

15
Estructura o Layout usando DIV

Veamos el siguiente ejemplo (aula virtual – layout-div.html).

DIV CABECERA

DIV MENU DE NAVEGACIÓN

DIV CONTENIDO DE LA PÁGINA

DIV PIE DE PÁGINA

16
Estructura o Layout usando nuevas etiquetas Estructurales HTML5

Veamos el siguiente ejemplo (aula virtual – layout-html5.html).

HEADER CABECERA

NAV MENU DE NAVEGACIÓN

SECTION CONTENIDO DE LA PÁGINA

FOOTER PIE DE PÁGINA

17
Estructura o Layout mediante cajas

Las cajas de las páginas

no son visibles a simple
vista porque inicialmente
no muestran ningún color
de fondo ni ningún
borde. La siguiente
imagen muestra las cajas
que forman una página
web después de forzar a
que todas las cajas
muestren su borde:

18
Como Organizar la Estructura o Layout según mi wireframe

Como podrás darte cuenta las etiquetas contenedoras abarcan

todo el ancho de la página y no podemos modificarlas a
menos que eches mano de atributos de ancho y alto pero
como lograr lo siguiente:

div div div

Para ello tendríamos que utilizar reglas de hojas de estilos CSS.

19
Como Organizar la Estructura o Layout según mi wireframe

Pero si aun no manejo hojas de estilo y lo que deseo es poder

diagramar mi sitio como en el wireframe lo que me ofrece
Dreamweaver es trabajar mediante el Framework de
Bootstrap, que me permite mediante Componentes crear los
comportamientos de etiquetas requeridos y bajo el diseño
Responsive.

20
Bootstrap en Dreamweaver

Aprovecharemos entonces
todas las facilidades que nos
brinda Adobe Dreamweaver
para simplificar el trabajo con el
lenguaje html y la creación de
sitios responsive.

Cabe recalcar que todo lo que

hacen los componentes de
Bootstrap podemos hacerlos
nosotros desde cero mediante
CSS y JS.

21
 Lo primero
Preparar un sitio
“HTML5 Responsive”
mediante BOOTSTRAP
en Dreamweaver

22
Configuración de archivos del sitio

Crearemos una carpeta en el ordenador, esta carpeta será nuestro

SITIO LOCAL, y en su interior estarán todos los archivos tal y como
estarán en el servidor o SITIO REMOTO.

Para este ejercicio haremos lo siguiente crearemos una carpeta

llamada mis_sitios y dentro de ella crearemos una carpeta llamada
restaurante.

mis_sitios > restaurante

23
Creando sitio en dreamweaver

Creadas las carpetas abriremos el programa

DREAMWEAVER. Nos ubicaremos en la barra de menú y
ubicaremos el menú sitio y dentro ubicaremos nuevo
sitio.

24
¿Qué es un documento HTML?
En la ventana colocaremos el nombre de nuestro sitio y la
ubicación de la carpeta donde se colocaran los archivos
del sitio. Recuerdas .. mis_sitios > restaurante

25
Crear página html
Haremos clic sobre el icono HTML

26
Crear página html
2 Incluye archivos
3 CSS y JS
1
4 La primera vez

Por defecto

27
 Guardaremos el archivo con el nombre index.html

Vemos que en el panel archivos se han creado los archivos

necesarios para trabajar con el marco (layout) Bootstrap y
también nuestro archivo html que hemos creado.

28
ESTRUCTURA BASE
HTML

29
Veamos la Estructura Base de nuestro archivo HTML5, la
podremos revisar en la vista Código.

¿Reconoces las etiquetas?

30
!DOCTYPE
La declaración doctype le dice al navegador en qué versión
del lenguaje de marcación está escrita la página.
<!DOCTYPE html>
Esta declaración indica que es la versión HTLM5

En la versión anterior se señalaba según restricciones de

contenido, una de ellas de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

31
Identificador del tipo de documento
<html>
Todas las páginas web escritas en HTML tienen que tener
la extensión html o htm. Al mismo tiempo, tienen que
tener las etiquetas <html> y </html>.

<html lang="en">…</html>

En la vista código cambiaremos el valor de atributo "en"

por "es“, para indicar que el idioma de la página estará en
español y no en english.

<html lang="es">…</html>

32
Consideraciones sobre el idioma de la
página
No se puede indicar más de un idioma para la página. El
atributo lang indica sólo el idioma principal de la página.
Si tiene mas de un idioma añades el atributo lang a los
elementos que estén escritos en otro idioma:

<!DOCTYPE html>
<html lang="es">
...
<p lang="en" > ... párrafo en inglés ... </p>
...
</html>

33
Cabecera de la página <head>
La cabecera de la página se utiliza para agrupar
información sobre ella, como puede ser el título.
La etiqueta <head> va justo debajo de la etiqueta <html>.

<!DOCTYPE html>
<html lang="es">
<head>...</head>
...
</html>

34
Título de la página <title>
El título de la página es el que aparecerá en la parte
superior de la ventana del navegador, cuando la página
esté cargada en él.

<!DOCTYPE html>
<html lang="es">
<head>
<title> Rico Sabor – Restaurante </title>
</head>
...
</html>

35
La etiqueta <meta>
La etiqueta <meta> se utiliza para añadir información
sobre la página. Esta información puede ser utilizada por
los buscadores.

36
La etiqueta <meta>
Los tipos de información más utilizados son los siguientes:

Autor: Autor de la página

Classification: Palabras para clasificar la página en los
buscadores
Description: Descripción del contenido de la página
Generator: Programa utilizado para crear la página
Keywords: Palabras clave

37
La etiqueta <meta>
<head>
...
<meta name="author" content="cibertec">

<meta name="description" content=“Demo página

restaurante para interfaces multimedia III - Cibertec">

<meta name="keywords" content="código HTML,

etiquetas en página web, Adobe Dreamweaver">

</head>

38
Cuerpo del documento <body>
El cuerpo del documento contiene la información propia
del documento, es decir lo que deseamos se visualice en el
navegador: El texto de la página, las imágenes, los
formularios, etc.

En html 5 se han creado etiquetas para estructurar mejor

el contenido dentro del cuerpo del documento.

39
PÁGINA DE INICIO EN DREAMWEAVER
Crearemos dentro de <body> una etiqueta <div>
contenedora que tendrá una propiedad Bootstrap que le
permitirá adaptarse a diferentes resoluciones - FLUIDA.

En el PANEL INSERTAR
buscaremos la opción
Componentes de Bootstrap

40
CONTENEDOR FLUIDO
Haremos clic en el botón container fluid - contenedor fluido

Componentes de Bootstrap >

Container - Fluid

41
CONTENEDOR FLUIDO
Vemos que dentro de la etiqueta body se creó el siguiente
código:
<body>

<div class="container-fluid"> </div>

···
</body>

Este contenedor será el que encerrará todo el contenido de

la página de inicio ya que a la etiqueta <body> no podremos
asignarle algunos comportamientos que a una etiqueta
<div> si.

42
ESTRUCTURA DE CONTENIDO
Ahora crearemos la estructura de nuestro contenido con las
nuevas etiquetas incorporadas en HTML5, dentro de nuestro
<div> contenedor. Desde el panel Insertar HTML
Contenedor fluido <div>

Cabecera

Contenido

Pie de página

43
ESTRUCTURA DE CONTENIDO
Dispondremos el código de la siguiente manera.

<div class="container-fluid"> Contenedor fluido <div>

<header>
<header>
</header>
<section>
</section> <section>
<footer>
</footer>
</div> <footer>

44
ESTRUCTURA DE CONTENIDO
Dispondremos el código de la siguiente manera.

<div class="container-fluid"> Contenedor fluido <div>

<header>
<header>
</header>
<section>
</section> <section>
<footer>
</footer>
</div> <footer>

45
YA ESTAMOS EMPEZANDO A ENTENDER
EL LENGUAJE HTML

46
 <h3 lang="en">
SEE YOU NEXT
CLASS
</h3>
47
 SEDE MIRAFLORES
Calle Diez Canseco Cdra 2 / Pasaje Tello
Miraflores – Lima
Teléfono: 633-5555
SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO
Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 Calle Borgoño 361
Independencia – Lima (CC La Rambla – Piso 3) Trujillo
Teléfono: 633-5555 Breña – Lima Teléfono: (044) 60-2000
Teléfono: 633-5555

SEDE SAN JUAN DE LURIGANCHO SEDE SAN MIGUEL SEDE BELLAVISTA SEDE AREQUIPA
Av. Próceres de la Independencia 3023-3043 Av. Federico Gallese 847 Av. Mariscal Oscar R. Benvides 3866 – 4070 Av. Porongoche 500
San Juan de Lurigancho – Lima San Miguel – Lima (CC Mall Aventura Plaza) (CC Mall Aventura Plaza)
Teléfono: 633-5555 Teléfono: 632-4900 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535

www.cibertec.edu.pe