Este documento apresenta um tutorial sobre como criar um site responsivo usando HTML5 e CSS3 em 6 etapas: 1) Começar um projeto usando o Initializr; 2) Limpar o código; 3) Adicionar estilos com Bootstrap; 4) Estruturar os posts; 5) Adicionar templates com jQuery; 6) Finalizar com regras responsivas. O objetivo é construir um template simples de blog usando tecnologias web modernas.

1. NOME DA APRESENTAÇÃO
Nome (Nick no Fórum)
25 DE MAIO @MICROSOFT
HTML5 e CSS3 – let's do it fast
Sérgio Laranjeira (sergio3861)

2. HTML5 ou HTML
O HTML já é o HTML5
# 2
Breves notas:
- Existem milhares de outras
formas de criar o exemplo que
vamos construir.
- não é inovador, não vai mudar o
mundo e de certeza que não vos
vai 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 final
http://nqda.pt/html5
# 3

4. Step 1- FIGHT!!
# 4
http://www.initializr.com/
Começar um projecto em 15 segundos:
- Responsive BootStrap 2.3.0
- Modernizr e Respond
- Jquery Minified
- htacess e plugins.js
Resultado: 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.js
Resultado: 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 footer
http://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 template
Resultado: http://nqda.pt/html5/step4

8. Step 5- templating
# 8
- Usar livraria jquery para templates
https://github.com/BorisMoore/jquery-tmpl
- Incluir no ficheiro plugins.js e chamar no main.js
- Podemos criar um botão com css3
http://css-tricks.com/examples/ButtonMaker/
...e ter animação:
http://www.css3maker.com/css3-transform.html
Resultado: http://nqda.pt/html5/step5

9. Step 6- final fight
# 9
- E por fim umas regras para o responsive design
O bootstrapp faz já muita coisa por si só, mas vamos
adicionar umas regras.
@media (max-width: 767px)
@media (max-width: 480px)
Resultado: http://nqda.pt/html5/step6

10. Find out more...
# 10
HTML5 doctor
http://html5doctor.com/
Twitter Bootstrapp
http://twitter.github.io/bootstrap/
Criador de Jogos
https://www.scirra.com/construct2
Conversor de Vídeos
http://easyhtml5video.com/
Testar o browser para HTML 5
http://html5test.com/

11. Patrocinador Gold
Patrocinadores Silver

12. Media Partners

13. Obrigado
sergio@laranjeira.pt
916 287 013
http://nqda.pt
http://laranjeira.pt/
http://www.facebook.com/sergio.laranjeira
http://www.linkedin.com/in/sergiolaranjeira