0
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://si...
Introdução
●

●

Uma questão fundamental em sistemas distribuídos é a
definição de como devemos organizar os processos;
Um...
Características do Cliente
●
●
●
●

●

●

Interface gráfica
Validação da entrada de dados
Possibilidade de impressão local...
Caracteristicas do servidor
Oferece serviços (e.g., busca e atualizações no banco de dados)
para muitos clientes, centrali...
Arquitetura em 3 camadas
A divisão vista anteriormente apresenta diversas
possibilidades de distinção entre máquinas clien...
Arquitetura em 3 camadas
●

●

Nesta arquitetura, programas que formam o nível de
processamento residem em um servidor sep...
Exemplos de serviços na internet

Application Servers
Audio/Video Servers
Chat Servers
Fax Servers
FTP Servers
Groupware S...
Word-Wide Web
www
Internet antes da Web
Antes da WWW a internet era apenas usadas nas
universidades e pelo exercito para testes, estudos, tr...
Internet antes da Web
Antes da WWW a internet era apenas usadas nas
universidades e pelo exercito para testes, estudos, tr...
O que é web?
A web é a interface gráfica da internet.

Foi desenvolvida em 1990 por Tim Berners-Lee, que criou um
programa...
Servidores web e Clientes
Servidores WEB, aguardam requisições de
algum recurso
●

●

Apache
Microsoft Internet Informatio...
Nexus – Primeiro Navegador
O “WorldWideWeb” foi rebatizado de Nexus para que não
houvesse confusão entre o software interp...
Nexus – Primeiro Navegador
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 o...
Web
A cada dia a web torna-se mais sofisticada como
plataforma de desenvolvimento para atender às
A evolução da Internet e...
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á...
Arquitetura de aplicação WEB
Existem várias arquiteturas diferentes que permitem a construção de
aplicações WEB.
Estudarem...
Arquitetura Apache+PHP+MySQL
●

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

Internet

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

Código recebido pelo
Browser
<HTML...
Lado do Cliente

Servidor

HTML
CSS
Shockwave
Flash
Java Applet
JavaScript
ActiveX
XHTML
XML

Internet

Clientes

O navega...
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

...
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/

h...
Tim Berns-Lee screenshot
1991 – HTML 1 - Exemplo

<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wid...
1993 -Mosaic

Marc
Andreessen
1994 – Netscape Navigator

Marc
Andreessen e
Jimmy Clarck
(Silicom)
Evolução
1994- HTML 2
Páginas dinâmicas através de CGI (Common
Gateway Interface) ...
Necessidade de melhorar a interação com os
us...
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...
1994- HTML 2
A Guerra ...
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...
1996 - JavaScript
Inicialmente com o nome de Cmm (C menos menos)
e depois ScriptEase.
Netscape usa o projeto em seu Browse...
1996 – JavaScript
Falta de padronizações entre os browser
Uso excessivo de animações com JavaScript
○Os

desenvolvedores a...
1996 – JavaScript
Falta de padronizações entre os browser
Uso excessivo de animações com JavaScript
Tempos depois ...
○Os
...
1996 – JavaScript
Exemplo
<html>
<body>
<script type="text/javascript">
document.write("<p>Hello World!</p>");
</script>
<...
CSS
Criada por Hakon Wium Lie - MIT em 1994
È o padrão W3C para apresentação
Separa elementos de design dos elementos lógi...
CSS Exemplo
<html>
<head>

HTML
<link rel="stylesheet" type="text/css" href="ola.css">
<title>Ola mundo</title>
</head>
<b...
Java Applets
Novos recurso para os browser, plugins …
○Desvantagem:

precisavam carregar no cliente para

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

precisavam carregar no cliente para

Aqui sim, tinham...
Java Applets
Exemplo
import java.applet.*;
import java.awt.*;
public class DrawingLines extends Applet {
int width, height...
Enquanto isso no design ...
HTML é usado para estruturar o documento e a formatação começa
migrar para o CSS
Projetos base...
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 f...
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 é ho...
1999 - HTML 4.1
É a versão atualmente utilizada
Varias tags entra em desuso
○Tags

relacionadas a formatação

É especifica...
HTML 4.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<he...
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
●Per...
HTML – DOM - Exemplo
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http...
DHTML
DHTML = HTML + JavaScript + CSS + DOM

●
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....
XML
XML -eXtensible Markup Language (1996)

●

○Jon Bosak para W3C (WWW Consortium)
○conjunto de regras que os documentos ...
XML - Exemplo
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...
XHTML - Diferenças
Case-sensitive <P> ≃ <p>
Todos elementos devem ter inicio e fim:
<p>Hello</p>
Elementos vazios devem te...
XHTML - Exemplo
<?xml version="1.0" encoding="UTF-8"?>
●<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w...
Duvidas ?
2005 - AJAX
Termo surgiu em 2005
AJAX (Asynchronous JavaScript and XML) não é
uma nova tecnologia, mas sim uma combinação ...
AJAX - XMLHttpRequest
Atualizar uma página web sem recarregá-la
Enviar requisição de dados a um servidor após a
página ter...
Sem AJAX
Com AJAX
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="
...
JQUERY
Biblioteca em JavaScript tem como objetivo
facilitar o uso do JavaScript.
●Operações de acesso a elemento do HTML é...
Jquery – Compactando os códigos
Com
JQuery
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")

par = document.createElem...
Jquery – Compactando os códigos
Com
JQuery

Explora bem o uso
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")de
funçõ...
JQUERY - Exemplo
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type...
AJAX com JQUERY
HTML

Script

<script type="text/javascript" src="jquery.min.js">
</script>
<body>
<p id="p1">passe
o mous...
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 rea...
HTML 5 - Tags
HTML 5 – Exemplo
Mínimo

●

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title></title>
</head>
<body>
<p>OLA MU...
Suporte – 4000 pontos possíveis
Podem testar seus browser em: http://html5test.
com/
●
HTML 5 - Suporte
Ferramentas de desenvolvimento
Livre
○Os

alunos estão livres para usar a sua ferramenta
preferida

Exceções
○WYSIWYG,

fe...
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.
XHT...
Boas práticas
●
●
●
●
●
●

Developing Large Web Applications
By: Kyle Loudon
Publisher: O'Reilly Media, Inc.
Pub. Date: Ma...
Características de sistemas web
Disponibilidade contínua
Características de sistemas web
Disponibilidade contínua

Grande base de usuários
Características de sistemas web
Disponibilidade contínua
Grande base de usuários

Diversidade
Características de sistemas web
Disponibilidade contínua
Grande base de usuários
Diversidade

Longevidade
Características de sistemas web
Disponibilidade contínua
Grande base de usuários
Diversidade
Longevidade

Múltiplos ambien...
Características de sistemas web
Disponibilidade contínua
Grande base de usuários
Diversidade
Múltiplos ambientes
Longevida...
Componentes modulares
Encapsular tudo de que o componente precisa em
pequenas partes
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes

Grandes aplicações = várias pequena...
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes

Grandes aplicações = várias pequena...
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes

Grandes aplicações = várias pequena...
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes

Grandes aplicações = várias pequena...
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes

Grandes aplicações = várias pequena...
Componentes modulares

Encapsular tudo de que o componente precisa em
pequenas partes
Sistemas modulares
são necessários e...
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> be...
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> be...
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: smal...
Exemplo - Portal academico - original

<td height="23" valign="middle" align="right" bgcolor="#FFCC00" style="font-size: s...
Exemplo - Portal academico - versao limpa
<div id="logo_edu">
<a href="http://www.mec.gov.br" target="_blank" >
<img src="...
Exemplo - Portal academico - versão limpa
<div id="logo_edu">
<a href="http://www.mec.gov.br" target="_blank" >
<img src="...
Foco: sistemas modulares
Foco: sistemas modulares

HTML
Foco: sistemas modulares
css
HTML
Foco: sistemas modulares
css
HTML

Java Script
Foco: sistemas modulares
css

PHP

HTML

Java Script
Foco: sistemas modulares
css

PHP

HTML

Java Script
MySql
Foco: sistemas modulares
css

PHP

HTML

Java Script
MySql

XML
Foco: sistemas modulares
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, ...
Principios para grandes aplicações
web
Principios para grandes aplicações
web
Princípio 1:
Grandes aplicações web são construidas a partir de
componentes modular...
Principios para grandes aplicações
web
Princípio 1:
Grandes aplicações web são construidas a partir de componentes modular...
Principios para grandes aplicações
web
Princípio 1:
Grandes aplicações web são construidas a partir de componentes modular...
Principios para grandes aplicações
web
Princípio 3:
HTML em larga escala é semântico, destituído de elementos
de apresenta...
Principios para grandes aplicações
web
Princípio 3:
HTML em larga escala é semântico, destituído de
elementos de apresenta...
Principios para grandes aplicações
web
Princípio 3:
HTML em larga escala é semântico, destituído de elementos
de apresenta...
Principios para grandes aplicações
web
Princípio 5:
HTML em larga forma uma camada de comportamento
aplicada de modo modul...
Principios para grandes aplicações
web
Princípio 5:
HTML em larga forma uma camada de comportamento
aplicada de modo modul...
Principios para grandes aplicações
web
Princípio 7:
Páginas são construídas a partir de módulos altamente
reutilizáveis qu...
Principios para grandes aplicações
web
Princípio 7:
Páginas são construídas a partir de módulos altamente
reutilizáveis qu...
Principios para grandes aplicações
web
Princípio 9:
HTML, JavaScript, CSS e PHP em larga escala,
oferecem uma firme fundaç...
Principios para grandes aplicações
web
Princípio 9:
HTML, JavaScript, CSS e PHP em larga escala,
oferecem uma firme fundaç...
Interfaces de usuário
Interfaces de usuário
Estrutura
Interfaces de usuário
Estrutura
Apresentação
Interfaces de usuário
Estrutura
Apresentação
Comportamento
Interfaces de usuário
Estrutura: HTML
Apresentação: CSS
Comportamento: JavaScript
O que está errado neste código ?
...
<body>
<h1> Titulo </h1>
Ola mundo
</body>
...
O que está errado neste código ?
...
<body>
<h1> Titulo </h1>
<p>Ola mundo</p>
</body>
...
O que está errado neste código ?
...
<body>
<h1> Titulo </h1>
Ola mundo
</body>
...

Elimina-se as tags
de formatação e
fi...
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/...
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Upcoming SlideShare
Loading in...5
×

Introdução ao desenvolvimento Web

2,605

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,605
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Introdução ao desenvolvimento Web"

  1. 1. Introdução ao desenvolvimento Web Prof: Sérgio Souza Costa
  2. 2. 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
  3. 3. 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.
  4. 4. 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!
  5. 5. 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
  6. 6. 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:
  7. 7. 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.
  8. 8. 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 ● ● ● ● ● ● ● ● ● ● ● ● ●
  9. 9. Word-Wide Web www
  10. 10. 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.
  11. 11. 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"
  12. 12. 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.
  13. 13. 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 ●
  14. 14. 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.
  15. 15. Nexus – Primeiro Navegador
  16. 16. 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!
  17. 17. 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.
  18. 18. Evolução da Web - Iteratividade Fonte : http://www.fml.eti.br/web/evolucao-da-programacao-web.pdf
  19. 19. 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.
  20. 20. 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). ● ● ●
  21. 21. 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
  22. 22. 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>
  23. 23. 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.
  24. 24. 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
  25. 25. A criação ... Criada por Tim Berners-Lee ● ○1991 – Primeira definição da HTML
  26. 26. 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
  27. 27. Tim Berns-Lee screenshot
  28. 28. 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>
  29. 29. 1993 -Mosaic Marc Andreessen
  30. 30. 1994 – Netscape Navigator Marc Andreessen e Jimmy Clarck (Silicom)
  31. 31. Evolução
  32. 32. 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
  33. 33. 1994 – HTML 2 Dinâmico Estático CGI, PHP HTML HTML HTML HTML
  34. 34. 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
  35. 35. 1994- HTML 2
  36. 36. A Guerra ...
  37. 37. A Guerra ... Para seduzir os usuários, cada browser criava novos recursos, java script, applets, plugins, DOM ..
  38. 38. 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.
  39. 39. 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.
  40. 40. 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
  41. 41. 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
  42. 42. 1996 – JavaScript Exemplo <html> <body> <script type="text/javascript"> document.write("<p>Hello World!</p>"); </script> </body> </html>
  43. 43. 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
  44. 44. 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
  45. 45. Java Applets Novos recurso para os browser, plugins … ○Desvantagem: precisavam carregar no cliente para depois executar. ○Banda larga ainda era pouco acessível
  46. 46. 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
  47. 47. 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 ); } } }
  48. 48. 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
  49. 49. Fim do primeiro round Microsoft WIN
  50. 50. 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
  51. 51. 1997 – HTML4 e CSS2 NO FRAMES
  52. 52. 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
  53. 53. 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
  54. 54. 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>
  55. 55. CSS 2 Passou a permitir a construção de layouts profissionais ○Tabela agora só para tabela
  56. 56. 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>
  57. 57. 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>
  58. 58. DHTML DHTML = HTML + JavaScript + CSS + DOM ●
  59. 59. DHTML DHTML = HTML + JavaScript + CSS + DOM ●
  60. 60. 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>
  61. 61. 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 ●
  62. 62. XML - Exemplo
  63. 63. XML - Exemplo CSS é apresentação. XML, conteudo, dado e estrutura. E o HTML ?
  64. 64. 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/
  65. 65. 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
  66. 66. 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> ●
  67. 67. Duvidas ?
  68. 68. 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
  69. 69. 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
  70. 70. Sem AJAX
  71. 71. Com AJAX
  72. 72. <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>
  73. 73. 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 ●
  74. 74. Jquery – Compactando os códigos Com JQuery $ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body") par = document.createElement('p') texto = document.createTextNode("Ola Mundo !!"); par.appendChild(texto); document.body.appendChild(par); Sem JQuery
  75. 75. 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 par = document.createElement('p') texto = document.createTextNode("Ola Mundo !!"); par.appendChild(texto); document.body.appendChild(par); Sem JQuery
  76. 76. 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> <script type="text/javascript" > $(document).ready(function(){ $ ("<p/>", { text: "Ola Mundo !!" }).appendTo("body") }) </script> </head> <body></body> </html>
  77. 77. 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> <script type="text/javascript" > $(document).ready(function(){ $("#p1").mouseenter(function(){ $.ajax({ url: "ajax_test.htm", success: function(html){ $("#a1").html(html); }})})}) </script>
  78. 78. WHATWG The Web Hypertext Application Technology Working Group
  79. 79. 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
  80. 80. HTML 5 - Tags
  81. 81. HTML 5 – Exemplo Mínimo ● <!DOCTYPE html> <html> <head><meta charset="utf-8" /> <title></title> </head> <body> <p>OLA MUNDO</p> </body> </html>
  82. 82. Suporte – 4000 pontos possíveis Podem testar seus browser em: http://html5test. com/ ●
  83. 83. HTML 5 - Suporte
  84. 84. 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.
  85. 85. Edição dos códigos Dreamweaver (Windows) ● Sugestão
  86. 86. Edição dos códigos Linux - Gedit, Geany … ●Bluefish e Kompozer ●
  87. 87. Debugando os códigos Firefox, firebug ●
  88. 88. Debugando os códigos Firefox, firebug ● Chrome já vem nativamente com ferramenta de desenvolvimento
  89. 89. 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
  90. 90. 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
  91. 91. Características de sistemas web Disponibilidade contínua
  92. 92. Características de sistemas web Disponibilidade contínua Grande base de usuários
  93. 93. Características de sistemas web Disponibilidade contínua Grande base de usuários Diversidade
  94. 94. Características de sistemas web Disponibilidade contínua Grande base de usuários Diversidade Longevidade
  95. 95. Características de sistemas web Disponibilidade contínua Grande base de usuários Diversidade Longevidade Múltiplos ambientes
  96. 96. Características de sistemas web Disponibilidade contínua Grande base de usuários Diversidade Múltiplos ambientes Longevidade Atualizações em tempo real
  97. 97. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes
  98. 98. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Grandes aplicações = várias pequenas partes
  99. 99. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Grandes aplicações = várias pequenas partes + Reutilização de códigos
  100. 100. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Grandes aplicações = várias pequenas partes + Reutilização de códigos No cliente e no servidor
  101. 101. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Grandes aplicações = várias pequenas partes + Reutilização de códigos No cliente e no servidor HTML, CSS, JavaScript e PHP
  102. 102. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Grandes aplicações = várias pequenas partes + Reutilização de códigos No cliente e no servidor HTML, CSS, JavaScript e PHP
  103. 103. Componentes modulares Encapsular tudo de que o componente precisa em pequenas partes Sistemas modulares são necessários e Grandes aplicações = várias benéficos para todo e pequenas partes qualquer projeto. + Reutilização de códigos No cliente e no servidor HTML, CSS, JavaScript e PHP
  104. 104. 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!
  105. 105. 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 ?
  106. 106. Não. HTML é a interface do teu sistema, porém mesmo na interface podemos e devemos dividir as responsabilidades ...
  107. 107. 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>
  108. 108. 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
  109. 109. 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 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> </div>
  110. 110. 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)" > <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> Será o nosso primeiro <option value="http://www.brasil.gov.br/emquestao">Em Questão</option> trabalho, faremos um novo <option value="http://www.fomezero.gov.br">Programa Fome Zero</option> portal apenas usando os <option value="http://www.siapenet.gov.br">SIAPENET</option> da web, padroes novos </select> tabela só para tabela. </div>
  111. 111. Foco: sistemas modulares
  112. 112. Foco: sistemas modulares HTML
  113. 113. Foco: sistemas modulares css HTML
  114. 114. Foco: sistemas modulares css HTML Java Script
  115. 115. Foco: sistemas modulares css PHP HTML Java Script
  116. 116. Foco: sistemas modulares css PHP HTML Java Script MySql
  117. 117. Foco: sistemas modulares css PHP HTML Java Script MySql XML
  118. 118. Foco: sistemas modulares css PHP HTML Java Script MySql XML
  119. 119. 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 Foco: sistemas modulares css PHP HTML Java Script MySql XML
  120. 120. Principios para grandes aplicações web
  121. 121. Principios para grandes aplicações web Princípio 1: Grandes aplicações web são construidas a partir de componentes modulares altamente reutilizáveis, sustentáveis e confiáveis.
  122. 122. Principios para grandes aplicações 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.
  123. 123. Principios para grandes aplicações 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.
  124. 124. Principios para grandes aplicações web Princípio 3: HTML em larga escala é semântico, destituído de elementos de apresentações
  125. 125. Principios para grandes aplicaçõ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 ?
  126. 126. Principios para grandes aplicações 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.
  127. 127. Principios para grandes aplicações web Princípio 5: HTML em larga forma uma camada de comportamento aplicada de modo modular e orientado a objeto.
  128. 128. Principios para grandes aplicações 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.
  129. 129. Principios para grandes aplicações 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 .. )
  130. 130. Principios para grandes aplicações 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.
  131. 131. Principios para grandes aplicações 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.
  132. 132. Principios para grandes aplicações 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.
  133. 133. Interfaces de usuário
  134. 134. Interfaces de usuário Estrutura
  135. 135. Interfaces de usuário Estrutura Apresentação
  136. 136. Interfaces de usuário Estrutura Apresentação Comportamento
  137. 137. Interfaces de usuário Estrutura: HTML Apresentação: CSS Comportamento: JavaScript
  138. 138. O que está errado neste código ? ... <body> <h1> Titulo </h1> Ola mundo </body> ...
  139. 139. O que está errado neste código ? ... <body> <h1> Titulo </h1> <p>Ola mundo</p> </body> ...
  140. 140. O que está errado neste código ? ... <body> <h1> Titulo </h1> Ola mundo </body> ... Elimina-se as tags de formatação e fica as tags com semântica relacionada a estrutura.
  141. 141. Vantagens Acessibilidade Portabilidade Manutenabilidade Leveza (tamanho e velocidade) Suporte AJAX
  142. 142. Vantagens Otimizado a busca Consistente Redesigns mais eficientes Público expandido Compatibilidade
  143. 143. References Elisabeth Castro, HTML, XHTML & CSS ●Use a cabeça AJAX - Profissional ●www.w3schools.com ●http://html5test.com/index.html ●
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×