Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,106 views

Published on

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
  • Be the first to comment

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

  1. 1. NOME DA APRESENTAÇÃONome (Nick no Fórum)25 DE MAIO @MICROSOFTHTML5 e CSS3 – lets do it fastSérgio Laranjeira (sergio3861)
  2. 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. 3. Ficheiros e código-fonte- Todo o código em:https://github.com/sergio3861/html5- Exemplo finalhttp://nqda.pt/html5# 3
  4. 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. 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. 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. 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. 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. 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. 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. 11. Patrocinador GoldPatrocinadores Silver
  12. 12. Media Partners
  13. 13. Obrigadosergio@laranjeira.pt916 287 013http://nqda.pthttp://laranjeira.pt/http://www.facebook.com/sergio.laranjeirahttp://www.linkedin.com/in/sergiolaranjeira

×