A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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ções semelhantes


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, 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, HTML Forms Construir um formulário Nome Morada Código Postal Sexo Data de Nascimento Contacto Forma de Contacto Observações atributos Exemplo

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

5 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, HTML Forms (…) exhtml19.html Prentendo ser contactado via telefone/telemóvel Qualquer via: 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, HTML Forms (…) exhtml19.html

9 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, HTML Forms Como processar os dados do questionário? O que fazer aos dados obtidos? Enviar resultados para um ? 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, HTML Forms Opção exemplo: enviar resultados para um . 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, HTML Forms, HTML/CGI Opção exemplo: enviar resultados para um . 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, HTML Opção exemplo: enviar resultados para um . 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, HTML Opção exemplo: enviar resultados para um . 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, HTML Opção exemplo: enviar resultados para um . Obter scripts CGI para processar resultados do questionário: Servidores UNIX web.mit.edu/wwwdev/cgi /index.html Macintosh Windows 95/98/NT Forms, HTML/CGI

17 HTML,DHTML,CSS - Introdução, A.Barão, HTML Opção exemplo: enviar resultados para um . Partilhar scripts CGI um exemplo: 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, HTML Opção exemplo: enviar resultados para um . Forms, HTML/CGI

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 do utilizador no momento “Aceitar”

19 HTML,DHTML,CSS - Introdução, A.Barão, HTML Opção exemplo: enviar resultados para um . Forms, HTML/CGI Possibilidade de definir campos de preenchimento obrigatório Redireccionar para uma página de agradecimento após o envio: E já agora, um contador gráfico de visitantes que preencheram o questionário...

20 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, DHTML VBScript Web client scripting Exemplo #2 (…) MsgBox "Button Pressed!" (…) inline scripting

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

25 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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 Outro exemplo

41 HTML,DHTML,CSS - Introdução, A.Barão, DHTML JavaScript exdhtml3.html

42 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, Partilhar CSS’s Exemplo exhtml20.html com utilização de defpag.css

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

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

48 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, XML Extensible Markup Language Perspectiva histórica SGML Standard Generalized Markup Language HTML(…) HTML HTML CSS XML 1.0 w3 em 1998 XHTML (…) CSS DHTML [XHTMLWS,00]

52 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, 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, 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, XML Extensible Markup Language Alguns exemplos Linha de texto... exxml01.xml

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

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

61 HTML,DHTML,CSS - Introdução, A.Barão, 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, 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, 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, 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, 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, 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, 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, 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, Na WWW… Recursos HTML e especificações HTML standards overview Especificação HTML 4.01 Recursos CSS e especificações CSS standards overview Especificação CSS Level 1 Especificação CSS Level 2

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

71 HTML,DHTML,CSS - Introdução, A.Barão, Na WWW… Recursos XSL e XSLT XSL, eXtensible Stylesheet Language XSLT, XSL Transformations language Standards XHTML XHTML

72 HTML,DHTML,CSS - Introdução, A.Barão, Na WWW… Mais Recursos CGI... cgi.resourceindex.com/Programs_and_Scripts/ Sobre Perl, informações, módulos, livrarias …

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


Carregar ppt "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ções semelhantes


Anúncios Google