Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.165 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×