Use a Cabeça! HTML com CSS e XHTML

Linguagens Web - Cliente
Aula 1
Desenvolvimento Web
Instituto Metodista Izabela Hendrix
Curso de Tecnologia em Análise e Desenvolvimento de Sistemas
Prof. Gilmar Medeiros – Agosto/2009
Assuntos Abordados


Histórico do desenvolvimento da Web
Primeiros passos como desenvolvedor Web:




Interação Browser Cliente:




JavaScript
Ajax = JavaScript +XML – Web 2.0
Aplicações Internet Ricas = RIA – Web 2.0
Interação Browser Servidor:



Linguagens de Markup – HTML, XML e XHTML
Folhas de estilo em cascata – CSS
Estudo do protocolo de transporte – HTTP
Linguagens de Script
Arquitetura Java Enterprise Edition – Servlets e JSPs
Assuntos Futuros:


Estudo de Frameworks MVC: Java Server Faces e Struts
WebServices e Arquitetura Orientada a Serviços (SOA)
Apresentação







O que é o desenvolvimento Web?
Quais os paradigmas envolvidos?
O que eu preciso aprender para
desenvolver para a Web?
E porque o desenvolvimento Web é tão
fascinante assim?
Somente o HTML me basta?
Para que servem as linguagens de Script?
E esse tal de HTTP? CSS? JavaScript?
Java EE? Ajax? SOA? WebServices?
Breve Histórico da Web




Inicialmente um projeto acadêmico, toda a
apresentação feita em modo texto
O grande impulso da Web veio com o uso
do protocolo www ou World Wide Web, ou
seja, uso de imagens em um browser
O Mosaic foi um dos primeiros browsers,
seguido do Netscape
Nessa época a Microsoft simplesmente se
recusava a acreditar que a Internet e
recursos www pudessem ser o grande
“boom” do momento e daí em diante
Paradigmas de Desenvolvimento
Web

Quais são os paradigmas aqui
envolvidos?





Paradigma Web
Paradigma de Orientação a Objetos
Paradigmas de Desenvolvimento Gráfico
Padrões de Projetos, como o MVC – Model,
View, Controller
etc
Protocolo HTTP




HTTP: HyperText Transfer Protocol
Protocolo que permitiu o uso da Internet como
ela é hoje, com a definição de páginas HTML e
adjacentes, além da interação cliente-servidor
Por trás dos bastidores – protocolo TCP/IP,
responsável por toda a infra-estrutura da
Internet
O TCP/IP é um protocolo aberto, extremamente
confiável e testado, inicialmente desenvolvido
para Unix, e depois copiado em SOs Microsoft
Fundamentos Web-Cliente: HTML


O HTML é uma linguagem de markup, que faz uso
de tags com funcionalidades estáticas;
Tudo que fugir de um conteúdo estático, pede
“algo mais”, que se funde ao HTML, como:




Uso de XML: XHTML;
Uso de folhas de estilo em cascata: CSS;
Uso de linguagens de script, como o JavaScript;
Uso de formulários HTML – tag <form>, que redireciona
páginas HTML para processamento dinâmico, executado
em servidores
XHTML – Exemplo de Código
Execução: basta abrir o código XHTML em um browser
Folhas de Estilo em Cascata – CSS


“Folha de estilo em cascata é um mecanismo
simples para adicionar estilos (p.ex., fontes,
cores, espaçamentos) aos documentos Web”
Finalidade básica:


Devolver ao (X)HTML o propósito de ser uma
linguagem de marcação e estruturação de conteúdos;
Deste modo, detalhes de apresentação dos elementos
ficam a cargo do CSS, que gerencia:


Cores de fontes, tamanhos de textos, posicionamentos
Ou seja, todo o aspecto visual de um documento
CSS – Sintaxe - I

Regras CSS:





Unidade básica de uma folha de estilo
Responsável por produzir um efeito de
estilização
Declaração: uma propriedade e um valor
seletor { propriedade : valor }
Seletor: alvo da regra; geralmente a tag html
Declaração: determina os parâmetros da
estilização
CSS – Sintaxe - II

Exemplo:
p{
}


font-family: “Times New Roman”;
font-style: italic;
color: #ff0000;
O exemplo acima altera propriedades de fonte e
cor da tag <p> html, ou seja, da tag de parágrafo
Obs: o mesmo pode ser feito para outras tags
html, definindo estilos a serem aplicados e mais
importante:
Promove a separação entre conteúdo e estilo !
Uso do CSS em código (X)HTML
Web Standards

Web Standards ou Padrões Web são
compostos por:



um conjunto de normas, diretrizes,
recomendações, notas, artigos, tutoriais e
afins, de caráter técnico, produzidos pelo W3C;
são destinados a orientar fabricantes,
desenvolvedores e projetistas para o uso de
práticas que possibilitem a criação de uma
Web acessível a todos;
Acessível, independentemente dos dispositivos
usados ou de suas necessidades especiais.
Bibliografia





* SILVA, MAURICIO SAMY. Construindo Sites com CSS e
(X)HTML. 1a Edição, 2007. Editora Novatec. ISBN:
8575221396
* DEITEL & DEITEL: Ajax, Rich Internet Applications e
Desenvolvimento Web para programadores. 1a Edição, 2008.
Editora Pearson Prentice Hall, ISBN: 8576051613
SIERRA, KATHY; BASHAN, BRIAN. Use a Cabeça! Servlets e JSP. 1a
Edição, 2005. Editora Alta Books. ISBN: 8576080850
FREEMAN, ERIC; FREEMAN, ELISABETH. Use a Cabeça! HTML com
CSS e XHTML. 1a Edição, 2008. Editora Alta Books. ISBN:
8576082187
MURACH, JOEL; STEELMAN, ANDREA. Murach's Java Servlets and
JSP – Training & Reference. 1a Edição, 2003. Editora Mike Murach
and Associates. ISBN: 1890774189
Recursos Internet




Site do Mauricio Samy:
http://www.maujor.com/index.php
Consórcio WWW -W3C:
http://www.w3.org/
CSS Zen Garden:
http://www.csszengarden.com/
XHTML Resource Center:
http://www.deitel.com/xhtml