HTML5 e CSS3 já não é mais futuro. Nesta talk é abordado um overview de novas tecnologias que já estão em desenvolvimento e tornarão realidade nos próximos anos. Dentre elas: DOM Level 4, CSS Selectors Level 4 & 5, Media Query 4, HTML 5.1, Ecmascript 6 & 7+.
Apresentada em: 14 de Dezembro de 2013 no Front in Recife
Local: Faculdade Marista
Palestrantes: Luiz Tiago & Guilherme Farias
1. HTML, CSS & JS:
OLHANDO PRA FRENTE
flickr.com/tisdale53
2. LUIZ TIAGO
• CTO @ MGR Tecnologia
• Pós graduado em
Desenvolvimento Mobile @
CESAR
• Graduado em Sistemas para
Internet @ FMR
• Co-fundador do
Pernambuco.JS / jQuery Brasil
3. G U I L H E R M E FA R I A S
• Front-end Engineer @ MGR
Tecnologia
• Graduando Sistemas de
Informação @ AESO
• Firefox OS Developer &
Evangelist
• Zepto.JS Contributor
12. CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4
• E:local-link
Qualquer link que o destino já seja a página atual
• E:current
• E:past
• E:future
13. CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4
• E:active-drop
Elemento que vai receber o elemento que está sendo
arrastado
• E:valid-drop
Elemento que pode receber o elemento arrastado
• E:invalid-drop
(!E:valid-drop)
14. CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4
• E:valid && E:invalid
Input válido ou inválido de acordo com a validação
HTML (type email, required, pattern=“[0-9]”)
• E:required && E:optional
Elementos que tem ou não o atributo required
• E! > F
O pai do elemento :)
19. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media script
20. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media pointer
• none - não há dispositivo apontador;
• coarse - há dispositivo apontador de baixa precisão
(tela sensível ao toque);
• fine - há dispositivo apontador de alta precisão
(mouse, trackpad e tela sensível a Pen Stylus).
21. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media pointer
22. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media hover
23. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media luminosity
• dim - O dispositivo se encontra num ambiente escuro
ou com pouca iluminação.
• normal - O ambiente tem um nível ideal de
luminosidade.
• washed - O ambiente tem um nível muito claro ou até
excessivo em quantidade de lux.
24. M E D I A Q U E RY 4
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
• @media luminosity
52. ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Math
• Math.log10(x)
Realiza cálculos de logaritmos de base 10
• Math.log2(x)
Realiza cálculos de logaritmos de base 2
• Math.log1p(x)
Realiza cálculos de logaritmos naturais de 1 + x
• Math.cosh(x)
Co-seno hiperbólico de x.
• Math.sinh(x)
Seno hiperbólico de x.
• Math.tanh(x)
Tangente hiperbólica de x.
• Math.acosh(x)
Inverso do Co-seno hiperbólico de x.
• Math.asinh(x)
Inverso do Seno hiperbólico de x.
• Math.atanh(x)
Inverso da Tangente hiperbólica de x.
• Math.trunc(x)
Trás o número inteiro de x
53. ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Math
• Math.hypot(x,y[,z])
Retorna a raiz quadrada da soma dos quadrados
dos seus argumentos. (pode ser 2 ou 3
argumentos)(hipotenuza)
• Math.hypot2(x,y[,z])
Retorna a soma dos quadrados dos seus
argumentos. (pode ser 2 ou 3 argumentos)
(hipotenuza)
• Math.cbrt(x)
Raiz cúbica de x.
• Math.sign(x)
Indica se o número é positivo, negativo ou não é
um número. Ou seja, se x for -100 o resultado será
-1, se x for 50 o resultado será +1.
• Math.expm1(x)
Retorna um calculo preciso de uma função exponencial
de x com a base dos logaritmos naturais
• Math.imul(x,y)
Retorna o resultado da multiplicação de 32 bits (C-like)
dos dois parâmetros. ex: Math.imul(0xfffffffe, 5) //-10
54. ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Number
• Number.EPSILON
Retorna o valor da diferença entre 1 e o menor
número maior que 1, que é equivalente a
2.2204460492503130808472633361816 x 10^-16
• Number.isInteger(x)
Retorna true se x for um número inteiro
• Number.isFinite(x)
Retorna true se x for um número finito
• Number.toInteger(x)
Transforma x em um número inteiro
• Number.isNaN(x)
Retorna true se x não for um número