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.

Apresentação em tema: "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."— Transcrição da apresentação:

1 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

2 HTML,DHTML,CSS - Introdução, A.Barão, 2002 2 HTML Forms Construir um formulário Nome Morada Código Postal Sexo Data de Nascimento Contacto e-mail Forma de Contacto Observações atributos Exemplo

3 HTML,DHTML,CSS - Introdução, A.Barão, 2002 3 HTML Forms 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,DHTML,CSS - Introdução, A.Barão, 2002 4 HTML

5 HTML,DHTML,CSS - Introdução, A.Barão, 2002 5 HTML Forms (…) exhtml19.html Nome tipo de controlo de input nome lógico para processamento tamanho visível comprimento máximo do atributo (caracteres)

6 HTML,DHTML,CSS - Introdução, A.Barão, 2002 6 HTML Forms (…) exhtml19.html Sexo: Masculino Feminino tipo de controlo de input nome lógico valor para identificação do elemento escolhido

7 HTML,DHTML,CSS - Introdução, A.Barão, 2002 7 HTML Forms (…) exhtml19.html Prentendo ser contactado via e-mail telefone/telemóvel Qualquer via: e-mail ou telefone/telemóvel nome lógico valor para identificação do elemento escolhido opção escolhida por defeito...

8 HTML,DHTML,CSS - Introdução, A.Barão, 2002 8 HTML Forms (…) exhtml19.html

9 HTML,DHTML,CSS - Introdução, A.Barão, 2002 9 HTML Forms (…) exhtml19.html Observações nome lógico nr. de colunas em caracteres nr. de linhas

10 HTML,DHTML,CSS - Introdução, A.Barão, 2002 10 HTML Forms (…) exhtml19.html descrição do botão “limpa” componentes de interface (coloca na Form os seus valores originais) submete os atributos a um processamento (envia os dados da Form para o servidor)

11 HTML,DHTML,CSS - Introdução, A.Barão, 2002 11 HTML Forms 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 para pesquisar uma BD? Enviar resultados para uma Web P.? (…) [HTML-C,00]

12 HTML,DHTML,CSS - Introdução, A.Barão, 2002 12 HTML Forms Opção exemplo: enviar resultados para um e-mail. Em função da Form o servidor pode receber os dados através de dois métodos distintos: GET Utiliza um método de envio de dados submetidos por adição ao URL que tem um tamanho máximo finito pelo que pode haver truncagem no caso da quantidade de dados a transmitir ser muito grande. POST Os dados são passados como parte do pedido (+seguro/+eficaz)

13 HTML,DHTML,CSS - Introdução, A.Barão, 2002 13 HTML Forms, HTML/CGI Opção exemplo: enviar resultados para um e-mail. Usar/partilhar scripts CGI Common Gateway Interface standard de programação, usado nos servidores WWW para construção de aplicações que comuniquem com clientes WWW Interface ou aplicação que permite a dois sistemas trocarem informação entre si

14 HTML,DHTML,CSS - Introdução, A.Barão, 2002 14 HTML Opção exemplo: enviar resultados para um e-mail. scripts CGI Os scripts CGI são programas residentes nos servidores WWW que estendem a sua funcionalidade à medida das necessidades do utilizador Forms, HTML/CGI

15 HTML,DHTML,CSS - Introdução, A.Barão, 2002 15 HTML Opção exemplo: enviar resultados para um e-mail. scripts CGI Plataformas UNIX programas escritos 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 ferramentas de desenvolvimento...... Forms, HTML/CGI

16 HTML,DHTML,CSS - Introdução, A.Barão, 2002 16 HTML Opção exemplo: enviar resultados para um e-mail. 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,DHTML,CSS - Introdução, A.Barão, 2002 17 HTML Opção exemplo: enviar resultados para um e-mail. Partilhar scripts CGI um exemplo: http://pages.hostedscripts.com Existem inúmeros sites com a oferta deste tipo de serviços... O utilizador regista-se muito rapidamente tem acesso gratuito a scripts CGI instruções para adaptar o código HTML de modo a utilizar os scripts CGI Forms, HTML/CGI

18 HTML,DHTML,CSS - Introdução, A.Barão, 2002 18 HTML Opção exemplo: enviar resultados para um e-mail. Forms, HTML/CGI <FORM ACTION="http://members.hostedscripts.com/formmailer.cgi?user=cod” METHOD="POST"> Adaptar a tag para utilizar o script CGI Código do utilizador atribuído no registo Os resultados do questionário serão enviados para o e-mail do utilizador no momento “Aceitar”

19 HTML,DHTML,CSS - Introdução, A.Barão, 2002 19 HTML Opção exemplo: enviar resultados para um e-mail. Forms, HTML/CGI Possibilidade de definir campos de preenchimento obrigatório 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...

20 HTML,DHTML,CSS - Introdução, A.Barão, 2002 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ção Internet Explorer 4 ou Netscape Navigator 4 processamentos dinâmicos

21 HTML,DHTML,CSS - Introdução, A.Barão, 2002 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 22 DHTML VBScript Web client scripting Exemplo #1 (…) Sub titulo_onMouseDown titulo.style.backgroundColor="blue" titulo.style.color="white" End Sub (…) A tag SCRIPT informa que o código seguinte será de uma linguagem de scripting

23 HTML,DHTML,CSS - Introdução, A.Barão, 2002 23 DHTML VBScript Web client scripting Exemplo #2 (…) MsgBox "Button Pressed!" (…) inline scripting

24 HTML,DHTML,CSS - Introdução, A.Barão, 2002 24 DHTML VBScript exdhtml1.html Outro exemplo, a página apresenta-se inicialmente assim...

25 HTML,DHTML,CSS - Introdução, A.Barão, 2002 25 DHTML VBScript exdhtml1.html A passagem do mouse sobre [Sessão 1] provoca a visualização da zona azul com informações da sessão 1 A saída do mouse da zona de texto [Sessão 1] provoca outra alteração dinâmica: as informações da zona azul são retiradas

26 HTML,DHTML,CSS - Introdução, A.Barão, 2002 26 DHTML VBScript exdhtml1.html Outra alteração dinâmica: um clique sobre a zona “F.P.Web” provoca uma mudança de atributos Fonte: preta branca Fundo: cinza azul (soltar o botão repõe atributos)

27 HTML,DHTML,CSS - Introdução, A.Barão, 2002 27 DHTML VBScript exdhtml1.html Algumas tarefas para realizar o exemplo anterior: Definição de estilos Atribuição de estilos Preparar selectores Preparar comportamentos dinâmicos através de VBScript

28 HTML,DHTML,CSS - Introdução, A.Barão, 2002 28 DHTML Definição de estilos exdhtml1.html.atributosPagina { background-color:white; color:black; text-align:left; } (…) Cascading Style Sheets Nota: existe uma forma mais adequada de definir estilos através de CSS’s que será alvo de análise em Partilhar CSS’s

29 HTML,DHTML,CSS - Introdução, A.Barão, 2002 29 DHTML Atribuição de estilos exdhtml1.html F.P.Web [Sessão 1] Apresentação da Cadeira A Web: origens, conceitos e visões percursoras Estilo p/ aplicar ao elemento

30 HTML,DHTML,CSS - Introdução, A.Barão, 2002 30 DHTML Preparar selectores exdhtml1.html F.P.Web divisão lógica dentro do documento selector do elemento

31 HTML,DHTML,CSS - Introdução, A.Barão, 2002 31 DHTML Preparar comportamentos dinâmicos através de VBScript exdhtml1.html 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

32 HTML,DHTML,CSS - Introdução, A.Barão, 2002 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 33 DHTML JavaScript 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 34 DHTML JavaScript 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 35 DHTML JavaScript exdhtml2.html Ao entrar na página o utilizador é convidado a preencher o seu nome através de uma prompt...

36 HTML,DHTML,CSS - Introdução, A.Barão, 2002 36 DHTML JavaScript exdhtml2.html … de seguida o utilizador pode visualizar uma tabuada se a sua resposta for “OK” na confirm...

37 HTML,DHTML,CSS - Introdução, A.Barão, 2002 37 DHTML JavaScript exdhtml2.html … finalmente, efectua-se uma construção de linhas HTML para visualização da tabuada exemplificativa

38 HTML,DHTML,CSS - Introdução, A.Barão, 2002 38 DHTML JavaScript exdhtml2.html 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 ); } função a invocar posteriormente prompt do nome e validação... pedido de confirmação Entre e

39 HTML,DHTML,CSS - Introdução, A.Barão, 2002 39 DHTML JavaScript exdhtml2.html if ( vertabuada == false ) { document.write(" Olá " + nome + "! "); } else { document.write(" " + nome + " não sabe a tabuada? "); document.write(" Home page da tabuada! "); for (i=1; i<=9;i++) { document.write(" 9 x " + i + " = " + multiplica(9,i) + " "); } Entre e chamar a função criada Código HTML gerado em função dos inputs...

40 HTML,DHTML,CSS - Introdução, A.Barão, 2002 40 DHTML JavaScript 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 41 DHTML JavaScript exdhtml3.html <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'">

42 HTML,DHTML,CSS - Introdução, A.Barão, 2002 42 Partilhar CSS’s Cascading Style Sheets Definição de formatos em folhas de estilo que documentos HTML podem partilhar. Vantagens: partilha de código tags de formatação separadas do documento HTML melhor manutenção do software redução de tempos de desenvolvimento flexibilidade na formatação...

43 HTML,DHTML,CSS - Introdução, A.Barão, 2002 43 Partilhar CSS’s Cascading Style Sheets Folha CSS Documentos HTML Vários documentos HTML podem partilhar a mesma formatação CSS

44 HTML,DHTML,CSS - Introdução, A.Barão, 2002 44 Partilhar CSS’s Cascading Style Sheets Deptº Comercial (comercial.css) Documentos HTML Deptº Financeiro (financ.css)

45 HTML,DHTML,CSS - Introdução, A.Barão, 2002 45 Partilhar CSS’s Exemplo exhtml20.html com utilização de defpag.css

46 HTML,DHTML,CSS - Introdução, A.Barão, 2002 46 Partilhar CSS’s Exemplo exhtml21.html com utilização de defpag.css

47 HTML,DHTML,CSS - Introdução, A.Barão, 2002 47 Partilhar CSS’s Cascading Style Sheets tag { atributo1: a ; atributo2: b ; … }

48 HTML,DHTML,CSS - Introdução, A.Barão, 2002 48 Partilhar CSS’s Cascading Style Sheets 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 49 Partilhar CSS’s Cascading Style Sheets FPW exhtml20.html Estabelece uma ligação relacionada entre o presente documento (exhtml20.html) e outro recurso (defpag.css)

50 HTML,DHTML,CSS - Introdução, A.Barão, 2002 50 Partilhar CSS’s Cascading Style Sheets Este é o título da secção... Nesta secção desenvolve-se um tema(…) Nota: CSS, Cascading Style Sheets Através das folhas de estilos CSS (…) exhtml20.html No documento HTML a concentração do programador passa a estar mais no conteúdo e menos na apresentação

51 HTML,DHTML,CSS - Introdução, A.Barão, 2002 51 XML Extensible Markup Language Perspectiva histórica SGML Standard Generalized Markup Language HTML(…) HTML 3.2 1997 HTML 4.1 1999 CSS1 1997 XML 1.0 w3 em 1998 XHTML 1.0 2000 (…) CSS2 1998 DHTML [XHTMLWS,00]

52 HTML,DHTML,CSS - Introdução, A.Barão, 2002 52 XML Extensible Markup Language 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 a sua formatação. Formatações podem ser adicionadas através de folhas de estilos [XMLDH]

53 HTML,DHTML,CSS - Introdução, A.Barão, 2002 53 XML Extensible Markup Language Criação de tags próprias Definição de tipos de documento DTD - Document Type Definition Definir a estrutura do documento através de elementos, entidades, atributos,...

54 HTML,DHTML,CSS - Introdução, A.Barão, 2002 54 XML Extensible Markup Language HTMLXML tags Orientadas para o aspecto gráfico da página Orientadas para descrever o conteúdo e estrutura de dados independentemente da formatação gráfica

55 HTML,DHTML,CSS - Introdução, A.Barão, 2002 55 XML Extensible Markup Language 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 56 XML Extensible Markup Language Suportada a partir de browsers de 5ª geração Internet Explorer, Netscape Navigator 5

57 HTML,DHTML,CSS - Introdução, A.Barão, 2002 57 XML Extensible Markup Language Alguns exemplos Linha de texto... exxml01.xml

58 HTML,DHTML,CSS - Introdução, A.Barão, 2002 58 XML Extensible Markup Language Alguns exemplos exxml02.xml José Alberto Pinto Masculino 8445658 tag criada pelo utilizador atributo

59 HTML,DHTML,CSS - Introdução, A.Barão, 2002 59 XML Extensible Markup Language Alguns exemplos 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 60 XML Extensible Markup Language Alguns exemplos exxml03.xml Turma A António Marques Masculino 8435152 Carla Moura Feminino 8005152 Uma folha XSL (Extensible Style[sheet] Language) pode filtrar atributos exemplo: (…)

61 HTML,DHTML,CSS - Introdução, A.Barão, 2002 61 XML Extensible Markup Language XSLT (Extensible Stylesheet Language Transformation) Transformações XSL Documento Folha de estilos Documento Saída Processador XSL

62 HTML,DHTML,CSS - Introdução, A.Barão, 2002 62 XML Extensible Markup Language Sobre a XSL (Extensible Style Language)... Doc XML Folha XSL Servidor WWW Browser WWW O browser efectua a transformação e disponibiliza o resultado ao utilizador

63 HTML,DHTML,CSS - Introdução, A.Barão, 2002 63 XML Extensible Markup Language Sobre a XSL (Extensible Style Language)... Doc XML Folha XSL Servidor WWW Browser WWW O servidor efectua o esforço de transformação Doc HTML

64 HTML,DHTML,CSS - Introdução, A.Barão, 2002 64 XML Extensible Markup Language [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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 65 XML Extensible Markup Language [XMLLW,00] Aplicações XML : Um site de Leilões on-line (exemplo) Servidor WWW B.D. de artigos Cliente WWW ASP XML ASPs para interrogar a B.D. e gerar conteúdo XML (obriga o cliente a ter o Internet Explorer) Utilizando JAVA o sistema ficaria acessível p/ outros browsers...

66 HTML,DHTML,CSS - Introdução, A.Barão, 2002 66 XHTML XHTML é 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 e todas as tags têm que ser fechadas ( ) não é possível cruzar tags ( AAA ) tags e atributos em minúsculas (pq. XML é case sensitive) atributos XHTML têm que ter os seus valores sempre entre aspas

67 HTML,DHTML,CSS - Introdução, A.Barão, 2002 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 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 HTML,DHTML,CSS - Introdução, A.Barão, 2002 69 Na WWW… Recursos HTML e especificações www.w3.org/MarkUp/ HTML standards overview www.w3.org/TR/html4/ Especificação HTML 4.01 Recursos CSS e especificações www.w3.org/Style/CSS/ CSS standards overview www.w3.org/TR/REC-CSS1 Especificação CSS Level 1 www.w3.org/TR/REC-CSS2/ Especificação CSS Level 2

70 HTML,DHTML,CSS - Introdução, A.Barão, 2002 70 Na WWW… Recursos XML e especificações www.w3.org/XML/ Standards e especificações XML www.w3.org/TR/REC-xml Especificação XML 1.0 www.xml.com Artigos e tutoriais www.xml101.com Tutoriais www.xml101.com/dtd/ Tutoriais sobre DTDs xml.org Industry news XML e E-Commerce xml.com/pub/Ecommerce Overview de sites www.commerceone.com/xml/ CommerceOne tools www.microsoft.com/biztalk/ Microsoft BizTalk

71 HTML,DHTML,CSS - Introdução, A.Barão, 2002 71 Na WWW… Recursos XSL e XSLT www.w3.org/Style/XSL/ XSL, eXtensible Stylesheet Language www.w3.org/TR/xslt XSLT, XSL Transformations language Standards XHTML www.w3.org/TR/xhtml1/ XHTML

72 HTML,DHTML,CSS - Introdução, A.Barão, 2002 72 Na WWW… Mais Recursos CGI... cgi.resourceindex.com/Programs_and_Scripts/ www.cgiforme.com www.worldwidemart.com/scripts/ www.rlaj.com/scripts/ www.cgi-resources.com/ Sobre Perl, informações, módulos, livrarias … www.perl.com www.cpan.org www.python.org

73 HTML,DHTML,CSS - Introdução, A.Barão, 2002 73 Na WWW… Tutoriais de programação www.programmingtutorials.com