Introdução ao desenvolvimento Web

Introdução ao
desenvolvimento Web
Prof: Sérgio Souza Costa

Sobre mim
Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com

https://sites.google.com/site/profsergiocosta/home
http://www.slideshare.net/skosta/presentations?order=popular
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta

Introdução
●

●

Uma questão fundamental em sistemas distribuídos é a
definição de como devemos organizar os processos;
Um modelo bastante popular organiza os processos em
clientes que requisitam serviços de servidores.

Características do Cliente
●
●
●
●

●

●

Interface gráfica
Validação da entrada de dados
Possibilidade de impressão local ou remota
Capacidade de detectar quando uma solicitaçã feita não
chega ao servidor
Exigência de investimentos em equipamentos para suportar
interfaces gráficas sofisticadas
Dados não estão disponíveis localmente; se houver replicação
local, a consistência deve ser mantida!

Caracteristicas do servidor
Oferece serviços (e.g., busca e atualizações no banco de dados)
para muitos clientes, centralizando a manipulação de dados,
manutenção de consistência e integridade
Deve ter capacidade de processamento, acesso a disco, memória e
comunicação para atender os pedidos dos vários clientes
Controle de concorrência (e.g., utilizando exclusão mútua no acesso
a dados)
Segurança: controle de acesso via senhas, a diversos níveis de
informação
Confiabilidade: a centralização facilita o gerenciamento do backup
Caso falhe o servidor, todos os serviços são paralizados

Arquitetura em 3 camadas
A divisão vista anteriormente apresenta diversas
possibilidades de distinção entre máquinas clientes e
servidoras;
No entanto, um servidor pode também agir como cliente,
resultando em uma arquitetura em três níveis:

Arquitetura em 3 camadas
●

●

Nesta arquitetura, programas que formam o nível de
processamento residem em um servidor separado;
Organização usual de sites na Web, onde o servidor
Web age como ponto de entrada para um site,
passando requisições para um servidor de aplicação no
qual ocorre o processamento propriamente dito.

Exemplos de serviços na internet

Application Servers
Audio/Video Servers
Chat Servers
Fax Servers
FTP Servers
Groupware Servers
IRC Servers

List Servers
Mail Servers
News Servers
Proxy Servers
Telnet Servers
Web Servers

●

●

●

●

●

●

●

●

●

●

●

●

●

Internet antes da Web
Antes da WWW a internet era apenas usadas nas
universidades e pelo exercito para testes, estudos, trocas
de informações e arquivos.

Internet antes da Web
Antes da WWW a internet era apenas usadas nas
universidades e pelo exercito para testes, estudos, trocas
de informações e arquivos.

Assistam o
documentário:
"Download: A verdadeira
historia de internet"

O que é web?
A web é a interface gráfica da internet.

Foi desenvolvida em 1990 por Tim Berners-Lee, que criou um
programa chamado “WorldWideWeb”, o primeiro navegador
capaz de interpretar todo documento de hipertexto.
●

um documento de texto simples que poderia levar qualquer informação
através da rede, escrito no que conhecemos hoje como HTML.

Com a criação da interface Web, a navegação pela Internet
tornou-se mais rápida, menos complexa e, portanto, mais
popular.

Servidores web e Clientes
Servidores WEB, aguardam requisições de
algum recurso
●

●

Apache
Microsoft Internet Information Server

Clientes – Navegadores
Realiza uma requisição de algum recurso
ao servidor, e depois interpreta e “mostra”
o recurso recebido

●

Nexus – Primeiro Navegador
O “WorldWideWeb” foi rebatizado de Nexus para que não
houvesse confusão entre o software interpretador e o
documento de informação pois os dois, a princípio, eram
conhecidos como WorldWideWeb.

O que é web?
A web é um serviço da internet.
Um serviço que consiste em um imenso conjunto de páginas
conectadas umas às outras por um sistema de links.
Quantas páginas tem na web?
No final de 2010, os engenheiros da Google se espantaram ao verem
seus sistemas, encarregados de processar os vínculos na Web para
descobrir qualquer novo conteúdo, chegarem à surpreendente marca
de 1 trilhão de URLs na WEB ao mesmo tempo!

Web
A cada dia a web torna-se mais sofisticada como
plataforma de desenvolvimento para atender às
A evolução da Internet e da interatividade web está
diretamente ligada à evolução da computação: tanto na
parte tecnológica de hardware como na de software.

Evolução da Web - Iteratividade

Fonte : http://www.fml.eti.br/web/evolucao-da-programacao-web.pdf

Lado do Servidor

Servidor

CGI
RUBY
PHP
ASP
JAVA, SERVLET

Internet

Clientes
Ao receber uma requisição de página do usuário, o servidor
processa a requisição e devolve ao usuário o HTML gerado.

Arquitetura de aplicação WEB
Existem várias arquiteturas diferentes que permitem a construção de
aplicações WEB.
Estudaremos uma arquitetura simples e vastamente utilizada na
Internet que é uma união muito feliz de algumas ferramentas que
permitem a criação de aplicações WEB.
Apache – Servidor WEB
●
Documento base no formato HTML (extensões .HTML ou .
HTM)
PHP – Linguagem de programação para web (server-side)
●
Introduzido no código da página HTML, processada no
servidor e não repassada para o cliente.
MySQL – Banco de dados relacional (SQL)
●
Processa requisições SQL (linguagem padronizada para
consultas a bancos de dados relacionais)
Todas as ferramentas acima existem em várias plataformas (Windows,
Linux, MacOs entre outras).
●

●

●

Arquitetura Apache+PHP+MySQL
●

Ferramentas gratuitas e amplamente
utilizadas em aplicações pela Internet.

Internet

Apache
Web Server
HTTP
+
módulo PHP

MySQL
Banco de Dados

Linguagem de Programação PHP
Exemplo de código php no
servidor
<HTML>
<HEADER>
<TITLE>

Código recebido pelo
Browser
<HTML>
<HEADER>
<TITLE>

Primeiro Programa em PHP
</TITLE>

Primeiro Programa em PHP

</HEADER>

</TITLE>

<BODY>

</HEADER>

<H1>Exemplo 1</H1>

<BODY>

<?php

<H1>Exemplo 1</H1>

$primeiravar = "Olá Mundo!";
echo $primeiravar;

Olá Mundo!

?>

</BODY>

</BODY>

</HTML>

</HTML>

Lado do Cliente

Servidor

HTML
CSS
Shockwave
Flash
Java Applet
JavaScript
ActiveX
XHTML
XML

Internet

Clientes

O navegador interpreta o código recebido e apresenta ao
usuário.

HTML Timeline

vs
.

1990

199
5

199
6

199
7

199
8

199
9

200
0

200
1

200
2

XHTML
2.0
Begins…

HTML
1.0

RFC
1866

201
0

Logo
oficial do
Html5

A criação ...
Criada por Tim Berners-Lee

●

○1991

– Primeira definição da HTML

1991 – HTML 1
Em agosto 1991, Tim Berners-Lee publica o
primeiro website:

●

Texto e hiperlinks.

http://info.cern.ch/

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

1991 – HTML 1 - Exemplo

<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area
<A NAME=0 HREF="WhatIs.html">
hypermedia</A> information retrieval
initiative aiming to give universal
….
</BODY>

1994 – Netscape Navigator

Marc
Andreessen e
Jimmy Clarck
(Silicom)

1994- HTML 2
Páginas dinâmicas através de CGI (Common
Gateway Interface) ...
Necessidade de melhorar a interação com os
usuários
○Iteratividade do lado cliente
Conexões lentas
Guerra dos navegadores

1994 – HTML 2
Dinâmico

Estático

CGI,
PHP

HTML

HTML

HTML

HTML

1994 – HTML 2
Dinâmico

Estático

HTML era estrutura,
apresentação e
interação (formulário e
botão submit)

CGI,
PHP

HTML

HTML

HTML

HTML

A Guerra ...
Para seduzir os
usuários, cada browser
criava novos recursos,
java script, applets,
plugins, DOM ..

A Guerra ...
Para seduzir os
usuários, cada browser
criava novos recursos,
java script, applets,
plugins, DOM ..

Assistam o filme da
BBC, guerra dos
Browser.

1996 - JavaScript
Inicialmente com o nome de Cmm (C menos menos)
e depois ScriptEase.
Netscape usa o projeto em seu Browser, nomeando
como LiveScript e depois JavaScript.
Não é derivada do Java, o nome pode ter sido
usado como estratégia de marketing.
Microsoft incorpora no teu browser com outro nome
- JScript.

1996 – JavaScript
Falta de padronizações entre os browser
Uso excessivo de animações com JavaScript
○Os

desenvolvedores ainda não sabiam utilizar este
novo recurso

Principal uso do JavaScript era na validação de
formulários e para enviar alertas ao usuários

1996 – JavaScript
Falta de padronizações entre os browser
Uso excessivo de animações com JavaScript
Tempos depois ...
○Os

desenvolvedoresNetscape apresentou o
ainda não sabiam utilizar este
JavaScript para ECMA
novo recurso

International para a
padronização resultando na
Principal uso do JavaScript era na validação de
versão padronizada chamado
ECMAScript.
formulários e para enviar alertas ao usuários

1996 – JavaScript
Exemplo
<html>
<body>
<script type="text/javascript">
document.write("<p>Hello World!</p>");
</script>
</body>
</html>

CSS
Criada por Hakon Wium Lie - MIT em 1994
È o padrão W3C para apresentação
Separa elementos de design dos elementos lógicos
●CSS apenas recriava formatações HTML
●Não permitia a construção de Layouts

CSS Exemplo
<html>
<head>

HTML
<link rel="stylesheet" type="text/css" href="ola.css">
<title>Ola mundo</title>
</head>
<body>
<p>Ola mundo</p>
</body>
</html>

p{color:red}

CSS

Java Applets
Novos recurso para os browser, plugins …
○Desvantagem:

precisavam carregar no cliente para

depois executar.
○Banda larga ainda era pouco acessível

Java Applets
Novos recurso para os browser, plugins …
○Desvantagem:

precisavam carregar no cliente para

Aqui sim, tinhamos
depois executar.
realmente
○Banda larga ainda era pouco acessível
aplicações Java na
WEB

Java Applets
Exemplo
import java.applet.*;
import java.awt.*;
public class DrawingLines extends Applet {
int width, height;
public void init() {
width = getSize().width;
height = getSize().height;
setBackground( Color.black );
}
public void paint( Graphics g ) {
g.setColor( Color.green );
for ( int i = 0; i < 10; ++i ) {
g.drawLine( width, height, i * width / 10, 0 );
}
}
}

Enquanto isso no design ...
HTML é usado para estruturar o documento e a formatação começa
migrar para o CSS
Projetos baseados em tabelas
○CSS ainda não suportava layouts
○Frames já eram mal vistos pelos desenvolvedores

As primeiras ferramentas WYSIWYG

Fim do primeiro round

Microsoft
WIN

Recolhendo os mortos e feridos
Perceberam a necessidade urgente de padrões.

●

○Com

a guerra dos browsers agravou-se a falta de
padronização
○A recém-criada W3C trabalha mais intensamente na
definição de padrões
○É lançado a versão 3.2 do HTML

1997 – HTML4 e CSS2
NO FRAMES

1997 – HTML4 e CSS2
As tecnologias do lado do servidor evoluem, ASP,
Java ...
O papel do HTML passa ser definido como é hoje,
○HTML estrutura o documento
○CSS define layouts

1999 - HTML 4.1
É a versão atualmente utilizada
Varias tags entra em desuso
○Tags

relacionadas a formatação

É especificado três estágio:
○Tansitional, permite
○Frameset, permite o

o uso das tags desaprovadas
uso das tags desaprovadas e

frames (quadros)
○Estrita, proibe o uso das tags desaprovadas e dos
frames

HTML 4.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ola mundo</title>
</head>
<body >
<p>Ola mundo!!</p>
</body>
</html>

CSS 2
Passou a permitir a construção de layouts
profissionais
○Tabela

agora só para tabela

HTML - DOM
Define um padrão para acesso elementos HTML
O DOM apresenta um documento HTML como uma
estrutura em árvore
●Permite alterar elementos específicos
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=“”>My link</a>
<h1>My header</h1>
</body>
</html>

HTML – DOM - Exemplo
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript" >
function f () {
par = document.createElement('p')
texto = document.createTextNode("hello world");
par.appendChild(texto);
document.body.appendChild(par);
}
</script>
</head>
<body onload ="f()"></body>
</html>

DHTML
DHTML = HTML + JavaScript + CSS + DOM

●

DHTML
Exemplo

●

<html>
<body>
<p id="p1">This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text.</p>
<input type="button" value="Hide text" onclick="document.
getElementById('p1').style.visibility='hidden'" />
<input type="button" value="Show text" onclick="document.
getElementById('p1').style.visibility='visible'" />
</body>
</html>

XML
XML -eXtensible Markup Language (1996)

●

○Jon Bosak para W3C (WWW Consortium)
○conjunto de regras que os documentos devem

seguir
(simplificação do SGML, de processamento pesado,
pelas excepções que admite)

XML pode separar dados do HTML
●Formato standard para descrever e trocar dados
estruturados na web
●Mais semântica, também estrutura, sem formato
●

XML - Exemplo
CSS é apresentação.
XML, conteudo, dado e
estrutura. E o HTML ?

2000 - XHTML
Uma versão do HTML modificado conforme o padrão XML
Projetada para separar conteudo da apresentação
○Conteúdo em XHTML
○Apresentação em Cascading Style Sheets (CSS)
Extensível – Elementos adicionais podem ser incorporados
Compatível com com XML – Outros documentos XML podem
ser incorporados
●Uso de validadores: http://validator.w3.org/

XHTML - Diferenças
Case-sensitive <P> ≃ <p>
Todos elementos devem ter inicio e fim:
<p>Hello</p>
Elementos vazios devem ter barras de fechamento
tambem <br />
●Atributos devem sempre ter aspas
●Específicações: http://www.w3.
org/TR/xhtml1/#diffs

XHTML - Exemplo
<?xml version="1.0" encoding="UTF-8"?>
●<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-strict.dtd">
●<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
●<head>
●<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
●<title></title>
●</head>
●<body>
●

</body>
●</html>
●

2005 - AJAX
Termo surgiu em 2005
AJAX (Asynchronous JavaScript and XML) não é
uma nova tecnologia, mas sim uma combinação de
tecnologias padrão
Tem como objetivo principal enriquecer a interação
de aplicações web
●Combina as seguintes tecnologias:
○HTML/XHTML e CSS
○DOM
○XML e XSLT
○JavaScript
○XMLHttpRequest

AJAX - XMLHttpRequest
Atualizar uma página web sem recarregá-la
Enviar requisição de dados a um servidor após a
página ter sido carregada
Receber resposta de requisições após a página ter
sido carregada
Enviar dados para um servidor em background
É suportado pela maioria dos navegadores
modernos

<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="
txtHint"></span></p>
</body>
<script type="text/javascript">
var xmlHttp;
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").
innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
var url="gethint.php"; url=url+"?q="+str; url=url+"
&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

HTML

Script

function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHint").innerHTML=
xmlHttp.responseText;
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>

JQUERY
Biblioteca em JavaScript tem como objetivo
facilitar o uso do JavaScript.
●Operações de acesso a elemento do HTML é
bem mais compacto em Jquery.
●Ajax tambem é bem mais fácil com Jquery
●

Jquery – Compactando os códigos
Com
JQuery
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")

texto = document.createTextNode("Ola Mundo !!");

Sem
JQuery

Jquery – Compactando os códigos
Com
JQuery

Explora bem o uso
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")de
funções de alta ordem
em JavaScript

texto = document.createTextNode("Ola Mundo !!");

Sem
JQuery

JQUERY - Exemplo
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title></title>
<script type="text/javascript" src="jquery-1.4.js"> </script>
$(document).ready(function(){
$ ("<p/>", {
text: "Ola Mundo !!"
}).appendTo("body")
})
</script>
</head>
<body></body>
</html>

AJAX com JQUERY
HTML

Script

<script type="text/javascript" src="jquery.min.js">
</script>
<body>
<p id="p1">passe
o mouse</p>
<div id="a1"
></div>
</body>

$(document).ready(function(){
$("#p1").mouseenter(function(){
$.ajax({
url: "ajax_test.htm",
success: function(html){
$("#a1").html(html);
}})})})
</script>

WHATWG
The Web Hypertext Application Technology Working
Group

2010 – HTML 5 e CSS 3
Grupo de desenvolvedores passam a trabalhar
em uma nova versão do HTML
●Focando nas necessidades reais e atuais dos
usuários
●O desenvolvimento da W3C é lento
●

WHATWG

HTML 5 – Exemplo
Mínimo

●

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title></title>
</head>
<body>
<p>OLA MUNDO</p>
</body>
</html>

Suporte – 4000 pontos possíveis
Podem testar seus browser em: http://html5test.
com/
●

Ferramentas de desenvolvimento
Livre
○Os

alunos estão livres para usar a sua ferramenta
preferida

Exceções
○WYSIWYG,

ferramentas que segue este estilo não
nos permite que editamos diretamento o HTML. Além
disso elas incorpora muito “lixo” ao código.

Edição dos códigos
Dreamweaver (Windows)

●

Sugestão

Edição dos códigos
Linux - Gedit, Geany …
●Bluefish e Kompozer
●

Debugando os códigos
Firefox, firebug

●

Debugando os códigos
Firefox, firebug

●

Chrome já vem
nativamente com
ferramenta de
desenvolvimento

HTML 3.2
W3C Rec.

HTML 2.0
Specification
s

HTML 5
working
group

HTML 4.01
W3C Rec.

HTML 5
Draft

HTML 4.0
W3C Rec.
XHTML 1.0
W3C Rec.

Languages
CSS 1.0
W3C Rec.

XHTML 2
Draft

XHTML 1.1
W3C Rec.

CSS 2.0
W3C Rec.

CSS 3.0
Draft

Browsers

SA
F1

IE
2
NS
1

IE
3

IE
4

IE
5

NS
2

NS
3

NS
4

NS
4.7

IE
6

W3C

NS
6

1994

1995

1996

1997

1999

IE
8

FF
2

NS
7
FF
1

iTunes

2000

2001

2002

podcasting

FF
3

Facebook

MySpace

RSS

1998

SA
F4

AJAX

blogging

Web Commerce

SA
F3
IE
7

Innovations
Web
Conferencing

SA
F2

youtube

2003

2004

2005

twitter

2006

2007

2008

2009

Boas práticas
●
●
●
●
●
●

Developing Large Web Applications
By: Kyle Loudon
Publisher: O'Reilly Media, Inc.
Pub. Date: March 8, 2010
Print ISBN-13: 978-0-596-80302-5
Pages in Print Edition: 304

Características de sistemas web
Disponibilidade contínua


Grande base de usuários


Diversidade

Diversidade

Longevidade

Diversidade
Longevidade

Múltiplos ambientes

Diversidade
Múltiplos ambientes
Longevidade

Atualizações em tempo real

Componentes modulares
Encapsular tudo de que o componente precisa em
pequenas partes


pequenas partes

Grandes aplicações = várias pequenas partes


pequenas partes


+ Reutilização de códigos


pequenas partes



No cliente e no servidor


pequenas partes



HTML, CSS, JavaScript e PHP


pequenas partes
Sistemas modulares
são necessários e
Grandes aplicações = várias benéficos para todo e
pequenas partes
qualquer projeto.


HTML, CSS, JavaScript e PHP

O que acham deste HTML ?
<p><font face="Arial">Welcome to Greasy Joe's. You will <b>never,
<i>ever, <u>EVER</u></i></b> beat <font size="+1" color="red"
>OUR</font> prices!</font></p>

Welcome to Greasy Joe's. You
will never, ever, EVER beat OUR prices!

O que acham deste HTML ?
<p><font face="Arial">Welcome to Greasy Joe's. You will <b>never,
<i>ever, <u>EVER</u></i></b> beat <font size="+1" color="red"
>OUR</font> prices!</font></p>

Welcome to Greasy Joe's. You
will never, ever, EVER beat OUR prices!
○ tags tais como b, i, u, e font são legais
entretanto são "deprecated" em strict
XHTML ou HTML 4.1
○ Por que ? Não é tudo apresentação ?

Não. HTML é a
interface do teu
sistema, porém mesmo
na interface podemos e
devemos dividir as
responsabilidades ...

Exemplo - Portal academico - original
<td valign="top" style="font-size: small; ">
<div id="govcab" style="font-size: small; ">
<table width="1000" border="0" cellpadding="0" cellspacing="0" height="23">
<tbody><tr>
<td width="70%" height="23" bgcolor="#FFCC00" valign="top" style="font-size: small; ">
<a href="http://www.mec.gov.br" target="_blank" style="font-size: small; ">
<img src="http://www.portalacademico.unifei.edu.br/LibImg/logo_edu.gif" width="430" height="21" border="
0" align="center"></a>
</td>
<td height="23" bgcolor="#FFCC00" style="font-size: small; ">
<select name="select3" onchange="javascript:if(options[selectedIndex].value) window.location.href=
(options[selectedIndex].value);" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; "
class="busca">
<option selected="">Destaques do Governo Federal</option>
<option value="http://www.brasil.gov.br">Portal do Governo Federal</option>
<option value="http://www.e.gov.br">Portal de Serviços do Governo</option>
<option value="http://www.radiobras.gov.br">Portal da Agência de Notícias</option>
<option value="http://www.brasil.gov.br/emquestao">Em Questão</option>
<option value="http://www.fomezero.gov.br">Programa Fome Zero</option>
<option value="http://www.siapenet.gov.br">SIAPENET</option>
</select>
</td>

Exemplo - Portal academico - original

<td height="23" valign="middle" align="right" bgcolor="#FFCC00" style="font-size: small; ">
<img src="http://www.portalacademico.unifei.edu.br/LibImg/nada.gif" width="74" height="21" align="top"
alt="" border="0">
</td>
</tr>
</tbody></table>
</div>
</td>

todo este código é apenas para
esta parte da página

Exemplo - Portal academico - versao limpa
<div id="logo_edu">
<a href="http://www.mec.gov.br" target="_blank" >
<img src="logo_edu.gif"></img>
</a>
<select name="select1" id = "gov_links" onchange="open_site_org (options[selectedIndex].value)" >
<option value="http://www.siapenet.gov.br">SIAPENET</option>
</select>
</div>

Exemplo - Portal academico - versão limpa
<div id="logo_edu">
<a href="http://www.mec.gov.br" target="_blank" >
<img src="logo_edu.gif"></img>
</a>
<select name="select1" id = "gov_links" onchange="open_site_org (options[selectedIndex].value)" >
Será o nosso primeiro
trabalho, faremos um novo
portal apenas usando os
<option value="http://www.siapenet.gov.br">SIAPENET</option> da web,
padroes novos
</select>
tabela só para tabela.
</div>

Foco: sistemas modulares

HTML

css
HTML

css
HTML

Java Script

css

PHP

HTML

Java Script

css

PHP

HTML

Java Script
MySql

css

PHP

HTML

Java Script
MySql

XML

PHP foi escolhida pela
simplicidade e por ser
uma das linguagens
principais do lado do
servidor. Não usaremos
frameworks, não
queremos ser produtivos e
sim entender os conceitos

css

PHP

HTML

Java Script
MySql

XML

Principios para grandes aplicações
web

web
Princípio 1:
Grandes aplicações web são construidas a partir de
componentes modulares altamente reutilizáveis,
sustentáveis e confiáveis.

web
Princípio 1:
Grandes aplicações web são construidas a partir de componentes modulares
altamente reutilizáveis, sustentáveis e confiáveis.

Princípio 2:
A utilização da orientação a objetos em JavaScript e nas
linguagens de codificação lado-servidor incrementa a
capacidade de reutilização, sustentabilidade e
confiabilidade.

web
Princípio 3:
HTML em larga escala é semântico, destituído de elementos
de apresentações

web
Princípio 3:
HTML em larga escala é semântico, destituído de
elementos de apresentações

O que quer dizer ser semântico ?

web
Princípio 3:
HTML em larga escala é semântico, destituído de elementos
de apresentações

Princípio 4:
CSS em larga escala forma uma camada de apresentação
que é separada da arquitetura da informação.

web
Princípio 5:
HTML em larga forma uma camada de comportamento
aplicada de modo modular e orientado a objeto.

web
Princípio 5:
HTML em larga forma uma camada de comportamento
aplicada de modo modular e orientado a objeto.

Princípio 6:
Dados dinâmicos transmitidos entre a interface do usuário e
o backend são controlados por meio de uma interface
claramente definida.

web
Princípio 7:
Páginas são construídas a partir de módulos altamente
reutilizáveis que encapsulam tudo que é necessário (p
ex. HTML, CSS, JavaScript .. )

web
Princípio 7:
Páginas são construídas a partir de módulos altamente
reutilizáveis que encapsulam tudo que é necessário (p
ex. HTML, CSS, JavaScript .. )
Princípio 8:
AJAX em larga escala deve ser portável e modular,
mantendo uma clara separação entre as
transfêrencias de dados e as atualizações a
apresentação.

web
Princípio 9:
HTML, JavaScript, CSS e PHP em larga escala,
oferecem uma firme fundação sobre a qual podemos
constuir grandes aplicações web de bom desempenho.

web
Princípio 9:
HTML, JavaScript, CSS e PHP em larga escala,
oferecem uma firme fundação sobre a qual podemos
constuir grandes aplicações web de bom desempenho.
Princípio 10:
A organização dos arquivos no servidor para uma
grande aplicação web reflete a arquitetura da
aplicação em si, incluindo os escopos claramente
demarcados nos quais cada arquivo será utilizado.

Interfaces de usuário
Estrutura

Estrutura
Apresentação

Estrutura
Apresentação
Comportamento

Estrutura: HTML
Apresentação: CSS
Comportamento: JavaScript

O que está errado neste código ?
...
<body>
<h1> Titulo </h1>
Ola mundo
</body>
...

...
<body>
<h1> Titulo </h1>
<p>Ola mundo</p>
</body>
...

...
<body>
<h1> Titulo </h1>
Ola mundo
</body>
...

Elimina-se as tags
de formatação e
fica as tags com
semântica
relacionada a
estrutura.

Vantagens
Acessibilidade
Portabilidade
Manutenabilidade
Leveza (tamanho e velocidade)
Suporte AJAX

Vantagens
Otimizado a busca
Consistente
Redesigns mais eficientes
Público expandido
Compatibilidade

References
Elisabeth Castro, HTML, XHTML & CSS
●Use a cabeça AJAX - Profissional
●www.w3schools.com
●http://html5test.com/index.html
●

Introdução ao desenvolvimento Web

Mais conteúdo relacionado

Mais procurados

Semelhante a Introdução ao desenvolvimento Web

Mais de Sérgio Souza Costa

Introdução ao desenvolvimento Web