A. Anzaloni, C. Nascimento, F. Mendes, D. Magri MBA Executivo em Comércio Eletrônico1 Internet como Plataforma do Comércio Eletrônico

A. Anzaloni, C. Nascimento, F. Mendes, D. Magri MBA Executivo em Comércio Eletrônico 1

Internet como Plataforma do Comércio Eletrônico

www.flavio.infra.ita.br:2000

MBA Executivo em Comércio EletrônicoESPMESPM

São Paulo

Criação: agosto/2000 Atualização:setembro/2000

Copyright © 2000 A. Anzaloni, C. Nascimento, F. Mendes, D. Magri


Agenda Linguagem HTML (HyperText Markup Language)

Formatação de textos (acentos, cores, fontes)

Figuras

Links (vínculos, referências)

Tabelas

Maps (client)

Frames

Scripts, Cookies, Meta-tags, CGI, Forms

Construção/manutenção de sites


HTML


HTML: Introdução Linguagem que descreve a formatação de

documentos na Web

Web browser (cliente) Requisita, recebe e apresenta o documento para o

usuário Web server (servidor)

Envia o documento para o web browser (registra a operação no log)


HTML: Características Simplificação de SGML: Standard

Generalized Markup Language (ISO) Por não especificar completamente a

aparência do texto, possue grande portabilidade

Extensível (novas funcionalidades mantendo compatibilidade com versões anteriores)


“Etimologia” do HTML

HyperText Texto que possui referências (links, vínculos)

com outros textos/recursos

Markup Marcação: “comandos” demarcados para a

diferenciação do texto propriamente dito


HTML: Arquivo de Texto Arquivo de texto comum

ASCII: American Standard Code for Information Interchange

Bloco de Notas (Notepad)

ASCII Char ASCII Char ASCII Char ASCII Char65 A 84 T 103 g 122 z66 B 85 U 104 h 123 {67 C 86 V 105 i 124 |68 D 87 W 106 j 125 }69 E 88 X 107 k 126 ~70 F 89 Y 108 l71 G 90 Z 109 m72 H 91 [ 110 n73 I 92 \ 111 o74 J 93 ] 112 p75 K 94 ^ 113 q76 L 95 _ 114 r77 M 96 ` 115 s78 N 97 a 116 t79 O 98 b 117 u80 P 99 c 118 v81 Q 100 d 119 w82 R 101 e 120 x83 S 102 f 121 y

Exemplo:

Windows NT


HTML: Princípios (1)

Comandos (tags) delimitados por < e > Exemplos:

<title>Titulo</title> <body> Texto ... </body>

O HTML não controla a aparência do texto (controla a formatação) Exemplos:

<B>Negrito</B> Negrito <I>Italico</I> Italico


HTML: Princípios (2)

A aparência “final” do texto é controlada pelo conjunto sistema/browser/hardware do usuário

Pequenas alterações da mesma página quando observada em conjuntos distintos

O HTML ignora mais de um espaço em branco (ASCII 32)

Comandos para parágrafos <P>, listas <UL> etc...

Nomes comuns de arquivos (extensões) .html, .htm (outras podem ser utilizadas)


HTML: Acentuação Não utilizarNão utilizar os acentos do sistema operacional!

agudo: é é grave (crase): À À circunflexo: â â til: Õ Õ trema (umlaut): ü ü cedilha: Ç Ç

Caracteres especiais © © ± ±http://www.infra.ita.cta.br/~flavio/aprende/html/caracteres/


HTML: Cores <FONT Color="cor"> ... </FONT> <BODY TEXT="black" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="red"> (texto, fundo, link, link visitado, link ativo)

cor pode ser um nome ou um número (hexadecimal)

Fonte: www.infra.ita.cta.br/~flavio/aprende/html/javascript/help/colors.htm

red FF0000, green 00FF00, blue 0000FF

gray 808080, black 000000, yellow FFFF00

orange FFA500, pink FFC0CB, white FFFFFF ...


HTML: Exemplo de cores


HTML: Algumas cores em hexa

Fonte: HTML Survival Kit http://www.cee.odu.edu/html/

Ver também: IPCE-BitsEBytes.ppt


HTML: Fontes <FONT Face=”Tipo” Size=”Tamanho”

Color=”Cor”> ... </FONT>

Tamanho pode ser, normalmente, -2, -1, 0, +1, +2 +3, +4 Tamanhos relativos (e não absolutos tipo 12pt)

Tipo pode ser o nome das fontes do sistema (Arial, Courier, Times...) Cuidado!Cuidado! Nem todos as fontes que estão no seu sistema

existem no sistema do visitante (mudança de aparência pela substituição de fontes).


HTML: Exemplo de fontes


HTML: Esqueleto

Html: documento

Head: cabeçalho

Body: corpo


HTML: Links<A HREF=”endereço do link”>Texto do Link</A>


HTML: Tabelas

Utilizadas para organizar informações Tabela: <TABLE> ... </TABLE> Linhas: <TR> ... </TR> Colunas: <TD> ... </TD>

É muito comum fazer tabelas sem bordas para organizar o texto


HTML: Exemplo de tabela


HTML: outro exemplo tabela


HTML: Figuras<IMG src=”nome do arquivo” alt=”texto” Width=”largura” Height=”altura” Border=”borda”>

Tipos comuns de figuras (web) GIF [desenhos, animações] (Graphics Interchange

Format, © Compuserve Inc.) JPEG [fotos] (Joint Photographic Experts Group,

http://www.w3.org/Graphics/JPEG/ ) PNG [desenhos, animações] (Portable Network

Graphics, http://www.w3.org/Graphics/PNG/ ) XBM (X BitMap), XPM (X PixMap): ícones em arquivos

ASCII e na linguagem de programação C


HTML: Figuras (cont)

BMP: 625 kb GIF: 109 kb PNG: 131 kb JPG: 25 kb

BMP: 37 kb GIF: 4 kb PNG:4 kb JPG: 10 kb


HTML: tags comuns Comentários sobre o texto<UL>...</UL> Cria uma lista<OL>...</OL> Cria uma lista numerada<MENU>...</MENU> Cria uma menu de <LI> itens<LI> Início de uma lista de itens<BR> Força uma quebra de linha<P> Início do parágrafo <HR> Separador horizontal<PRE>...</PRE> Texto pré-formatado (mantém espaços)<IMG SRC="..."> Mostra uma imagem<A HREF="...">...</A> Define um hyperlink<A NAME="..."> Define uma âncora interna do documento<Hn>...</Hn> Delimita o nível de cabeçalho


HTML: Exemplo<HTML> <HEAD> <TITLE> Example 2A, Showing IMG and Hypertext Links </TITLE> </HEAD><BODY>

<H1> Example 2A: Image Inclusion and Hypertext Links </H1>

<P> Greetings from the exciting world of HTML Example documents. OK, so text is not so exciting. But how about some pictures!

<P> There are many ways to fit in the image. For example, you could fit it in this way: <IMG SRC="home.gif" ALIGN="top">, this way <IMG SRC="home.gif" ALIGN="middle"> or this way <IMG SRC="home.gif" ALIGN="bottom">.


HTML: Exemplo (cont)

<P> Another important thing: you can make <a href="ex2b.html">hypertext links</a> to other files. You can even make hypertext links using images, for example <a href="ex2b.html"><IMG SRC="sright.xbm" ALIGN="middle"></a>.<P> Lastly, here is a row of images: <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]">

</body></html>


HTML: Exemplo (cont)

Fonte: http://www.utoronto.ca/webdocs/HTMLdocs/Book/book-3ed/chap1/ex2a.html


HTML: Maps Pode-se dividir uma figura em regiões

“clicáveis”

Mapas do lado cliente (browser) Requisita um URL para o servidor

Mapas do lado servidor (server) Envia coordenadas para o servidor


HTML: Client Maps<CENTER><IMG SRC="figura.jpg" USEMAP="#barra85"

BORDER="0"></CENTER><MAP NAME="barra85"> <AREA SHAPE=RECT COORDS="280,91,356,142"

HREF="retangulo.html"> <AREA SHAPE=CIRCLE COORDS="64,115,31"

HREF="circulo.html"><AREA SHAPE=POLY

COORDS="152,138,193,84,233,138,151,138,151,138" HREF="triangulo.html">

</MAP>

Exemplo de Mapa: http://www.flavio.infra.ita.br:2000/espm/turma-c/ClientMap/

Exemplo de Image Mapper: http://www.coffeecup.com/mapper/

http://www.flavio.infra.ita.br:2000/espm/turma-c/ClientMap/


HTML: Frames Divide a área do documento em regiões

retangulares (quadros) independentes Facilita (ou complica) a navegação

<HTML><HEAD><TITLE>Frames</TITLE></HEAD> <FRAMESET COLS="10%,20%,30%,25%,*"> <FRAME><FRAME><FRAME><FRAME><FRAME> </FRAMESET> <NOFRAMES>Seu browser nao suporta frames :-(

</NOFRAMES></HTML>

Mais detalhes: http://www.infra.ita.cta.br/~flavio/aprende/html/frames/

http://www.infra.ita.cta.br/~flavio/aprende/html/frames/

http://www.infra.ita.cta.br/~flavio/aprende/html/frames/


HTML: Frames (cont)


HTML: Scripts <SCRIPT Language=“JavaScript”> ... </SCRIPT>

Permite a inclusão de scripts (programas interpretados) no documento HTML.

O script será executado pelo browser (se possível).

O script deve ser ignorado pelo browser se o browser não reconhecer a tag SCRIPT ou a linguagem do script.


HTML: Scripts (cont)

<HTML> <HEAD><TITLE>Primeiro JavaScript</TITLE></HEAD><BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("Hello World !!") alert("Clicle neste botao!!") </SCRIPT>

<P>Por hoje <SCRIPT Language="JavaScript"> var hoje = new Date() document.write(" ("+hoje+")" ) </SCRIPT> e’ so’, pessoal. Tchau !!!</P></BODY><HTML>


HTML: Scripts (cont)


HTML (HEAD): Meta tags

Fornece meta-informação (informação sobre a informação), ou seja, informação sobre o conteúdo do documento.

Permite ao autor descrever em detalhes o conteúdo do documento para facilitar a indexação automática.

Exemplos: <META name=”description" content=”Pequeno texto descrevendo o site"><META name=“keywords” content =“keyw_1, keyw_2, keyw_3”><META name=”author” content=“Nome e email do autor”><META name=”date” content=“08 de junho de 1998”><META http-equiv="Pragma" content="no-cache"><META http-equiv="Expires" content=”Mon, 3 Apr 1999 14:25:27 GMT"><META http-equiv=”refresh" content=”10; URL=http://www.url.org/doc1.html">


HTML: Cookies Informações gravadas (de forma “controlada”) no disco

rígido do computador do visitante Permite a “lembrança” de dados (em geral voluntários) do

visitante Podem ser colocados por programas (CGI) ou por scripts Os browsers podem permitir, ou não, a colocação de

cookies (Netscape: Edit -> Preferences -> Advanced -> Cookies)

.../Communicator/LocalFiles/cookies.txt Há pessoas radicalmente contra cookies. Cuidado!

Exemplo (JS): http://www.flavio.infra.ita.br:2000/espm/turma-c/Cookies/

http://www.flavio.infra.ita.br:2000/espm/turma-c/Cookies/


HTML: Forms Os formulários permitem que o visitante envie

informações aos administradores do site Inscrição em listas Escolha de produtos...

Os campos preenchidos em geral são enviados para programas (existe a opção de enviar um e-mail comum)

Tais programas são feitos no padrão CGI (Common Gateway Interface) e, em geral, utilizam linguagens como Perl, C...


HTML: Forms (cont)

<FORM ACTION=”URL” METHOD=”Método”> ... </FORM> URL: destino dos dados do formulário (programas/scripts/e-mail) Método: como os dados serão enviados

Get [default]: Dados adicionados à requisição (?, ASCII) Post: Dados enviados para a entrada padrão do programa destino

[Netscape: Communicator -> Tools -> Security Info -> Navigator: Warning Sending unencrypted information to a Site]

Campos do formulário <INPUT TYPE=“tipo”>

tipo: text, radio, checkbox, button, submit, reset ...


HTML: Forms (cont)


HTML: Forms (cont)

Mensagem recebida:


HTML: CGI Common Gateway Interface


HTML: CGI (cont)

Exemplo de programa CGI (PERL - Practical Extraction and Report Language):http://www.ele.ita.cta.br/cgi-bin/teste_data.pl

#!/usr/bin/perl# Perl Script para escrever a data e hora locais do servidor# CLNJ - 7/abril/1998print "Content-type: text/html\n\n";$date = `date`;

print "<HTML><HEAD><TITLE>Data e Hora</TITLE></HEAD>\n";print "<BODY>\n<h1> Hello !!!</h1>\n";print "<P> Data e horal local neste web server:</P>\n";print "<P> $date </P>\n";print "</BODY>\n</HTML>”;

exit;


HTML: CGI (cont)


HTML: CGI (cont)

É uma maneira de criar páginas dinâmicas e de receber dados dos visitantes

Necessita de conhecimentos de programação (Perl, C...)

Em geral necessita de autorização do administrador do servidor para “rodar”


HTML: Conclusões HTML é uma linguagem para a formatação de documentos

(hypertext) para a Web Arquivo de texto comum (ASCII) com comandos (tags) As páginas em HTML simples são “estáticas” Em geral a página visitada fica armazenada localmente

(cache) Veja o código das páginas que visita (view [page/frame]

source) Existem vários programas que auxiliam na confecção de

páginas (Netscape Composer, FrontPage, GoLive!... etc)


Construção de sites Design Portabilidade Conteúdo Navegação Atualização


Sites: design Equilíbrio

sensação visual e gráfica e a informação Impacto visual

formas, cores e contrastes Figuras

evite arquivos “pesados” (ou crie acessos independentes)

Tipografia não abuse de recursos de formatação


Sites: design (cont)

Impressão de documentos Formatação para a web normalmente não é

adequada para a impressão Páginas distintas (leitura on-line e impressão)

Renove, periodicamente, a aparência de suas páginas


Sites: portabilidade Verificador de HTML

Help by The Web Design Group http://www.htmlhelp.com/

Clean up your Web Pages with HTML Tidy http://www.w3.org/People/Raggett/tidy/

W3C HTML Validation Service http://validator.w3.org/

Independência de browser/display Teste suas páginas em diferentes combinações

Netscape, IExplorer, 640x480, 600x800, cores...


Sites: conteúdo

Forneça conteúdo real Atualize/corrija/amplie Utilize links e cite as fontes

Referencie ou copie (cuidado com copyright!)

Toda página deve ter <TITLE> (Address Book)

Evite sites somente com links


Sites: conteúdo (cont)

Toda página com rodapé Datas de instalação e revisão (02/set/00) Nome e e-mail do autor Informações de copyright

Use página de links (bem organizada e explicando)


Sites: navegação Simplifique Use menus (horizontais/verticais)

Não abuse! Visitante não pode se “perder” Frames, JavaScript, Flash...

http://sharkysoft.com/tutorials/frames/ http://www.xpertz.com/builder/frames.shtml

Acesso rápido à página inicial Mapa do site Versão com e sem frames


Sites: navegação (cont)

Não inclua links “misteriosos” Não “esconda” os links

Evite JavaScript na Status Bar Inclua apenas os links necessários Não use excesso de links (principalmente

no início das páginas) Abra outra janela do browser para alguns

links <A HREF=”outro.html” Target=”Nova”>Texto</A>


Sites: atualização Mantenha seu site sempre atualizado

Acompanhe novas tecnologias Verifique, periodicamente, seus links

Exemplo: http://www.cyberspider.com Implemente sugestões de visitantes (cite-os) Mantenha página com as “novidades” do site Utilize serviços de reminder

Exemplo: http://www.netmind.com


Sites: dicas Analise os sites que visita

O que os torna bons/ruins? Quais alterações você faria?

Sempre critique seu próprio site Renove sempre!

Verifique o “movimento” Analise criticamente o log de visitas

Quais páginas são mais visitadas? Por quê? Quais páginas são pouco visitadas? Por quê?...


Sites: dicas (cont)

Mensagens Sempre responda rápido (em até 24h) Valorize muito toda mensagem com

críticas, comentários e sugestões Não inclua as pessoas que lhe escrevem

espontaneamente em listas Crie um FAQ (Frequently Asked

Questions) do seu site/empresa


Sites: dicas (cont)

Divulgue seu site Sites de busca (meta-tags)

Yahoo!, Lycos, AltaVista, Excite, InfoSeek, WebCrawler... Cadê, Aonde...

Indiretamente Assinatura de e-mail Participando (ativamente) de news, listas etc

Listas próprias “Troca” de links Preste serviços aos visitantes


Sites: dicas (cont)

NãoNão divulgue seu site: SPAM Mensagens não solicitadas Banners “genéricos”


Sites: links adicionais "Getting started with HTML" por Dave Raggett em:

http://www.w3.org/MarkUp/Guide/ "More advanced features" por Dave Raggett em:

http://www.w3.org/MarkUp/Guide/Advanced.html “NCSA: A Beginner's Guide to HTML”

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html “HyperText Markup Language Home Page”

http://www.w3.org/MarkUp/ “HTML 4.01 Specification, W3C Recommendation 24

December 1999”http://www.w3.org/TR/html4/


Sites: links adicionais (cont)

“Yahoo Web Design”http://dir.yahoo.com/Business_and_Economy/

Shopping_and_Services/Books/Booksellers/Computers/Internet/Titles/World_Wide_Web/Web_Page_Design/

“Web Pages That Suck”http://www.webpagesthatsuck.com/

”Web Developer”http://www.webdeveloper.com/

“All About HTML”http://www.webdeveloper.com/html/

“Search Engine Watch”http://www.searchenginewatch.com/


Sites: links adicionais (cont)

“Welcome to HTML and CGI Unleashed”http://www.december.com/works/hcu.html

“An instantaneous introduction to CGI scripts and HTML forms, Academic Computing Services, University of Kansas”http://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtml

“How the web Works: HTTP and CGI explained”http://www.stud.ifi.uio.no/~lmariusg/download/artikler/HTTP_tut.html

Vários guias sobre Internet na Internet:http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/

Webnovice - Online WebZine:http://www.webnovice.com/

Tools for the Internet Trainer:http://www.state.mt.us/isd/techinfo/15minute/

Matisse’s Glossary of Internet Terms:http://www.matisse.net/files/glossary.html

Documents

A. Anzaloni, C. Nascimento, F. Mendes, D. Magri MBA Executivo em Comércio Eletrônico1 Internet como Plataforma do Comércio Eletrônico