XIII Betabeers Galicia Coruña - Tesla Technologies

14 de Marzo 2014

___________________________________________________________________________________________________________

Esteban Vázquez FerreiroAntonio Varela Nieto

Desarrollo de interfaces adaptables con HTML 5, CSS 3 y

JavaScript

06/06/14 2

___________________________________________________________________________________________________________

© Tesla Technologies

Interfaces Estado del arte

___________________________________________________________________________________________________________

06/06/14 3

Interfaces: Estado del arte


Los interfaces han evolucionado durante los siglos, empezamos por lo mas básico:

___________________________________________________________________________________________________________

06/06/14 4



Con los años los interfaces se fueron haciendo más complejos:

___________________________________________________________________________________________________________

06/06/14 5



Llegando al precursor de los ordenadores actuales:

___________________________________________________________________________________________________________

06/06/14 6



A partir del primer ordenador como tal el Colossus Mark I, todo fue avanzando con una velocidad vertiginosa.

___________________________________________________________________________________________________________

06/06/14 7



Pero la gran revolución de los interfaces humano maquina, ha venido dado por la explosión del mercado móvil:

___________________________________________________________________________________________________________

06/06/14 8



Existen más de 150 millones de Smartphones. Aproximadamente el 81% son Android. Aproximadamente el 14% son iOs. El resto del pastel principalmente se lo reparten entre Windows, Blackberry y Symbian.

___________________________________________________________________________________________________________

06/06/14 9



Existen más de 100 millones de Tablets. Aproximadamente el 44% son Android. Aproximadamente el 54% son iOs.

06/06/14 10

___________________________________________________________________________________________________________

Introducción: El estándar HTML


En 2004 los principales fabricantes de software involucrados en la Red (a excepción de Microsoft) crearon un grupo de trabajo paralelo llamado Web Hypertext Application Technology Working Group (WHATWG).

http://www.whatwg.org/

06/06/14 11

___________________________________________________________________________________________________________

Introducción: El estándar


En realidad el W3C está desarrollando lo que se llama la Open Web Platform (OWP). El OWP es un término paraguas que el W3C utiliza para referirse a un conjunto de tecnologías, entre las que están HTML5, CSS3, SVG y numerosas APIs de JavaScript/ECMAScript.

06/06/14 12

___________________________________________________________________________________________________________

Introducción: El estándar


El World Wide Web Consortium (W3C) es el organismo encargado de velar por los estándares de la Web y es el responsable de diseñar las diferentes versiones de HTML y tecnologías relacionadas como CSS.

http://www.w3.org/

06/06/14 13

___________________________________________________________________________________________________________


HTML 5 ¿Se pueden desarrollar interfaces adaptables en HTML 5, CSS 3 y JavaScript?

___________________________________________________________________________________________________________

06/06/14 14

¿Se puede desarrollar?: Esta simple pregunta no tiene fácil respuesta


Si se puede desarrollar aplicaciones móviles con HTML 5. Pero el desarrollo no es tan sencillo como parece.

___________________________________________________________________________________________________________

06/06/14 15

¿Se puede desarrollar?: Ventajas


Capacidad de adaptación múltiples dispositivos. Acceso directo a elementos multimedia (video y audio). Es la tecnología con mayores perspectivas de crecimiento. Podemos personalizar hasta el extremo nuestros interfaces usando CSS. Cada vez existen mas Frameworks que nos hacen la vida más fácil. El tiempo de desarrollo, y por consiguiente el coste, es menor.

___________________________________________________________________________________________________________

06/06/14 16



La especificación no está cerrada del todo. La fase de pruebas de la aplicación puede ser un suplicio, por culpa de la gran segmentación. Los interfaces, si no están bien optimizados pueden ser mucho más lentas. Cierta tendencia a abusar de JavaScript.

___________________________________________________________________________________________________________

06/06/14 17



La especificación no está cerrada del todo. La fase de pruebas de la aplicación puede ser un suplicio, por culpa de la gran segmentación. Los interfaces, si no están bien optimizados pueden ser mucho más lentas. Cierta tendencia a abusar de JavaScript.

___________________________________________________________________________________________________________

06/06/14 18

¿Se puede desarrollar?: Miedos


___________________________________________________________________________________________________________

06/06/14 19

¿Se puede desarrollar?: Detalles importantes a tener en cuenta


El primer concepto que debemos tener claro, es que no es lo mismo la resolución de la pantalla que densidad de pantalla. Por ejemplo, en el iPhone 1, la resolucion era de 320 x 480 y alcanzaba los 163 ppp.

___________________________________________________________________________________________________________

06/06/14 20

¿Se puede desarrollar?: Detalles importantes a tener en cuenta


También debemos tener en cuenta la orientación del interfaz de visualización:

06/06/14 21

___________________________________________________________________________________________________________


HTML 5 Nuevas etiquetas HTML 5

06/06/14 22

___________________________________________________________________________________________________________

Nuevos elementos semánticos en HTML 5


<section> El elemento section representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, típicamente con un encabezando.

<nav> El elemento nav representa una sección de una página que enlaces a otras páginas o a partes dentro de la página: una sección con enlaces de navegación.

<article> El elemento artículo representa un composición contenida en un documento, página, aplicación, o sitio que está pretendido para ser distribuido independientemente o reutilizable.

06/06/14 23

___________________________________________________________________________________________________________



<aside> El elemento aside representa una sección de una página que consta de contenido que está relacionado tangencialmente, vamos en pocas palabras aquello que podría ser considerado separado del contenido originial. <header> El elemento de header representa un grupo de introducción o ayudas a la navegación. Un elemento header contiene normalmente las cabeceras de las secciones, Se puede usar para la tabla de contenidos, formularios de búsqueda o cualquier logo relevante.

<mark> El elemento mark representa texto en un documento marcado o destacado para propósitos de referencia.

06/06/14 24

___________________________________________________________________________________________________________



<footer> El elemento footer representa el elemento mas lejano a la raíz del documento. Un footer típicamente contiene información sobre su sección como quién lo escribió, enlaces a otros documentos relacionados, datos de copyright, información de licencias. Los footers no tiene por que aparecer necesariamente al final de una sección pero es donde suelen aparecer.

<time> El elemento time representa un tiempo en un reloj de 24 horas o una fecha precisa en el formato de calendario gregoriano...

06/06/14 25

___________________________________________________________________________________________________________


Desarrollo: CSS 3

06/06/14 26

___________________________________________________________________________________________________________

Introducción CSS 3


Desde el origen de las hojas de estilo en cascada (Cascade Style Sheets o sus siglas CSS), su especificación ha ido sufriendo variaciones con el paso del tiempo, la primera versión es del año 1996 y actualmente nos encontramos en la tercera versión del estándar. Las hojas de estilo en cascada, hacen referencia al lenguaje utilizado para definir el aspecto y el formato de un lenguaje de marcas, principalmente se usa con HTML y XHTML, pero también se puede usar conjuntamente a XML o SVG.

Nota: Actualmente no todos los navegadores soportan todas las nuevas propiedades y además algunas de ellas precisan los prefijos propios de cada navegador, -moz-, -o-, etc..Para poder averiguar que propiedades soporta un navegador disponemos de herramientas online como http://css3test.com/.

06/06/14 27

___________________________________________________________________________________________________________

Introducción CSS 3


La principal diferencia de la tercera versión del estándar respecto a las anteriores, es que en lugar de tener una especificación única, ahora la especificación de divide en "módulos", entre ellos podemos destacar:

Selectores como :first-of-type, :first-letter, :first-line,Background y bordesEfectos sobre el textoTransformaciones 2D y 3DAnimacionesMúltiples columnasY muchas más cosas

06/06/14 28

___________________________________________________________________________________________________________

Pseudoelemento en CSS 3


En CSS3 se respetan los pseudoelementos existentes en CSS2 que eran:

:first-line, selecciona la primera línea.:first-letter, selecciona la primera letra.:first-child, selecciona el primer hijo de un elemento.:before, lleva al inicio del contenido de un documento.:after, posiciona al final.:link, selecciona todos los enlaces no visitados.:visited, selecciona todos los enlaces visitados.:active, selecciona el enlace activo.:hover, selecciona los elementos que tienen el ratón encima.:focus, selecciona el elmento que tiene el foco.:lang(language), selecciona todos los elementos de un determinado idioma.

06/06/14 29

___________________________________________________________________________________________________________

¿Que propiedades nuevas tenemos en CSS 3?


Bordes•border-image•border-radius•box-shadow

Fondos•background-origin•background-clip•background-size

Color•colores HSL•colores HSLA•colores RGBA•Opacidad

Texto•Columnas•Rotura de palabras largas•Web Fonts

06/06/14 30

___________________________________________________________________________________________________________

¿Que propiedades nuevas tenemos en CSS 3?


Interfaz•box-sizing•resize•outline

Degradados •Degradados lineales•Degradados radiales

Transformaccones 2D•translate•Rótate•Sclae•Skew

Media queries

Animaciones CSS3

06/06/14 31

___________________________________________________________________________________________________________

Media Queris


En la actualidad con el uso de HTML 4 y CSS2, tenemos cierto grado de compatibilidad con los dispositivos que dependen de hojas de estilo adaptadas para los mismos.

Un documento puede tener un tipo de letra cuando se visualiza en una pantalla y otra distinta cuando se imprime, esto se debe a que la pantalla e imprimir se definen como dos soportes distintos.

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">

06/06/14 32

___________________________________________________________________________________________________________

Media Queris


Una media queri consiste en un tipo de medio y cero o mas expresiones que comprueban las características del medio.

Entre estas características podemos tener 'width', 'height' y 'color'.

Además se nos permite gracias a las media queries, adaptar nuestras presentaciones a un rango específico de dispositivos de salida sin cambiar el contenido.

06/06/14 33

___________________________________________________________________________________________________________

Media Queris, como


Una media queri como hemos visto es un tipo de medio seguido por cero o varis expresiones que evalúan unas determinadas condiciones, del medio.

Un ejemplo de uso:

<link rel="stylesheet" media="screen and (color)" href="ejemplo.css" />

06/06/14 34

___________________________________________________________________________________________________________

Media Queris, como


Este ejemplo nos va aplicar la hoja de estilos, estilos.css, a los dispositivos que tengan una pantalla y que el tengan color, así que en las monocromo no se mostrará.

También podemos hacer lo mismo usando import.

@import url(color.css) screen and (color);

06/06/14 35

___________________________________________________________________________________________________________

Media Queris, como


Entonces tenemos que una media querie es una expresión, que puede ser evaluada en lógica binaria, devolverá true o false.

También se nos permite aplicar a todos los medios una determinada expresión, para ello usaremos all.

@media all and (min-width:500px)

06/06/14 36

___________________________________________________________________________________________________________

Media Queris, medios soportados


Los tipos de medios soportados son los siguientes:

•all, este tipo se aplica a todos los medios.•screen, este tipo se utiliza para pantallas.•print, este tipo se aplica a las impresoras.•projection, este tipo se aplica para proyectores.•tv, este tipo se emplea para televisiones.•aural, este tipo se aplica para los sintetizadores de voz.•braile, este tipo se emplea para los teclados braille.•embossed, este tipo se aplica para las impresoras braille.•tty, este tipo se emplea para terminales.

06/06/14 37

___________________________________________________________________________________________________________

Media Queris, condiciones


Las principales condiciones que podemos comprobar son:

device-width, con esta condición podemos comprobar el ancho del dispositivo.

device-height, con esta condición podemos comprobar el alto del dispositivo.

orientation, con esta condición podemos comprobar la orientación del dispositivo, landscape y portrait.

06/06/14 38

___________________________________________________________________________________________________________



resolution, con esta condición podemos comprobar la resolución del dispositivo.

color, con esta condición podemos comprobar si el dispositivo es a color o no.

min-color, con esta condición podemos comprobar el numero mínimo de colores del dispositivo.

min-device-width, con esta condición podemos comprobar el ancho mínimo del dispositivo.

06/06/14 39

___________________________________________________________________________________________________________



Las principales condiciones que podemos comprobar son:

min-device-height, con esta condición podemos comprobar el alto mínimo del dispositivo.

max-device-width, con esta condición podemos comprobar el ancho máximo del dispositivo.

max-device-height, con esta condición podemos comprobar el alto máximo del dispositivo.

device-aspect-ratio, con esta condición podemos comprobar el formato del dispositivo, si es 16/9.

06/06/14 40

___________________________________________________________________________________________________________

Media Queris, como


También podemos encadenar varias media queries, usando la separación por comas.

@media screen and (color), projection and (color)

Podemos negar una determinada condición usando para ello el modificador not.

Esto hace justo lo contrario que el primer ejemplo que hemos visto.

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

06/06/14 41

___________________________________________________________________________________________________________

Media Queris, como


Finalmente podemos hacer cosas como cambiar la hoja de estilo en función de la resolución de la pantalla.

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

06/06/14 42

___________________________________________________________________________________________________________

Width


El atributo width hace referencia a la superficie de visualización en el dispositivo.

Acepta modificadores de max y min, y se pude aplicar a medios tanto visuales como táctiles.

@media screen and (min-width: 1000px) and (max-width: 1400px)

06/06/14 43

___________________________________________________________________________________________________________

Height


Este es un atributo análogo al anterior, solo que en este caso hace referencia a la altura del dispositivo.

En ambos casos no pueden llegar a tener valores negativos.

@media screen and (min-height: 100px) and (max-height:1400px)

06/06/14 44

___________________________________________________________________________________________________________

Device-width


Este modificador hace referencia al ancho de la superficie de renderizado del medio. Es decir a diferencia del anterior hace referencia al ancho de la pantalla.

Tampoco puede ser negativo

@media screen and (device-width: 1600px)

06/06/14 45

___________________________________________________________________________________________________________

Device-height


En este caso se hará referencia al alto de la superficie de renderizado del medio.

Es decir el ancho de la pantalla.

@media screen and (device-height:600px)

06/06/14 46

___________________________________________________________________________________________________________

Orientacion


Este atributo puede tomar dos valores en función de la orientación del dispositivo.

Portrait: Que es cuando la altura es igual o mayor que la anchura.Landscape: Cuando la anchura es igual a la altura.

@media all and (orientation:portrait) @media all and (orientation:landscape)

06/06/14 47

___________________________________________________________________________________________________________

Device-aspect-ratio


Esta propiedad nos define la proporción entre el ancho y el alto de la superficie de visualización del dispositivo.

@media screen and (device-aspect-ratio: 16/9)

06/06/14 48

___________________________________________________________________________________________________________

Color


Esta propiedad nos define el número de bits por color que tiene el dispositivo de visualización, en caso de que no tenga color el valor de la propiedad es 0.

@media all and (color) @media all and (min-color: 1)

06/06/14 49

___________________________________________________________________________________________________________

Resolución


Tenemos el atributo resolution que nos indica la resolución del dispositivo de salida en pixeles.

@media print and (min-resolution: 300dpi)

06/06/14 50

___________________________________________________________________________________________________________

Resolución


Tenemos el atributo resolution que nos indica la resolución del dispositivo de salida en pixeles.

@media print and (min-resolution: 300dpi)

06/06/14 51

___________________________________________________________________________________________________________

Scan


Se aplica a televisiones, que define el proceso de scan de las televisiones.

@media tv and (scan: progressive)

___________________________________________________________________________________________________________

Esteban Vazquez [email protected]

Antonio [email protected]

Página web: http://teslatechnologies.esTwitter: @tesla_tec

Muchas gracias por su atención¿Preguntas?

http://teslatechnologies.es/

XIII Betabeers Galicia Coruña - Tesla Technologies

Technology

Transcript of XIII Betabeers Galicia Coruña - Tesla Technologies