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: Linguagens de Markup – HTML, XML e XHTML Folhas de estilo em cascata – CSS Estudo do protocolo de transporte – HTTP 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 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

seletor { propriedade : valor } 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

Promove a separação entre conteúdo e estilo ! 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