Objetivo: En este proyecto crearás sitios web utilizado la versión 5 del lenguaje

HTML, lo que te permitirá lograr un diseño llamativo y adaptable a varios

dispositivos. Ampliarás tus competencias en el área de diseño web, al utilizar
estándares, etiquetas y herramientas que facilitan la creación de un sitio moderno.

SECCIÓN 1: COMPONENTES DE HTML5

HTML significa Lenguaje de Marcado para Hipertexto (HyperText Markup

Language) y es el lenguaje más usado para crear y visualizar páginas web.
El contenido dentro de una página web es etiquetado con elementos HTML
como <img>, <p>, <div>, entre otros. Estos elementos conforman los bloques que
constituyen un sitio web.

HTML provee básicamente tres

características: estructura, estilo y funcionalidad. En HTML es común utilizar
enlaces para conectar una página web con otra. Además, soporta imágenes y
otros elementos multimedia.
¿Qué es HTML5?

HTML5 es la quinta revisión del lenguaje básico para elaborar páginas web. HTML5 es
una combinación de nuevas etiquetas HTML, JavaScript y otras tecnologías
complementarias.

HTML5 establece nuevos elementos, atributos y comportamientos que reflejan el uso de

los sitios web en la actualidad. Es recomendable actualizar el navegador a la versión más
reciente para aprovechar todas las características de HTML5.
Algunas características de HTML5

 Es independiente del dispositivo, funciona en un teléfono móvil, una tableta

o computadora personal.
 La estructura está basada en elementos HTML y JavaScript.
 Proporciona un excelente soporte para usar contenido multimedia.
 Reduce la necesidad de plugins externos, tal como Flash Player.

Algunas novedades en HTML5:

 Estructura web con nuevos elementos.
 Nuevas etiquetas para contenido multimedia: canvas, audio y video.
 Mejora en validación: required, email, number y date.
 Nuevas funciones para arrastrar objetos: drag y drop.
 Etiquetas para organizar más fácilmente la
información: div, section y article, entre otras.
 Nuevas propiedades CSS3 para creación de estilos.
Estructura básica de HTML5
Los documentos HTML se encuentran debidamente organizados. Los
elementos de una página web son la espina dorsal de un documento
HTML, de forma similar a como se observa en el esquema:
Sintaxis del HTML

El HTML es un lenguaje que basa su sintaxis en un elemento

llamado etiqueta. La etiqueta presenta dos partes: una apertura <tag> y
un cierre </tag>. Por ejemplo: <p> y </p>.
Algunas etiquetas HTML5

HTML5 introduce nuevos elementos que mejoran la estructura de una

página web.
Etiquetas básicas

Etiquetas de lista
Etiquetas para formularios

Etiquetas para tabla

Propiedades CSS
Elementos Bootstrap

¿Qué es un Wireframe?

Un wireframe es un esquema que representa de forma sencilla la estructura y diseño de

un sitio web. El wireframe representa el diseño de la página y la organización del
contenido; incluye elementos para la interfaz y la navegación.
Generalmente en los wireframes no se utilizan colores, tipografías o
imágenes. Lo importante es centrarse en la funcionalidad del sitio y la
experiencia del usuario. La prioridad es poder idear la mejor forma de
presentar los contenidos. Los esquemas pueden ser dibujados con lápiz y
papel, esquemas en una pizarra o por medio de una herramienta en línea
o una aplicación.
Herramientas en línea para crear wireframes:
 https://gomockingbird.com
 https://cacoo.com
 https://www.gliffy.com
Plantillas imprimibles
Las plantillas imprimibles son otra forma de crear wireframes. Por ejemplo,
se pueden encontrar diseños en la
dirección http://zurb.com/playground/responsive-sketchsheets

SECCIÓN 2: EDITORES DE CÓDIGO

Editores de código

HTML es un lenguaje en el que podemos crear y editar un sitio web.

Puedes utilizar cualquiera de los siguientes editores para crear tu sitio web:
Editores de código para Windows:
 Notepad ++

 Aptana
 jEdit
 PSPad
 ConTEXT

Editores de código para Mac OS:

 jEdit
 Smultron
 TextWrangler
Editores de código para Linux:
 Aptana
 gEdit
 Kate
 vim
 Emacs

Navegadores web
El navegador es un programa que nos permite visualizar las páginas web.
El trabajo del navegador es leer el código HTML y CSS para mostrar una
salida en pantalla. Se sugiere instalar varios navegadores para confirmar
que el sitio web funciona correctamente.
 SECCIÓN 3: DISEÑO WEB ADAPTABLE

El diseño web adaptable (Responsive Web Design) es una tendencia

de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las
páginas web a diferentes dispositivos.

Actualmente las páginas web se visualizan en muchos tipos de dispositivos

como tabletas, teléfonos, computadoras portátiles y de escritorio. Cada
uno con sus propias características en tamaño y resolución.
Esta tendencia pretende que, con un solo documento, se tenga una
visualización adecuada en cada dispositivo. El responsive web design es
posible gracias al uso de Media Query en los estilos CSS3.
Ventajas:
 Se reducen costos, debido que el diseño es similar en la mayoría de
dispositivos.
 La velocidad de carga es más rápida.
 Es compatible con la mayoría de navegadores.
 Mejora la experiencia de navegación.
¿Qué es Bootstrap?

Bootstrap es un conjunto de herramientas basado en HTML y CSS,

creado por Twitter y liberado en 2012. Este “framework” es de uso libre y
sirve para diseñar sitios y aplicaciones web, proporcionando mejoras en la
apariencia de botones, menús, formularios y otros elementos.

Los diseños creados con Bootstrap son simples, limpios e intuitivos. Esta
característica agiliza el proceso de carga y se adapta a otros dispositivos.
Puedes ingresar a la siguiente dirección http://getbootstrap.com/getting-
started/ para obtener diferentes recursos del framework:
 Archivos de descarga (Download).
 Bootstrap CDN.
 Estructura de carpetas y archivos.
 Plantilla básica a utilizar.
 Ejemplos y mucho más.
Navegadores que soporta:
 Chrome
 Firefox
 Opera (Mac OS, Windows)
 Safari (iOS, Mac OS)
 Internet Explorer (Windows)

jQuery

JQuery es una biblioteca de JavaScript que permite simplificar la manera

de interactuar con los documentos HTML. Al igual que otras bibliotecas,
ofrece una serie de funciones basadas en JavaScript que de otra forma
requerirían más código, tiempo y espacio.

Por ejemplo: manipular la hoja de estilos, efectos y animaciones, agregar

interacción y mucho más. jQuery es un único archivo JavaScript que
contiene las funciones comunes.
¿Cómo se inicia?
La forma de interactuar con la página es mediante la función $().
Hoja de estilos CSS

La hoja de estilo en cascada (Cascading Style Sheets) es un lenguaje

usado para definir y crear la presentación de una página HTML. El código
de estilo puede ser definido en un archivo separado o en la misma página
HTML. En este último caso se deben definir los estilos utilizando el
elemento “style”.

¿Para qué se utiliza la hoja de estilos?

Proporciona estilo al documento HTML separando el contenido de la
presentación. Los CSS permiten controlar el estilo y formato de múltiples
páginas al mismo tiempo. Cualquier cambio afectará a todas las páginas
vinculadas en las que aparezca ese elemento.
Versiones:
CSS1
Es la primera especificación oficial de CSS, recomendada por la W3C y
publicada en diciembre de 1996.
CSS2
Esta especificación fue desarrollada por la W3C y publicada en mayo de
1998.
CSS3
Es la última evolución del lenguaje de las hojas de estilo en cascada. Está
dividida en varios documentos separados llamados módulos. Los primeros
borradores fueron liberados en junio de 1999.

Ventajas:
 Esquinas redondeadas, sombras, transiciones o animaciones.
 Control centralizado de la presentación de la página.
 Pueden definirse los mismos estilos para muchos elementos.
Atributo CLASS
Este atributo asigna uno o más nombres de clase a un elemento. Se puede
asignar el mismo nombre a cualquier número de elementos.

Atributo ID
Este atributo asigna un identificador único a un elemento.

Tipos de rejillas
La rejilla o grid es la base sobre la que se construye el diseño de una
página web. Es un componente que garantiza que la página web se
adaptará adecuadamente en diferentes dispositivos.
Bootstrap utiliza un modelo de rejilla basado en dos tipos de contenedores y una
rejilla de 12 columnas que resulta muy flexible y fácil de modificar.
1. container:
El contenido de la página web aparece centrado y con un ancho fijo.

2. container-fluid:
El contenido de la página web puede ocupar todo el ancho disponible.

¿Cómo funciona el sistema de rejillas?

 Las columnas se agrupan dentro de filas (.row).
 Las filas se colocan dentro de un contenedor: .container o .container-fluid.
 Cada fila se puede dividir hasta un máximo de 12 columns.
 El contenido se debe colocar dentro de cada columna.
 La separación entre columnas se realiza aplicando padding.
Con este orden el sistema de rejillas funcionará correctamente.
Características de las rejillas en los dispositivos:

Ejemplo de rejillas
El siguiente ejemplo muestra cómo crear una rejilla con la clase .col-md:

Vista previa
Ejemplo de rejillas para móviles, tabletas y pc de escritorio:

Ingresar a la dirección http://getbootstrap.com/css/#grid para consultar

más detalles sobre las rejillas.

SECCIÓN 4: MEDIA QUERIES

CSS Media Queries

Las Media Queries se dieron a conocer por primera vez en la propuesta

inicial de CSS en 1994. Una Media Query es una serie de órdenes que se
incluyen en la hoja de estilos que permiten adaptar el contenido de un
documento HTML a las características de un dispositivo con una
resolución de pantalla determinada, utilizando parámetros como ancho,
alto y color.
Sintaxis:

Las Media Queries se pueden utilizar para adaptar propiedades a:

 Alto y ancho de una pantalla.
 Alto y ancho de un dispositivo.
 Orientación de un dispositivo.
 Crear formatos especiales de impresión.
 Aplicar combinación de estilos avanzados y más.
Ejemplo:

JavaScript

JavaScript (JS) es un lenguaje de programación que se utiliza para crear

páginas web dinámicas. Los programas son llamados scripts y consisten
en funciones que son llamadas desde el propio HTML cuando sucede
algún evento.

Una página web dinámica incorpora elementos como:

a. Animación de elementos en una página.
b. Acciones que se activan al pulsar botones.
c. Contenido interactivo como juegos, reproducción de audio y video.
d. Validación de datos en un formulario.
e. Transferencia de información sobre hábitos de lectura.
f. Ventanas con mensajes de aviso.
JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos. Los programas
escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.
Ejemplo: