fundamentos de web - html, css e js esp. marcelo mendes esp. arnaldo costa desenvolvimento java -...
TRANSCRIPT
Fundamentos de WEB - HTML, CSS e JS
Esp. Marcelo Mendes
Esp. Arnaldo Costa
Desenvolvimento Java - Turma I
Programação
Período: 31/01/2011 a 11/02/2011CH: 30 horasAvaliações: 1Conteúdo: www.mrmsistemas.com.br/mendesE-mail: [email protected]
Tópicos abordados Mundo Web Processos de software Cenário de desenvolvimento Linguagens HTML, xHTML, CSS Padrões W3C Linguagem Javascript Linguagem PHP
Linguagem HTML
HTML – Hyper Text Markup Language Desenvolvida por Tim Berners-Lee
Durante década de 90Conhecida através do browser Mosaic(NCSA)
Linguagem entendida mundialmente Interpretada por browser’s (navegadores)
Linguagem HTML
Facilidade na codificação Facilidade na formatação Essencial em um sistema web Requer padronização Compatibilidade com navegadores
Linguagem XHTML e Padrões W3C
XHTML e W3C – Padronização de tags W3C – Comitê de validação Tags em letras minúsculas Atualizar tags obsoletas Especificar tipo de documento html
ExemplosErrado:<DIV><P>Aqui um texto</P></DIV> Certo:<div><p>Aqui um texto</p></div>
Errado:<div><i><p>Aqui um texto negrito</i></p></div>Certo:<div><i><p>Aqui um texto negrito</p></i></div>
Errado:<p>Um parágrafo.<p>Outro parágrafo.Certo:<p>Um parágrafo.</p><p>Outro parágrafo.</p>
Estrutura de uma página validada pelo W3C
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Página Exemplo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><b><font color=“blue" size="3" face="Verdana">Olá Mundo!</font></b><br><img src="imagens/w3cxhtml.bmp" title=“Comitê W3C"> </body></html>
Estrutura de uma página com imagem e link
CSS - Cascading Style SheetsLinguagem de Estilos
Define a apresentação de documentos escritos em HTML;
Benefício: Prover a separação entre o formato e o conteúdo de um documento
CSS - Cascading Style SheetsLinguagem de Estilos
<html><head><title>Exemplo de CSS</title><style>body{ font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px;}</style></head><body>OLÁ MUNDO.</body></html>
CSS - Cascading Style SheetsLinguagem de Estilos
<html><head><title>Exemplo de CSS</title><link rel="stylesheet" type="text/css" href="estilos.css"></head><body>OLÁ MUNDO.</body></html>
Incluindo CSS na página através de link
Formulários, Tabelas e Formatações
<form name=“formcad” method=“post” action=“endereco.html”
…
</form>
Formulários, Tabelas e Formatações
Formulários, Tabelas e Formatações
Formulários, Tabelas e Formatações
Atividade
Linguagem JavaScript
Executada no cliente Não protege o código fonte Executada pelo navegador Incompatibilidade com navegadores Bastante utilizada para efeito visuais Utilizada em checagem de formulários
Exemplo de JS
Código fonte JavaScript
Linguagem PHP
Breve histórico da linguagem Personal Home Page Tools – PHP Hipertext Preprocessador – PHP Software livre Independência de Sistema Operacional Código fonte somente no servidor Trabalha em conjunto com html (form’s)
Linguagem PHP
Permite mesclagem de HTML+PHP Versão 5 POO – Programação Orientada a Objetos Concorrente da Linguagem JAVA (JEE) Tem suporte a maioria dos banco de dados
Características
Independência de servidor web Case sensitive Identifica dinamicamente os tipos de variáveis Segurança Rápido Flexível na configuração (warnings e erros) Não necessita de instalação no cliente
Exemplos
Resultado no browser
Mãos a obra!