• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Quero ser um ninja em xHTML, HTML5 e CSS3
 

Quero ser um ninja em xHTML, HTML5 e CSS3

on

  • 3,440 views

Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de ...

Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3.

Statistics

Views

Total Views
3,440
Views on SlideShare
3,432
Embed Views
8

Actions

Likes
17
Downloads
73
Comments
2

3 Embeds 8

http://www.linkedin.com 6
https://www.linkedin.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

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

    Quero ser um ninja em xHTML, HTML5 e CSS3 Quero ser um ninja em xHTML, HTML5 e CSS3 Presentation Transcript

    • Bernard De Luna @bernarddelunaEspecialista 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 doJapão feudal especializado em artes deguerra não ortodoxas.
    • Agente secreto
    • Que design bonito!
    • Quem fez esse sistema?
    • Nós construímos aquilo que ninguém vê, nós somos agentes secretos.
    • Mercenário
    • Qualquer pessoa pode ser um ninja
    • Planejamento de Corte
    • PNG não pega efeito multiply nem outros efeitos de camada.
    • Ícones usados na interface devemestar separados em uma pasta física
    • Ícones são divididos em famílias, estilos e possuem tamanhos definidos
    • Toda interface tem seu fim
    • @EddieSouza1000px 1280px
    • 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
    • Designer conscientepensa no desenvolvedor
    • Comentados Organizados 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
    • Emmet! Zen codingA new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS
    • Sublime Text 2Quem disse que ferramenta não importa?
    • Documentação de código
    • Se o seu código não consegue serreutilizado, 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
    • DiscussãoPensar em navegadores antigos?
    • http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy
    • DiscussãoPensar em navegadores novos?
    • CSS = Como Ser Sexy
    • http://layerstyles.org/builder.htmlSeu Photoshop em CSS3
    • 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/
    • http://css3please.com/As principais declarações CSS3 em uma única página, CSS3 please!
    • CSS media queries
    • http://www.alistapart.com/d/responsive-web- http://colly.com/design/ex/ex-site-FINAL.html
    • 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/de safio-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