HTML,DHTML,CSS - Introdução, A.Barão, 2002 1 SGML HTML CGI Perl C/C++ CSS VBScript JavaScript JScript ASP JSP JAVA XSL XSLT XHTML DHTML DTD XML.

HTML,DHTML,CSS - Introdução, A.Barão, 2002

1

SGML

HTML

CGI

Perl

C/C++

CSS

VBScript

JavaScript

JScript

ASP

JSPJAVA

XSL

XSLT

XHTML

DHTMLDTD

XML


2

HTMLForms

Construir um formulário

• Nome• Morada• Código Postal• Sexo• Data de Nascimento• Contacto• e-mail• Forma de Contacto• Observações

atributosExemplo


3

HTMLForms

<FORM>

</FORM>

widgets/controls

• campos de texto;• zonas de texto com várias linhas;• listas de selecção;• botões de selecção;• botões de comando;• etc...


4

HTML


5

HTMLForms(…)

exhtml19.html

<INPUT TYPE = "TEXT" NAME="nome" SIZE = "30" MAXLENGTH="50"> Nome<BR>

tipo de controlode input

nome lógicopara processamento

tamanhovisível

comprimentomáximo do atributo(caracteres)


6

HTMLForms(…)

exhtml19.html

<P>Sexo: <INPUT TYPE="RADIO" NAME="sexo" VALUE = "M" >Masculino <INPUT TYPE="RADIO" NAME="sexo" VALUE = "F" >Feminino</P>

tipo de controlode input nome lógico

valor paraidentificaçãodo elemento escolhido


7

HTMLForms(…)

exhtml19.html

<P>Prentendo ser contactado via <SELECT NAME="forma_contacto"><OPTION VALUE="viamail" SELECTED>e-mail <OPTION VALUE="viatele">telefone/telemóvel<OPTION VALUE="viaqq">Qualquer via: e-mail ou telefone/telemóvel</SELECT></P>

nome lógico

valor paraidentificaçãodo elemento escolhido

opção escolhidapor defeito...


8

HTMLForms(…)

exhtml19.html


9

HTMLForms(…)

exhtml19.html

<P>Observações<BR><TEXTAREA NAME="obs" COLS = "40" ROWS="5"></TEXTAREA></P>

nome lógiconr. de colunasem caracteres

nr. de linhas


10

HTMLForms(…)

exhtml19.html

<INPUT TYPE = "SUBMIT" VALUE = "Enviar">

<INPUT TYPE = "RESET" VALUE = "Limpar">

descrição do botão“limpa” componentesde interface(coloca na Form os seus valores originais)

submete os atributos a um processamento(envia os dados da Form para o servidor)


11

HTMLForms

Como processar os dados do questionário?

O que fazer

aos dados obtidos?

Enviar resultados para um e-mail?

Enviar resultados para uma BD?

Utilizar os resultados parapesquisar uma BD?

Enviar resultados para uma Web P.?(…)

[HTML-C,00]


12

HTMLForms

Opção exemplo: enviar resultados para um e-mail.

Em função da Form o servidor pode receber os dadosatravés de dois métodos distintos:

GET Utiliza um método de envio de dados submetidospor adição ao URL que tem um tamanho máximo finitopelo que pode haver truncagem no caso da quantidadede dados a transmitir ser muito grande.

POST Os dados são passados como parte do pedido (+seguro/+eficaz)


13

HTMLForms, HTML/CGI


Usar/partilharscripts CGI

Common Gateway Interfacestandard de programação, usado nosservidores WWW para construção deaplicações que comuniquem comclientes WWW

Interface ou aplicação quepermite a dois sistemas trocarem informação entre si


14

HTML


scripts CGI

Os scripts CGI são programas residentesnos servidores WWW que estendem a sua funcionalidade à medida das necessidades do utilizador

Forms, HTML/CGI


15

HTML


scripts CGI

Plataformas UNIX programasescritos em Perl ou C/C++,…

Plataformas Windows programas normalmente escritos em C/C++,...

Os servidores têm bibliotecas CGI standard e específicas…

Aquisição de ferramentasde desenvolvimento......

Forms, HTML/CGI


16

HTML


Obter scripts CGI para processar resultados do questionário:

Servidores UNIX web.mit.edu/wwwdev/cgiemail/index.html

Macintosh www.mcenter.com/mailpost

Windows 95/98/NT www.spacey.net/rickoz/wcgimail.stm

Forms, HTML/CGI


17

HTML


Partilhar scripts CGI um exemplo:

http://pages.hostedscripts.com

Existem inúmeros sites com a oferta destetipo de serviços...

O utilizador regista-semuito rapidamente

tem acesso gratuito ascripts CGI

instruções para adaptaro código HTML de modoa utilizar os scripts CGI

Forms, HTML/CGI


18

HTML


Forms, HTML/CGI

<FORM ACTION="http://members.hostedscripts.com/formmailer.cgi?user=cod” METHOD="POST">

Adaptar a tag <FORM> para utilizar o script CGI

Código doutilizadoratribuído no registo

Os resultados do questionárioserão enviados para o e-maildo utilizador no momento “Aceitar”


19

HTML


Forms, HTML/CGI

Possibilidade de definir campos de preenchimento obrigatório<INPUT TYPE="HIDDEN" NAME="required" VALUE="nome,email">

Redireccionar para uma página de agradecimento após o envio:<INPUT TYPE="HIDDEN" NAME="redirect” VALUE="http://www.pagina.pt/obrigado.html">

E já agora, um contador gráfico de visitantes que preencheram o questionário...<IMG SRC="http://members.hostedscripts.com/counter.cgi?user=cod">


20

DHTML

DHTML - HTML Dinâmico(*)

mecanismos de estilos definidos para o HTML 4.0(CSS-Cascading Style Sheets)

linguagens de scripting Ex: JavaScript, VBScript,...

junção

(*) Suportado por browsers a partir da geraçãoInternet Explorer 4 ou Netscape Navigator 4

processamentosdinâmicos


21

DHTML

VBScript

Microsoft Visual Basic Scripting Edition

Possibilita scriptings activos em vários ambientes

Exemplos:

Web client scripting no Microsoft Internet Explorer

(portabilidade para outros browsers)

Web server scripting - Microsoft Internet Information Server


22

DHTML VBScript

Web client scriptingExe

mplo #1

(…)<HEAD>

<SCRIPT LANGUAGE = "VBSCRIPT">

Sub titulo_onMouseDown titulo.style.backgroundColor="blue" titulo.style.color="white"End Sub

</SCRIPT>

</HEAD>(…)

A tag SCRIPT informaque o código seguinteserá de uma linguagemde scripting


23

DHTML VBScript

Web client scriptingExe

mplo #2

(…)

<BODY>

<FORM NAME="Form1">

<INPUT TYPE="Button" NAME="Button1" VALUE="Click">

<SCRIPT FOR="Button1" EVENT="onClick" LANGUAGE="VBScript">

MsgBox "Button Pressed!" </SCRIPT>

</FORM>

</BODY>

(…) inline scripting


24

DHTMLVBScript

exdhtml1.html

Outro exemplo,a página apresenta-seinicialmente assim...


25

DHTMLVBScript

exdhtml1.html

A passagem do mouse sobre[Sessão 1] provoca a visualização da zona azulcom informações da sessão 1

A saída do mouse da zonade texto [Sessão 1] provocaoutra alteração dinâmica:as informações da zonaazul são retiradas


26

DHTMLVBScript

exdhtml1.html

Outra alteração dinâmica:

um clique sobre a zona“F.P.Web” provoca umamudança de atributos

Fonte: preta brancaFundo: cinza azul

(soltar o botão repõe atributos)


27

DHTMLVBScript

exdhtml1.html

Algumas tarefas para realizar o exemplo anterior:

Definição de estilos

Atribuição de estilos

Preparar selectores

Preparar comportamentos dinâmicosatravés de VBScript


28

DHTMLDefinição de estilos

exdhtml1.html

<HEAD>

<STYLE Type="text/css">

.atributosPagina {

background-color:white; color:black; text-align:left;}(…)</STYLE>

Cascading Style Sheets

Nota: existe uma forma mais adequada dedefinir estilos atravésde CSS’s que seráalvo de análiseem Partilhar CSS’s


29

DHTMLAtribuição de estilos

exdhtml1.html

<BODY Class = "atributosPagina">

<DIV><H1 ID = titulo Class = "atributosTitulo">F.P.Web</H1></DIV>

<DIV><H2 ID = s1 Class = "atributosTopico"><P>[Sessão 1]</P></DIV>

<DIV><H3 ID = infoS1 Class = "atributosInfo"><BR><P>Apresentação da Cadeira</P><P>A Web: origens, conceitos e visões percursoras</P><BR></DIV>

</BODY>

Estilo p/ aplicarao elemento


30

DHTMLPreparar selectores

exdhtml1.html

<DIV> <H1 ID = titulo Class = "atributosTitulo"> F.P.Web </H1></DIV>

divisão lógica dentro do documento

selector do elemento


31

DHTMLPreparar comportamentos dinâmicos através de VBScript

exdhtml1.html

<SCRIPT LANGUAGE = "VBSCRIPT">

Sub titulo_onMouseDown titulo.style.backgroundColor="blue" titulo.style.color="white"End Sub

Sub titulo_onMouseUp titulo.style.backgroundColor="silver" titulo.style.color="black"End Sub

Sub s1_onMouseOver infoS1.style.Visibility="Visible"End Sub

Sub s1_onMouseOut infoS1.style.Visibility="Hidden"End Sub

</SCRIPT>


32

DHTML

JavaScript

• Lançado pela Sun Microsystems e pela Netscape pouco tempo após o lançamento do JAVA

• O nome deriva apenas de semelhanças sintáticas com JAVA

• Tal como outras scripting languages, JavaScript é uma linguagem de tipo interpretado - não necessita de compilação

código embebido no próprio HTML

JavaScript

Nota: Jscript, versão JavaScript da Microsoft


33

DHTMLJavaScript

• Suporta aplicações Web client e Web server

• No lado servidor podem ser utilizados scripts para substituir programas CGI (ex: construção de conteúdos em tempo real)

• Elimina problemas de utilização de programas escritos em OS Shell languages: Perl,…

[MJSPE]


34

DHTMLJavaScript

exdhtml2.html

Exemplo JavaScript

Utilização de prompts

Pedidos de confirmação

Construção de conteúdo HTML em função da resposta do utilizador

Chamada de funções em JavaScript


35

DHTMLJavaScript

exdhtml2.html

Ao entrar na página o utilizador é convidado a preenchero seu nome através de uma prompt...


36

DHTMLJavaScript

exdhtml2.html

… de seguida o utilizador pode visualizar uma tabuadase a sua resposta for “OK” na confirm...


37

DHTMLJavaScript

exdhtml2.html

… finalmente, efectua-se umaconstrução de linhasHTML para visualizaçãoda tabuadaexemplificativa


38

DHTMLJavaScript

exdhtml2.html

<SCRIPT LANGUAGE = "JavaScript">var nome = prompt('Digite o seu nome p.f.','');

if ( (nome=='') || (nome==null) ) { nome="Sr.Anónimo";}

var vertabuada=confirm("Ver a tabuada?");

function multiplica(v1, v2) { return ( v1 * v2 );}</SCRIPT>

função a invocar posteriormente

prompt do nome evalidação...

pedido de confirmação

Entre <HEAD> e </HEAD>


39

DHTMLJavaScript

exdhtml2.html

<SCRIPT LANGUAGE = "JavaScript">if ( vertabuada == false ) { document.write("<H1>Olá " + nome + "!</H1>");}else { document.write("<H1>" + nome + " não sabe a tabuada?</H1>"); document.write("<H2>Home page da tabuada!</H2>"); for (i=1; i<=9;i++) { document.write("<H4> 9 x " + i + " = " + multiplica(9,i) + "</H4>"); }}</SCRIPT>

Entre <BODY> e </BODY>

chamar a função criada

Código HTML gerado em função dos inputs...


40

DHTMLJavaScript

exdhtml3.html

• “Clicar” o mouse sobre o botão 1 provoca a abertura de uma caixa de mensagem

• A passagem do mouse sobre o botão 2 provoca uma mensagem na linha de status

• Carregar no botão “W3” provoca um salto para http://www.w3.org

Outro exemplo


41

DHTMLJavaScript

exdhtml3.html

<BODY>

<FORM>

<INPUT type="button" value="Botão 1" onClick= "alert('carregou no botão 1!')">

<INPUT type="button" value="Botão 2" onMouseover="window.status='segundo botão..';return true;" onMouseout="window.status='';return true;" >

<INPUT type="button" value="W3" onClick="window.location='http://www.w3.org'">

</FORM>

</BODY>


42

Partilhar CSS’sCascading Style Sheets

Definição de formatos em folhas de estilo que documentosHTML podem partilhar.

Vantagens:

partilha de códigotags de formatação separadas do documento HTMLmelhor manutenção do softwareredução de tempos de desenvolvimentoflexibilidade na formatação...


43


Folha CSS

Documentos HTML

Vários documentos HTML podem partilhar a mesmaformatação CSS


44


Deptº Comercial(comercial.css)

Documentos HTML

Deptº Financeiro(financ.css)


45

Partilhar CSS’s

Exemploexhtml20.htmlcom utilizaçãodedefpag.css


46

Partilhar CSS’s

Exemploexhtml21.htmlcom utilizaçãodedefpag.css


47


tag { atributo1: a ; atributo2: b ; … }


48


defpag.css

body { font-family: garamond, "times new roman", serif; font-size: 1.4em; background-color: white; color: black; }

div.seccao { margin-left: 10%; margin-right: 1%; border: 8px solid #99ccff;}

div.seccao h2 { margin-left: -12%; font-family: "arial black", arial, sans-serif; color: white; background-color: blue;}

div.nota { font-family: arial, helvetica, sans-serif; font-size: 0.9em; margin-left: 3%; margin-right: 3%; background-color: #ffffcc; border-left: red solid; border-left-width: 10px; }

Exemplo


49


<HEAD>

<TITLE>FPW</TITLE>

<LINK REL=stylesheet HREF="defpag.css">

</HEAD>

exhtml20.html

Estabelece uma ligação relacionadaentre o presente documento (exhtml20.html)e outro recurso (defpag.css)


50


<BODY> <DIV CLASS = "seccao"> <H2>Este é o título da secção...</H2> <P>Nesta secção desenvolve-se um tema(…)</P>

<DIV CLASS= "nota"> <H3> Nota: CSS, Cascading Style Sheets </H3> <P>Através das folhas de estilos CSS (…)</P> </DIV> </DIV> </BODY>

exhtml20.html

No documento HTML a concentração do programadorpassa a estar mais no conteúdo e

menos na apresentação


51

XMLExtensible Markup Language

Perspectiva histórica

SGMLStandardGeneralizedMarkup Language

HTML (…) HTML 3.21997

HTML 4.1 1999

CSS1 1997

XML 1.0w3 em 1998

XHTML 1.02000

(…)

CSS2 1998

DH

TML

[XHTMLWS,00]


52


XML é uma tecnologia de conteúdos alternativa e complementar ao HTML

Adaptável aos dados

Facilita a iteracção entre aplicações e documentos

Documentos em formato independente do fabricante

Descreve a estrutura e conteúdo de documentos não asua formatação . Formatações podem ser adicionadas

através de folhas de estilos

[XMLDH]


53


Criação de tags próprias

Definição de tipos de documento

DTD - Document Type Definition

Definir a estrutura do documento através deelementos, entidades, atributos,...


54


HTML XML

tags

Orientadaspara o aspecto

gráfico da página

Orientadas paradescrevero conteúdo e estruturade dadosindependentementeda formataçãográfica


55


Algumas aplicações XML:

Publicação de documentos independente da rede e das aplicações

Processamento de dados documentais (Ex: estatísticas sobre conjuntos de documentos)

Procura/Manipulação de dados documentais (Ex: pesquisas sobre conjuntos de documentos)

[XMLLW,00]


56


Suportada a partir de browsers de 5ª geração

Internet Explorer , Netscape Navigator

5


57

XMLExtensible Markup LanguageAlguns exemplos

<?xml version="1.0" standalone="yes"?>

<?xml-stylesheet type="text/css" href="texto.css"?>

<texto>Linha de texto...</texto>

exxml01.xml


58


exxml02.xml

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?><?xml-stylesheet type="text/css" href="pessoa.css"?>

<pessoa>

<nome>José Alberto Pinto</nome> <sexo>Masculino</sexo> <bi>8445658</bi>

</pessoa>

tag criada pelo utilizador

atributo


59


pessoa.css

pessoa { display:block;text-align:left; }nome { display:block;font-family: arial; font-size:16pt;color:black; }sexo { display:block;font-family: arial; font-size:12pt;color:blue; }bi { display:block;font-family: arial; font-size:12pt;color:blue; }

CSS para associar a XML anterior


60


exxml03.xml

<anoLectivo> <turma> <nomeTurma>Turma A</nomeTurma> <pessoa> <nome>António Marques</nome> <sexo>Masculino</sexo> <bi>8435152</bi> </pessoa>

<pessoa> <nome>Carla Moura</nome> <sexo>Feminino</sexo> <bi>8005152</bi> </pessoa></turma></anoLectivo>

Uma folha XSL (Extensible Style[sheet] Language)pode filtrar atributos

exemplo:

<xsl:template match=“anoLectivo”>(…)<xsl:value-of select=“@nome”/>


61


XSLT (Extensible Stylesheet Language Transformation)

TransformaçõesXSL

Documento

Folha de estilos

DocumentoSaída

ProcessadorXSL


62


Sobre a XSL (Extensible Style Language)...

DocXML

FolhaXSLServidor

WWW

BrowserWWW

O browser efectua a transformação e disponibiliza o resultado ao utilizador


63


Sobre a XSL (Extensible Style Language)...

DocXML

FolhaXSL Servidor

WWW

BrowserWWW

O servidor efectua o esforço de transformação

DocHTML


64


[XMLLW,00]

O comércio electrónico e o XML

“O objectivo principal das soluções E-Commerce é a

integração de sistemas e tecnologias diversas, com

apenas uma coisa em comum: a utilização do XML

como linguagem de comunicação”


65


[XMLLW,00]

Aplicações XML : Um site de Leilões on-line (exemplo)

Servidor WWWB.D. de artigos Cliente WWW

ASP

XML

ASPs para interrogar a B.D. e gerarconteúdo XML (obriga o cliente a ter o Internet Explorer)

Utilizando JAVA o sistemaficaria acessível p/ outrosbrowsers...


66

XHTMLXHTML é uma especificação w3 do HTML 4.0 ,

reescrita com as regras XML

Algumas diferenças XHTML face a HTML• no XHTML não é possível omitir as tags <head> e <body>

• todas as tags têm que ser fechadas ( </tag> )

• não é possível cruzar tags ( <P><I>AAA</P></I> )

• tags e atributos em minúsculas (pq. XML é case sensitive)

• atributos XHTML têm que ter os seus valores sempre entre aspas


67

Bibliografia[HTML-C,00] HTML COMPLETE Second Edition (vários autores) SYBEX

[MHTML4] Mastering HTML 4 Ray-Ray SYBEX

[MSJPE] Mastering JavaScript James Jaworski SYBEX


68

Bibliografia[XMLDH] XML Developer’s Handbook Kurt Cagle SYBEX

[XMLLW,00] XML A Nova Linguagem da Web Pedro Coelho FCA, 2000

[XHTMLWS,00] XHTML 1.0 Web Development Sourcebook Ian S. Graham WILEY, 2000


69

Na WWW…Recursos HTML e especificações

www.w3.org/MarkUp/ HTML standards overviewwww.w3.org/TR/html4/ Especificação HTML 4.01

Recursos CSS e especificações

www.w3.org/Style/CSS/ CSS standards overviewwww.w3.org/TR/REC-CSS1 Especificação CSS Level 1www.w3.org/TR/REC-CSS2/ Especificação CSS Level 2


70

Na WWW…Recursos XML e especificaçõeswww.w3.org/XML/ Standards e especificações XMLwww.w3.org/TR/REC-xml Especificação XML 1.0www.xml.com Artigos e tutoriaiswww.xml101.com Tutoriaiswww.xml101.com/dtd/ Tutoriais sobre DTDsxml.org Industry news

XML e E-Commercexml.com/pub/Ecommerce Overview de siteswww.commerceone.com/xml/ CommerceOne toolswww.microsoft.com/biztalk/ Microsoft BizTalk


71

Na WWW…Recursos XSL e XSLT

www.w3.org/Style/XSL/ XSL, eXtensible Stylesheet Languagewww.w3.org/TR/xslt XSLT, XSL Transformations language

Standards XHTML

www.w3.org/TR/xhtml1/ XHTML


72

Na WWW…

Mais Recursos CGI...cgi.resourceindex.com/Programs_and_Scripts/www.cgiforme.comwww.worldwidemart.com/scripts/www.rlaj.com/scripts/www.cgi-resources.com/

Sobre Perl, informações, módulos, livrarias …www.perl.comwww.cpan.orgwww.python.org


73

Na WWW…

Tutoriais de programação

www.programmingtutorials.com

HTML,DHTML,CSS - Introdução, A.Barão, 2002 1 SGML HTML CGI Perl C/C++ CSS VBScript JavaScript JScript ASP JSP JAVA XSL XSLT XHTML DHTML DTD XML.

Documents