HTML5 Y CSS3 Avanzado

Objetivo
Al finalizar el captulo, el alumno:

Utiliza Bootstrap y Responsive Design en sus aplicaciones web.

Conoce temas avanzados de HTML5.

Temas
1.

Bootstrap

2.

Responsive Design

3.

Offline Web Applications

4.

Web Workers

5.

Drag And Drop

6.

Notifications

.Net 4.5.1 Web Advanced Application Developer Visual Studio 2013 con C#

HTML5 y CSS3 Avanzado

1.

126

Bootstrap

Las plantillas de proyecto de Visual Studio 2013 utilizan Bootstrap, un framework de

diseo y temas creado por Twitter.
El estilo que se obtiene por default es el siguiente:

Se puede utilizar la funcin de temas de Bootstrap para efectuar fcilmente un cambio en

el aspecto y estilos de la aplicacin. Por ejemplo, se pueden hacer los siguientes pasos
para cambiar el tema:

HTML5 y CSS3 Avanzado

127

En el explorador, ir a http://Bootswatch.com, elegir un tema y descargar. Esto

descarga bootstrap.min.css por defecto; si se desea examinar el cdigo CSS, se
debe obtener bootstrap.css en lugar de la versin minimizada.

Copiar el contenido del archivo CSS descargado.

En el Visual Studio 2013, crear un archivo de hoja de estilo nuevo denominado

"bootstrap-theme.css" en la carpeta "content" y pegar el cdigo CSS descargado.

Abrir App_Start/Bundle.config y cambiar bootstrap.css por bootstrap-theme.css.

Ejecutar el proyecto nuevamente, y ver que la aplicacin tiene un nuevo aspecto. La

siguiente ilustracin muestra el efecto del tema Amelia:

Muchos temas Bootstrap estn disponibles, tanto en versiones gratuitas y premium.

Bootstrap tambin ofrece una amplia variedad de componentes de interfaz de usuario,
como drop-downs, button groups e conos. Para obtener ms informacin acerca de
bootstrat, consulte el sitio: http://getbootstrap.com/
Referencia:
http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visualstudio#bootstrap

HTML5 y CSS3 Avanzado

128

Laboratorio 7.1

Explorar los archivos que hacen posible el uso de Bootstrap

Cambiar el estilo de la aplicacin utilizando otro tema para Bootstrap.

HTML5 y CSS3 Avanzado

2.

129

Responsive Design

Bootstrap utiliza CSS3 para proporcionar "Responsive Design", lo que significa que los
diseos pueden adaptarse dinmicamente a los diferentes tamaos de ventana del
navegador.
A continuacin, se muestra cmo funciona, considerando que por default se tiene el
siguiente diseo:

HTML5 y CSS3 Avanzado

130

Si se redimensiona la ventana para que se vea ms pequea, las columnas dispuestas

horizontalmente se mueven en disposicin vertical:

Si se reduce la ventana un poco ms, el men superior horizontal se convierte en un

cono, al que se puede hacer clic para ampliar en un men que se despliega
verticalmente:

HTML5 y CSS3 Avanzado

131

Esto hace que ya no tengamos que preocuparnos del tamao del browser o del
dispositivo de donde se ver, ya que la aplicacin por s misma se redimensionar para
tener una apariencia consistente y libre de errores.
Referencia:
http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visualstudio#bootstrap

HTML5 y CSS3 Avanzado

132

Laboratorio 7.2

Comprobar que con el uso de bootstrap se cuenta con la caracterstica de Responsive

Design.

HTML5 y CSS3 Avanzado

3.

133

Offline Web Applications

Durante aos, el almacenamiento de datos en el navegador podra lograrse mediante el

uso de cookies HTTP, que han proporcionado una manera conveniente de almacenar
pequeos fragmentos de informacin. Hoy en da, las cookies se utilizan principalmente
para almacenar informacin bsica del perfil de usuario. Para trabajar con cookies, se
puede utilizar el Plugin de jQuery disponible en https://github.com/carhartl/jquery-cookie.
Con lo que se puede hacer lo siguiente:
$.cookie('firstName', 'Mi Nombre');
var firstName = $.cookie('Mi Nombre');
Las cookies seguirn siendo una herramienta eficaz, pero tienen algunos inconvenientes:

Limitaciones de capacidad. Las cookies se limitan a alrededor de 4 KB de datos, lo

cual no es muy grande, aunque se puede crear ms de 30 cookies por sitio. (El lmite
mximo actual depende del navegador que se est usando, y el promedio es de
entre 30 y 50).

Sobrecarga. Cada cookie se enva con cada HTTP request/response que se hace,
independientemente de si los valores son necesarios. Esto ocurre incluso para las
solicitudes de contenido esttico (tipo de imgenes, archivos CSS y js), que puede
crear mensajes HTTP ms pesados de lo necesario.

Por lo que HTML5 ofrece las siguientes opciones:

Web Storage: Fcilmente la nueva forma ms simple de almacenamiento, que

proporciona una manera de almacenar pares key/value de los datos de una manera
que supera a las cookies en la facilidad de uso. Es actualmente la opcin ms
soportada.

IndexedDB: Esta herramienta parece ser un fuerte candidato para la solucin a los
requerimientos de almacenamiento complejos en el futuro. Como base de datos no
relacionales (NoSQL), proporciona simplicidad similar a Web Storage pero sin dejar
de lado caractersticas como la indexacin y las transacciones.

HTML5 y CSS3 Avanzado

134

Existen 2 opciones ms disponibles: Web SQL database y Filesystem API, pero su uso
no es estndar y no est soportado por los browsers con los que actualmente contamos.
Es importante notar que el mismo host, port, y protocol debe ser provisto antes que una
pgina web pueda acceder a data escrita por otra pgina web. De esta manera, cierta
data storage creada usando el URL http://www.example.com/area1/page1.html, puede
ser
accedida
desde
esta
misma,
pero
tambin
desde
http://www.example.com/area1/page2.htm y http://www.example.com/area2/page1.htm,
por ejemplo.
La estrecha asociacin con el origen, es una consideracin importante en el desarrollo
de sitios que puedan ser alojados en un dominio compartido. En la mayora de los casos,
sera mejor prctica para evitar el uso de almacenamiento web en su totalidad si el sitio
va a vivir dentro de un dominio compartido en el futuro, debido a que cualquier sub-sitio
dentro del dominio sera capaz de acceder a sus datos.
A continuacin se detallan las opciones de almacenamiento:
1. Web Storage

LocalStorage: Es un objeto global de almacenamiento. Una de las mayores

fortalezas de localStorage es su sencilla API para la lectura y escritura de strings
key/values. Debido a que es esencialmente NoSQL, es fcil de utilizar. Es la
nica opcin de almacenamiento que es soportado consistentemente a travs de
navegadores de escritorio y mviles. Los navegadores modernos soportan como
mnimo de 5 MB de datos, lo cual es sustancialmente superior a lo permitido a
travs de cookies (que se limitan a 4 KB cada una). Actualmente, Internet
Explorer admite un lmite de 10 MB.

SessionStorage: Es tambin un objeto de almacenamiento, por lo que existen los

mismos mtodos y propiedades. La diferencia es que conserva los datos de una
sola sesin. Despus de que el usuario cierre la ventana del navegador, los
registros almacenados se borran automticamente. Esta es una ventaja
importante, ya que solo una cantidad limitada de espacio es utilizada.

Desventajas de local /session storage:

Uno de los mayores problemas con el web storage es que funciona de forma
sincrnica, lo que puede llegar a bloquear la pgina mientras se produce la
lectura/escritura. Aunque la cantidad de tiempo que normalmente se necesita
para realizar estas acciones suele ser demasiado pequeo como para darnos
cuenta, podran bloquear el navegador mientras se est leyendo y escribiendo
valores en el disco. Con esto en mente, es una buena idea utilizar el
almacenamiento web para pequeas cantidades de datos y el uso de mtodos
alternativos para los datos ms grandes.

Debido a que web storage no tiene funciones de indexacin, la bsqueda de

grandes conjuntos de datos puede llevar mucho tiempo. Esto implica
generalmente una iteracin en cada elemento de la lista para encontrar
elementos que coinciden con los criterios de bsqueda.

Las aplicaciones que utilizan web storage pueden tener problemas si un usuario
est modificando el mismo valor en localStorage en varias pestaas abiertas del
navegador. El resultado sera un "race condition" en el que la segunda pestaa
sobrescribe inmediatamente el valor introducido por la primera ficha.

HTML5 y CSS3 Avanzado

135

2. IndexedDB
Es una base de datos key/value en la que los valores pueden variar desde simples
cadenas a estructuras complejas de objetos. Para proporcionar una rpida
recuperacin y bsqueda, incluye una manera fcil de crear ndices.
En las bases de datos relacionales estndar, las tablas se crean con esquemas
rgidos, cada tabla contiene un conjunto de columnas, cada una de ellas tiene un
nombre y un tipo de datos. Esto no permite una gran flexibilidad, ya que requiere
mucho trabajo cuando se necesitan cambios en el esquema. Por lo tanto, en lugar de
estas estructuras de tabla, IndexedDB utiliza espacios llamados almacenes de
objetos, que son reas de almacenamiento key/value.
Debido a que la especificacin de IndexDB (as como muchas de las caractersticas
de HTML5) est en continuo desarrollo, se debe agregar el siguiente cdigo para
poder trabajar con este:

HTML5 y CSS3 Avanzado

136

Laboratorio N 7.3

Crear una pgina HTML que permita almacenar datos con localStorage.

Crear una pgina HTML que permita realizar las operaciones CRUD sobre
IndexedDB.

HTML5 y CSS3 Avanzado

4.

137

Web Workers

Los Web Workers permiten ejecutar scripts en paralelo (background). Por ejemplo, si se
tiene un proceso costoso en recursos que no necesita interaccion con el usuario, se
podr utilizar un Worker y evitar que el navegador colapse.
Su uso es bastante sencillo, se instancia un Worker que estar en un archivo javascript,
se indica qu hacer cuando se reciba un mensaje y ya solo queda que el javascript y el
Worker se comuniquen envindose mensajes.
Es importante notar que un Worker no tiene acceso al DOM, as que si se necesita
acceder al DOM, el Worker debe enviar un mensaje de vuelta al creador, y el creador
debe procesar el mensaje y acceder al DOM segn sea necesario.

Declarar un Worker
Solo se debe crear un Worker como si fuera un objeto llamado worker:

Pero adems, se tiene que especificar el nombre del archivo que va a ejecutar, en este
caso es worker.js, con esto ya se tiene un worker listo para ejecutar el script.

HTML5 y CSS3 Avanzado

138

Enviar un mensaje al Worker

Los Workers aceptan tambin mensajes, se puede enviar variables o valores
directamente.

Simplemente, se debe poner el nombre.postMessage(valor).

Recibir un mensaje en el Worker

Es obvio que al poder enviar informacin, tambin puede ser recibida para
procesarla.

En la variable evt se tiene la informacin que devuelve el Worker, y representan los

datos que devuelven los scripts que se procesaron.

Uso de errores de un Worker

Adems, no todo puede salir bien siempre, tambin existe la posibilidad de que se
genere un error.

La misma variable evt puede devolver el error.

Cerrar o detener el Worker

Para poder cerrar o terminar el proceso de un Worker solo se tiene que realizar lo
siguiente:

Esto terminar el Worker y dejar de funcionar.

HTML5 y CSS3 Avanzado

139

Laboratorio N 7.4

Crear una pgina que permita ingresar un mensaje, y que este sea convertido a
maysculas. Esto debe ser realizado utilizando Web Worker. Cuando se reciba un
mensaje del creador, el cdigo debe recorrer cada caracter convirtindolo a maysculas,
y enviarlo de vuelta al creador.

HTML5 y CSS3 Avanzado

5.

140

Drag And Drop

Antes de HTML5, la funcionalidad de Drag and Drop (arrastrar y soltar) era posible con
algunos navegadores, pero no era compatible con diferentes navegadores. Y
normalmente se implementaba mediante el uso de una biblioteca de terceros, tal como
jQuery.
Para especificar al navegador que un elemento se puede arrastrar, se utiliza el atributo
"draggable", que tiene tres valores posibles: true, false, y auto. Para la mayora de los
navegadores, "auto" es la opcin predeterminada, lo que significa que el navegador
decide si el elemento debe ser arrastrable. Por ejemplo, el elemento <img> suele ser
arrastrable por default, pero un elemento <div> no.
Al hacer "drag and drop" (arrastrar y soltar), hay eventos que se basan en el elemento
arrastrado, y otros en el "drop target" (destino de colocacin). Al usar estos eventos, se
puede personalizar la operacin segn sea necesario.
Drag Events:

dragstart: Se dispara cuando se inicia el arrastre.

drag: Se dispara continuamente mientras se est arrastrando el elemento.
dragend: Se dispara cuando finaliza el arrastre.

Drop Events:

dragenter: Se dispara cuando el arrastre entra en una zona de drop.

dragover: Se dispara continuamente a medida que el elemento se arrastra sobre la
zona de drop.
dragleave: Se dispara cuando el elemento arrastrado sale de una zona de drop.
drop: Se dispara cuando el elemento arrastrado se deja en la zona de drop.

HTML5 y CSS3 Avanzado

141

Los eventos dragenter y dragover por default rechazan a los items que se arrastran, por
lo que no puede soltar un elemento arrastrado. Se puede habilitar la cancelando la
accin por default en estos eventos: e.preventDefault().
El evento drop elimina el elemento arrastrado del modelo de objetos de documento
(DOM) y luego se aade de nuevo a la DOM en la nueva ubicacin.
A continuacin un ejemplo:

HTML5 y CSS3 Avanzado

142

El ejemplo anterior muestra una operacin completa de drag and drop, pero tambin se
puede utilizar el objeto DataTransfer para pasar los datos del evento dragstart al evento
de drop. Mediante el uso del objeto DataTransfer, no es necesario crear una variable
global para hacer referencia al elemento que se est arrastrando. Tambin, se puede
pasar datos al evento drop, siempre y cuando se puede representar como una cadena o
URL. El objeto DragStart es referenciado como la propiedad dataTransfer en el evento
dragStart.
Si se usa jQuery para enlazar los eventos, la propiedad dataTransfer no podr ser usada
si no se agrega de la siguiente manera en la funcin document ready:
jQuery.event.props.push('dataTransfer')
Se pueden pasar datos al evento drop mediante la propiedad dataTransfer. El objeto
DataTransfer tiene los siguientes miembros:

clearData() Method: limpia la data del objeto DataTransfer.

getData() Method: obtiene la data del objeto DataTransfer.
setData() Method: asigna data en el objeto DataTransfer.
dropeffect Property: obtiene o establece el tipo de operacin drag and drop y el tipo
de cursor a mostrar. puede ser copy, link, move, o none.
effectAllowed Property: obtiene o establece las operaciones permitidas sobre el
elemento de origen
files Property: obtiene la lista de archivos que va ser arrastrada.
types Property: obtiene la lista de strings con los tipos enviados.

A continuacin un ejemplo:

HTML5 y CSS3 Avanzado

143

HTML5 y CSS3 Avanzado

144

Laboratorio N 7.5

Crear una pgina HTML que permita manejar los eventos de drag and drop.
Crear una pgina HTML que permita realizar el ordenamiento de una lista. Utilizar el
objeto "dataTransfer".

HTML5 y CSS3 Avanzado

6.

145

Notifications

Se trata de una notificacin que se puede ofrecer a los usuarios en ciertos eventos,
incluso cuando el usuario est en otra pestaa del navegador. Esta notificacin puede
ser til para eventos como el correo nuevo, nuevo Tweet, etc.
Para trabajar con notificaciones, en primer lugar, se debe tener el permiso del usuario
para mostrar la notificacin. Si el usuario ha dado su consentimiento para mostrar la
notificacin, entonces se podrn ver dos tipos de notificaciones:

Notificacin normal (Default)

Notificacin HTML

En el siguiente ejemplo, se puede apreciar que se ha creado la funcin javascript para

mostrar la notificacin. Tener en cuenta que esta funcin representa una de las formas,
porque hay muchas maneras de extender esta funcin, de acuerdo a la necesidad del
contexto.

HTML5 y CSS3 Avanzado

146

HTML5 y CSS3 Avanzado

147

Laboratorio N 7.6

Crear una pgina HTML que permita:

Activar las notificaciones

Enviar una notificacin