Prepara AV1 Tecnologias Para Internet I

TECNOLOGIAS PARA INTERNET I ANTONIO MARIA CARNEIRO NETO

Unidade I - O AMBIENTE INTERNET Surgiment da Internet a!"# a Segunda Guerra Mundia$  A Teia Teia

O embrião do que hoje é a maior rede de comunicação do planeta nasceu em setembro de !"!# O $epartamento de $e%esa dos Estados &nidos ti'eram a ideia de criar um sistema de comunicação que não pudesse ser destru(do por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ como centros de pesquisas de bases das ,orças Armadas# O !r%et ARPA ARPA O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ 0AR.A1+ 0AR.A1+ 2r*ão respons3'el pelo desen'ol'imento de pesquisas cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 americano+ o que %e) com que a rede %osse bati)ada de Arpanet# A rede %uncionou pela primeira 'e) em janeiro de !56 interli*ando 7 computadores em locais distintos+ todos na costa oeste dos E&A

Unidade I - O AMBIENTE INTERNET Surgiment da Internet a!"# a Segunda Guerra Mundia$  A Teia Teia

O embrião do que hoje é a maior rede de comunicação do planeta nasceu em setembro de !"!# O $epartamento de $e%esa dos Estados &nidos ti'eram a ideia de criar um sistema de comunicação que não pudesse ser destru(do por bombardeios eu %osse capa) de li*ar pontos estraté*icos+ como centros de pesquisas de bases das ,orças Armadas# O !r%et ARPA ARPA O projeto %oi -nanciado pela Ad'anced Research .rojects A*enc/ 0AR.A1+ 0AR.A1+ 2r*ão respons3'el pelo desen'ol'imento de pesquisas cient(-cas e tecnol2*icas para -ns militares do *o'erno norte4 americano+ o que %e) com que a rede %osse bati)ada de Arpanet# A rede %uncionou pela primeira 'e) em janeiro de !56 interli*ando 7 computadores em locais distintos+ todos na costa oeste dos E&A

O AMBIENTE INTERNET Bre&e de#'ri() d !rt'$ TCP*IP Cer%+ juntamente com en*enheiro Robert Robert 8ahn %oi respons3'el pela criação de um pequeno mecanismo que permite dois computadores con'ersassem entre si+ no mesmo idioma+ quando li*ados na rede# Esse me'ani#m %oi +ati,ad 'm !rt'$ TCP*IP em in*l9s  Trans%er  Trans%er Control : Internet Internet .rotocol .rotocol 4 %e) com que que as di'ersas redes se inte*rassem+ %ormando uma *i*antesca rede internacional de redes de computadores+ chamada pela primeira 'e) de Internet# ;ur*iram a Bitnet .ue tran#!rta&a men#agen# de 'rrei e$etr/ni'  e a N;,net+ que permitia o uso interati'o de computadores computadores remotos e a troca de arqui'os e de mensa*ens de e4 mail# Mas a populari)ação da Internet em todo o mundo %oi a r$d ide e+ 0também chamada de do KTM> eDi*indo re*ras LM> de sintaDe como atributos com aspas+ al*umas ta*s com %echamento enquanto outras eram autocontidas# Um !e.uen gru! n >!era + entretanto+ n) e#ta&a 'n&en'id .ue  =ML era  sem quebrar a retrocompatibilidade# Aquela especi-cação e'entualmente se tornou e+ @rm# 20+ subsequentemente %oi incorporado na especi-cação KTM># Em 6??" a # =oas ideias *eram implementadas e as mais rejeitadas independentemente de quem %osse a %onte e quem ela representasse+ ou até mesmo onde elas %oram inicialmente debatida# =oas ideias serão adotadas no Titter+ blo*s e IRC#

NTRO6U78O AO 9TML: ;i#t"ria d 9TML:

$e'ido a especi-cação KTM>  est3 sendo desen'ol'ida tanto pela 1 disse A realidade é que os %abricantes de na'e*adores t9m o 'eto de-niti'o em tudo na especi-cação+ j3 que se eles não a implementarem + a especi-cação não é nada além do trabalho de -cção 0 http::#ebstandarts#or*:6??!:?:F:inter'ie4ith4ian4hicSson4editor4o%4the4 html4especi-cation: 1# Muitos participantes acharam isto altamente desa*rad3'el Os %abricantes de na'e*adores tomaram de assalto nossa eb reclamaram com al*uma

INTRO6U78O AO 9TML: A D$#Da !r trF# d 9TML: Ainda mai# im!rtante  a ne'e##idade de um !adr) a+ert $i&re 0para utili)ar e li're para implementar1 que possa competir com padr@es propriet3rios como Adobe ,lash ou Microso%t ;il'erli*ht# Independente do que 'oc9 acha destas tecnolo*ias ou empresas acreditamos que a + que são o C;;+ o Ha'ascript# Uma +re&e deDni() de CSS

W uma abre'iação do termo Cascadin* ;t/le ;heet 0,olhas de Estilo em Cascata1# O C;; permite+ de uma %orma simples+ a a utili)ação de estilos 0cor do teDto+ tamanho e tipo da %onte1 ao documento KTM># Tem como -nalidade %ornecer ao na'e*ador a %orma como os elementos são apresentados#

INTRO6U78O AO 9TML: Uma +re&e deDni() da $inguagem Ka&a#'ri!t

W uma lin*ua*em de pro*ramação que est3 locali)ado do lado cliente+ isto é+ no na'e*ador e tem como objeti'o controlar o KTM> e o C;; manipulando4os no documento KTM># Esta lin*ua*em é muito parecida com as lin*ua*ens CXX e  Ha'a+ permitindo inclusi'e a orientação a objetos# W mantida pela European Computer Manu%acturerYs Association 0http::#ecmascript#or*: 1 e atualmente encontra4se na 'ersão # O .ue  6OM 36'ument O+%e't Mde$5 u Mde$ de O+%et# d 6'ument J

W a inter%ace entre a lin*ua*em Ha'ascript e os objetos do KTM># =asicamente quando o documento KTM> é carre*ado pelo na'e*ador+ o mesmo -ca arma)enado em uma estrutura hier3rquica em %orma de 3r'ore que pode ser %acilmente manipul3'el atra'és de comandos Ha'ascript#

Unidade III - INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

Tag# e#truturai# d 9TML:

Os elementos estruturais de-nem a %orma como o documento KTM> pode ser criado# ;ua utili)ação não é obri*at2ria+ no entanto+ recomenda4se que sejam utili)ados em determinadas circunstncias dentro o documento#

PV$OCTU.E htmlQ Phtml lan*Z[en[Q   PheadQ Pmeta charsetZ[ut%4G[Q PtitleQThe KTM> $ocumentP:titleQ   P:headQ   Pbod/Q PpQThe KTM> contentP:pQ   P:bod/Q P:htmlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

O elemento PKTM>Q representa a TA principal para a construção do documento KTM># W apresentado abaiDo a estrutura de um documento KTM># Onde PheadQ 4 Representa uma coleção de metadados# Neste elemento são carre*adas as in%ormaç@es re%erentes ao documento+ como por eDemplo comandos C;; e Ha'ascript# PtitleQ 4 >ocali)ado dentro do PheadQ+ representa o t(tulo do documento# Pbod/Q 4 >ocali)ado no mesmo n('el do PheadQ+ este elemento representa o conteBdo principal da p3*ina# Aqui estão locali)ados todos os comandos necess3rios para a criação do documento KTM>#

PV$OCTU.E htmlQ Phtml lan*Z[en[Q   PheadQ Pmeta charsetZ[ut%4G[Q PtitleQThe KTM> $ocumentP:titleQ   P:headQ   Pbod/Q PpQThe KTM> contentP:pQ   P:bod/Q P:htmlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



O elemento PsectionQ representa uma seção *enérica dentro de um documento# Este elemento pode conter um a*rupamento de teDtos com '3rios cap(tulos+ seç@es numeradas+ etc# No eDemplo abaiDo é apresentado um arti*o contendo um assunto principal e dentro deste assunto '3rias seç@es com assuntos distintos# EDemplo de utili)ação

ParticleQ Ph*roupQ  PhQ>i'ro sobre KTM>P:hQ  Ph6QComo criar uma p3*ina P:h6Q P:h*roupQ PpQO curso de KTM> é muito importante P:pQ PsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTM> P:pQ P:sectionQ PsectionQ   PhQTa*sP:hQ PpQComandos de criação de p3*inas#P:pQ P:sectionQ P:articleQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



Este elemento é a seção onde -cam as in%ormaç@es de na'e*ação de p3*ina# eralmente nesta seção são colocados os li*aç@es 0 linSs internos1 para a pr2pria p3*ina ou li*aç@es eDternas para outras p3*inas de sites eDternos# EDemplo de utili)ação

PheaderQ   Pna'Q PhQMenu .rincipalP:hQ   PulQ   PliQPa hre%Z[articles#html[Q(ndice de arti*osP:aQP:liQ PliQPa hre%Z[ http::#estacio#br[Q ;ite da Est3cioP:aQP:liQ   P:ulQ  P:na'Q P:headerQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



W um arti*o independente dentro de um teDto+ este elemento pode estar ou não dentro de um elemento PsectionQ# Ima*ine um jornal com as seç@es de esportes+ %o%ocas+ etc# $entro de cada seção eDistem '3rios arti*os sobre teDtos espec(-cos+ por eDemplo+ na seção de esportes pode ter um arti*o %alando sobre o time A+ outro sobre time = e o outro sobre o time C# &m arti*o pode conter um elemento PheaderQ que é o t(tulo e um elemento P%ooterQ que é o rodapé do elemento# EDemplo de utili)ação

ParticleQ PheaderQ PhQNo'a \it2ria VP:hQ PpQPtime pubdate datetimeZ[6??!4?4?!T76G4 ?G??[QP:timeQP:pQ P:headerQ PpQO time A *anhou no'amente+ se continuar assim ser3 l(der do campeonato###P:pQ   PpQ###P:pQ P%ooterQ Pa hre%Z[ commentsZ[QComent3riosP:aQ P:%ooterQ P:articleQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS

Neste elemento estão contidas as in%ormaç@es que não estão relacionadas diretamente com o teDto# Como por eDemplo comerciais pa*os+ linSs promocionais+ etc# EDemplo de utili)ação

PasideQ PhQTenha uma *raduação VVV P:hQ PpQPa hre%Zhttp::#estacio#brQ Estude na est3cioP:aQP:pQ P:asideQ PKQ+ PK6Q+ PKFQ+ PK7Q+ PKQ+ e PK"Q Elementos que representam o t(tulo de cada seção+ sendo PhQ o maior t(tulo e Ph"Q o menor t(tulo# EDemplo de utili)ação Pbod/Q PhQMaior P:hQ Ph6QMenor 6 P:h6Q PhFQMenor F P:hFQ Ph7QMenor 7 P:h7Q PhQMenor  P:hQ Ph"QMenor " P:h"Q P:bod/Q

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



Elemento usado em conjunto com as TAs anteriores para delimitar o t(tulo da seção# EDemplo de utili)ação

Ph*roupQ  PhQ>i'ro sobre KTM>P:hQ  Ph6QComo criar uma p3*ina P:h6Q P:h*roupQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



 Também utili)ado para delimitar o t(tulo da seção+ trabalha em conjunto com os elementos anteriores+ no entanto+ não é obri*at2rio# EDemplo de utili)ação

ParticleQ PheaderQ   Ph*roupQ PhQ>i'ro sobre KTM>P:hQ Ph6QComo criar uma p3*ina P:h6Q   P:h*roupQ PpQO curso de KTM> é muito importante P:pQ P:headerQ  PsectionQ PhQO KTM> P:hQ PpQ;ur*imento do KTM> P:pQ P:sectionQ PsectionQ   PhQTa*sP:hQ PpQComandos de criação de p3*inas#P:pQ P:sectionQ P:articleQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS



Este elemento contém basicamente as in%ormaç@es sobre o conteBdo da seção+ como por eDemplo o autor+ linSs relacionados+ etc# EDemplo de utili)ação

P%ooterQ   Pna'Q PpQPa hre%Z[:credits#html[QCréditosP:aQ  Pa hre%Z[:tos#html[QTermos >e*aisP:aQ  Pa her%Z[:indeD#html[QMais In%ormaç@esP:aQ   P:pQ   P:na'Q P:%ooterQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Tetuai#

Elemento que representa um par3*ra%o# EDemplo de utili)ação

Elemento que representa uma quebra de par3*ra%o ou tema eDibindo uma linha hori)ontal# EDemplo de utili)ação

Este elemento apresenta um bloco de teDto pré4 %ormatado+ preser'ando seu conteBdo# EDemplo de utili)ação

PpQ Isto é um par3*ra%o P:pQ Phr :Q PpreQ >ine # >ine 6 is to the ri*ht o% line # >ine F ali*ns ith line 6# P:preQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Tetuai#

 Tem como %unção eDibir o teDto indicando de qual re%er9ncia %oi retirado 0citação1# EDemplo de utili)ação

Este elemento permite de-nir lo*icamente as in%ormaç@es de uma ima*em# Trabalha com P-*captionQ e Pim*Q# EDemplo de utili)ação Onde P-*captionQ 4 Elemento que permite dar um t(tulo a uma ima*em# Pim*Q 4 Elemento que eDibe a ima*em# Neste eDemplo o atributo src indica o endereço e o tipo da ima*em e o atributo alt é mostrado caso a ima*em não possa ser eDibida#

PblocSquote citeZ[http::#quote#com:sample#ht ml[Q  PpQElemento teDtual# P:pQ P:blocSquoteQ P-*ureQ  P-*captionQ,oto de ,ériasP:-*captionQ  Pim* srcZ[stata#jp*[ altZ[,oto das %érias no Rio de Haneiro[Q P:-*ureQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Tetuai#

Elemento que representa um bloco de teDto# As  TAs Pbod/Q+ PheaderQ+ P%ooterQ+ etc+ possuem re*ras de utili)ação bem de-nidas# Caso o desen'ol'edor necessite da criação de um bloco de teDto que não se encaiDe em al*uma re*ra de-na de bloco+ pode4se utili)ar o recurso da Pdi'Q# A Pdi'Q é um bloco de teDto que pode ser usado em qualquer lu*ar do documento# eralmente a Pdi'Q é usada para dia*ramar o la/out de um site# EDemplo de utili)ação

Pdi'Q teste P:di'Q

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Semnti'a#

Elemento que representa um hiperlinS Atributos hre% Z A &R> que %ornece o destino do hiperlinS# tar*et Z nome de na'e*ação ao conteDto ou pala'ra4cha'es se*uintes strin*s literais []blanS[+ []sel%[+ []parent[+ ou []top[# EDemplo de utili)ação

PpQ Pa hre%Z[http::en#iSipedia#or*:iSi:Cam bera[QCamberaP:aQ is the capital cit/ o% Australia# P:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Semnti'a#

Este elemento en%ati)a um bloco de teDto+ colocando4o em it3lico# EDemplo de utili)ação PpQPemQCatsP:emQ are cute animals#P:pQ

Este elemento trans%orma um teDto simples em um teDto de certa importncia+ colocando4o em ne*rito# EDemplo de utili)ação

PpQPemQCatsP:emQ are cute animals#P:pQ PpQPstron*QPstron*QemonadeV P:pQ PpQPsQRecommended retail price _F#!! per bottleP:sQP:pQ PpQPstron*QNo sellin* %or just _6#!! a bottleVP:stron*QP:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Semnti'a#

Este elemento trans%orma o teDto em uma citação#

Este elemento coloca aspas em um bloco de teDto# EDemplo de utili)ação

Este elemento representa um %ra*mento de c2di*o de computador# EDemplo de utili)ação

PpQM/ %a'orite mo'ie is PciteQstar arsP:citeQ#P:pQ PpQThe man said PqQThe quote is input hereP:qQ#P:pQ PpreQ  PcodeQ  %unction .anel0element+ canClose+ closeKandler1 ` this#element Z element this#canClose Z canClose this#closeKandler Z %unction 01 ` i% 0closeKandler1 closeKandler01     P:codeQ P:preQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Tag# Semnti'a#

Elemento de utili)ação *enérica id9ntico ao elemento P$I\Q# EDemplo de utili)ação

Este elemento representa uma quebra de linha# EDemplo de utili)ação

PspanQ Teste de eDemplo P:spanQ PpQF6 \assar ;treetPbr :Q Cambrid*e+ MA ?6F! P:pQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Li#ta# ;ão elementos de ordenação de teDto podendo ser numeradas e não numeradas#

$e-ne uma lista numerada# Os itens da listas são de-nidos pela ta* $iQ EDemplo de utili)ação Atributos da lista re'ersed Z altera a ordem da lista# start Z \alor inicial da lista t/pe Z Altera o numerador da lista0 V  A  a  I  i1#

PolQ  PliQeDemploP:liQ  PliQeDemplo6P:liQ  PliQeDemploFP:liQ P:olQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS - TAGS Li#ta#

$e-ne uma lista não numerada# &tili)a os mesmos atributos de PolQ# EDemplo de utili)ação

Elemento que teDtual que eDibe uma lista de de-niç@es+ com termos espec(-cos# Trabalha com as ta*s PdtQ termo a ser eDibido e PddQ elementos do termo# EDemplo de utili)ação

PulQ  PliQeDemploP:liQ  PliQeDemplo6P:liQ  PliQeDemploFP:liQ P:ulQ PdlQ PdtQCarrosP:dtQ  PddQ&noP:ddQ PddQolP:ddQ  PdtQMotosP:dtQ  PddQKondaP:ddQ PddQUamahaP:ddQ P:dlQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS TABELAS Ta+e$a# ;ão elementos que representam dados de uma ou mias dimens@es# .odem ser utili)adas para eDibição de tabelas de preços de um site#

Elemento b3sico para criação da tabela# EDemplo de utili)ação PtableQ  PcaptionQ>ista de preçosP:captionQ  PtheadQ   PtrQ   PthQ;er'içoP:thQ   PthQTempoP:thQ   PthQ\alorP:thQ   P:trQ  P:theadQ

Ptbod/Q   PtrQ PthQCorte de CabeloP:thQ PtdQ? MinP:tdQ PtdQR_ +??P:tdQ   P:trQ   PtrQ   PthQManicureP:thQ PtdQF? MinP:tdQ PtdQR_ 6?+??P:tdQ P:trQ PtrQ   PthQ.edicureP:thQ PtdQF? MinP:tdQ PtdQR_ ?+??P:tdQ P:trQ  P:tbod/Q P:tableQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS TABELAS Ta+e$a# Onde

Elemento que indica o t(tulo da tabela#

Neste elemento encontram4se as linhas que %ormam o t(tulo de cada coluna da tabela#

Neste elemento encontram4se os dados de cada coluna#

Neste elemento encontram4se as in%ormaç@es -nais de cada coluna#

Elemento que cria uma linha na tabela#

Elemento que cria uma coluna na tabela#

Este elemento é id9ntico ao PT$Q+ no entanto s2 é utili)ado dentro da TA de t(tulo PTKQ#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS TABELAS de Anteriormente+ para a eDibição de '(deos em um documento KTM>+ os desen'ol'edores utili)a'am a TA PobjectQ que é um container *enérico para incorporar objetos estran*eiros 0 plu*ins de terceiros 1 a p3*ina# $e'ido a inconsist9ncia dos na'e*adores+ era necess3rio replicar '3rias linhas de c2di*o para que o '(deo pudesse ser eDibido# O KTM>  pro'9 a TA P'ideoQ para eliminar os problemas de incompatibilidade entre os na'e*adores#

Elemento que eDibe '(deos ou -lmes# Atributos autopla/ Z [autopla/[ ou [[ 0strin* 'a)ia1 ou sem atributo#  Todas 'e) que a p3*ina %or recarre*ada+ o '(deo se iniciar3# controls Z [controls[ ou [[ 0strin* 'a)ia1 ou sem atributo# ;er3 eDibido a inter%ace de controle de '(deo# loop Z [loop[ ou [[ 0strin* 'a)ia1 ou sem atributo# O '(deo ser3 passado cont(nuamente#

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS TABELAS de

poster Z Endereço de uma ima*em ser3 eDibida enquanto o '(deo não carre*a# hei*ht Z Altura do '(deo em piDels idth Z >ar*ura do '(deo em piDels muted Z [muted[ or [[ou [[ 0strin* 'a)ia1 ou sem atributo# Estado do '(deo de%ault com o 3udio desli*ado# src Z &R> do '(deo

EDemplo de utili)ação P'ideo controls srcZ[http::media#F#or*:6??:?:bun n/:mo'ie#o*'[Q ;eu na'e*ador não suporta '(deos em KTM>  P:'ideoQ

INTRO6U78O  CONSTRU78O 6E PGINAS ESTTICAS TABELAS Audi

Elemento que permite tocar um arqui'o de 3udio# Com atributos semelhantes ao P'ideoQ# EDemplo de utili)ação

Paudio controls srcZ[http::media#F#or*:6??:?5:bun n/:?74$eath]=ecomes],ur#o*a[Q ;eu na'e*ador não suporta 3udio em KTM>  P:audioQ

Unidade I - LINGUAGEM 6E MARCA78O E ESTILOS - CSS 6eDni() Con%orme