HTML, CSS & JS: olhando pra frente

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 @ FMR

• Co-fundador do

Pernambuco.JS / jQuery Brasil

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

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.

DOM LEVEL 4
• Feature Detection

Modernizr is a JavaScript library
that detects HTML5 and CSS3
features in the user’s browser.

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 atual

• E:current
• E:past
• E:future


• 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)


• 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 :)

CSS SELECTORS

LEVEL 5

Ideas to consider

http://wiki.csswg.org/spec/selectors

• ::ﬁrst-words(n)
• ::ﬁrst-lines(n)
• ::nth-line(an+b)
• ::last-line
• ::quote-start
• ::quote-end

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

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/

• @media script


• @media pointer
• none - não há dispositivo apontador;
• coarse - há dispositivo apontador de baixa precisão

(tela sensível ao toque);

• ﬁne - há dispositivo apontador de alta precisão

(mouse, trackpad e tela sensível a Pen Stylus).


• @media pointer


• @media hover


• @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.


• @media luminosity

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

• capture 

input [ filesystem, camera, camcorder, microphone ]

HTML5.1

• download

HTML5.1

• Elements
• <reco> (Speech Web API)
• <tts> (Speech Web API)
• <intent> (Web Itents)

HTML5.1

• Web Components
• <template>
• <content>
• <decorator>
• <element>
• <shadow>

HTML5.1 - IDEAS

• Decompress Element <decompress>
• Inputable <Select>
• <Audio> Balance
• Melhorias em <video>

ECMASCRIPT 6

flickr.com/evarinaldiphotography

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

• Sets 

Lista com elementos únicos ordenados

ECMASCRIPT 6

• Maps 

Lista com elementos únicos ordenados, mas com
chave/valor

ECMASCRIPT 6

• WeakMaps 

Lista com elementos únicos ordenados, mas com
chave/valor, mas a chave não pode ser primitivo.

ECMASCRIPT 6

• Iterators for-of 

Permite iteração em arrays e collections, e traz como
resultado os valores dos elementos.

ECMASCRIPT 6

• Generators 

Permite iteração em arrays e collections, e traz como
resultado os valores dos elementos.

ECMASCRIPT 6

• Arrow Functions 

Simples e elegante <3

ECMASCRIPT 6

• Default Parameters 

Simples e elegante [2] <3

ECMASCRIPT 6

• REST Parameters 

Simples e elegante [3] <3

ECMASCRIPT 6

• let 

Variáveis com escopo em bloco

ECMASCRIPT 6

• const 

Também com escopo em bloco apenas

ECMASCRIPT 6

• 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

ECMASCRIPT 6

• Objetos tipados
• ﬂoat32 : Números com pontos flutuantes de 32-bit  

ﬂoat64 : Números com pontos flutuantes de 64-bit

• boolean : Valor booleano primitivo do ECMAScript
• string : String primitiva do ECMAScript

ECMASCRIPT 6

• Classes 

Declaração

ECMASCRIPT 6

• Classes 

Herança

ECMASCRIPT 6

• Modules 

“CommonJS + RequireJS”

ECMASCRIPT 6

• Proxies

ECMASCRIPT 6

• 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

ECMASCRIPT 6

• 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

ECMASCRIPT 6

• 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

ECMASCRIPT 6

• Template Strings

ECMASCRIPT 6

• startsWith 

String.startsWith(searchString,position)

ECMASCRIPT 6

• endsWith 

String.endsWith(searchString,position)

ECMASCRIPT 6

• contains 

String.contains(searchString,position)

ECMASCRIPT 6

• toArray 

String.toArray()

ECMASCRIPT 6

• repeat 

String.repeat(n)

ECMASCRIPT 6

• from & of 

Array.from(arrayLikeElements) & Array.of(elements)

ECMASCRIPT 6

• ﬁnd, ﬁndIndex 

Array.prototype.find(fn) & Array.prototype.findIndex(fn)

ECMASCRIPT 6

• ﬁll 

Array.prototype.fill(value, start, end)

ECMASCRIPT 6

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

ECMASCRIPT 6

• is 

Object.is(value1, value2)

ECMASCRIPT 7+

• Novas tipagens: bignum, rational, symbol, complex…
• Sobrecarga de operadores
• Traits (estrutura parecida com a do PHP)
• Trademarks
• Guards
• Brander

ECMASCRIPT 7+

• Brander
• Relationships (x @ r = 10;)
• Distributed persistence
• Code isolation
• Weak References
• Quasi-parsers for JS, HTML, CSS

ECMASCRIPT 7+

• Possibly lexically nested modules
• Parallel array (SIMD - Single instruction, multiple data)
• Distribution compatible promises (at least Promises/A

+)

• Communicating Event Loop concurrency model

OBRIGADO, RECIFE! (:

!

@luiztiago 
luiztiago@luiztiago.com

@guiky 
guilherme@guiky.com.br

HTML, CSS & JS: olhando pra frente

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie HTML, CSS & JS: olhando pra frente

Ähnlich wie HTML, CSS & JS: olhando pra frente (20)

Mehr von Luiz Oliveira

Mehr von Luiz Oliveira (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

HTML, CSS & JS: olhando pra frente