Visão Geral de Desenvolvimento Web Front End Tecnologias

Projeto de Monitoramento de Objetos Moveis Esquema geral de um sistema Web ClientesServidorBanco de dados

Browsers Principal Cliente do nosso sistema Web – Navegadores Tecnologias estudadas –HTML, para definir o conteúdo da página –CSS, para especificar o layout da página –Javascript, para programar o comportamento da página Outras Tecnologias –Flash –Silverlight –Applet –...

HTML – HyperText Markup Language XML vs HTML –Ambos são feitos a partir do conceito de Tags –XML foi criado para descrever dados Ex.: web.xml, pom.xml –HTML foi criado para apresentar dados W3C –

HTML - Estrutura Titulo Aqui

HTML – Tags Gerais de Layout ( –HTML 5:

HTML – Tags Gerais de Layout conteudo ( conteudo ( ( Name Bill Gates

HTML – Tags Gerais de Layout ( item texto ( conteudo ( –h1 até h8 (

HTML – Tags Gerais de Entrada do Usuário – –HTML 4 check

HTML – Tags Gerais de Entrada do Usuário –HTML 4 masculino feminino Label Opcao1 Label Opcao2...

HTML – Tags Gerais de Entrada do Usuário –HTML 5... –Ficar atento ao suporte dos Browsers!

HTML – Tags Gerais de Entrada do Usuário –FORM Nome: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String nome = req.getParameter("nome"); System.out.println(nome); }

CSS –3 formas de definir o estilo de um elemento do HTML div{ color: red; } –Conteudo do arquivo: div{ color: red; } Atributo style Usar o !important para sobrescrever um estilo

CSS –Seletores ( #id * element – div element, elemento – div, p element :hover...

CSS3 –Animações com transition div{ width: 100px; height: 100px; transition: width 2s, height 2s; } div:hover{ width: 300px; height: 300px; transition: width 2s, height 2s; }

Javascript -Netscape Communication Corporation. -Primeiro nome foi LightScript. -Motivação foi o surgimento de applets -Netscape queria uma linguagem leve e interpretada para complementar o Java -Mudança do nome para Javascript, foi meramente comercial, para embarcar na onda do sucesso do Java na época.

Javascript -Linguagem de programação dinâmica -Fracamente tipada -Uso mais comum? Web Browsers!! -Engine javascript nativa que permite rodar código no cliente para interagir com o usuário -Permite: -Controlar o Browser -Comunicação assíncrona -Alterar o documento exibido