XIII Betabeers Galicia Coruña - Tesla Technologies

14 de Marzo 2014
___________________________________________________________________________________________________________
Esteban Vázquez Ferreiro
Antonio 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).

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.

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 bordes
Efectos sobre el texto
Transformaciones 2D y 3D
Animaciones
Múltiples columnas
Y 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
esteban.vazquez@teslatechnologies.com
Antonio Varela
antonio.varela@teslatechnologies.com
Página web: http://teslatechnologies.es
Twitter: @tesla_tec
Muchas gracias por su
atención
¿Preguntas?

XIII Betabeers Galicia Coruña - Tesla Technologies

Recomendados

Recomendados

Más contenido relacionado

Similar a XIII Betabeers Galicia Coruña - Tesla Technologies

Similar a XIII Betabeers Galicia Coruña - Tesla Technologies (20)

Último

Último (20)

XIII Betabeers Galicia Coruña - Tesla Technologies