Aula expotec

Montagem Front End

Cesimar Xavier

utilizando ferramentas facilitadoras para uma tarefa inspiradora

Menu de hoje

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:

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:

HTML

Exemplo de código

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”

CSSExemplo de código:

Java ScriptJavaScript é uma linguagem de script baseada em

ECMAScript. É atualmente a principal linguagem para

programação client-side em navegadores web.

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:

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);

Twitter BootstrapQuais as vantagens de ter o Bootstrap no início do projeto ou até mesmo usar o

bootstrap do twitter?

Responsive Design;

Twitter Bootstrap Responsive Design;

Classes utilitárias para design responsive

Twitter Bootstrap Formulários;

Twitter Bootstrap Tipografia;

Twitter Bootstrap Tabelas;

Twitter Bootstrap Botões;

Twitter Bootstrap Ícones;

Twitter BootstrapBaixando o bootstrap

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

Twitter BootstrapDesenvolvendo

Twitter BootstrapTemplate de teste 1

Twitter BootstrapTemplate de teste 1

Twitter BootstrapTemplate de teste 2

Twitter BootstrapTemplate de teste 3

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.