aula expotec
TRANSCRIPT
![Page 1: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/1.jpg)
Montagem Front End
Cesimar Xavier
utilizando ferramentas facilitadoras para uma tarefa inspiradora
![Page 2: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/2.jpg)
Menu de hoje
![Page 3: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/3.jpg)
HTML
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;
HTML é a linguagem para descrever a estrutura das páginas web.HTML dá aos autores a possibilidade de:
![Page 4: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/4.jpg)
HTML
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.
HTML é a linguagem para descrever a estrutura das páginas web.HTML dá aos autores a possibilidade de:
![Page 5: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/5.jpg)
HTML
Exemplo de código
![Page 6: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/6.jpg)
CSS
Vantagens: Separar a marcação HTML;
Distribuir um documento CSS para várias páginas;
Etc.
CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como:“Folha de estilo em cascata é um mecanismo simples para
adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web”
![Page 7: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/7.jpg)
CSSExemplo de código:
![Page 8: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/8.jpg)
Java ScriptJavaScript é uma linguagem de script baseada em
ECMAScript. É atualmente a principal linguagem para
programação client-side em navegadores web.
![Page 9: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/9.jpg)
JQueryjQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts
client side que interagem com o HTML. Ela foi lançada em janeiro de 2006 no BarCamp de
Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do
mundo, jQuery é a mais popular das bibliotecas JavaScript.
Exemplo de código:
![Page 10: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/10.jpg)
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);
![Page 11: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/11.jpg)
Twitter BootstrapQuais as vantagens de ter o Bootstrap no início do projeto ou até mesmo usar o
bootstrap do twitter?
Responsive Design;
![Page 12: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/12.jpg)
Twitter Bootstrap Responsive Design;
Classes utilitárias para design responsive
![Page 13: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/13.jpg)
Twitter Bootstrap Formulários;
![Page 14: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/14.jpg)
Twitter Bootstrap Tipografia;
![Page 15: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/15.jpg)
Twitter Bootstrap Tabelas;
![Page 16: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/16.jpg)
Twitter Bootstrap Botões;
![Page 17: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/17.jpg)
Twitter Bootstrap Ícones;
![Page 18: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/18.jpg)
Twitter BootstrapBaixando o bootstrap
http://twitter.github.com/bootstrap/
![Page 19: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/19.jpg)
Twitter BootstrapDesenvolvendo
![Page 20: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/20.jpg)
Twitter BootstrapTemplate de teste 1
![Page 21: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/21.jpg)
Twitter BootstrapTemplate de teste 1
![Page 22: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/22.jpg)
Twitter BootstrapTemplate de teste 2
![Page 23: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/23.jpg)
Twitter BootstrapTemplate de teste 3
![Page 24: Aula expotec](https://reader034.vdocuments.site/reader034/viewer/2022051502/58eef0771a28ab47138b460b/html5/thumbnails/24.jpg)
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.