Aula expotec

386 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
386
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula expotec

  1. 1. Montagem Front Endutilizando ferramentas facilitadoras para uma tarefa inspiradora Cesimar Xavier
  2. 2. Menu de hoje
  3. 3. HTMLHTML é a linguagem para descrever a estrutura daspáginas dá aos autores a possibilidade de: HTML web.  Publicar documentos on-line com títulos, textos, tabelas, listas, fotos, etc;  Recuperar informações on-line através de links de hipertexto, com o clique de um botão;
  4. 4. HTMLHTML é a linguagem para descrever a estrutura daspáginas dá aos autores a possibilidade de: HTML web.  Projeto forma para a realização de transações com serviços remotos, para uso na busca de informações, reservas, encomenda de produtos, etc;  Incluir folhas de difusão, videoclipes, clipes de som e outras aplicações diretamente em seus documentos.
  5. 5. HTMLExemplo de código
  6. 6. CSSCSS é a sigla em inglês para Cascading Style Sheet que emportuguês foi traduzido para folha de estilo em cascata e é definidacomo: de estilo em cascata é um mecanismo simples para adicionar estilos “Folha (p.ex., fontes, cores, espaçamentos) aos documentos Web”  Vantagens:  Separar a marcação HTML;  Distribuir um documento CSS para várias páginas;  Etc.
  7. 7. CSSExemplo de código:
  8. 8. Java ScriptJavaScript é uma linguagem de script baseada em ECMAScript. Éatualmente a principal linguagem para programação client-side emnavegadores web.
  9. 9. JQueryjQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client sideque interagem com o HTML. Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por JohnResig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular dasbibliotecas JavaScript.Exemplo de código:
  10. 10. Twitter BootstrapQuais as vantagens de ter o Bootstrap no início do projeto ou até mesmo usar o bootstrap do twitter?  Elementos do grid (também elementos fluidos);
  11. 11. Twitter BootstrapQuais as vantagens de ter o Bootstrap no início do projeto ou até mesmo usar o bootstrap do twitter?  Responsive Design;
  12. 12. Twitter Bootstrap Responsive Design;Classes utilitárias para design responsive
  13. 13. Twitter Bootstrap  Formulários;
  14. 14. Twitter Bootstrap Tipografia;
  15. 15. Twitter Bootstrap Tabelas;
  16. 16. Twitter Bootstrap Botões;
  17. 17. Twitter Bootstrap Ícones;
  18. 18. Twitter BootstrapBaixando o bootstrap  http://twitter.github.com/bootstrap/
  19. 19. Twitter BootstrapDesenvolvendo
  20. 20. Twitter BootstrapTemplate de teste 1
  21. 21. Twitter BootstrapTemplate de teste 1
  22. 22. Twitter BootstrapTemplate de teste 2
  23. 23. Twitter BootstrapTemplate de teste 3
  24. 24. BibliografiaMaujor. Disponível em: <http://www.maujor.com/index.php>. Acesso em 20/11/2012.Iniciando com JQuery. Disponível em: <http://www.professorburnes.com/arquivos/2si_3007/>. Acesso em 20/11/2012.W3C: HTML & CSS. Disponível em: <http://www.w3.org/standards/webdesign/htmlcss>. Acesso em 22/11/2012.Wikipedia: HTML. Disponível em: <http://pt.wikipedia.org/wiki/HTML>. Acesso em 22/11/2012.Wikipedia: Java Script. Disponível em: <http://pt.wikipedia.org/wiki/JavaScript>. Acesso em 22/11/2012.Wikipedia: Cascading Style Sheets. Disponível em: <http://pt.wikipedia.org/wiki/Cascading_Style_Sheets>. Acesso em 22/11/2012.JQuery. Disponível em: <http://jquery.com/>. Acesso em 02/12/2012.Themes for Twitter Bootstrap. Disponível em: <https://wrapbootstrap.com/ >. Acesso em 19/12/2012.

×