,

,

HTML+CSS+ DREAMWcs3

Como a coisa funciona?

o que e a I nternet?

• A Internet e um conjunto de computadores conectados entre si. Alguns deles ficarn conectados permanenternente (servidores de ernpresas, governo, universidades, bibliotecas, provedores de services, etc) enquanto outros se conectam eventualmente, como os usuaries dornesticos por exemplo. Independente do tipo de conexao, uma vez conectados todos constituem a internet.

,

I -

Como funciona?

Brevissima hist6ria da Internet

• A Internet surgiu nos anos 60, em urn projeto de defesa norte americana de pesquisa militar; 0 governo criou uma rede de ampla abrangencia territorial, que conectava diversos pontos do territorio nacional e atraves da qual se poderia transitar inforrnacoes.

• Essa rede se expandiu rapldarnente, passando a abranger cientistas e pesquisadores de todo a pars e posteriomente abrangendo tarnbern as unlversldades, bibllotecas e ernpresas.

,

I -

Como funciona?

,

World wide Web, WWW, W3 ou rne charne apenas de Web!

• Na decada de gO} Tim Berners-Lee, 0 inventor da Web} trabalhava na S~ao de

Computacso do CERN [Organizacao Europeia de Pesquisa Nuclear) I sediada em genebra, na Suica, quandoiniciou pesquisas visando descobrir urn rnetodo que possibilitasse aos cientistas do mundo inteiro cornpartilhar eletronicamente textos e pesquisas, e que tlvesse a funclonalldade de lnterllgar esses documentos.

•

A Web e um conjunto caleidosc6pico de rnilhoes de arquivos de todo 0 tipo que podem ser acessados via internet: documentos de texto, irnagens, videos, audios, e principalrnente as nossas paglnas HTM1.

Para. tanto, Tim Berners-Lee inventou 0 protocolo HTIPJ alinguagem HTML e construlu 0 primeiro navegador (Nexus).

I -

,

Como funciona?

HT ... 0 Que?

,

• HTTP (Htper Text Transfer Protocol) e urn protocolo utllizado na Web para distribulr e recu pera r f nfo rrna ~6es .

I -

..

• 0 HTML [Hipertext Markup Language) e uma linguagem usada para criar paginas Web, que tem duas caractenstlcas essenclals: hlpertexto e u niversalldade.

Hipertexto quer dizer que criar urn link (vinculo) uma pagina, que conduza a

outra pagina au a praticamente qualquer outre tipo de arquivo daWeb. Significa que a inforrnacao pode ser acessada a partir de pontos diferentes, Tim Berners-Lee q ueria que a Web trabalhasse rnals coma 0 cerebra de uma pessoa que como uma fonte estatlca de dados, tal como urn livre.

Universalidade quer dizer que pelo fato dos arquivos HTM I serem gravados como do tipo somente texto au ASCllt podem ser lidos por q ualq uer cornputador; isso tarnbern faz das paglnas I:iTML arqulvos de rapido carregamento .

Extensao'

,

Como assim arqulvo?

Tipo de Arquivo

.txt .doc .pdf

Bloco die Netas Word

Aero bat Reade r

Vlsualizador die irnagens e falx do W~ ndows Photoshop

Powerpo ~ nt

Apresentacso de Slides

.

. Jpg

.gif .png

.ppt

.html .htm ~Iphp .alslP

Browser (navegaldor" Editor de HTMIIL

:SuNiejor ,com'plJltodot qilJa ·dtlRi1lDul pqrnm we:bl mutUl£lllLlm file)

/

Mlaxthon

ChllFome

Flock

• Editores de HITMIL

• Cllente FTP

~ Bloen de INotas (WIIIN} ~ WmdPad (WINI)

~ SimplleTextt (MAC) ~ BBEd~t (MAC)

• Dreamweaver (WINVMAC), ~ FrontPag,e (WIN)

• HTMLKiit (editor gra.tuitofWINI)

~ CoffeOLip Free (editor gra.t'LlitofWlN]) ~ Arachnophma. (editor gra1l:Ulil~o.tWIIIIN}

~ Dreamweaver (WINVMIAC)

~. FireFTP (FTP 'QllratuitotWlN) ~. FileZijllla (FTPgratuitofWIN)

oi couse up FTP (IrTP grBttuiitro/W IN) ~ CorreFTP (FTP gratiLl~itQ/WIN)

oi Sma.rl FTP (WIN)

...

Versoes e Incompatibilidades

• Existern varias versoes do HTML sendo que a cada nova versao novas TAGs sao criadas au colocadas em desuso, visando que os desenvolvedores tenham maier controle sabre a planeamento das suas paginas, Neste curso trabalharemos com a versao HTML 4.0

• Embora 0 HTML tenha side criado com 0 objetlvo de ser universal" nem todos 0 experirnentarn da mesma forma. Como as paginas aparecem de facto dependera do tipo de cornputador, do monitor, da conexao com a internet e do navegador util izado.

Versoes e Incompatibilidades

• Para piorar a situacao.; ernpresas que desenvolvern navegadores criaram suas proprias extensoes HTML e isso resultou em incompatibHidades e numa despadronizacac da linguagem. TAGs que funcionam cam urn navegador podem ser totalmente ignoradas au exibidas incorretamente em outros,

• Para tornear esses problemas, as desenvolvedores devem conhecer 0 publico do site e focar na tecnologia que sera utilizada pela rnaioria dos seus usuaries .. estar atentos a forma como escrevem seus codigos e testar as paginas em diversos arnbientes e navegadores.

,

I -

Versoes e Incompatibilidades

.' Uma boa forma de conhecer os habltos dos usuaries da Internet e consults r relatcrios de estatistlcas gerais da web:

II http://www .. w3scnoo:ls.com/browse rs/browse rs~sta,'ts. 3!Sp

• http://www.netapp·lications.com

• hup:llen.wiikipedia.orglwiki/Usage_share_of_web_browsers

Ii http://www.onestat.com/html/alboutus_pressbox48-lmiCirosoft-fnternet-explorer-usage.htm I http://www.hitslinlk.com

• Rea llza r pesq u isas co m se us cl ie ntes potencia is

Installar e analisa r relatorios de estatlstlcas dos usua rios do seu site:

Googi e Ana lvtlcs- http://www.google.com/i ntl/pt-BR_AU./a nalvtlcs Google Urchin - http://www.google.com/u rchin

,

,

I -

Web Standards

• Para tentar amenizar a sltuacao fol criada a WWW Consortium au W3C, dirigida pelo Tim berners-Lee, que visa estabelecer pad roes e boas praticas de desenvolvirnento. http://www ... w.3.org

• Um dos maiores esforcos da W3C fol 0 desenvolvimento das C55 (cascading Style Sheets) au Folhas de Estilo em Cascata, urn sistema que sepa ra 0 conteudo de uma pagina« escrito em HTM L - de sua formatacao+ escrita em C5S. As C55 permltern urn controle maier sabre 0 projeto do design e rnantern a pagina universal.

• Outra organlzacao que estuda a lmplementacao de padr5es web e a The Web Sta ndards Project, http://www.websta ndards.org

,

I -

Web Standards

• Para tentar amenizar a sltuacao fol criada a WWW Consortium au W3C, dirigida pelo Tim berners-Lee, que visa estabelecer pad roes e boas praticas de desenvolvirnento. http://www ... w.3.org

• Um dos maiores esforcos da W3C fol 0 desenvolvimento das C55 (cascading Style Sheets) au Folhas de Estilo em Cascata, urn sistema que sepa ra 0 conteudo de uma pagina« escrito em HTM L - da sua formatacao+ escrita em C5S. As C55 permltern urn controle maier sabre 0 projeto do design e rnantern a pagina universal.

• Outra organlzacao que estuda a lmplementacao de padr5es web e a The Web Sta ndards Project, http://www.websta ndards.org

,

I -