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

HTML, CSS & JS: olhando pra frente

on

  • 838 views

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

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

Statistics

Views

Total Views
838
Views on SlideShare
830
Embed Views
8

Actions

Likes
8
Downloads
12
Comments
0

2 Embeds 8

http://lanyrd.com 7
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML, CSS & JS: olhando pra frente HTML, CSS & JS: olhando pra frente Presentation Transcript

    • 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
    • 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)
    • 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 :)
    • 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) • ::last-line • ::quote-start • ::quote-end
    • 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
    • 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
    • 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).
    • 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
    • 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
    • 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.
    • 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
    • .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 Itents)
    • 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 • 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 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Sets
 Lista com elementos únicos ordenados
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Maps
 Lista com elementos únicos ordenados, mas com chave/valor
    • 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.
    • 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.
    • 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.
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Arrow Functions
 Simples e elegante <3
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • Default Parameters
 Simples e elegante [2] <3
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • REST Parameters
 Simples e elegante [3] <3
    • 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 apenas
    • 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
    • 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
    • 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 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 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
    • 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
    • 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(searchString,position)
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • endsWith
 String.endsWith(searchString,position)
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • contains
 String.contains(searchString,position)
    • 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(arrayLikeElements) & Array.of(elements)
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • find, findIndex
 Array.prototype.find(fn) & Array.prototype.findIndex(fn)
    • ECMASCRIPT 6 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts • fill
 Array.prototype.fill(value, start, end)
    • 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.
    • 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, symbol, complex… • Sobrecarga de operadores • Traits (estrutura parecida com a do PHP) • Trademarks • Guards • Brander
    • 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
    • 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
    • OBRIGADO, RECIFE! (: ! @luiztiago
 luiztiago@luiztiago.com @guiky
 guilherme@guiky.com.br