Capitulo 7 - HTML5 y CSS3 Avanzado - C#.pdf

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

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

HTML5 y CSS3 Avanzado 126

1. 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:


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-visual-studio#bootstrap


Laboratorio 7.1

Explorar los archivos que hacen posible el uso de Bootstrap

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


2. 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:


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:


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-visual-studio#bootstrap


Laboratorio 7.2

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


3. 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.


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.


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:


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.


4. 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.


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.


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.


5. 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 suele ser arrastrable por default, pero un elemento 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.


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:


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:


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".


6. 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.


Laboratorio N 7.6

Crear una pgina HTML que permita: Activar las notificaciones

Enviar una notificacin

Capitulo 7 - HTML5 y CSS3 Avanzado - C#.pdf

Documents

Transcript of Capitulo 7 - HTML5 y CSS3 Avanzado - C#.pdf