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