Your SlideShare is downloading. ×
HTML5 e CSS3 – rápido e eficaz para o presente
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 e CSS3 – rápido e eficaz para o presente

723
views

Published on

Por Sérgio Laranjeira …

Por Sérgio Laranjeira

Como o HTML5 e CSS3 têm vindo a mudar as interfaces e como podemos aproveitar os recursos que existem para rapidamente desenvolver protótipos e plataformas funcionais. Estas tecnologias ajudam a rapidamente resolvermos problemas de forma rápida se as dominarmos e é isso que se pretende nesta apresentação

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
723
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. NOME DA APRESENTAÇÃONome (Nick no Fórum)25 DE MAIO @MICROSOFTHTML5 e CSS3 – lets do it fastSérgio Laranjeira (sergio3861)
  • 2. HTML5 ou HTMLO HTML já é o HTML5# 2Breves notas:- Existem milhares de outrasformas de criar o exemplo quevamos construir.- não é inovador, não vai mudar omundo e de certeza que não vosvai tornar ainda mais bonitos!- Vamos usar conceitos básicos,ferramentas disponíveis na web,e o Twitter Bootstrapp
  • 3. Ficheiros e código-fonte- Todo o código em:https://github.com/sergio3861/html5- Exemplo finalhttp://nqda.pt/html5# 3
  • 4. Step 1- FIGHT!!# 4http://www.initializr.com/Começar um projecto em 15 segundos:- Responsive BootStrap 2.3.0- Modernizr e Respond- Jquery Minified- htacess e plugins.jsResultado: http://nqda.pt/html5/step1
  • 5. Step 2- Clean the FIGHT!!# 5- Limpar código desnecessário- “Juntar” todos os estilos- Criar o nosso Olá Mundo- Validar o nosso código - http://validator.w3.org/- Criar o nosso Olá Mundo (header, content,footer)- Só vamos editar index.html, main.css, plugin.js e main.jsResultado: http://nqda.pt/html5/step2
  • 6. Step 3- skin your fight# 6- Podemos usar uma skin de bootstrap (bootswatch.com)http://bootswatch.com/flatly/bootstrap.min.css- E dar estilo ao nosso header e footerhttp://www.colorzilla.com/gradient-editor/Resultado: http://nqda.pt/html5/step3
  • 7. Step 4- train new fight# 7- Usar elemento main- Estruturar os nossos posts- Criar estrutura para o post (article)- Dar-lhe o nosso estilo (usar css3 para isso)http://css3generator.com/- E está pronto para ser usado como templateResultado: http://nqda.pt/html5/step4
  • 8. Step 5- templating# 8- Usar livraria jquery para templateshttps://github.com/BorisMoore/jquery-tmpl- Incluir no ficheiro plugins.js e chamar no main.js- Podemos criar um botão com css3http://css-tricks.com/examples/ButtonMaker/...e ter animação:http://www.css3maker.com/css3-transform.htmlResultado: http://nqda.pt/html5/step5
  • 9. Step 6- final fight# 9- E por fim umas regras para o responsive designO bootstrapp faz já muita coisa por si só, mas vamosadicionar umas regras.@media (max-width: 767px)@media (max-width: 480px)Resultado: http://nqda.pt/html5/step6
  • 10. Find out more...# 10HTML5 doctorhttp://html5doctor.com/Twitter Bootstrapphttp://twitter.github.io/bootstrap/Criador de Jogoshttps://www.scirra.com/construct2Conversor de Vídeoshttp://easyhtml5video.com/Testar o browser para HTML 5http://html5test.com/
  • 11. Patrocinador GoldPatrocinadores Silver
  • 12. Media Partners
  • 13. Obrigadosergio@laranjeira.pt916 287 013http://nqda.pthttp://laranjeira.pt/http://www.facebook.com/sergio.laranjeirahttp://www.linkedin.com/in/sergiolaranjeira

×