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)

Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
Product School
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
@cristianoweb
 
I love pixels
I love pixelsI love pixels
I love pixels
Ítalo Waxman
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
André Silveira
 
Clean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissionalClean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissional
Leo Baiano
 
Domain Driven Design: como modelar uma aplicação em Node.js com DDD
Domain Driven Design: como modelar uma aplicação em Node.js com DDDDomain Driven Design: como modelar uma aplicação em Node.js com DDD
Domain Driven Design: como modelar uma aplicação em Node.js com DDD
Daniel Baptista Dias
 
Publicação de trabalhos na Web
Publicação de trabalhos na WebPublicação de trabalhos na Web
Publicação de trabalhos na Web
Gabriel Ishida
 
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
 
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte Tecnologia da Informação
 
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte intranet  - A melhor intranet do mercado, rápida, definitiva e com audi...Digte intranet  - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte Tecnologia da Informação
 
Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte intranet - Construa sua intranet em poucos cliques fluig®Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte Tecnologia da Informação
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
Hiarison Gigante
 
PHPZEIRO: Adote um framework
PHPZEIRO: Adote um frameworkPHPZEIRO: Adote um framework
PHPZEIRO: Adote um framework
Leonardo "Hackin" Freire
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
Jackson F. de A. Mafra
 
Intranet by Digte - A melhor solução de comunicação interna do Brasil
Intranet by Digte - A melhor solução de comunicação interna do BrasilIntranet by Digte - A melhor solução de comunicação interna do Brasil
Intranet by Digte - A melhor solução de comunicação interna do Brasil
Digte Tecnologia da Informação
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
Aline Corso
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
Fabiano Pereira
 
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
tdc-globalcode
 
D de SOLID: Reduzindo o vendor lock-in em aplicações PHP
D de SOLID: Reduzindo o vendor lock-in em aplicações PHPD de SOLID: Reduzindo o vendor lock-in em aplicações PHP
D de SOLID: Reduzindo o vendor lock-in em aplicações PHP
Flávio Lisboa
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
Daniel Coscarelli
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
Product School
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
@cristianoweb
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
André Silveira
 
Clean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissionalClean code: programando com WordPress de forma profissional
Clean code: programando com WordPress de forma profissional
Leo Baiano
 
Domain Driven Design: como modelar uma aplicação em Node.js com DDD
Domain Driven Design: como modelar uma aplicação em Node.js com DDDDomain Driven Design: como modelar uma aplicação em Node.js com DDD
Domain Driven Design: como modelar uma aplicação em Node.js com DDD
Daniel Baptista Dias
 
Publicação de trabalhos na Web
Publicação de trabalhos na WebPublicação de trabalhos na Web
Publicação de trabalhos na Web
Gabriel Ishida
 
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audiê...
Digte Tecnologia da Informação
 
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte intranet  - A melhor intranet do mercado, rápida, definitiva e com audi...Digte intranet  - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte intranet - A melhor intranet do mercado, rápida, definitiva e com audi...
Digte Tecnologia da Informação
 
Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte intranet - Construa sua intranet em poucos cliques fluig®Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte intranet - Construa sua intranet em poucos cliques fluig®
Digte Tecnologia da Informação
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
Hiarison Gigante
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
Jackson F. de A. Mafra
 
Intranet by Digte - A melhor solução de comunicação interna do Brasil
Intranet by Digte - A melhor solução de comunicação interna do BrasilIntranet by Digte - A melhor solução de comunicação interna do Brasil
Intranet by Digte - A melhor solução de comunicação interna do Brasil
Digte Tecnologia da Informação
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
Aline Corso
 
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho...
tdc-globalcode
 
D de SOLID: Reduzindo o vendor lock-in em aplicações PHP
D de SOLID: Reduzindo o vendor lock-in em aplicações PHPD de SOLID: Reduzindo o vendor lock-in em aplicações PHP
D de SOLID: Reduzindo o vendor lock-in em aplicações PHP
Flávio Lisboa
 
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)

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
 
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
 
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
 
Introdução_Informática_Aula_nº2_2024.pptx
Introdução_Informática_Aula_nº2_2024.pptxIntrodução_Informática_Aula_nº2_2024.pptx
Introdução_Informática_Aula_nº2_2024.pptx
RaimundoCuco3
 
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
 
Introdução_Informática_Aula_nº16_2024.pptx
Introdução_Informática_Aula_nº16_2024.pptxIntrodução_Informática_Aula_nº16_2024.pptx
Introdução_Informática_Aula_nº16_2024.pptx
RaimundoCuco3
 
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
 
Aula de POO, Classes, objetos e encapsulamento
Aula de POO, Classes, objetos e encapsulamentoAula de POO, Classes, objetos e encapsulamento
Aula de POO, Classes, objetos e encapsulamento
EmliaNogueira5
 
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
 
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
 
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
 
Introdução_Informática_Aula_nº2_2024.pptx
Introdução_Informática_Aula_nº2_2024.pptxIntrodução_Informática_Aula_nº2_2024.pptx
Introdução_Informática_Aula_nº2_2024.pptx
RaimundoCuco3
 
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
 
Introdução_Informática_Aula_nº16_2024.pptx
Introdução_Informática_Aula_nº16_2024.pptxIntrodução_Informática_Aula_nº16_2024.pptx
Introdução_Informática_Aula_nº16_2024.pptx
RaimundoCuco3
 
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
 
Aula de POO, Classes, objetos e encapsulamento
Aula de POO, Classes, objetos e encapsulamentoAula de POO, Classes, objetos e encapsulamento
Aula de POO, Classes, objetos e encapsulamento
EmliaNogueira5
 

Ninja html 5 css javascript