aula expotec

24
Montagem Front End Cesimar Xavier utilizando ferramentas facilitadoras para uma tarefa inspiradora

Upload: cesimar-xavier

Post on 13-Apr-2017

394 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Aula expotec

Montagem Front End

Cesimar Xavier

utilizando ferramentas facilitadoras para uma tarefa inspiradora

Page 2: Aula expotec

Menu de hoje

Page 3: Aula expotec

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

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

HTML

Exemplo de código

Page 6: Aula expotec

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

CSSExemplo de código:

Page 8: Aula expotec

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

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

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

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

Twitter Bootstrap Responsive Design;

Classes utilitárias para design responsive

Page 13: Aula expotec

Twitter Bootstrap Formulários;

Page 14: Aula expotec

Twitter Bootstrap Tipografia;

Page 15: Aula expotec

Twitter Bootstrap Tabelas;

Page 16: Aula expotec

Twitter Bootstrap Botões;

Page 17: Aula expotec

Twitter Bootstrap Ícones;

Page 18: Aula expotec

Twitter BootstrapBaixando o bootstrap

http://twitter.github.com/bootstrap/

Page 19: Aula expotec

Twitter BootstrapDesenvolvendo

Page 20: Aula expotec

Twitter BootstrapTemplate de teste 1

Page 21: Aula expotec

Twitter BootstrapTemplate de teste 1

Page 22: Aula expotec

Twitter BootstrapTemplate de teste 2

Page 23: Aula expotec

Twitter BootstrapTemplate de teste 3

Page 24: Aula expotec

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.