Vous êtes sur la page 1sur 100

5/9/16

Redes e Sistemas Multimdia II


Comunicao e Design Multimdia

HyperText Markup Language


Redes e Sistemas Multimdia II

3-May-16

CDM - RSM2 - 2015/16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

HTML HyperText Markup Language o


que est na base da construo das pginas
web e, consequentemente, da WWW.
O HTML no uma linguagem de
programao, mas, sim, uma linguagem de
formatao (ou estruturao).
Isto , afecta e define a forma como o texto, e
tambm imagens e vdeos, entre outros
contedos, surgem no ecr.
3-May-16

CDM - RSM2 - 2015/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Surgiu em 1991 no CERN (Conseil Europen


pour la Recherche Nuclaire) pelas mos de
Tim Berners-Lee, como uma forma de
disponibilizar informao atravs das
mltiplas plataformas a existentes,
permitindo aceder a referncias a
documentos de uma forma instantnea,
atravs de hiperligaes.

3-May-16

CDM - RSM2 - 2015/16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Esta forma de permitir cruzar referncias


entre documentos de forma instantnea era, e
, de grande utilidade no mundo cientfico,
tanto ou mais do que na vida quotidiana.
A par com o HTML, surgiu tambm o
protocolo HTTP (HyperText Transfer Protocol)
que suporta a transferncia de ficheiros HTML
(e outros) atravs da Internet.

3-May-16

CDM - RSM2 - 2015/16

HyperText Markup Language


Redes e Sistemas Multimdia II

O HTML sofreu vrias evolues ao longo do


tempo, sendo a verso actual a 4.01, e ainda
de longe a mais utilizada.
Contudo, a nova iterao, o HTML5, atingiu
em finais de 2004 a fase de recomendao,
havendo j um suporte crescente e
generalizado dos principais browsers.

3-May-16

CDM - RSM2 - 2015/16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Uma pgina HTML constituda por um


cabealho (head) e por um corpo (body).
No cabealho encontram-se informaes
relativas ao contedo da pgina, como o ttulo
(title) e outra meta-informao (meta), que
pode indicar o autor, assunto, e outros
elementos que caracterizem a pgina.
excepo do ttulo, que surge no nome da
pgina (na janela do browser), a restante
informao no surge no ecr.
3-May-16

CDM - RSM2 - 2015/16

HyperText Markup Language


Redes e Sistemas Multimdia II

no corpo da pgina que surge todo o


contedo que mostrado ao utilizador,
quando este acede a essa mesma pgina.
Toda a formatao de uma pgina feita
atravs de tags como <html> e </html>,
<head> e </head>, <body> e </body>, entre
muitas outras.
A grande maioria das tags so constitudas por
uma tag de abertura e outra de fecho.
3-May-16

CDM - RSM2 - 2015/16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Por exemplo, o texto que se encontre entre


<strong> e </strong> fica formatado a
carregado: <strong>texto</strong>
texto.
A tag de fecho distinguida da de abertura
pela barra / (e.g., <title> e </title>).

3-May-16

CDM - RSM2 - 2015/16

HyperText Markup Language


Redes e Sistemas Multimdia II

A estrutura geral de uma pgina esta:


<html>
<head>
...
</head>
<body>
...
</body>
</html>
3-May-16

CDM - RSM2 - 2015/16

10

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

As tags (ou elementos) HTML podem conter


atributos que afectam a forma como as estas
formatam a pgina.
Os atributos so palavras especficas que
surgem frente de uma tag (de incio), mas
ainda contidos entre < e > (o sinal de menor
e o sinal de maior).
Assumem tipicamente a forma <tag
atributo=valor>...</tag>.
3-May-16

CDM - RSM2 - 2015/16

11

HyperText Markup Language


Redes e Sistemas Multimdia II

A grande maioria das tags permite


encapsulamento, sendo esta a forma de
definir formataes mais complexas.
Isto , podemos usar tags dentro de tags
para combinar vrios tipos de formatao.

3-May-16

CDM - RSM2 - 2015/16

12

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Pgina (<html>...</html>)
Estas tags indicam ao browser que esta se trata de
uma pgina em HTML, e que todo o contedo
contido entre estas duas tags HTML.

Cabealho (<head>...</head>)
So as tags que caracterizam e delimitam toda a
meta-informao referente pgina.
Dentro do cabealho, deve ser inserido o nome
(ttulo) da pgina: <title>A minha primeira
pgina</title>
3-May-16

CDM - RSM2 - 2015/16

13

HyperText Markup Language


Redes e Sistemas Multimdia II

Tambm pode conter meta-informao vria,


como o autor e descrio: <meta
name=author content=jos ningum>;
<meta name=description content=home
page>

Corpo (<body>...</body>)
So as tags que delimitam todo o contedo da
pgina que mostrado no browser.

3-May-16

CDM - RSM2 - 2015/16

14

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Seguem-se algumas das tags mais comuns


dentro do corpo de uma pgina HTML:
Ttulo (maior): <h1>...</h1>
O texto que se encontrar entre estas duas tags
mostrado no browser a carregado e com um tamanho
de letra superior ao tamanho definido por omisso.
O mesmo se aplica a <h2>...</h2> e <h3>...</h3>
(at h6), sendo diminudo o tamanho da letra (mas
superior ao, ou destacado do, tamanho de texto
normal).

3-May-16

CDM - RSM2 - 2015/16

15

HyperText Markup Language


Redes e Sistemas Multimdia II

Pargrafo: <p>...</p>
O texto que se encontrar entre estas duas tags
mostrado no browser como um pargrafo, sendo
separado do restante texto por uma linha em branco a
cima e a baixo.
Pode receber como atributo o alinhamento do texto: <p
align=left|center|right>...</p>

Carregado: <strong>...</strong>

O texto mostrado a carregado.


Itlico: <em>...</em>
O texto mostrado a itlico (ou de outra forma
enftica).
3-May-16

CDM - RSM2 - 2015/16

16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Imagem: <img src=valor />

Esta tag no tem fecho.


Serve para inserir uma imagem na pgina HTML, sendo
indicado no atributo src o nome (e, se necessrio, o
caminho) da imagem.
Outros atributos, se bem que no obrigatrios, usuais
com esta tag, so o width e o height, que definem (e
podem mesmo forar) a largura e a altura da imagem,
ao mesmo que tempo que reservam o espao para a
imagem na pgina.
Existe ainda o alt, que permite apresentar uma
descrio da imagem em forma textual.

3-May-16

CDM - RSM2 - 2015/16

17

HyperText Markup Language


Redes e Sistemas Multimdia II

Hiperligao: <a href=valor>...</a>

Para representar uma hiperligao numa pgina HTML,


so utilizadas as tags <a>...</a>, anchor.
No atributo href indicado o destino da hiperligao.
Por exemplo: <a
href=http://www.esec.pt>ESEC</a>

3-May-16

CDM - RSM2 - 2015/16

18

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Com hiperligaes tambm permitida a criao


de bookmarks (marcadores), sendo necessrios
dois passos:
Identificao do marcador: <a

name=marcador>Texto do Marcador</a>
Referncia para o marcador: <a
href=#marcador>Referncia</a>
Repare-se que h uma relao entre o destino da hiperligao
e o nome do bookmark, sendo usado um cardinal para
identificar o bookmark como destino da hiperligao.

3-May-16

CDM - RSM2 - 2015/16

19

HyperText Markup Language


Redes e Sistemas Multimdia II

Fonte: <font face=nome da fonte

size=tamanho color=cor>...</font>
Serve para definir o tipo e tamanho da letra do texto
que se encontre entre estas duas tags.
Por exemplo: <font face=Courier New
size=20 color=navy>um qualquer
texto</font>

Note-se que este elemento caiu em desuso, com a


formatao a ser feita preferencialmente atravs de
CSS que abordaremos mais adiante.
Quebra de linha: <br />
Serve para fazer uma quebra de linha (sem dar espao
como o pargrafo e tambm sem envolver texto).
No tem fecho.
3-May-16

CDM - RSM2 - 2015/16

20

10

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Linha separadora: <hr />

Serve para inserir uma barra no documento (funciona


como um separador).
No tem fecho.

3-May-16

CDM - RSM2 - 2015/16

21

HyperText Markup Language


Redes e Sistemas Multimdia II

Listas ordenadas e no ordenadas

As listas podem ser, regra geral, de dois tipos:


Listas ordenadas: <ol>...</ol>
Listas no ordenadas: <ul>...</ul>

Independentemente dos dois tipos de listas, ambos


ambas recebem elementos da mesma forma:
list items: <li>...</li>

Exemplo genrico de uma lista no ordenada:


<ul>
<li>um elemento</li>
<li>outro elemento</li>
</ul>

3-May-16

CDM - RSM2 - 2015/16

22

11

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Listas de definio

Existe ainda um terceiro tipo de listas: as listas de


definio, com um funcionamento ligeiramente
diferente dos outros tipos.
Usam as tags: <dl>...</dl>
Recebem dois tipos de elementos:
Os termos: <dt>...</dt>
As definies: <dd>...</dd>

Exemplo genrico de uma lista de definio:


<dl>
<dt>Estrela</dt>
<dd>Sol</dd>
<dt>Planetas</dt>
<dd>Mercrio</dd>
<dd>Vnus</dd>
<dd>...</dd>
</dl>
3-May-16

CDM - RSM2 - 2015/16

23

HyperText Markup Language


Redes e Sistemas Multimdia II

Tabela: <table width=xx


border=yy>...</table>
Define os limites e as dimenses de uma tabela.
O atributo width define a largura da tabela.

Pode ser em pixels ou em percentagem (tamanho relativo


largura da pgina, com %).
O atributo border define a largura da margem da
tabela. Se for zero (0), no existe margem.

Funciona em conjunto com as tags <tr>...</tr>,


<th>...</th> e <td>...</td>.

3-May-16

CDM - RSM2 - 2015/16

24

12

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Linha tabular (table row): <tr>...</tr>


So usadas para definir linhas numa tabela.

Clula tabular (table data cell): <td


width=xx>...</td>
Dividem as linhas em clulas. Um para para cada clula.
O atributo width define a largura da clula. A soma dos
valores definidos em width, numa dada table row, devem
perfazer o valor total do width definido para a tabela.

Cabealho de coluna (table header): <th


width=xx>...</th>
Possuem caractersticas semelhantes s clulas, sendo
especficas para topos de colunas.

3-May-16

CDM - RSM2 - 2015/16

25

HyperText Markup Language


Redes e Sistemas Multimdia II

Exemplo geral de uma tabela:


<table width=100%>
<tr>
<td width=50%>Texto A</td>
<td width=50%>Texto B</td>
</tr>
</table>

Note-se que, se existirem vrias linhas, trs, cada um


deve ter o mesmo nmero de clulas, tds, de forma a
que tabela fique correctamente formatada.

3-May-16

CDM - RSM2 - 2015/16

26

13

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Caso se pretenda ter uma clula que ocupe o espao


destinado a duas ou mais clulas (noutras colunas),
deve usar-se o atributo colspan com o valor indicativo
do nmero de clulas a ocupar.
<table width=100%>
<tr>
<td width=50%>Texto A</td>
<td width=50%>Texto B</td>
</tr>
<tr>
<td width=100% colspan=2>Texto
</tr>
</table>

3-May-16

C</td>

CDM - RSM2 - 2015/16

27

HyperText Markup Language


Redes e Sistemas Multimdia II

Existe um atributo similar para uma clula ocupar duas


ou mais linhas: o rowspan, tambm com o valor
indicativo do nmero de clulas a ocupar.
<table width=100%>
<tr>
<td width=50%>Texto A</td>
<td width=50% rowspan=2>Texto
</tr>
<tr>
<td width=50%>Texto C</td>
</tr>
</table>

3-May-16

CDM - RSM2 - 2015/16

B</td>

28

14

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Formulrios: <form name=nome do


formulrio action=nome do ficheiro
que ir processar os dados
method=post|get enctype=tipo da
codificao dos dados>...</form>
Os formulrios permitem a insero de dados, por
parte do utilizador, em pginas web.
Contudo, necessrio uma linguagem de scripting
auxiliar para o processamento desses mesmos dados
e.g., JavaScript ou PHP.
A importncia do atributos name, action, method e
enctype ser explicitada mais adiante.
3-May-16

CDM - RSM2 - 2015/16

29

HyperText Markup Language


Redes e Sistemas Multimdia II

Dentro dos formulrios, podem ser inseridos os vrios


elementos j conhecidos de outras aplicaes, tais
como botes, campos e caixas de texto, radio buttons e
check boxes, ou listas.
Campos de texto: <input type=text name=nome
do campo de texto size=xx />

Caixas de texto: <textarea name=nome da caixa de


texto cols=xx rows=yy>Texto na caixa de
texto</textarea>

3-May-16

CDM - RSM2 - 2015/16

30

15

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Botes: <input type=button|submit|reset


name=nome do boto value=valor facial do
boto />
Tambm possvel fazer o mesmo com a tag button (com
abertura e fecho) usando os mesmos atributos, e at
disponibilizando mais possibilidades em termos de
formatao (e.g., definir uma imagem como sendo um boto).
Contudo, a opo pela tag input continua a ser a mais usual e
recomendada.

Radio buttons: <input type=radio name=nome do


radio button value=valor associado ao
boto />
A utilizao no mesmo nome em radio buttons permite a
seleco de valores exclusivos.
3-May-16

CDM - RSM2 - 2015/16

31

HyperText Markup Language


Redes e Sistemas Multimdia II

Check boxes: <input type=checkbox name=nome


da check box value=valor associado ao caixa
de seleco />

Listas: <select name=nome da lista de


seleco>...</select>
Dentro das listas, cada item representado por uma opo:
<option value=valor
da opo</option>

associado

opo>Texto

Passwords: <input type=password name=nome


do campo com a password size=xx />

Campos escondidos: <input type=hidden


name=nome do campo escondido>

3-May-16

CDM - RSM2 - 2015/16

32

16

5/9/16

HyperText Markup Language


Redes e Sistemas Multimdia II

Ficheiros: <input type=file name=nome da

caixa de seleco de ficheiros />


Explicao dos atributos name, action, method e
enctype:
importante que todos os elementos tenham um nome
(name) associado, j que atravs dele que podemos aceder
aos valores inseridos nos elementos com uma linguagem de
programao.
a aco (action) a referncia para o ficheiro que ir
processar os dados inseridos no formulrio.
o mtodo (method) refere-se maneira como os dados so
passados para o servidor.
o tipo de codificao (enctype) refere-se ao tipo de dados a
passar, sendo importante a sua definio quando usados
ficheiros.
3-May-16

CDM - RSM2 - 2015/16

33

HTML & XHTML


Redes e Sistemas Multimdia II

Em 2002 foi publicada a norma para o XHTML,


procurando aproximar o HTML do formato
mais generalista (mas mais rgido) XML
(eXtensible Markup Language).
O XHTML 1.0 essencialmente uma
reformulao do HTML 4, de forma a adoptar
as normas do XML 1.0.
Sofreu algumas alteraes com a verso 1.1 e
com a verso 2.0. Contudo, a verso mais
utilizada continua a ser a 1.0.
3-May-16

CDM - RSM2 - 2015/16

34

17

5/9/16

HTML & XHTML


Redes e Sistemas Multimdia II

Apesar de j se comear a utilizar o HTML5 (e


o XHTML5 estar em fase de desenvolvimento
para o acompanhar), actualmente, as verses
mais utilizadas do HTML e do XHTML ainda
so a 4.01 e a 1.0, respectivamente,
possuindo ambos o mesmo conjunto de
elementos, partilhando o seu comportamento
em ambas as verses.

3-May-16

CDM - RSM2 - 2015/16

35

HTML & XHTML


Redes e Sistemas Multimdia II

Apesar de estruturalmente e funcionalmente


o HTML e o XHTML serem bastante
semelhantes, h um conjunto de diferenas
que interessa referir (e que j foram
respeitadas nos exemplos anteriores), com
destaque para:
Os elementos XHTML tm de ser devidamente
encapsulados;
Os documentos XHTML tm de ter
obrigatoriamente um elemento raiz (html, head
e body).
3-May-16

CDM - RSM2 - 2015/16

36

18

5/9/16

HTML & XHTML


Redes e Sistemas Multimdia II

Os elementos XHTML tm de ser sempre


devidamente fechados (usando uma barra /,
quando no h elemento de fecho);
Os elementos XHTML tm de ser sempre escritos
em minsculas (sendo case sensitive);
Os atributos de um tag devem assumir sempre o
formato atributo=valor (mesmo os
binrios, e sempre como o valor entre aspas).

3-May-16

CDM - RSM2 - 2015/16

37

Cascading Style Sheets


Redes e Sistemas Multimdia II

3-May-16

CDM - RSM2 - 2015/16

38

19

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

As cascading style sheets (CSS) surgiram com o


intuito de separar a formatao dos
contedos de uma pgina web da sua
estrutura, uma necessidade identificada j em
meados dos anos 90.
As CSS alteram, quando necessrio, a
formatao a cada elemento HTML (tag).
Esta formatao pode ser usada em linha, definida
no cabealho ou num ficheiro externo.

3-May-16

CDM - RSM2 - 2015/16

39

Cascading Style Sheets


Redes e Sistemas Multimdia II

Ao separarem a formatao da estrutura da


pgina, as CSS permitem uma gesto
centralizada e uniforme da formatao dos
elementos HTML utilizados em todas as
pginas web de um site.
Para alm disso, possvel basear um estilo
noutro estilo j existente e/ou aproveitar a
hierarquia de aplicao dos estilos, poupando
tempo, trabalho e linhas de cdigo.

3-May-16

CDM - RSM2 - 2015/16

40

20

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

A ttulo informativo, actualmente, o


desenvolvimento feito essencialmente ainda
na verso 2 das CSS, estando, contudo, a
verso 3 a ser j bastante adoptada e
suportada pelos principais browsers.

3-May-16

CDM - RSM2 - 2015/16

41

Cascading Style Sheets


Redes e Sistemas Multimdia II

Os estilos podem ser definidos de trs formas


distintas:
em linha, usando o atributo style na definio de
um elemento HTML e caracterizando apenas esse
elemento utilizado, regra geral e idealmente,
apenas em casos pontuais;
no cabealho, encapsulados pelas tags <style
type=text/css> e </style>, caracterizandose, dessa forma, todas as classes pretendidas para
essa pgina HTML;

3-May-16

CDM - RSM2 - 2015/16

42

21

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

num ficheiro externo sendo, assim, possvel a


sua partilha por mltiplas pginas atravs da
insero da seguinte linha no cabealho: <link
rel=stylesheet type=text/css
href=ficheiro_com_os_estilos.css>.

Excepto nas declaraes em linha, toda a


definio de estilos gira volta de selectores,
que podem referir-se, entre outros, a
elementos HTML, ids, classes e pseudoclasses.

3-May-16

CDM - RSM2 - 2015/16

43

Cascading Style Sheets


Redes e Sistemas Multimdia II

Um mesmo documento pode ter vrias folhas


de estilos, para alm daqueles que podem ser
definidos por alguns browsers.
A sobreposio, por ordem crescente de
aplicao, : folha de estilos num ficheiro
externo, folha de estilos na prpria pgina, e
finalmente estilos em linha se bem que o
que define estritamente a sobreposio dos
estilos a sua ordem de carregamento.

3-May-16

CDM - RSM2 - 2015/16

44

22

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Contudo, a utilizao de ficheiros externos


favorece a partilha de estilos entre todas as
pginas de um site, facilitando, dessa forma, a
gesto dos mesmos.

3-May-16

CDM - RSM2 - 2015/16

45

Cascading Style Sheets


Redes e Sistemas Multimdia II

excepo dos estilos em linha, a sintaxe mais


simples de um estilo , por exemplo,
selector {propriedade: valor}.
O selector identifica o elemento ou elementos
que se pretendem modificar. Pode ser, por
exemplo, uma tag HTML.
A propriedade a caracterstica que se
pretende alterar, e assume o valor que for
definido.
Um exemplo:
p {color: red}.
3-May-16

CDM - RSM2 - 2015/16

46

23

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Se o valor de uma propriedade possuir mais


que uma palavra, devem ser usadas aspas
para o delimitar.
Se se desejar especificar mais que uma
propriedade, estas devem ser separadas por
pontos-e-vrgulas.
p {
text-align: center;
color: red;
font-family: sans-serif
}
3-May-16

CDM - RSM2 - 2015/16

47

Cascading Style Sheets


Redes e Sistemas Multimdia II

Se mltiplos elementos partilharem as


mesmas propriedades, possvel agrup-los,
separando-os com vrgulas.
h1, h2, h3, h4, h5, h6 {
color: green;
}

3-May-16

CDM - RSM2 - 2015/16

48

24

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

tambm possvel fazer combinaes de


elementos nos selectores.
Por exemplo, se apenas quisermos modificar
apenas as tags strong que se encontrem
dentro de pargrafos, teremos algo
semelhante a:
p strong {
background-color: red;
}

3-May-16

CDM - RSM2 - 2015/16

49

Cascading Style Sheets


Redes e Sistemas Multimdia II

possvel definir estilos diversos para o


mesmo elemento HTML, atravs da definio
de classes.
p.alinhadoDireita
{text-align: right}
p.alinhadoEsquerda
{text-align: left}
p.carregado
{font-weight: bold}
3-May-16

CDM - RSM2 - 2015/16

50

25

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Note-se que as classes herdam as definies


atribudas ao selector baseados em tags,
acrescentando novas ou substituindo as j
existentes.
A excepo o selector .class, que pode ser
aplicado em qualquer elemento (desde que
suporte as propriedades definidas).

3-May-16

CDM - RSM2 - 2015/16

51

Cascading Style Sheets


Redes e Sistemas Multimdia II

Quando se utilizam classes nos selectores,


necessrio tambm utilizar o atributo class
nas tags HTML correspondentes ao selector.
<p class=alinhadoDireita>Texto
alinhado direita</p>
<p class=alinhadoEsquerda>Texto
alinhado esquerda</p>

3-May-16

CDM - RSM2 - 2015/16

52

26

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

possvel tambm aplicar mais que uma


classe ao mesmo tempo, havendo uma
interseco das propriedades das classes
utilizadas.
<p class=alinhadoDireita
carregado>Texto alinhado direita
e carregado</p>

3-May-16

CDM - RSM2 - 2015/16

53

Cascading Style Sheets


Redes e Sistemas Multimdia II

As classes podem ainda no estar associadas a


um elemento HTML especfico, atravs do
selector .class, podendo ser utilizadas
atravs do atributo class em (quase)
qualquer elemento.
.centrado {text-align: center}
<h1 class=centrado>Ttulo
centrado</h1>
<p class=centrado>Pargrafo
centrado</p>
3-May-16

CDM - RSM2 - 2015/16

54

27

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Para elementos que sejam diferenciados


atravs do seu tipo (type) ou, na prtica,
atravs de qualquer atributo , como o caso
dos elementos dos formulrios, necessrio
indic-lo com recurso a parntesis rectos.
Por exemplo, para uma caixa de texto temos:
input[type=text] {
background-color: blue
}
3-May-16

CDM - RSM2 - 2015/16

55

Cascading Style Sheets


Redes e Sistemas Multimdia II

possvel tambm definir estilos atravs de


selectores de id (#):
#verde {color: green}.
Com isto, o elemento HTML que tiver a
identificao (id) verde, ir assumir as
propriedades definidas no selector.
<h2 id=verde>Ttulo (de segundo
nvel) com cor verde</h2>

3-May-16

CDM - RSM2 - 2015/16

56

28

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Os selectores de id tambm podem ser


aplicados a elementos especficos.
Por exemplo, o seguinte selector s ser
aplicado a pargrafos (p) com o id igual a
paragrafoX:
p#paragrafoX {text-align: center;
color: red}
<p id="paragrafoX">Texto vermelho
centrado</p>
3-May-16

CDM - RSM2 - 2015/16

57

Cascading Style Sheets


Redes e Sistemas Multimdia II

Para alm dos selectores que vimos


anteriormente, tambm possvel a definio
de pseudoclasses.
As pseudoclasses so usadas para adicionar
efeitos a alguns selectores (e respectivas
classes, caso se aplique), principalmente em
resposta a eventos gerados pelo utilizador.
Um dos caso mais comuns onde se aplicam
pseudoclasses nas hiperligaes (a).
3-May-16

CDM - RSM2 - 2015/16

58

29

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Nas hiperligaes, possvel definir


comportamentos diferentes para as seguintes
situaes:
hiperligao ainda no utilizada;
hiperligao visitada;
ponteiro do rato sobe a hiperligao;
hiperligao clicada (e ainda no libertada).

3-May-16

CDM - RSM2 - 2015/16

59

Cascading Style Sheets


Redes e Sistemas Multimdia II

As pseudoclasses so definidas de forma


semelhante s classes, contudo esto sempre
associadas a um selector (ou uma classe).
/* Note-se a sequncia LVHA */
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

3-May-16

CDM - RSM2 - 2015/16

60

30

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

No exemplo anterior, pode notar-se a


existncia de um comentrio.
Em CSS, s existe um tipo de comentrios:
delimitado por /* e */;
multilinha (se bem que possa tambm ser
aplicado a linhas isoladas).
/* Isto
um comentrio
em CSS. */

3-May-16

CDM - RSM2 - 2015/16

61

Cascading Style Sheets


Redes e Sistemas Multimdia II

Para alm dos selectores apresentados


anteriormente, h ainda muitos outros (quase
todos relacionados com pseudo-classes).
Optou-se, contudo, por abordar apenas os casos
mais comuns.

Ainda assim, menciona-se ainda mais um


caso: o selector *, que serve para seleccionar
todos os elementos presentes num
documento.
Por exemplo:
* {font-family: Helvetica, Arial,
sans-serif}.
3-May-16

CDM - RSM2 - 2015/16

62

31

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Apesar de ser possvel, com CCS, alterar o


comportamento de virtualmente qualquer
elemento HTML, h dois destes elementos
que merecem especial destaque: span e div.
Estas duas tags no tm um comportamento
especfico, sendo usadas quando h
contedos que no podem ser descritos
propriamente por outras, ou existe
necessidade de os agrupar.
Contudo, alguns browsers podem fazer quebras
de linha aps divs.
3-May-16

CDM - RSM2 - 2015/16

63

Cascading Style Sheets


Redes e Sistemas Multimdia II

A tag span funciona em linha (por exemplo,


para agrupar palavras), ao passo que a div
funciona em blocos (agrupando, por exemplo,
pargrafos).
Destas duas, a que tem maior notoriedade a
div, especialmente devido sua frequente
associao s CSS, atravs de classes (class)
ou, mais frequentemente, de selectores id
(id).

3-May-16

CDM - RSM2 - 2015/16

64

32

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Assim, se pretendermos, por exemplo,


agrupar um conjunto de pargrafos, podemos
encapsul-los entre as tags <div> e </div>.
<div>
<p>Texto de um pargrafo</p>
<p>Texto de outro pargrafo</p>
<p>Texto de ainda mais outro
pargrafo</p>
</div>

3-May-16

CDM - RSM2 - 2015/16

65

Cascading Style Sheets


Redes e Sistemas Multimdia II

O exemplo anterior, tal como se encontra,


nada faz de visualmente evidente .
Contudo, se acrescentarmos o atributo id e
depois associarmos, em CSS, um selector id
ao div, podemos alterar as propriedades do
bloco.
Tambm deve ser acrescentado o atributo name,
para se poder manipular as propriedades do div
atravs de scripts.
E tambm possvel o mesmo usando classes...
mas menos usual.
3-May-16

CDM - RSM2 - 2015/16

66

33

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

O exemplo ficaria assim:


<div id=estiloBloco>
<p>Texto de um pargrafo</p>
<p>Texto de outro pargrafo</p>
<p>Texto de ainda mais outro
pargrafo</p>
</div>

Posteriormente, necessrio definir o selector


de id #estiloBloco.

3-May-16

CDM - RSM2 - 2015/16

67

Cascading Style Sheets


Redes e Sistemas Multimdia II

A ttulo de exemplo, o estilo poderia definir


cor de fundo e margem:
#estiloBloco {
background-color: yellow;
border-style: solid;
border-width: 1px;
}

3-May-16

CDM - RSM2 - 2015/16

68

34

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Algumas propriedades de uso comum e


prtico com a utilizao de CSS em divs so:
posio (position): indicao se a posio
relativa (relative; obtida em funo do
elemento parent onde se encontra inserido,
absoluta (absolute); ou fixa (fixed), usando
como referncia a vista da janela do browser.
Em qualquer dos casos, depois necessrio posicionar
o elemento com recurso a propriedades como o top ou
o left.
H ainda a posio static, que corresponde ao
posicionamento por omisso dos elementos.
3-May-16

CDM - RSM2 - 2015/16

69

Cascading Style Sheets


Redes e Sistemas Multimdia II

flutuao (float): alinhamento do bloco,


podendo substituir o tradicional alinhamento de
cima para baixo por outro, como da esquerda para
a direita.
largura (width): largura do bloco;
distncia s margens (top, left, bottom e
right);
profundidade (z-index): quanto maior, mais
prximo estar do utilizador;

3-May-16

CDM - RSM2 - 2015/16

70

35

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

visibilidade (visibility): podendo estar visvel


(visible) ou oculto (hidden);
forma de apresentao (display): em linha
(inline), bloco (block), lista (list-item), e
oculto (none).

3-May-16

CDM - RSM2 - 2015/16

71

Cascading Style Sheets


Redes e Sistemas Multimdia II

A utilizao destas propriedades permite a


criao de layers (camadas), onde pode existir
sobreposio de contedos.
E qualquer propriedade pode ser manipulada
atravs de scripts, como veremos
posteriormente.

3-May-16

CDM - RSM2 - 2015/16

72

36

5/9/16

Cascading Style Sheets


Redes e Sistemas Multimdia II

Para terminar, os estilos podem no ser


reconhecidos por browsers mais antigos.
Assim, quando definidos dentro da pgina
web (no cabealho), os estilos devem ficar
delimitados por comentrios HTML.
<style type=text/css>
<!-hr {color: navy}
p {margin-left: 20px}
-->
</style>
3-May-16

CDM - RSM2 - 2015/16

73

JavaScript
Redes e Sistemas Multimdia II

3-May-16

CDM - RSM2 - 2015/16

74

37

5/9/16

JavaScript
Redes e Sistemas Multimdia II

O JavaScript (JS) usado em milhes de


pginas web para melhorar o seu design,
validar formulrios, e muitos mais aspectos.
O JS foi desenvolvido originalmente pela
Netscape, e a linguagem de scripting (clientside) mais popular da Internet.
Funciona com virtualmente todos os browsers
mais recentes e ainda no activo.
3-May-16

CDM - RSM2 - 2015/16

75

JavaScript
Redes e Sistemas Multimdia II

O JS teve, e tem, como um dos principais


propsitos adicionar interactividade s
pginas HTML.
O JS uma linguagem de scripting isto ,
uma linguagem de programao leve, no
compilada, interpretada no momento em que
a pgina carregada.
Um script JS um conjunto de linhas de
cdigo de computador executvel,
usualmente embebido directamente nas
pginas HTML.
3-May-16

CDM - RSM2 - 2015/16

76

38

5/9/16

JavaScript
Redes e Sistemas Multimdia II

O JS uma linguagem interpretada, o que


quer dizer que no necessita de ser
previamente compilada ao contrrio do
Java, por exemplo.
Qualquer pessoa pode usar o JS sem comprar
licenas semelhana do Java.
Apesar de o Java e o Javascript terem vrias
semelhanas, so linguagens completamente
distintas.
3-May-16

CDM - RSM2 - 2015/16

77

JavaScript
Redes e Sistemas Multimdia II

O Java uma linguagem de programao


bastante poderosa e complexa, ao passo que o
JavaScript tem um mbito muito mais reduzido.
O JS fornece aos designers HTML uma ferramenta
de programao, j que o HTML apenas permite a
estruturao e formatao de documentos.
O JS permite, por exemplo, colocar texto
dinmico numa pgina HTML, quando carregada
no browser.
3-May-16

CDM - RSM2 - 2015/16

78

39

5/9/16

JavaScript
Redes e Sistemas Multimdia II

O JS pode reagir a eventos podendo ser


configurado para executar quando algo
acontece, como quando uma pgina acabou
de carregar ou o utilizador interage com
algum elemento HTML.
O JS pode ler e escrever elementos HTML
podendo mesmo ler e alterar o contedo de
um elemento HTML.

3-May-16

CDM - RSM2 - 2015/16

79

JavaScript
Redes e Sistemas Multimdia II

O JS pode ser utilizado para validar dados


podendo ser utilizado para validar os dados
inseridos em formulrios, antes de estes
serem enviados para o servidor, poupando-o a
processamento desnecessrio.
Com alguns dos novos elementos presentes
no HTML5, com o JS passa a ser possvel
controlar a reproduo de contedos
multimdia e at mesmo a criao de
animaes e interaces mais complexas.
3-May-16

CDM - RSM2 - 2015/16

80

40

5/9/16

JavaScript
Redes e Sistemas Multimdia II

Os scripts podem ser definidos e inseridos


tanto no cabealho (head) como no corpo
(body) de uma pgina web.
Contudo, se o script for definido no cabealho,
este ser executado apenas quando chamado
explicitamente por exemplo, quando se
usam funes definidas pelo utilizador noutro
stio da pgina web.

3-May-16

CDM - RSM2 - 2015/16

81

JavaScript
Redes e Sistemas Multimdia II

J, se o script for definido no corpo, este ser


executado, regra geral, enquanto a pgina
est a ser carregada por exemplo, se a
pgina depende de dados do utilizador ou do
browser para ser construda.

3-May-16

CDM - RSM2 - 2015/16

82

41

5/9/16

JavaScript
Redes e Sistemas Multimdia II

Um exemplo:

<html>
<head>
<script type=text/JavaScript>
algumas instrues (usualmente,
definies de funes que so chamadas
noutro local)
</script>
</head>
<body>
<script type=text/JavaScript>
mais algumas instrues
</script>
</body>

</html>

3-May-16

CDM - RSM2 - 2015/16

83

JavaScript
Redes e Sistemas Multimdia II

Se o script for definido num ficheiro externo,


podemos us-lo assim, carregando-o no
cabealho:
<html>
<head>
<script type=text/JavaScript
src=externalscriptfile.js>
</script>
</head>
<body>
<script type=text/JavaScript>
algumas instrues
</script>
</body>
</html>
3-May-16

CDM - RSM2 - 2015/16

84

42

5/9/16

JavaScript
Redes e Sistemas Multimdia II

Scripts definidos em ficheiros externos so a


forma prefervel, principalmente quando os
scripts so grandes, usados em vrios pontos
na pgina web, ou mesmo quando so
partilhados por vrias pginas num site web.
Esta opo diminui o tamanho da pgina,
aumenta a sua legibilidade e facilita a sua
manuteno.

3-May-16

CDM - RSM2 - 2015/16

85

JavaScript
Redes e Sistemas Multimdia II

Observe-se um pequeno exemplo para


principiantes:
<html>
<head>
<title>um primeiro exemplo</title>
</head>
<body>
<script type=text/javascript>
document.write(<h1>Ol,
Mundo!</h1>);
</script>
</body>
</html>
3-May-16

CDM - RSM2 - 2015/16

86

43

5/9/16

JavaScript
Redes e Sistemas Multimdia II

Uma nota: tal como em CSS, os pontos-evrgulas no so estritamente necessrios,


excepto para separar instrues.
Contudo, boa prtica mant-los, para no
esquecer a sua obrigatoriedade noutras
linguagens de programao ou scripting.
O document o objecto que representa a

pgina web ou documento HTML (tanto o


cabealho como o corpo).

3-May-16

CDM - RSM2 - 2015/16

87

JavaScript Variveis
Redes e Sistemas Multimdia II

As variveis, como em qualquer outra


linguagem, so contentores de informao
que pretendamos guardar temporariamente.
Tal como em Java, as variveis so case
sensitive e tm de comear por uma letra ou
um underscore.
Em JavaScript, as variveis no so tipadas
i.e., no preciso indicar o seu tipo aquando
da sua declarao.
3-May-16

CDM - RSM2 - 2015/16

88

44

5/9/16

JavaScript Variveis
Redes e Sistemas Multimdia II

Assim, se pretendemos declarar algum tipo de


varivel, apenas h necessidade de escrever
var nomevar = valor.
Em algumas circunstncias, at se pode omitir a
palavra-chave var i.e., nomevar = valor.

3-May-16

CDM - RSM2 - 2015/16

89

JavaScript Variveis
Redes e Sistemas Multimdia II

Embora as variveis no sejam tipadas, h


classes que podem ser usadas,
nomeadamente Number, String, Boolean,
Date, RegExp, Array, Math e Object.
Muitos dos mtodos conhecidos da linguagem
Java, nas classes correspondentes, existem
nestes objectos (de forma idntica ou parecida).

3-May-16

CDM - RSM2 - 2015/16

90

45

5/9/16

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

Em JavaScript h j um conjunto de objectos


predefinidos, que podem ser utilizados
directamente.
Desses os objectos, destacam-se:
O navigator, que representa o browser, e disponibiliza
algumas propriedades teis como:

appName, o nome do browser;


appVersion, a verso maior do browser;
appMinorVersion, a verso menor do browser;
language, a linguagem do browser;
platform, a plataforma de suporte ao browser, o que

corresponde ao sistema operativo.


3-May-16

CDM - RSM2 - 2015/16

91

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

O window, que representa a janela do browser, e


disponibiliza alguns mtodos teis como:
open(), abre uma janela com um determinado endereo ou

vazia til, por exemplo, para pop ups (se bem que estes
tenham cado virtualmente em desuso);
close(), fecha a janela;
prompt(), mostra uma caixa com uma pergunta e fica
espera de uma resposta;
confirm(), mostra uma caixa com uma pergunta e fica
espera de um sim ou no (ou, em alternativa, ok ou cancelar);
alert(), mostra uma caixa com uma mensagem.

3-May-16

CDM - RSM2 - 2015/16

92

46

5/9/16

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

O document, que representa uma pgina web,


disponibilizando, entre outros, os mtodos:
write() e writeln(), para escrever no documento

(pgina);

getElementById() , para aceder a um elemento HTML

atravs do seu id.

O screen, que representa o cran do cliente,


disponibilizando atributos como:
height e width, que representam a altura e a largura em

pixis do cran;

availHeight e availWidth, que representam a altura e a largura

em pixis disponveis no cran (tirando as barras de ferramentas);

3-May-16

CDM - RSM2 - 2015/16

93

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

O history, que representa o histrico de navegao,


disponibilizando, entre outros, os seguintes mtodos e
atributos:
back() e forward(), para avanar ou recuar uma posio

no histrico (carregando as respectivas pginas);


go(), para carregar uma determinada pgina que j tenha
sido vista no histrico, recebendo como argumento o nmero
de retrocessos ou avanos, ou parte do URL e.g., go(-1);
length, que indica o nmero de endereos URL presentes no
histrico.

Note-se que o objecto history acedido a partir do


objecto window i.e., window.history.

3-May-16

CDM - RSM2 - 2015/16

94

47

5/9/16

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

O location, que representa o endereo actual,


disponibilizando, entre outros, os seguintes mtodos e
atributos:
assign() e replace(), que carregam um novo documento

com o URL especificado no argumento;

reload(), que volta a carregar o documento actual;


hostname e pathname, que devolvem, respectivamente, o

endereo do servidor e caminho da pgina;

href, que devolve o endereo completo da pgina.

Tal como o objecto anterior, tambm o location est


associado ao objecto window i.e., window.location.
Tambm pode ser usado directamente para atribuir ou
obter o endereo da pgina actual e.g.,
window.location = http://www.google.com.
3-May-16

CDM - RSM2 - 2015/16

95

JavaScript Objectos Predefinidos


Redes e Sistemas Multimdia II

Para alm dos objectos j referidos, interessa


ainda destacar os objectos pertencentes ao
DOM (Document Object Model).
no DOM que se encontra, por exemplo, o
objecto Document, como em
document.write(<p>Ol</p>) ;
Os eventos, que abordaremos mais adiante,
tambm se encontram definidos no DOM.
3-May-16

CDM - RSM2 - 2015/16

96

48

5/9/16

JavaScript Operadores
Redes e Sistemas Multimdia II

Tal como em Java, e outras linguagens de


programao, h operadores aritmticos, de
atribuio, de comparao e lgicos.
Operadores aritmticos: +, -, *, /, %, ++ e --.
Operadores de atribuio: =, +=, -=, *=, /= e %=.
Operadores de comparao: ==, !=, >, <, >= e <=.
Operadores lgicos: &&, || e !.

3-May-16

CDM - RSM2 - 2015/16

97

JavaScript Funes
Redes e Sistemas Multimdia II

Uma funo contm cdigo um conjunto de


instrues que ser executado por um
evento ou uma chamada a essa funo.
As funes podem ser reutilizadas dentro do
mesmo script ou em outros documentos.
As funes so definidas no incio de pgina
web (no cabealho) e so depois chamadas
mais tarde no documento (corpo).
3-May-16

CDM - RSM2 - 2015/16

98

49

5/9/16

JavaScript Funes
Redes e Sistemas Multimdia II

As funes em JavaScript podem ser


consideradas o equivalente dos mtodos em
Java, embora haja diferenas considerveis.
Por exemplo, as funes JavaScript no tm
tipos de retorno (embora possam devolver
valores), no tm de ser definidas dentro de
classes e os argumentos tambm no so
tipados.

3-May-16

CDM - RSM2 - 2015/16

99

JavaScript Funes
Redes e Sistemas Multimdia II

Exemplos de funes com e sem argumentos:


function aMinhaFuncao(argumento1,
argumento2, etc) {
algumas instrues
}
function aMinhaFuncao() {
algumas instrues
}

3-May-16

CDM - RSM2 - 2015/16

100

50

5/9/16

JavaScript Funes
Redes e Sistemas Multimdia II

function soma(a, b) {
var c = a + b;
return c;
}

Note-se que os argumentos da funo no


tm o prefixo var us-lo causaria erros de
execuo.

3-May-16

CDM - RSM2 - 2015/16

101

JavaScript Funes
Redes e Sistemas Multimdia II

Para se chamar uma funo, basta us-la:


aMinhaFuncao(argumento1,
argumento2, etc);
aMinhaFuncao();

Se a funo tiver um valor de retorno, este


pode ser guardado numa varivel (ou usado
directamente):
c = soma(1, 2); // c = 3

3-May-16

CDM - RSM2 - 2015/16

102

51

5/9/16

JavaScript Funes
Redes e Sistemas Multimdia II

Note-se que, quando estamos a passar


elementos HTML como argumentos a uma
funo, estamos a passar referncias. Desta
forma, possvel alterar o comportamento de
um elemento a partir de dentro da funo.
Quando se quer passar valores (por exemplo,
de elementos de formulrios), deve ser
utilizado o atributo value.

3-May-16

CDM - RSM2 - 2015/16

103

JavaScript Funes
Redes e Sistemas Multimdia II

Em termos de funes de uso generalizado, h


a destacar as seguintes:
eval()
Esta funo permite avaliar e calcular o valor de
expresses.
Por exemplo, eval(1 + 2 + 3) = 6.
parseInt() e parseFloat()
Convertem strings com nmeros para nmero inteiros
e com vrgula flutuante, respectivamente.
isNaN()
Verifica que um dado valor no um nmero vlido (ou
se , quando se usa a negao).
3-May-16

CDM - RSM2 - 2015/16

104

52

5/9/16

JavaScript Execuo Condicionada


Redes e Sistemas Multimdia II

Tal como em Java, em JavaScript podem ser


utilizadas estruturas de controlo para realizar
diferentes aces em funo de diferentes
condies.
As estruturas de controlo funcionam de forma
idntica ao Java e so:
a declarao condicional if que pode ser usada
quando se pretende executar cdigo quando uma
determinada condio verdadeira;
3-May-16

CDM - RSM2 - 2015/16

105

JavaScript Execuo Condicionada


Redes e Sistemas Multimdia II

a declarao condicional if...else que pode


ser usada quando se tem dois conjuntos de
instrues para executar, dependendo do valor de
determinada condio (verdadeira ou falsa);
e a declarao condicional switch que pode ser
utilizada quando se tem um vasto conjunto de
alternativas para serem executadas com base nos
valores possveis da varivel utilizada.

3-May-16

CDM - RSM2 - 2015/16

106

53

5/9/16

JavaScript Execuo Condicionada


Redes e Sistemas Multimdia II

Mais uma vez, o JavaScript tem as mesmas


estruturas para ciclos que o Java tem,
funcionando da mesma maneira:
o ciclo while para executar um conjunto de
instrues enquanto uma condio verdadeira;
o ciclo do...while o mesmo que o ciclo while,
mas executando pelo menos uma vez o conjunto
de instrues, independentemente do valor da
condio;
e o ciclo for para executar instrues um
determinado nmero de vezes.
3-May-16

CDM - RSM2 - 2015/16

107

JavaScript Arrays
Redes e Sistemas Multimdia II

Os arrays, em JavaScript, tm um
comportamento misto entre os arrays e os
vectores em Java.
So um objecto e no tm um tamanho
predefinido.
Apesar de poderem ser acessveis atravs de
ndices, possvel usar o array como uma
pilha, adicionado elementos ao topo e
retirando elementos desse mesmo topo pela
ordem inversa.
3-May-16

CDM - RSM2 - 2015/16

108

54

5/9/16

JavaScript Arrays
Redes e Sistemas Multimdia II

Para adicionar elementos a um array, deve ser


utilizado o mtodo push(), ou, em
alternativa, usar o ndice devendo ficar ao
cuidado do programador a sequncia do
ndice.
J para aceder a elementos, existem duas
alternativas mais comuns: usar o mtodo
pop(), caso queiramos retirar o elemento do
array, ou ento usar o ndice (mantendo-se os
elementos inalterados).
3-May-16

CDM - RSM2 - 2015/16

109

JavaScript Arrays
Redes e Sistemas Multimdia II

Seguem-se exemplos:
var diasSemana = new Array();
diasSemana.push(Domingo);
...
diasSemana.push(Sbado);
var ultimoDia = diasSemana.pop();
var diaMeio = diasSemana[4];

3-May-16

CDM - RSM2 - 2015/16

110

55

5/9/16

JavaScript Arrays
Redes e Sistemas Multimdia II

Em JS, sempre que for necessrio aceder a, ou


manipular, elementos HTML, podem ser
usadas duas formas, dependendo do browser:
usar o nome dado ao elemento (atravs do
atributo name), especificamente em formulrios;
usar o id dado ao elemento (atravs do atributo
id), usando o retorno do mtodo
document.getElementById().
Esta dever ser a verso preferida, compatvel com um
maior nmero de browsers, e tambm quando o
elemento em questo no possui o atributo name.
3-May-16

CDM - RSM2 - 2015/16

111

JavaScript Classes
Redes e Sistemas Multimdia II

O JavaScript permite a definio de classes,


que depois podem ser utilizadas para a
criao de objectos.
Havendo vrias formas de definir classes, vai
ser utilizada uma prxima de outras
abordagens como, por exemplo, no Java.
A criao de classes tem muitos mais pormenores
e pode ser mais complexa do aqui descrito tal
fica, contudo, fora do mbito desta unidade
curricular.
3-May-16

CDM - RSM2 - 2015/16

112

56

5/9/16

JavaScript Classes
Redes e Sistemas Multimdia II

Segue-se um exemplo representando uma


hipottica classe Pessoa:
var Pessoa = function (nome, genero, dn) {
this.nome = nome;
this.genero = genero;
this.dn = new Date(dn + ",00:00:00"); // yyyy mm dd
this.calculaIdade = function () {
var hoje = new Date();
var idade = hoje.getFullYear() - this.dn.getFullYear();
var difMes = hoje.getMonth() - this.dn.getMonth();
if ((difMes < 0) || ((difMes == 0) && (hoje.getDate() <
this.dn.getDate()))) {
idade--;
}
return idade;
}
}
3-May-16

CDM - RSM2 - 2015/16

113

JavaScript Classes
Redes e Sistemas Multimdia II

Elementos a reter do exemplo anterior (e da


forma adoptada para definio de classes):
A classe declarada como se fosse uma varivel,
sendo-lhe atribuda, contudo, como valor uma funo
que funciona como o construtor da classe.
As propriedades (pblicas) da classe so antecedidas
pelo operador this e devem ser sempre referidas,
dentro da classe, com esse operador; as outras
variveis so privadas.
Os mtodos so propriedades a que so atribudas,
como valor, funes.
3-May-16

CDM - RSM2 - 2015/16

114

57

5/9/16

JavaScript Classes
Redes e Sistemas Multimdia II

Esta classe pode posteriormente ser utilizada


para instanciar objectos:
var nome = "Jos Ningum";
var genero = "Masc";
var dn = "2002 02 20";
var pessoa = new Pessoa(nome, genero, dn);
var idade = pessoa.calculaIdade();

3-May-16

CDM - RSM2 - 2015/16

115

JavaScript Eventos
Redes e Sistemas Multimdia II

Devem ser mencionados alguns dos eventos


mais comuns, que permitem interactividade
entre utilizador e pgina.
Regra geral, os eventos esto associados a
atributos que podem ser colocados em
elementos HTML e receber cdigo JS.
Por exemplo, <a href=#

onclick=javacript:
window.alert(Ol!);>Link que mostra
uma saudao</a>.

Note-se a utilizao do cardinal no href (no caso


das ncoras) e o javacript: antes do cdigo.
3-May-16

CDM - RSM2 - 2015/16

116

58

5/9/16

JavaScript Eventos
Redes e Sistemas Multimdia II

Dos mltiplos existentes, alguns dos eventos


mais comuns so:
onclick: para cliques do rato sobre o elemento;
onmouseover: quando se passa com o rato por

cima do elemento;
onmouseout: quando se tira o ponteiro do rato de
cima do elemento;
onfocus: quando um elemento foca
seleccionado;
onkeydown: quando uma tecla foi pressionada (e
ainda no libertada).
3-May-16

CDM - RSM2 - 2015/16

117

JavaScript Eventos
Redes e Sistemas Multimdia II

Outro evento bastante til o onload,


permitindo, por exemplo, a iniciao de
variveis e objectos, bem como a definio de
alguns atributos HTML e propriedades CSS.
Pode receber o nome de uma funo a executar,
ou mesmo definir uma funo in loco com
function() {instrues...}.
Por exemplo, onload = javascript:
function() {window.alert(Ol!);}

3-May-16

CDM - RSM2 - 2015/16

118

59

5/9/16

JavaScript Eventos
Redes e Sistemas Multimdia II

Tambm possvel a atribuio da escuta de


eventos a elementos HTML atravs de
JavaScript, usando o modelo
elemento.evento = funo() {...};.
Por exemplo:
document.getElementById(xpto).onclick =
function() {
window.alert(Clicou no elemento \xpto\!);
};

3-May-16

CDM - RSM2 - 2015/16

119

JavaScript Acesso a Elementos


Redes e Sistemas Multimdia II

Para terminar, resta indicar que possvel


alterar o valor de atributos de tags HTML ou
mesmo o contedo das tags (entre a abertura
e o fecho).
Para alterar/aceder maioria dos elementos, a
maneira prefervel atravs dos seus ids,
especificando o atributo a alterar/aceder e.g.,
document. getElementById(textFileXPTO).
value=um qualquer texto;
Em elementos de formulrios, para alm do id,
pode ser usado o nome (name) do elemento em
questo e.g., para aceder a um valor, texto =
textFieldXPTO.value;
3-May-16

CDM - RSM2 - 2015/16

120

60

5/9/16

JavaScript Acesso a Elementos


Redes e Sistemas Multimdia II

No caso especfico da modificao de estilos CSS


atravs de JavaScript, apesar de alguns browsers
aceitarem a definio do style como se de
qualquer outro atributo se tratasse, a opo mais
transversal e compatvel usar a notao
elemento.atributo.propriedade , sendo que
as propriedades adoptam, quando necessrio, o
camelcase tpico do JavaScript e.g.,
document. getElementById(idXPTO).style.
fontSize=16px;

3-May-16

CDM - RSM2 - 2015/16

121

JavaScript Acesso a Elementos


Redes e Sistemas Multimdia II

Para alterar/aceder ao contedo de um elemento,


por exemplo o contedo de um DIV, utiliza-se as
propriedades innerText e innerHTML, sendo
que o innerText permite apenas texto, e o
innerHTML permite a insero de outros tags
HTML:
getElementById(divXPTO).innerHTML =
<p>Novo contedo HTML deste
elemento...</p>;
A propriedade innerText no suportada por todos
os browsers, havendo alguns que suportam a
alternativa textContent.
3-May-16

CDM - RSM2 - 2015/16

122

61

5/9/16

JavaScript Cookies
Redes e Sistemas Multimdia II

Por questes de segurana, no permitido


ao JavaScript aceder aos recursos de entrada
e sada de dados da mquina do utilizador.
Contudo, existe uma excepo: permitido ao
browser que se guarde um pequeno ficheiro
de texto, com pares atributo-valor para futuro
acesso. So os chamados cookies.
Por omisso, os cookies apenas esto disponveis
para o site que os criou.

3-May-16

CDM - RSM2 - 2015/16

123

JavaScript Cookies
Redes e Sistemas Multimdia II

Criar um cookie bastante simples:


document.cookie = atributo=valor;
Suponhamos que queremos guardar nome e
morada do utilizador. Assim, teramos, por
exemplo:

document.cookie = nome=Alberto;
document.cookie = morada=Coimbra;
expires=Mon, 20 May 2013 23:59:59 UTC;

Note-se o atributo expires: este define o tempo


de validade do cookie.

E com a leitura acontece o mesmo:

var conteudo = document.cookie;


3-May-16

CDM - RSM2 - 2015/16

124

62

5/9/16

JavaScript Cookies
Redes e Sistemas Multimdia II

Dado ser usual um cookie poder conter vrios


pares atributo-valor, para aceder a estes, a
tcnica separar os pares pelos pontos-evrgulas (;) e depois separar o atributo do
valor pelo sinal de igual (=).
Assim:
var pares = conteudo.split(; );

E, para cada par, assumindo-se a iterao atravs


de um ciclo (com ndice i):
atributo = pares[i].split(=)[0];
valor = pares[i].split(=)[1];
3-May-16

CDM - RSM2 - 2015/16

125

JavaScript Cookies
Redes e Sistemas Multimdia II

Sendo necessrio apagar um cookie, a soluo


passa por atribuir um valor vazio ao atributo
em questo, ao mesmo tempo que define o
prazo de validade para uma data anterior
actual. Assim, por exemplo:
document.cookie = nome=;
expires=Thu, 01 Jan 1970 00:00:00 GMT;

3-May-16

CDM - RSM2 - 2015/16

126

63

5/9/16

JavaScript Consola
Redes e Sistemas Multimdia II

Para terminar, interessa referir a consola


(console) de JavaScript.
A consola tem uma srie de mtodos teis
para a depurao de erros (e no s), dos
quais so mencionados de seguida aqueles
para sada de mensagens (evitando o output
para a prpria pgina).
Note-se que necessrio, no browser, activar a
vista da consola de JavaScript.

3-May-16

CDM - RSM2 - 2015/16

127

JavaScript Consola
Redes e Sistemas Multimdia II

Assim, os mtodos seleccionados so:


console.log() para escrever texto, valores,

etc., na consola;

console.error() semelhante ao log(), mas

indicado especificamente para mensagens de


erro;
console.clear() para limpar a consola.

3-May-16

CDM - RSM2 - 2015/16

128

64

5/9/16

JavaScript Mos Obra


Redes e Sistemas Multimdia II

Como se pode observar, o JavaScript uma


linguagem que, embora seja bastante
diferente do Java, tem uma sintaxe e um
modo de funcionamento algo semelhante ao
Java da o seu nome.
E, como em qualquer outra linguagem, a nica
forma de efectivamente a aprender
trabalhar com exemplos, realizar exerccios e
fazer os prprios programas.

3-May-16

CDM - RSM2 - 2015/16

129

JavaScript Mos Obra


Redes e Sistemas Multimdia II

Referncias e exemplos de JavaScript, para


alm da bibliografia, podem ser encontrados
em sites como:
http://www.w3schools.com/jsref/
http://www.webreference.com/js/
http://www.javascriptkit.com/jsref/
http://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference

3-May-16

CDM - RSM2 - 2015/16

130

65

5/9/16

HTML5
Redes e Sistemas Multimdia II

3-May-16

CDM - RSM2 - 2015/16

131

HTML5 Porqu?
Redes e Sistemas Multimdia II

O actual standard HTML (seja na


implementao HTML 4.01, seja na XHTML
1.1) j tem cerca de 10 anos, e existe a
necessidade de criar suporte para prticas
muito utilizadas (e simplificar as mesmas),
mas no oficiais, e tambm de suportar novos
contedos que comearam a proliferar pela
World Wide Web.

3-May-16

CDM - RSM2 - 2015/16

132

66

5/9/16

HTML5 Porqu?
Redes e Sistemas Multimdia II

Assim, para alm de procurar facilitar a


estruturao de documentos, tem tambm o
intuito de facilitar a criao de contedos e
aplicaes.
Ao mesmo tempo, o HTML5 procura garantir
que todos os pginas criadas anteriormente
continuam a ser suportadas.
Desta forma, o HTML5 retrocompatvel,
suportando contedos j existentes,
desenvolvidos em HTML 4 ou XHTML 1.
3-May-16

CDM - RSM2 - 2015/16

133

HTML5 Porqu?
Redes e Sistemas Multimdia II

Mas ateno, o HTML5 ainda um standard


em desenvolvimento!
S em 2014 atingiu a fase de recomendao
(recommendation), tendo comeado
entretanto os trabalhos nas verses HTML 5.1
e HTML 5.2.

3-May-16

CDM - RSM2 - 2015/16

134

67

5/9/16

HTML5 Porqu?
Redes e Sistemas Multimdia II

A maior parte dos browsers j suportam o


HTML45, com mais ou menos funcionalidades,
com o apoio da W3C (World Wide Web
Consortium) e do WHATWG (Web Hypertext
Application Technology Working Group).

3-May-16

CDM - RSM2 - 2015/16

135

HTML5 Estrutura Base


Redes e Sistemas Multimdia II

O doctype do HTML5 bastante mais simples


que os anteriores (tanto mais que visa
tambm a retrocompatibilidade).
<!DOCTYPE html>

A codificao dos caracteres (character


encoding) tambm bastante mais simples.
<meta charset=UTF-8>

3-May-16

CDM - RSM2 - 2015/16

136

68

5/9/16

HTML5 Estrutura Base


Redes e Sistemas Multimdia II

E o mesmo acontece para a incluso de


JavaScript e Cascading Style Sheets, j que
estas eram, na prtica, as nicas opes
utilizadas.
Assim, para incluirmos JavaScript (presente
num ficheiro externo) passamos a ter:
<script src=file.js></script>

E para CSS, temos:

<link rel=stylesheet
href=file.css>
3-May-16

CDM - RSM2 - 2015/16

137

HTML5 Estrutura Base


Redes e Sistemas Multimdia II

No prprio ficheiro, teremos apenas

<script>...</script > (para JavaScript) e


<style>...</style>, para CSS.

Para alm disso, o HTML5 no restritivo


quanto forma de criar o cdigo.
Podemos usar as convenes do HTML, do
XHTML, ou at mesmo combin-las.

3-May-16

CDM - RSM2 - 2015/16

138

69

5/9/16

HTML5 Estrutura Base


Redes e Sistemas Multimdia II

Em todo o caso, recomenda-se a adopo de


um estilo nico e nas aulas, esse representa
a adopo das convenes de cdigo do
XHTML: sempre minsculas, fechar
devidamente as tags, usar sempre aspas nos
atributos, etc.

3-May-16

CDM - RSM2 - 2015/16

139

HTML5 Estrutura Base


Redes e Sistemas Multimdia II

Uma outra novidade do HTML5 definir uma


lista (maior) de elementos obsoletos, tal como
o font, o big e o center, s para mencionar
alguns.
O mesmo acontece com alguns atributos,
como o bgcolor ou valign (tambm s para citar
dois), cuja funo tambm melhor
implementada atravs de CSS.
Contudo, apesar de obsoletos, continuam a
ser reconhecidos pelos browsers.
3-May-16

CDM - RSM2 - 2015/16

140

70

5/9/16

HTML5 Algumas Novidades


Redes e Sistemas Multimdia II

O HTML5 traz consigo inmeras novidades,


sendo abordadas de seguida algumas das mais
evidentes (e que sero talvez das mais
utilizadas).
O HTML5 procura tornar nativas (nos
browsers) algumas das funes que
actualmente s se conseguiam com a
utilizao de plug-ins ou com recurso a, por
exemplo, JavaScript.
3-May-16

CDM - RSM2 - 2015/16

141

HTML5 Algumas Novidades


Redes e Sistemas Multimdia II

Com o HTML5 tambm surgiu uma alternativa


aos cookies, se bem que com algumas
semelhanas: o local storage e o session
storage.
Iremos abordar de seguida alguns desses
novos elementos, incluindo, entre outros, os
de desenho, udio e vdeo, os de
armazenamento, e comeando pelas
omnipresentes ncoras.
3-May-16

CDM - RSM2 - 2015/16

142

71

5/9/16

HTML5 ncoras
Redes e Sistemas Multimdia II

As ncoras (que permitem a criao de


hiperligaes) passam a ser um elemento
HTML que pode englobar outros elementos:
<a href=bio.html>
<h2>Sobre mim</h2>
<p>Uma curta biografia...</p>
</a>

A nica excepo colocar ncoras dentro de


ncoras.

3-May-16

CDM - RSM2 - 2015/16

143

HTML5 Canvas
Redes e Sistemas Multimdia II

O canvas um elemento que permite a


criao de imagens dinmicas (com recurso a
JavaScript).
<canvas id=canvas width=360
height=240>
</canvas>

Essencialmente, define uma rea de desenho


e o comportamento do browser, caso o
elemento no seja suportado.
3-May-16

CDM - RSM2 - 2015/16

144

72

5/9/16

HTML5 Canvas
Redes e Sistemas Multimdia II

Tudo o que estiver entre as tags de abertura e


o fecho do canvas s mostrado se o
browser no suportar HTML5 (ou esse
elemento especfico) e o mesmo se aplica
aos elementos de udio e vdeo, apresentados
adiante.
<canvas id=canvas width=360
height=240>O seu <em>browser</em> no
suporta <em>canvas</em>!
</canvas>
3-May-16

CDM - RSM2 - 2015/16

145

HTML5 Canvas
Redes e Sistemas Multimdia II

Para manipular o canvas necessrio utilizar


JavaScript, como podemos ver no seguinte
exemplo que desenha um rectngulo e
preenche outro (usando o elemento canvas
descrito anteriormente):
<script>
var canvas = document.getElementById(canvas);
var context = canvas.getContext(2d);
context.strokeStyle = red;
// context.strokeStyle = rgb(255, 0, 0);
context.strokeRect(20, 30, 100, 50);
context.fillRect(30, 40, 30, 30);
</script>

3-May-16

CDM - RSM2 - 2015/16

146

73

5/9/16

HTML5 Canvas
Redes e Sistemas Multimdia II

Apresentam-se alguns exemplos (para alm do


anterior) para desenhar linhas, crculos,
gradientes e imagens, assumindo-se a criao
do canvas e do objecto context.
<script>
var canvas =
document.getElementById(canvas);
var context = canvas.getContext(2d);
//... linhas, crculos, etc.
</script>

3-May-16

CDM - RSM2 - 2015/16

147

HTML5 Canvas
Redes e Sistemas Multimdia II

Para desenhar linhas, define-se o ponto onde


iniciar linha e at onde esta deve ser
desenhada.
context.beginPath();
context.moveTo(10, 10);
context.lineTo(150, 50);
context.lineTo(10, 50);
context.closePath();
context.stroke();

3-May-16

CDM - RSM2 - 2015/16

148

74

5/9/16

HTML5 Canvas
Redes e Sistemas Multimdia II

Para desenhar crculos (e arcos), define-se o


centro (x, y), o raio, o grau onde se inicia a
circunferncia e onde esta termina, e o
sentido do desenho (no sentido dos ponteiros
do relgio ou ao contrrio).
context.fillStyle=red;
context.beginPath();
context.arc(50, 50, 25, 0, Math.PI * 2, true);
context.closePath();
context.fill();

3-May-16

CDM - RSM2 - 2015/16

149

HTML5 Canvas
Redes e Sistemas Multimdia II

Para desenhar gradientes, o aspecto essencial


definir a cor de incio do gradiente e a cor de
fim.
var gradient =
context.createLinearGradient(0, 0, 200, 50);
gradient.addColorStop(0, red);
gradient.addColorStop(1, green);
context.fillStyle = gradient;
context.fillRect(0, 0, 200, 50);

Tambm se exemplifica, no exemplo acima, o


desenho (preenchido) de um rectngulo.
3-May-16

CDM - RSM2 - 2015/16

150

75

5/9/16

HTML5 Canvas
Redes e Sistemas Multimdia II

Para desenhar imagens, utiliza-se o (j


conhecido) objecto Image, havendo agora a
possibilidade de o desenhar.
context.clearRect(0, 0, canvas.width,
canvas.height);

3-May-16

CDM - RSM2 - 2015/16

151

HTML5 Canvas
Redes e Sistemas Multimdia II

Para limpar o canvas (bastante comum nas


vrias iteraes de uma animao):
var image = new Image();
image.src=imagem.jpg;
context.drawImage(image, 0, 0);

3-May-16

CDM - RSM2 - 2015/16

152

76

5/9/16

HTML5 udio e Vdeo


Redes e Sistemas Multimdia II

Relativamente aos contedos de udio e vdeo,


no HTML5 foi tomada a seguinte resoluo, de
forma a evitar o uso de plug-ins: no HTML5
devero ser contemplados, de raiz, pelo menos
dois formatos/codecs de udio e outros dois de
vdeo.
Actualmente, os formatos adoptados para o
udio foram:
MP3 (audio/mpeg);
Ogg (audio/ogg);
Wav (audio/wav).
3-May-16

CDM - RSM2 - 2015/16

153

HTML5 udio e Vdeo


Redes e Sistemas Multimdia II

No que toca ao vdeo, actualmente, os


formatos adoptados foram:
MP4 (video/mp4);
Ogg (video/ogg);
WebM(video/webm).

Os browsers devem suportar, pelo menos, um


dos formatos de udio e um dos formatos de
vdeo indicados.
3-May-16

CDM - RSM2 - 2015/16

154

77

5/9/16

HTML5 udio
Redes e Sistemas Multimdia II

Para embutir um ficheiro de som num


documento HTML5, basta indicar qual o seu
caminho:
<audio src=audio_sample.mp3></audio>

Contudo, para podermos ouvir o ficheiro ou


controlar a sua reproduo, so necessrios os
atributos autoplay, controls e/ou loop,
para iniciar a reproduo automtica, mostrar
os controlos e repetir a reproduo.
3-May-16

CDM - RSM2 - 2015/16

155

HTML5 udio
Redes e Sistemas Multimdia II

Assim, teramos:
<audio src=audio_sample.mp3 autoplay
controls loop>O seu <em>browser</em>
no suporta este elemento!</audio>

Note-se que se o ficheiro for grande, a opo


autoplay desaconselhada, principalmente em
dispositivos mveis.

3-May-16

CDM - RSM2 - 2015/16

156

78

5/9/16

HTML5 udio
Redes e Sistemas Multimdia II

Estes atributos so binrios, no sentido em


que se estiverem presentes, devem ser
aplicados e se no estiverem, ignorados.
Caso se queira pares atributo valor, a soluo ser
autoplay=autoplay.

3-May-16

CDM - RSM2 - 2015/16

157

HTML5 udio
Redes e Sistemas Multimdia II

Tendo em conta que um browser no


obrigado a suportar todos os formatos de
udio especificados pelo HTML5, uma
alternativa mais robusta :
<audio id=audio controls>
<source src=audio_sample.ogg
type=audio/ogg>
<source src=audio_sample.mp3
type=audio/mpeg>
</audio>

3-May-16

CDM - RSM2 - 2015/16

158

79

5/9/16

HTML5 udio
Redes e Sistemas Multimdia II

Caso o browser no suporte de todo o


elemento audio (ou quaisquer dos novos
elementos), quaisquer elementos embutidos
no audio para alm dos source sero
processados caso haja suporte, so
ignorados.
Com base neste comportamento, podemos
colocar l mensagens de erro, ou mesmo os
actualmente comuns plug-ins.
3-May-16

CDM - RSM2 - 2015/16

159

HTML5 udio
Redes e Sistemas Multimdia II

Segue-se um exemplo com quatro nveis de


degradao: ficheiro no formato mp3, ficheiro
no formato ogg, plug-in para reproduzir o
ficheiro mp3 e link para esse ficheiro (caso
tudo o resto falhe):
<audio controls>
<source src=sample.mp3 type=audio/mpeg>
<source src=sample.ogg type=audio/ogg>
<object type=application/x-shockwave-flash
data=player.swf?soundFile=sample.mp3>
<param name=soundclip
value=player.swf?soundFile=sample.mp3>
<a href=sample.mp3>Descarregar amostra</a>
</object>
</audio>
3-May-16

CDM - RSM2 - 2015/16

160

80

5/9/16

HTML5 Vdeo
Redes e Sistemas Multimdia II

Para os ficheiros de vdeo, os elementos


HTML5 tm um comportamento bastante
semelhante aos de udio, alterando-se pouco
mais que o nome dos elementos e os valores
dos atributos (e acrescentando-se as
dimenses do vdeo):
<video id=video controls width=320
heigth=240>
<source src=video_sample.ogg
type=video/ogg>
<source src=video_sample.mp4
type=video/mpeg>O seu browser no
suporta este elemento!
</video>
3-May-16

CDM - RSM2 - 2015/16

161

HTML5 Vdeo
Redes e Sistemas Multimdia II

Os elementos video permitem tambm a


definio de estilos CSS sobre a rea do vdeo,
como, por exemplo, a definio de molduras
ou cores de fundo.
Outro aspecto importante destes elementos
a possibilidade de definir a imagem a ser
mostrada enquanto o vdeo no for
reproduzido, atravs do atributo poster.
Caso no esteja definido, mostrado o
primeiro frame do vdeo em questo.
3-May-16

CDM - RSM2 - 2015/16

162

81

5/9/16

HTML5 Vdeo
Redes e Sistemas Multimdia II

O atributo poster apenas necessita da


indicao da imagem a carregar.
<video id=video controls width=320
heigth=240 poster=poster_image.jpg>
<source src=video_sample.ogg
type=video/ogg>
<source src=video_sample.mp4
type=video/mpeg>
</video>

Outro atributo que poder ser til o muted,


que coloca o volume do vdeo a zero.
3-May-16

CDM - RSM2 - 2015/16

163

HTML5 udio & Vdeo


Redes e Sistemas Multimdia II

Tanto os elementos de udio como de vdeo


permitem o seu controlo atravs de
JavaScript, caso, por algum motivo, no se
possam ou queiram usar os controlos
definidos por omisso por cada browser.
Por exemplo, no caso do udio, poder ser til
controlar um som de fundo da pgina web
sem ter a barra de controlo visvel.
Ou mesmo ainda se quisermos controlar
vrios elementos em simultneo.
3-May-16

CDM - RSM2 - 2015/16

164

82

5/9/16

HTML5 udio & Vdeo


Redes e Sistemas Multimdia II

Desde que os elementos estejam identificados


com um id, podem ser usados os seguintes
mtodos e propriedades:
Reproduzir:
document.getElementById(video).play();

Pausar:
document.getElementById(video).pause();

Parar:
document.getElementById(video).pause();
document.getElementById(video).currentTime=0;

3-May-16

CDM - RSM2 - 2015/16

165

HTML5 udio & Vdeo


Redes e Sistemas Multimdia II

Obter a posio actual da reproduo:


document.getElementById(video).currentTime

Aumentar/diminuir o volume:
document.getElementById(video).volume+=0.1;

// -=

Obter a durao do elemento:


document.getElementById(video).duration

3-May-16

CDM - RSM2 - 2015/16

166

83

5/9/16

HTML5 udio & Vdeo


Redes e Sistemas Multimdia II

Relativamente aos elementos de udio e


vdeo, interessa tambm referir os novos
eventos que lhes esto associados. Assim,
destacam-se os seguintes, disparados quanto
elemento:
est pronto para ser comeado a reproduzir:
onPlay;
comeou a ser reproduzido: onPlaying;
est pausado: onPause;
3-May-16

CDM - RSM2 - 2015/16

167

HTML5 udio & Vdeo


Redes e Sistemas Multimdia II

terminou: onEnded;
avana ao longo do tempo de reproduo:
onTimeUpdate.

3-May-16

CDM - RSM2 - 2015/16

168

84

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

No HTML5, tambm os formulrios sofreram


vrias alteraes, desde alguns novos
elementos, at validao embutida em alguns
campos incorporando, essencialmente,
alguns comportamentos que eram
assegurados por JavaScript.

3-May-16

CDM - RSM2 - 2015/16

169

HTML5 Formulrios
Redes e Sistemas Multimdia II

Passa a ser agora disponibilizada nativamente


a utilizao de placeholders o texto em
campos de texto que surge enquanto o
utilizador no insere l dados atravs da
incluso do atributo placeholder=texto
temporrio.

3-May-16

CDM - RSM2 - 2015/16

170

85

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

Tambm a obrigatoriedade do preenchimento


de determinados itens passa a ser garantida
atravs da incluso do atributo required.
E passa a haver a possibilidade de desactivar o
completamento automtico, directamente na
pgina, para o formulrio inteiro ou apenas
para um dado item, atravs da incluso do
atributo autocomplete=on|off.

3-May-16

CDM - RSM2 - 2015/16

171

HTML5 Formulrios
Redes e Sistemas Multimdia II

Quanto a novos elementos h a destacar o


elemento datalist. Tem um comportamento
similar ao do select, permitindo, contudo, a
insero de elementos para alm daqueles
presentes na lista. Tem, contudo, de estar
associado a um elemento de input do tipo
text.
<input type=text name=transporte
id=transporte list=lista_transportes />
<datalist id=lista_transportes>
<option value=Automvel>
<option value=Barco>
<option value=Avio>
</datalist>
3-May-16

CDM - RSM2 - 2015/16

172

86

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

Os itens de input passam tambm a ter


novos tipos, reflectindo os contedos que so
mais comuns em formulrios actualmente.
Os tipos seguintes mantm o aspecto tpico
dos campos de texto, mas em dispositivos
com teclados virtuais devem poder alterar o
mesmo e.g., de teclado alfanumrico para
numrico:
E-mail: <input type=email [...] />
Endereo web: <input type=url [...] />
Telefone: <input type=tel [...] />
3-May-16

CDM - RSM2 - 2015/16

173

HTML5 Formulrios
Redes e Sistemas Multimdia II

Alguns destes novos tipos possuem validao


nativa, como o caso do email ou do url
(desde que sejam classificados como
obrigatrios).
Contudo, caso seja necessrio definir um
padro de validao especfico, usando, por
exemplo, os campos de texto, pode-se usar o
atributo pattern para esse efeito, em
conjunto com o title para a eventual
mensagem de erro.
<input type=text id=codigopostal
name=codigopostal pattern=[0-9]{4}\-[0-9]{3}
title=1234-567 required>
3-May-16

CDM - RSM2 - 2015/16

174

87

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

Passa a haver tipos de input para datas e


horas. Desses novos tipos, interessa destacar
os seguintes:
Data e hora: <input id=datahora
name=datahora type=datetime>

Data: <input id=data name=data


type=date>

Hora: <input id=hora name=hora


type=time>

3-May-16

CDM - RSM2 - 2015/16

175

HTML5 Formulrios
Redes e Sistemas Multimdia II

H tambm dois tipos para escolha de valores


num determinado intervalo (compreendido
entre um valor mnimo e um valor mximo).
Estes so:
Barra de deslize: <input id=range
name=range type=range min=1
max=5>

Caixa de seleco de valores (com setas): <input


id=number name=number type=number
min=1 max=5>
3-May-16

CDM - RSM2 - 2015/16

176

88

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

E ainda um selector de cores, no formato RBG:


<input id=cor name=cor
type=color>

Interessa referir, para terminar, o atributo


multiple, que permite a insero de
mltiplos valores em determinados campos,
como, por exemplo, email ou url, e que,
quando conjugado com o elemento file,
permite a seleco de vrios ficheiros.
3-May-16

CDM - RSM2 - 2015/16

177

HTML5 Formulrios
Redes e Sistemas Multimdia II

Para saber se o browser suporta algum dos


novos atributos ou tipos de input, de forma a
fornecer alternativas, podem ser teis as
funes seguintes:
Saber se um atributo, num dado elemento,
suportado:

function elementSupportsAttribute(element,
attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
}
else {
return false;
}
}
3-May-16

CDM - RSM2 - 2015/16

178

89

5/9/16

HTML5 Formulrios
Redes e Sistemas Multimdia II

Saber se um atributo do elemento type suportado:


function inputSupportsType(type) {
var input = document.createElement('input');
input.setAttribute('type', type);
if (input.type == 'type') {
return false;
}
else {
return true;
}
}

3-May-16

CDM - RSM2 - 2015/16

179

HTML5 Armazenamento
Redes e Sistemas Multimdia II

O HTML5 trouxe consigo uma alternativa mais


flexvel utilizao de cookies, permitindo o
armazenamento de um maior volume de
dados, de forma mais segura e tambm mais
rpida: os objectos de armazenamento local
(local storage).
Com o local storage, todas as pginas com a
mesma origem (domnio e protocolo) podem
partilhar os mesmos dados.
9-May-16

CDM - RSM2 - 2015/16

180

90

5/9/16

HTML5 Armazenamento
Redes e Sistemas Multimdia II

Os objectos de local storage dividem-se em


dois tipos de objectos distintos (ambos
associados ao objecto predefinido window):
localStorage, para armazenamento sem limite

de tempo;

sessionStorage, para armazenamento limitado

durao de uma sesso.

Qualquer uma das abordagens funcionam


com os j tradicionais pares atributo-valor
para guardar e ler dados.
9-May-16

CDM - RSM2 - 2015/16

181

HTML5 Armazenamento
Redes e Sistemas Multimdia II

Usando como exemplo o objecto


localStorage (sendo que o mesmo se aplica
ao sessionStorage), apresenta-se como
guardar, ler e apagar dados:
Guardar:

localStorage.setItem(utilizador) = xpto;
localStorage.utilizador = xpto;

Ler:

utilizador = localStorage.getItem(utilizador);
utilizador = localStorage.utilizador;

Apagar:
localStorage.removeItem(utilizador);
9-May-16

CDM - RSM2 - 2015/16

182

91

5/9/16

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Em termos semnticos (especificamente ao


nvel da descrio de dados), o HTML5 traz
tambm novidades, sendo destacadas
algumas de seguida.
Para alm dos elementos em (nfase) e
strong (carregado), passa a haver tambm o
elemento mark, que destaca com fundo
diferente os termos em questo.
<p>O <mark>HTML5</mark> traz inmeras
<mark>novidades</mark>.</p>
9-May-16

CDM - RSM2 - 2015/16

183

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

H um novo elemento para descrever com


maior preciso datas e horas, o time,
especialmente til para eventos e agendas.
<p>... <time datetime=2011-1021T13:30>Aula de Programao para a Web
II</time> ...</p>

H uma barra de progresso nativa


(progress), definindo-se o valor mnimo,
mximo e actual.
<p>J leu <progress min=0 max=100
value=75>75%</progress> dos seus emails.</p>
3-May-16

CDM - RSM2 - 2015/16

184

92

5/9/16

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

E tambm uma medida (meter) para outras


escalas de valores, como, por exemplo,
temperaturas, definindo-se valores como
valores mais baixos, mais altos, mnimos,
mximos, mdias e valores ptimos.
<p>Hoje est um dia <meter min=0
max=40 low=10 high=30
optimum=20
value=25>quente</meter> de
Primavera.</p>
3-May-16

CDM - RSM2 - 2015/16

185

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Quanto estrutura geral de uma pgina web,


o HTML5 traz consigo os seguintes novos
elementos (entre outros):
Seco (section);
Cabealho (header);
Rodap (footer);
Comentrio lateral (aside);
Navegao (nav);
Artigo (article).
3-May-16

CDM - RSM2 - 2015/16

186

93

5/9/16

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Em ltima instncia, estes novos elementos


acabam por no serem mais do que casos
especializados de divs (tendo mesmo um
comportamento idntico).
A grande distino ao nvel semntico, ou,
melhor dizendo, do contedo, de forma a
melhor identificar os constituintes de um
documento.

3-May-16

CDM - RSM2 - 2015/16

187

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Na prtica, estes novos elementos sero j


suportados implicitamente (desde que o
browser no rejeite elementos no
padronizados do HTML 4.01), no sentido em
que os aceita apesar se no conhecer o seu
significado.

3-May-16

CDM - RSM2 - 2015/16

188

94

5/9/16

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Caso no haja suporte explcito, ser


necessrio, pelo menos, atribuir a estes
elementos um comportamento de bloco (para
alm de outras propriedades CSS que venham
a ser necessrias):
section, article, header, footer,
nav, aside, hgroup {
display: block;
}

3-May-16

CDM - RSM2 - 2015/16

189

HTML5 Estruturao e Semntica


Redes e Sistemas Multimdia II

Caso o browser no suporte de todo os


elementos, ser necessrio cri-los (e, a partir
desse momento, aplica-se o descrito
anteriormente):
document.createElement('section');

3-May-16

CDM - RSM2 - 2015/16

190

95

5/9/16

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Virtualmente toda e qualquer animao


depende da alterao das propriedades do
objecto desenhado, seja a forma ou a posio.
Por exemplo, se no canvas se pretende dar a
iluso de um balo a encher, poderamos jogar
com o incremento do raio de um crculo que
representasse esse balo um shape tween.
Por outro lado, se se pretendesse que o balo
se movimentasse, a propriedade a alterar
seria a sua posio (x, y) um motion tween.
3-May-16

CDM - RSM2 - 2015/16

191

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Em qualquer dos dois casos, o aspecto chave


alterar as propriedades de uma forma
sequencial, de forma a criar a iluso de
alterao da forma ou movimento.
Se a animao estiver dependente do
utilizador, uma abordagem como a utilizao
de eventos para alterar as propriedades do
objecto e redesenhar o canvas.

3-May-16

CDM - RSM2 - 2015/16

192

96

5/9/16

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

No caso de animaes independentes (ou


concorrentes com aces do utilizador), uma
abordagem comum a utilizao da funo
setTimeout().
Esta funo costuma ser utilizada em blocos
de cdigo (outras funes) responsveis pelo
desenho do canvas, com uma (nica)
chamada novamente ao mesmo bloco, com
indicao o intervalo de tempo a aguardar (e
eventuais parmetros das funes).
3-May-16

CDM - RSM2 - 2015/16

193

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Segue-se um exemplo da deslocao


horizontal de uma caixa:
var x = 10;
function desenhaCanvas() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(x, 30, 50, 50);
context.fillRect(x + 10, 40, 30, 30);
x += 10;
if (x < 320) {
setTimeout(desenhaCanvas , 40);
}
}
3-May-16

CDM - RSM2 - 2015/16

194

97

5/9/16

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Uma alternativa funo setTimeout() a


funo setInterval().
A funo setInterval() difere da outra na
medida em que em vez de uma nica
chamada a uma funo, repete-a a intervalos
constantes.
Note-se que apesar de um comportamento algo
semelhante, as funes no so intermutveis,
havendo situaes em que uma prefervel
outra.
3-May-16

CDM - RSM2 - 2015/16

195

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

O exemplo anterior do movimento de uma caixa,


modificado para a funo setInterval(), ficaria
assim:
var x = 10;
function init() {
setInterval(desenhaCanvas, 40);
}
function desenhaCanvas() {
x += 10;
if (x < 320) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(x, 30, 50, 50);
context.fillRect(x + 10, 40, 30, 30);
}
}
3-May-16

CDM - RSM2 - 2015/16

196

98

5/9/16

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Existe ainda uma terceira alternativa que


entretanto se comea a generalizar, a funo
requestAnimationFrame(), que
especificamente direccionada a animaes.
A funo requestAnimationFrame() funciona
de forma prxima da setTimeout(), procurando
repetir as chamadas funo responsvel pelo
desenho de 60 vezes num segundo. Tem,
contudo, a vantagem de no ser rgida nesse
valor, adaptando-se a disponibilidade do browser
para o processamento das instrues.
3-May-16

CDM - RSM2 - 2015/16

197

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Novamente, o exemplo anterior do movimento


de uma caixa, modificado para a funo
requestAnimationFrame(), ficaria assim:
var x = 10;
function desenhaCanvas() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(x, 30, 50, 50);
context.fillRect(x + 10, 40, 30, 30);
x += 10;
if (x < 320) {
requestAnimationFrame(desenhaCanvas);
}
}
3-May-16

CDM - RSM2 - 2015/16

198

99

5/9/16

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Outro aspecto importante, em jogos e em


interaco, a deteco de colises entre
objectos por exemplo, entre um objecto
controlado pelo utilizador e outros existentes
no cenrio.
Tipicamente, a deteco de colises implica
conhecer a rea de um dos objectos e a rea
ou, pelo menos, um dos pontos do outro
objecto.
3-May-16

CDM - RSM2 - 2015/16

199

HTML5 + JS Animao & Interao


Redes e Sistemas Multimdia II

Por exemplo, no caso de um objecto


rectangular, definido por um par de
coordenadas, largura e altura, um mtodo
possvel para a deteco de colises com um
ponto poderia ser:
[]
this.colide = function (x, y) {
if ((x > this.x) && (x < this.x + this.largura) && (y >
this.y) && (y < this.y + this.altura)) {
return true;
} else {
return false;
}
}
[]

3-May-16

CDM - RSM2 - 2015/16

200

100