View
2.452
Download
0
Category
Preview:
DESCRIPTION
Citation preview
Introdução ao desenvolvimento Web
Prof: Sérgio Souza Costa
Sobre mim
Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com
https://sites.google.com/site/profsergiocosta/home
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta
http://www.slideshare.net/skosta/presentations?order=popular
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 camadasA 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
Word-Wide Web
www
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.
Internet antes da Web
Assistam o documentário:
"Download: A verdadeira historia de internet"
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.
O que é web?
Servidores web e ClientesServidores 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
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.
Nexus – Primeiro Navegador
Nexus – Primeiro Navegador
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!
O que é 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.
Web
Evolução da Web - Iteratividade
Fonte : http://www.fml.eti.br/web/evolucao-da-programacao-web.pdf
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.
Lado do Servidor
Clientes
Servidor
Internet
CGIRUBYPHPASPJAVA, SERVLET
Arquitetura de aplicação WEBExistem 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.
ApacheWeb Server
HTTP+
módulo PHP
MySQLBanco de Dados
Internet
Linguagem de Programação PHP
Exemplo de código php no servidor
<HTML>
<HEADER>
<TITLE>
Primeiro Programa em PHP
</TITLE>
</HEADER>
<BODY>
<H1>Exemplo 1</H1>
<?php
$primeiravar = "Olá Mundo!";
echo $primeiravar;
?>
</BODY>
</HTML>
Código recebido pelo
Browser<HTML>
<HEADER>
<TITLE>
Primeiro Programa em PHP
</TITLE>
</HEADER>
<BODY>
<H1>Exemplo 1</H1>
Olá Mundo!
</BODY>
</HTML>
O navegador interpreta o código recebido e apresenta ao usuário.
Lado do Cliente
Clientes
Servidor
Internet
HTMLCSSShockwaveFlashJava AppletJavaScriptActiveXXHTMLXML
HTML Timeline
vs.
HTML 1.0
RFC 1866
1990 1995
1997
1999
2000
1998
1996
2001
2002
XHTML 2.0
Begins…
2010
Logo oficial do
Html5
6/3/2011
A criação ...
●Criada por Tim Berners-Lee○1991 – Primeira definição da HTML
6/3/2011
1991 – HTML 1
●Em agosto 1991, Tim Berners-Lee publica o primeiro website:
Texto e hiper-links.
http://info.cern.ch/
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
6/3/2011
Tim Berns-Lee screenshot
6/3/2011
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 retrievalinitiative aiming to give universal….
</BODY>
6/3/20111993 -Mosaic
Marc Andreessen
6/3/2011
1994 – Netscape Navigator
Marc Andreessen e Jimmy Clarck (Silicom)
6/3/2011
Evolução
6/3/2011
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 clienteConexões lentasGuerra dos navegadores
6/3/2011
1994 – HTML 2
CGI, PHP
HTMLHTMLHTML HTML
Dinâmico
Estático
6/3/2011
1994 – HTML 2
CGI, PHP
HTMLHTMLHTML HTML
Dinâmico
Estático
HTML era estrutura, apresentação e interação (formulário e botão submit)
6/3/2011
1994- HTML 2
6/3/2011
A Guerra ...
6/3/2011
A Guerra ...Para seduzir os usuários, cada browser criava novos recursos, java script, applets, plugins, DOM ..
6/3/2011
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.
6/3/2011
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.
6/3/2011
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
6/3/2011
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
Tempos depois ...Netscape apresentou o JavaScript para ECMA International para a padronização resultando na versão padronizada chamado ECMAScript.
6/3/2011
1996 – JavaScript
Exemplo
<html><body>
<script type="text/javascript">document.write("<p>Hello World!</p>");</script>
</body></html>
6/3/2011
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
6/3/2011
CSS Exemplo
<html><head>
<link rel="stylesheet" type="text/css" href="ola.css">
<title>Ola mundo</title> </head><body>
<p>Ola mundo</p>
</body></html>
p{color:red}
HTML
CSS
6/3/2011
Java Applets
Novos recurso para os browser, plugins …○Desvantagem: precisavam carregar no cliente para
depois executar. ○Banda larga ainda era pouco acessível
6/3/2011
Java Applets
Novos recurso para os browser, plugins …○Desvantagem: precisavam carregar no cliente para
depois executar. ○Banda larga ainda era pouco acessível
Aqui sim, tinhamos realmente aplicações Java na WEB
6/3/2011
Java Applets
Exemploimport 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 );}}}
6/3/2011
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
6/3/2011
Fim do primeiro round
Microsoft WIN
6/3/2011
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
6/3/2011
1997 – HTML4 e CSS2
NO FRAMES
6/3/2011
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
6/3/2011
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 o uso das tags desaprovadas○Frameset, permite o uso das tags desaprovadas e
frames (quadros)○Estrita, proibe o uso das tags desaprovadas e dos
frames
6/3/2011
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>
6/3/2011
CSS 2
Passou a permitir a construção de layouts profissionais
○Tabela agora só para tabela
6/3/2011
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>
6/3/2011
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>
6/3/2011
DHTML
●DHTML = HTML + JavaScript + CSS + DOM
6/3/2011
DHTML
●DHTML = HTML + JavaScript + CSS + DOM
6/3/2011
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>
6/3/2011
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
6/3/2011
XML - Exemplo
6/3/2011
XML - ExemploCSS é apresentação.
XML, conteudo, dado e estrutura. E o HTML ?
6/3/2011
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/
6/3/2011
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
6/3/2011
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>
Duvidas ?
6/3/2011
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
6/3/2011
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
6/3/2011
Sem AJAX
6/3/2011
Com AJAX
<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);}
function stateChanged() {if (xmlHttp.readyState==4) {document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}}function GetXmlHttpObject() {var xmlHttp=null;try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e) {// Internet Explorertry {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
</script>
HTML Script
6/3/2011
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
6/3/2011
Jquery – Compactando os códigos
par = document.createElement('p')texto = document.createTextNode("Ola Mundo !!");par.appendChild(texto);document.body.appendChild(par);
Com JQuery
Sem JQuery
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")
6/3/2011
Jquery – Compactando os códigos
par = document.createElement('p')texto = document.createTextNode("Ola Mundo !!");par.appendChild(texto);document.body.appendChild(par);
Com JQuery
Sem JQuery
$ ("<p/>", { text: "Ola Mundo !!"}).appendTo("body")Explora bem o uso de funções de alta ordem em JavaScript
6/3/2011
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>
6/3/2011
AJAX com JQUERY
<body><p id="p1">passe o mouse</p><div id="a1"></div></body>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript" >$(document).ready(function(){ $("#p1").mouseenter(function(){$.ajax({url: "ajax_test.htm",success: function(html){$("#a1").html(html);}})})})</script>
ScriptHTML
6/3/2011
WHATWGThe Web Hypertext Application Technology Working
Group
6/3/2011
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
6/3/2011
6/3/2011
HTML 5 - Tags
6/3/2011
HTML 5 – Exemplo
●Mínimo
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><p>OLA MUNDO</p></body></html>
6/3/2011
Suporte – 4000 pontos possíveis
●Podem testar seus browser em: http://html5test.com/
6/3/2011
HTML 5 - Suporte
6/3/2011
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.
6/3/2011
Edição dos códigos
●Dreamweaver (Windows) Sugestão
6/3/2011
Edição dos códigos
●Linux - Gedit, Geany …●Bluefish e Kompozer
6/3/2011
Debugando os códigos
●Firefox, firebug
6/3/2011
Debugando os códigos
●Firefox, firebugChrome já vem nativamente com ferramenta de desenvolvimento
6/3/2011
Innovations
Browsers
Languages
1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009
HTML 2.0Specification
s
HTML 3.2W3C Rec.
HTML 4.0W3C Rec.
HTML 4.01W3C Rec.
HTML 5Draft
HTML 5working group
XHTML 1.0W3C Rec.
XHTML 1.1W3C Rec.
XHTML 2Draft
IE 4
IE 5
IE 6
IE 7
IE 8
NS 1
NS 2
NS 4
NS 4.7
NS 6
NS 7
FF 1
FF 2
FF 3
IE 2
Facebook podcasting
youtube
iTunes
CSS 1.0W3C Rec.
CSS 2.0W3C Rec.
CSS 3.0Draft
MySpace
AJAX
SAF 1
SAF 2
SAF 3
SAF 4
IE 3
NS 3
blogging
W3C RSS Web Commerce
Web Conferencing
● 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
Boas práticas
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 ambientes
Características de sistemas web
Disponibilidade contínua
Grande base de usuários
Diversidade
Longevidade
Atualizações em tempo real
Múltiplos ambientes
Componentes modulares
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
+ Reutilização de códigos
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
+ Reutilização de códigos
No cliente e no servidor
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
+ Reutilização de códigos
No cliente e no servidorHTML, CSS, JavaScript e PHP
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
+ Reutilização de códigos
No cliente e no servidorHTML, CSS, JavaScript e PHP
Encapsular tudo de que o componente precisa em pequenas partes
Componentes modulares
Grandes aplicações = várias pequenas partes
+ Reutilização de códigos
No cliente e no servidorHTML, CSS, JavaScript e PHP
Encapsular tudo de que o componente precisa em pequenas partes
Sistemas modulares são necessários e benéficos para todo e qualquer projeto.
O que acham deste HTML ?
Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!
<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>
O que acham deste HTML ?
Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!
<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>
○ 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 ...
<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>
Exemplo - Portal academico - original
todo este código é apenas para esta parte da página
<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>
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>
Exemplo - Portal academico - versão limpa
Será o nosso primeiro trabalho, faremos um novo portal apenas usando os padroes novos da web, tabela só para tabela.
Foco: sistemas modulares
Foco: sistemas modulares
HTML
Foco: sistemas modulares
HTMLcss
Foco: sistemas modulares
HTMLcss
Java Script
Foco: sistemas modulares
HTMLcss
Java Script
PHP
Foco: sistemas modulares
HTMLcss
Java Script
PHP
MySql
Foco: sistemas modulares
HTMLcss
Java Script
PHP
MySql XML
Foco: sistemas modulares
HTMLcss
Java Script
PHP
MySql XML
Foco: sistemas modulares
HTMLcss
Java Script
PHP
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
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 modulares altamente reutilizáveis, sustentáveis e confiáveis.
Principios para grandes aplicações webPrincí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.
Principios para grandes aplicações webPrincí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.
Principios para grandes aplicações web
Princípio 3:
HTML em larga escala é semântico, destituído de elementos de apresentações
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 ?
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.
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.
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.
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 .. )
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.
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.
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.
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 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
Recommended