Your SlideShare is downloading. ×
0
HTML, CSS & JS:

OLHANDO PRA FRENTE
flickr.com/tisdale53
LUIZ TIAGO
• CTO @ MGR Tecnologia
• Pós graduado em

Desenvolvimento Mobile @
CESAR

• Graduado em Sistemas para

Internet...
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...
DOM LEVEL 4
http://www.w3.org/TR/2013/WD-dom-20131107/

• Working Draft - 07 November 2013
• Abstract


DOM define um mode...
DOM LEVEL 4
• Feature Detection

Modernizr is a JavaScript library
that detects HTML5 and CSS3
features in the user’s brow...
DOM LEVEL 4
• Better Class’s Manipulation
CSS SELECTORS

LEVEL 4

flickr.com/doug88888
CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4

• E:local-link


Qualquer link que o destino já seja a página at...
CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4

• E:active-drop


Elemento que vai receber o elemento que está s...
CSS SELECTORS LEVEL 4
http://dev.w3.org/csswg/selectors4

• E:valid && E:invalid


Input válido ou inválido de acordo com ...
CSS SELECTORS

LEVEL 5

Ideas to consider
CSS SELECTORS LEVEL 5
http://wiki.csswg.org/spec/selectors

• ::first-words(n)
• ::first-lines(n)
• ::nth-line(an+b)
• ::las...
CSS SELECTORS LEVEL 5
http://wiki.csswg.org/spec/selectors

• ::dragging
• :time


[ before <time> | after <time> | <time>...
MEDIA
Q U E RY

4
flickr.com/randomgirl
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/

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

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

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

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

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

...
.1
HTML5.1
http://www.w3.org/wiki/HTML/next

• capture


input [ filesystem, camera, camcorder, microphone ]
HTML5.1
http://www.w3.org/wiki/HTML/next

• download

HTML5.1
http://www.w3.org/wiki/HTML/next

• Elements
• <reco> (Speech Web API)
• <tts> (Speech Web API)
• <intent> (Web It...
HTML5.1
http://www.w3.org/wiki/HTML/next

• Web Components
• <template>
• <content>
• <decorator>
• <element>
• <shadow>
HTML5.1 - IDEAS
http://www.w3.org/wiki/HTML/next

• Decompress Element <decompress>
• Inputable <Select>
• <Audio> Balance...
ECMASCRIPT 6

flickr.com/evarinaldiphotography
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Sets


Lista com elementos únicos orde...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Sets


Lista com elementos únicos orde...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Maps


Lista com elementos únicos orde...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• WeakMaps


Lista com elementos únicos ...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Iterators for-of


Permite iteração em...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Generators


Permite iteração em array...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Arrow Functions


Simples e elegante <...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Default Parameters


Simples e elegant...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• REST Parameters


Simples e elegante [...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• let


Variáveis com escopo em bloco
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• const


Também com escopo em bloco ape...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Objetos tipados
• uint8: Inteiros posi...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Objetos tipados
• float32 : Números com...
ECMASCRIPT 6
CLASSES
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Classes


Declaração
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Classes


Herança
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Modules


“CommonJS + RequireJS”
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Modules


“CommonJS + RequireJS”
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Proxies
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Better Math
• Math.log10(x)


Realiza ...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Better Math
• Math.hypot(x,y[,z])


Re...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Better Number
• Number.EPSILON


Retor...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Template Strings
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• startsWith


String.startsWith(searchS...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• endsWith


String.endsWith(searchStrin...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• contains


String.contains(searchStrin...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• toArray


String.toArray()
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• repeat


String.repeat(n)
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• from & of


Array.from(arrayLikeElemen...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• find, findIndex


Array.prototype.find(f...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• fill


Array.prototype.fill(value, star...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• assign


Object.assign(target, source)...
ECMASCRIPT 6
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• is


Object.is(value1, value2)
ECMASCRIPT 7+
ECMASCRIPT 7+
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Novas tipagens: bignum, rational, sym...
ECMASCRIPT 7+
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Brander
• Relationships (x @ r = 10;)...
ECMASCRIPT 7+
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Possibly lexically nested modules
• P...
OBRIGADO, RECIFE! (:

!

@luiztiago

luiztiago@luiztiago.com

@guiky

guilherme@guiky.com.br

HTML, CSS & JS: olhando pra frente
HTML, CSS & JS: olhando pra frente
HTML, CSS & JS: olhando pra frente
HTML, CSS & JS: olhando pra frente
HTML, CSS & JS: olhando pra frente
Upcoming SlideShare
Loading in...5
×

HTML, CSS & JS: olhando pra frente

741

Published on

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

Published in: Technology

Transcript of "HTML, CSS & JS: olhando pra frente"

  1. 1. HTML, CSS & JS: OLHANDO PRA FRENTE flickr.com/tisdale53
  2. 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. 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
  4. 4. DOM LEVEL 4 http://www.w3.org/TR/2013/WD-dom-20131107/ • Working Draft - 07 November 2013 • Abstract
 DOM define um modelo de plataforma para eventos, promises e document nodes.
  5. 5. DOM LEVEL 4 • Feature Detection Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  6. 6. DOM LEVEL 4 • Better Class’s Manipulation
  7. 7. CSS SELECTORS LEVEL 4 flickr.com/doug88888
  8. 8. 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
  9. 9. 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)
  10. 10. 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 :)
  11. 11. CSS SELECTORS LEVEL 5 Ideas to consider
  12. 12. CSS SELECTORS LEVEL 5 http://wiki.csswg.org/spec/selectors • ::first-words(n) • ::first-lines(n) • ::nth-line(an+b) • ::last-line • ::quote-start • ::quote-end
  13. 13. CSS SELECTORS LEVEL 5 http://wiki.csswg.org/spec/selectors • ::dragging • :time
 [ before <time> | after <time> | <time> to <time> ]
 Controlar durante uma transição CSS • :click && :clicked • :keydown && :keyup • :placeholder
  14. 14. MEDIA Q U E RY 4 flickr.com/randomgirl
  15. 15. 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
  16. 16. 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).
  17. 17. 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
  18. 18. 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
  19. 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 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.
  20. 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 luminosity
  21. 21. .1
  22. 22. HTML5.1 http://www.w3.org/wiki/HTML/next • capture
 input [ filesystem, camera, camcorder, microphone ]
  23. 23. HTML5.1 http://www.w3.org/wiki/HTML/next • download

  24. 24. HTML5.1 http://www.w3.org/wiki/HTML/next • Elements • <reco> (Speech Web API) • <tts> (Speech Web API) • <intent> (Web Itents)
  25. 25. HTML5.1 http://www.w3.org/wiki/HTML/next • Web Components • <template> • <content> • <decorator> • <element> • <shadow>
  26. 26. HTML5.1 - IDEAS http://www.w3.org/wiki/HTML/next • Decompress Element <decompress> • Inputable <Select> • <Audio> Balance • Melhorias em <video>
  27. 27. ECMASCRIPT 6 flickr.com/evarinaldiphotography
  28. 28. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Sets
 Lista com elementos únicos ordenados
  29. 29. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Sets
 Lista com elementos únicos ordenados
  30. 30. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Maps
 Lista com elementos únicos ordenados, mas com chave/valor
  31. 31. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • WeakMaps
 Lista com elementos únicos ordenados, mas com chave/valor, mas a chave não pode ser primitivo.
  32. 32. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Iterators for-of
 Permite iteração em arrays e collections, e traz como resultado os valores dos elementos.
  33. 33. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Generators
 Permite iteração em arrays e collections, e traz como resultado os valores dos elementos.
  34. 34. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Arrow Functions
 Simples e elegante <3
  35. 35. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Default Parameters
 Simples e elegante [2] <3
  36. 36. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • REST Parameters
 Simples e elegante [3] <3
  37. 37. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • let
 Variáveis com escopo em bloco
  38. 38. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • const
 Também com escopo em bloco apenas
  39. 39. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Objetos tipados • uint8: Inteiros positivos de 8-bit
 uint16: Inteiros positivos de 16-bit
 uint32: Inteiros positivos de 32-bit • int8: Inteiros (positivos e negativos) de 8-bit
 int16: Inteiros (positivos e negativos) de 16-bit 
 int32: Inteiros (positivos e negativos) de 32-bit
  40. 40. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Objetos tipados • float32 : Números com pontos flutuantes de 32-bit 
 float64 : Números com pontos flutuantes de 64-bit • boolean : Valor booleano primitivo do ECMAScript • string : String primitiva do ECMAScript
  41. 41. ECMASCRIPT 6 CLASSES
  42. 42. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Classes
 Declaração
  43. 43. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Classes
 Herança
  44. 44. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Modules
 “CommonJS + RequireJS”
  45. 45. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Modules
 “CommonJS + RequireJS”
  46. 46. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Proxies
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Template Strings
  51. 51. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • startsWith
 String.startsWith(searchString,position)
  52. 52. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • endsWith
 String.endsWith(searchString,position)
  53. 53. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • contains
 String.contains(searchString,position)
  54. 54. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • toArray
 String.toArray()
  55. 55. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • repeat
 String.repeat(n)
  56. 56. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • from & of
 Array.from(arrayLikeElements) & Array.of(elements)
  57. 57. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • find, findIndex
 Array.prototype.find(fn) & Array.prototype.findIndex(fn)
  58. 58. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • fill
 Array.prototype.fill(value, start, end)
  59. 59. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • assign
 Object.assign(target, source) • Faz uma cópia profunda do objeto, incluindo os dados de target para dentro do objeto source. Isso é muito util quando se trabalha com com objetos complexos, devido a forma que o javascript trabalha com os ponteiros para posições de memórias de objetos.
  60. 60. ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • is
 Object.is(value1, value2)
  61. 61. ECMASCRIPT 7+
  62. 62. ECMASCRIPT 7+ http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Novas tipagens: bignum, rational, symbol, complex… • Sobrecarga de operadores • Traits (estrutura parecida com a do PHP) • Trademarks • Guards • Brander
  63. 63. ECMASCRIPT 7+ http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Brander • Relationships (x @ r = 10;) • Distributed persistence • Code isolation • Weak References • Quasi-parsers for JS, HTML, CSS
  64. 64. ECMASCRIPT 7+ http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Possibly lexically nested modules • Parallel array (SIMD - Single instruction, multiple data) • Distribution compatible promises (at least Promises/A +) • Communicating Event Loop concurrency model
  65. 65. OBRIGADO, RECIFE! (: ! @luiztiago
 luiztiago@luiztiago.com @guiky
 guilherme@guiky.com.br

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×