SlideShare uma empresa Scribd logo
Ninja html 5 css javascript
Bernard De Luna @bernarddeluna Especialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coordenador de Produto da Estante Virtual
Eu sou um ninja
NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.
Agente secreto
Que design bonito!
Quem fez esse sistema?
Ninja html 5 css javascript
Nós construímos aquilo que ninguém vê, nós somos agentes secretos.
Mercenário
Qualquer pessoa pode ser um ninja
Ninja html 5 css javascript
Planejamento de Corte
PNG não pega efeito multiply nem outros efeitos de camada.
Ninja html 5 css javascript
Ícones usados na interface devem estar separados em uma pasta física
Ninja html 5 css javascript
Ícones são divididos em famílias, estilos e possuem tamanhos definidos
Ninja html 5 css javascript
Toda interface tem seu fim
1000px 
1280px 
@EddieSouza
Se usar uma fonte diferente, coloque-a em uma pasta física
Não utilize mais de 2 fontes diferentes no projeto
Documentação do layout
Ninja html 5 css javascript
Ninja html 5 css javascript
Designer consciente pensa no desenvolvedor
Organizados 
Comentados 
Orientados 
e Limpos
Seja necessário pela sua qualidade e não pelo seu egoísmo. 
Comente o seu código
Ninjas não poderão pegá-lo se você estiver pegando fogo
Seja rápido como um ninja
Zen coding 
A new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS 
Emmet!
Sublime Text 2 
Quem disse que ferramenta não importa?
Ninja html 5 css javascript
Documentação de código
Se o seu código não consegue ser reutilizado, ele não está bom o bastante
Crie seu próprio Framework
Foque na função e não no estilo 
Nem no conteúdo
Tooltip 
<div class="tooltip”> 
<hgroup class="tooltip-h"> 
<h2 class="tooltip-tt">Reason:</h2> 
</hgroup> 
<section class="tooltip-body”></section> 
</div>
Modularização = Foco
Ninja html 5 css javascript
Discussão Pensar em navegadores antigos?
http://www.youtube.com/watch?v=lCPHbkb8J50 IE6: A Eulogy
Discussão Pensar em navegadores novos?
Ninja html 5 css javascript
Ninja html 5 css javascript
CSS = Como Ser Sexy
Seu Photoshop em CSS3 
http://layerstyles.org/builder.html
http://www.patternify.com
Criar um gradient CSS é tão fácil quanto fazer suco de groselha
Suco de groselha
http://lea.verou.me/css3patterns/
As principais declarações CSS3 em uma única página, CSS3 please! 
http://css3please.com/
CSS media queries
http://www.alistapart.com/d/responsive-web- design/ex/ex-site- FINAL.html 
http://colly.com/
http://hicksdesign.co.uk/ 
http://teegallery.com/
http://confboilerplate.com/
CSS Transitions: O novo movimento da web
http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html
CSS animation: O novo flash camuflado
-webkit-animation-name: nomedaanimacao;
@-webkit-keyframes nomedaanimacao { }
@-webkit-keyframes nomedaanimacao { 0% { background:#069; } 30% { background:#090; padding: 40px; transform: rotate(60deg) scale(1.85); } 50% { background:#F60; padding: 20px; transform: rotate(120deg) scale(2.85); } 80% { background:#C09; padding: 40px; transform: rotate(260deg) scale(1); } }
http://anthonycalzadilla.com/css3-ATAT/index.html
http://codingonweekend.com.br/
https://developer.mozilla.org/en- US/demos/detail/pure-css3-homer/launch
http://imasters.com.br/linguagens/css/desafio-css-imasters-cube
Efeitos e animações devem ser utilizados a favor do usuário e não para vender o profissional
Seja em xHTML
Seja em HTML5
Seja em CSS3
Seja em CSS animation
Qualquer pessoa pode ser um ninja
GO NINJA GO!
www.bernarddeluna.com 
@bernarddeluna

Mais conteúdo relacionado

Mais procurados (8)

Método The bridge
Método The bridgeMétodo The bridge
Método The bridge
Daniel Coscarelli
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
Felipe Fernandes
 
Asoso6
Asoso6Asoso6
Asoso6
Nathalia Soragge
 
Wordpress basico
Wordpress basicoWordpress basico
Wordpress basico
Paulo Henrique
 
Aula 5
Aula 5Aula 5
Aula 5
Jorge Andre Sousa
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
Ítalo Waxman
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
Marcel Guinther
 

Destaque (20)

HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
Mónica Ferreira
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
Carlos Henrique Muller
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
David Arty
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
Prudence
Prudence Prudence
Prudence
XtremOpus
 
DibujArte N°1
DibujArte N°1DibujArte N°1
DibujArte N°1
Adrian Gonzalez
 
Beware of Dangerous Woman
Beware of Dangerous WomanBeware of Dangerous Woman
Beware of Dangerous Woman
Anup Tiwari
 
WOMEN'S WORLD by Kibys 2014
WOMEN'S WORLD by Kibys 2014WOMEN'S WORLD by Kibys 2014
WOMEN'S WORLD by Kibys 2014
La Corseteria
 
L&PM Pocket Mangá
L&PM Pocket MangáL&PM Pocket Mangá
L&PM Pocket Mangá
Fernanda Scherer
 
De MILLUS LINGERIES 8 9-10-2015
De MILLUS LINGERIES 8 9-10-2015 De MILLUS LINGERIES 8 9-10-2015
De MILLUS LINGERIES 8 9-10-2015
Lusani Dias
 
Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13Revista DeMillus campanhas 11-12-13
Revista DeMillus campanhas 11-12-13
Raquel Elena
 
Como Se Tornar Uma Consultora Lageli
Como Se Tornar Uma Consultora LageliComo Se Tornar Uma Consultora Lageli
Como Se Tornar Uma Consultora Lageli
Webfoco Publicidade e Informatica
 
Coelhinas Da Playboy
Coelhinas Da PlayboyCoelhinas Da Playboy
Coelhinas Da Playboy
hmoniz
 
Heavy Metal
Heavy MetalHeavy Metal
Heavy Metal
Kamila Assink de Liz
 
Anúncio

Semelhante a Ninja html 5 css javascript (20)

Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de LunaQuero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Bunee.io - Hiring with Intelligence
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Bunee.io - Hiring with Intelligence
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
tdc-globalcode
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
João Paulo Barbosa Neto
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
Ricardo Pereira Rodrigues
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
Julio Vedovatto
 
Apostila css
Apostila cssApostila css
Apostila css
mantrin
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
Css
Css   Css
Css
Clara Ferreira
 
Hyojun Sass Standards 1/2
Hyojun Sass Standards 1/2Hyojun Sass Standards 1/2
Hyojun Sass Standards 1/2
Marcelo Carneiro
 
CSS: Introdução no Webdesign
CSS: Introdução no WebdesignCSS: Introdução no Webdesign
CSS: Introdução no Webdesign
Renato Melo
 
Sass - css bomba[do]
Sass - css bomba[do]Sass - css bomba[do]
Sass - css bomba[do]
Andréa Zambrana
 
Sass, css bomda[do]
Sass, css bomda[do]Sass, css bomda[do]
Sass, css bomda[do]
FEMUG-CWB
 
Minicurso CSS
Minicurso CSSMinicurso CSS
Minicurso CSS
Wilker Iceri
 
CSS com classe
CSS com classeCSS com classe
CSS com classe
Saulo Pratti
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Css e html básico
Css e html básicoCss e html básico
Css e html básico
bigtofu
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
Eduardo Shiota Yasuda
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
tdc-globalcode
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
João Paulo Barbosa Neto
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
Julio Vedovatto
 
Apostila css
Apostila cssApostila css
Apostila css
mantrin
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
CSS: Introdução no Webdesign
CSS: Introdução no WebdesignCSS: Introdução no Webdesign
CSS: Introdução no Webdesign
Renato Melo
 
Sass, css bomda[do]
Sass, css bomda[do]Sass, css bomda[do]
Sass, css bomda[do]
FEMUG-CWB
 
Css e html básico
Css e html básicoCss e html básico
Css e html básico
bigtofu
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
Eduardo Shiota Yasuda
 
Anúncio

Mais de Danilo Sousa (11)

Sass - Tutorial
Sass - TutorialSass - Tutorial
Sass - Tutorial
Danilo Sousa
 
Templates js-
Templates js-Templates js-
Templates js-
Danilo Sousa
 
jquery examples
jquery examplesjquery examples
jquery examples
Danilo Sousa
 
VISUAL CHEAT SHEET
VISUAL CHEAT SHEETVISUAL CHEAT SHEET
VISUAL CHEAT SHEET
Danilo Sousa
 
Iniciando com jquery
Iniciando com jqueryIniciando com jquery
Iniciando com jquery
Danilo Sousa
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
Danilo Sousa
 
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
Danilo Sousa
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
Danilo Sousa
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
Danilo Sousa
 
CSS 3 Overview
CSS 3 OverviewCSS 3 Overview
CSS 3 Overview
Danilo Sousa
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
Danilo Sousa
 
VISUAL CHEAT SHEET
VISUAL CHEAT SHEETVISUAL CHEAT SHEET
VISUAL CHEAT SHEET
Danilo Sousa
 
Iniciando com jquery
Iniciando com jqueryIniciando com jquery
Iniciando com jquery
Danilo Sousa
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
Danilo Sousa
 
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
Danilo Sousa
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
Danilo Sousa
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
Danilo Sousa
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
Danilo Sousa
 

Último (8)

Open Source: Ferramentas Gratuitas Incríveis
Open Source: Ferramentas Gratuitas IncríveisOpen Source: Ferramentas Gratuitas Incríveis
Open Source: Ferramentas Gratuitas Incríveis
Danilo Pinotti
 
Aula de POO, Herança, Composição, Polimorfismo
Aula de POO, Herança, Composição, PolimorfismoAula de POO, Herança, Composição, Polimorfismo
Aula de POO, Herança, Composição, Polimorfismo
EmliaNogueira5
 
Trailblazer Community de São Paulo - Explorando APEX
Trailblazer Community de São Paulo - Explorando APEXTrailblazer Community de São Paulo - Explorando APEX
Trailblazer Community de São Paulo - Explorando APEX
Francisco Vieira Júnior
 
Aula de Pesquisa Operacional Revisão de Álgebra linear
Aula de Pesquisa Operacional Revisão de Álgebra linearAula de Pesquisa Operacional Revisão de Álgebra linear
Aula de Pesquisa Operacional Revisão de Álgebra linear
EmliaNogueira5
 
sistemaoperacionalauladf=etecnologiaasss
sistemaoperacionalauladf=etecnologiaassssistemaoperacionalauladf=etecnologiaasss
sistemaoperacionalauladf=etecnologiaasss
ykira3820
 
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho ConcurdeFuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Rodolpho Concurde
 
Considerações sobre Aspectos Normativos do Projeto de Estruturas de Concreto
Considerações  sobre Aspectos Normativos do Projeto de Estruturas de ConcretoConsiderações  sobre Aspectos Normativos do Projeto de Estruturas de Concreto
Considerações sobre Aspectos Normativos do Projeto de Estruturas de Concreto
NicforoMedeiros1
 
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdfTrabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
JuanMalafaia
 
Open Source: Ferramentas Gratuitas Incríveis
Open Source: Ferramentas Gratuitas IncríveisOpen Source: Ferramentas Gratuitas Incríveis
Open Source: Ferramentas Gratuitas Incríveis
Danilo Pinotti
 
Aula de POO, Herança, Composição, Polimorfismo
Aula de POO, Herança, Composição, PolimorfismoAula de POO, Herança, Composição, Polimorfismo
Aula de POO, Herança, Composição, Polimorfismo
EmliaNogueira5
 
Trailblazer Community de São Paulo - Explorando APEX
Trailblazer Community de São Paulo - Explorando APEXTrailblazer Community de São Paulo - Explorando APEX
Trailblazer Community de São Paulo - Explorando APEX
Francisco Vieira Júnior
 
Aula de Pesquisa Operacional Revisão de Álgebra linear
Aula de Pesquisa Operacional Revisão de Álgebra linearAula de Pesquisa Operacional Revisão de Álgebra linear
Aula de Pesquisa Operacional Revisão de Álgebra linear
EmliaNogueira5
 
sistemaoperacionalauladf=etecnologiaasss
sistemaoperacionalauladf=etecnologiaassssistemaoperacionalauladf=etecnologiaasss
sistemaoperacionalauladf=etecnologiaasss
ykira3820
 
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho ConcurdeFuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Fuzzing: Finding Your Own Bugs and 0days! 2.0 PT-BR by Rodolpho Concurde
Rodolpho Concurde
 
Considerações sobre Aspectos Normativos do Projeto de Estruturas de Concreto
Considerações  sobre Aspectos Normativos do Projeto de Estruturas de ConcretoConsiderações  sobre Aspectos Normativos do Projeto de Estruturas de Concreto
Considerações sobre Aspectos Normativos do Projeto de Estruturas de Concreto
NicforoMedeiros1
 
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdfTrabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
Trabalho Informática 2040 Eduardo Gomes - Carrinho Bluetooth.pdf
JuanMalafaia
 

Ninja html 5 css javascript