O documento descreve uma reprogramação de uma prova de especialização em tecnologias para aplicações web, incluindo as novas datas e disciplinas. Também fornece instruções introdutórias sobre o uso do software Adobe Photoshop para edição de imagens na web, cobrindo tópicos como a interface do usuário e formatos de arquivo de imagem comuns.

1. 2ª Prova Pós Web - INGRESSO: 08/08/2014 1ª Chamada - ESPECIALIZAÇÃO EM TECNOLOGIAS
PARA APLICAÇÕES WEB foi reagendada para:
Dia: 06/06/2015
Horario: 08:30 as 10:00 (Horario de Brasilia)
Disciplinas: FERRAMENTAS VISUAIS, PROGRAMAÇÃO EM PHP, PROGRAMAÇÃO EM FLEX,
PROGRAMAÇÃO EM HTML, PROGRAMAÇÃO EM HTML 5
WEB AULA 1
Unidade 1 – Ferramentas Visuais
ADOBE PHOTOSHOP CS5 ORIENTADO Á WEB
1) APRESENTAÇÃO DO PROGRAMA
Bem sabemos que a tecnologia estáaí e sempre à disposição
do homem e de seus interesses. Conhecer sobre novas tecnologias é ter a noção de
que poderemos estar sempre um passo adiante em relação a nossos próprios
conhecimentos, nos destacando assim da concorrência, sobretudo no mundo do
trabalho. A informática - mais especificamente – o design gráfico e o web design - é
um campo onde o conhecimento de novos processos e ferramentas é determinante.
E o Photoshop faz parte deste mundo, e você, ao conhecê-lo um pouquinho, se
surpreenderá com suas possibilidades.
O Photoshop é um programa que tem como
finalidade básica o tratamento de imagens digitais. Estas se formam através de uma
combinação de bits e bytes (zeros e uns sistematicamente agrupados) que o
computador lê, interpreta e atribui a esta a formação de um ponto e a este um valor
de cor e uma posição definida.

2. Em outras palavras, se pegarmos como exemplo uma
fotografia impressa (química fixa sobre papel) e seu processamento em um scanner
(digitalizador), veremos que este aparelho converte, através de uma leitura ótica, as
informações pictóricas da imagem impressa em dados. Estes dados são interpretados
pelo computador e seus valores geram pontos dispostos em um dispositivo de saída
(um monitor de vídeo, por exemplo), recompondo a imagem. Portanto ela ganhou
uma versão virtual, ou seja, extrapolou de uma origem física à computadorizada
através do processo de scanning.
O Photoshop justamente entra em processos onde exige-se algo para além do que a
imagem real trouxe estampada fisicamente. Muito útil em composições gráficas como
cartazes, capas de livros, agendas, calendários, enfim, numa infinidade de aplicações
em que faz-se necessária a intervenção ou supressão de elementos visuais ou ainda
correções na imagem a fim de se enriquecer uma mensagem. Veja uma breve
demonstração em:
< https://www.youtube.com/watch?v=iWxsXqHsROE >.
Vale lembrar que neste módulo trataremos de alguns comandos tidos como
fundamentais do Photoshop para seu trabalho com imagens na web. Porém, como
todo programa, você também poderá procurar maior aprofundamento sobre ele em
outras fontes, necessitando dedicar muitas horas de incessantes estudos, o que será
muito divertido, garanto. Além de se conhecer bem os comandos do Photoshop, faz-
se importante procurar obter também conhecimentos periféricos relacionados às
imagens e à luz, como física, ótica, cromática, teoria das cores, composição, técnicas
de artes plásticas e fotografia, entre outros, para que seus trabalhos ganhem a
qualidade e os diferencias que você procura. Vamos começar?
a) COMENTANDO A INTERFACE
Como a maioria dos softwares de edição, o Adobe Photoshop possui uma interface
que aproveita o cognitivo dos usuários, ou seja, distribui itens de menu e sua caixa
de ferramentas como que seguindo um certo padrão já conhecido, ficando assim mais
fácil de se encontrar os comandos que se queira aplicar pois você já vem sendo
“historicamente treinado” para isto. E em relação às versões anteriores à CS5 a sua
interface aparentemente não apresentou mudanças estruturais significativas, e
lembramos que esta versão já trabalha (assim como desde a versão CS3) otimizações
e integrações com outros softwares da própria Adobe, como o Illustrator, o Fireworks
e o InDesign, por exemplo.

3. À esquerda, encontra-se o painel Ferramentas (ou caixa de ferramentas). Estas são
utilizadas para operar a imagens. Estão dispostas em grupos e subgrupos (para vê-
los basta clicar e segurar um pouquinho o mouse). Na parte superior temos a Barra
de Aplicativos que contém os menus de opções de áreas de trabalho e outros
aplicativos.

4. Logo abaixo desta encontra-se a Barra de Opções, cuja
função é especificaras ações das ferramentas acionadas. Á direita encontra-se a Área
de Painéis, onde serão ajustadas todas as funções complementares e informativas
da imagem tratada. Também trará controles importantes como o Histórico de ações,
os Layers (camadas), entre outros.
A área central é destinada ao trabalho em si, ou seja, é ali que sua imagem será
exibida e editada. Alguns técnicos a chamam de Área de trabalho ou ainda de Palco.
Percebe-se que a ergonomia (modo com que os elementos da interface estão
compostos e distribuídos) ajuda bastante, pois o espaço para se trabalhar com as
imagens é bem amplo. E se você tiver um monitor de vídeo de grande formato,
melhor ainda. Na parte inferior temos a Barra de Status que informa dados genéricos
como o nome do nosso arquivo a quantidade de zoom (ampliação da visualização da
imagem) e sua taxa de resolução (tamanho da imagem em pixels).
Conheça um pouco mais do visual da interface em:
< https://www.youtube.com/watch?v=9M-5JEqfhFc >.
IMAGENS DE BITMAP – TIPOS MAIS UTILIZADOS NA WEB
Imagens raster (ou bitmap - que significa mapa de bits em inglês) são imagens
formadas por pixels, ou seja, por pontos quadráticos com qualidades como tamanho
e cores e que se encontram organizados em um grande diagrama. Elas diferem das
imagens em vetores. As imagens vetoriais não são compostas por pixels e sim por
infinitos pontos organizados em coordenadas e frutos de cálculos matemáticos. A
grande vantagem das imagens vetoriais é que pode ser ampliadas e reduzidas
praticamente sem perdas de qualidade gráfica, o que não ocorre com as imagens
raster, pois são compostas por um número definido de pixels por área (geralmente
polegadas).

5. Um
bitmap pode ser monocromático, em escala de cinza ou colorido. Na web, os pixels
possuem por padrão o sistema de cores RGB (Red, Green, Blue) conhecidas como
cores-luz e que, combinadas, formam as 16 milhões de cores possíveis para
representar o mundo real. Quando a imagem possuir além das três cores matrizes
uma transparência ele será RGBA (sendo A o nível de alfa de cada pixel). Para mídias
impressas (livros, cartazes, revistas, por exemplo) utiliza-se o modo de cor CMYK
(Ciano, Magenta, Amarelo e Preto), pois são as quatro cores primárias para
pigmentos em impressões (na prática as tintas para offset podem exemplificá-las).
Um pouco desta teoria você pode conhecer melhor em:
<http://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.html>
A maioria das imagens requer um número muito grande de pixels para ser
representada completa e integralmente, e isso implica diretamente no tamanho de
seus arquivos em unidades de memória (bits, bytes, kilobytes, etc.). Quando se fala
em um grande número de imagens armazenadas em discos magnéticos ou
transmitidas via rede, surge a necessidade de compactação destas para reduzir
espaço em memória e aumentar a velocidade de transmissão entre máquinas. Esta
compactação pode ser com ou sem perdas.
Os principais formatos adotados com possibilidade de compactação e exibição de
imagens na internet são: GIF (máximo 256 cores, indicado para desenhos como
ícones, carttons, entre outros), o JPEG (ou JPGs, do P&B até 16 milhões de cores)
prioritariamente indicado para fotografias e com alto poder de compressão e o mais
recente, o PNG (também até 16 milhões de cores) suportando também
transparências e excelentes para cores uniformes. Os JPEGs podem se apresentar
também no sistema CMYK, mas este formato de 24 milhões de cores é recomendável
apenas para impressões, como dito anteriormente. O Photoshop é totalmente
compatível com estes tipos de arquivos e consegue trabalhar não apenas com estes,
mas com outros formatos como o BMP (bitmap da Microsoft), o TIFF (alta resolução
para impressões), o PDF (formato para distribuição), os EPSs (encapsulados), entre
tantos outros.
Veja a origem destes arquivos em detalhes em:
<http://www.infowester.com/imagens.php>.

6. 2) EDIÇÃO DE IMAGEM – FUNÇÕES INICIAIS
Editar imagem significa trabalhar uma imagem, ou seja, alterar suas características
visuais procurando os resultados desejados para ela. Pode ser um desenho à mão
livre posteriormente digitalizado, uma fotografia digital, um gráfico de natureza
vetorial, enfim, qualquer tipo de imagem é passível de edição e o Photoshop é o
software mais indicado, sobretudo para imagens de natureza raster (bitmaps). Como
dito nos permite concluir que, ao operarmos com o Photoshop, trabalharemos
prioritariamente com pixels.
ABRIR ARQUIVO
Para trabalharmos com o Photoshop vamos partir do princípio de que você tenha uma
versão do CS5 em português. Mas como muitos termos são genéricos do inglês,
vamos misturá-los um pouquinho para você já ir adquirindo o jargão do software.
Inicialmente, abra o programa clicando no ícone respectivo dentro do meu iniciar de
seu sistema operacional (Windows, MacOS, etc.). Aparecerá de pronto a tela de
Splash indicando que o programa está sendo carregado. Ao término do carregamento
você verá a interface do programa como apresentada no item 1/a desta web-aula.
No menu (superior) localize Abrir. Uma caixa de diálogo aparecerá e você poderá
escolher, navegando em suas pastas qual imagem gostaria de abrir. Lembrando que
ele está habilitado abrir inúmeras extensões (tipos) de imagens, como por exemplo,
jpegs, bmps, gifs, pngs e claro, os psds, que são os arquivos de edição nativos do
Photoshop. Escolha e marque um arquivo de imagem e, em seguida, clique em abrir
(open). Lá estará a imagem ao centro do programa, pronta para ser editada.
A ferramenta inicial mais utilizada é a de Seleção. Com ela você poderá editaras
posições de linhas-guias, arrastar imagens, marcar layers, entre outras funções. É a
primeira da Barra de Ferramentas.

7. O LAYER (CAMADA)
Assim como uma
revista possui várias páginas sobrepostas, o Photoshop também possui um sistema
muito interessante e funcional para lidar com as imagens composto por layers
(camadas). Dominar os layers é assegurar-se de que você fará muita coisa no
Photoshop com absoluto sucesso. Você pode criar, apagar, combinar e até apagar
layers. Por enquanto, basta dizer que toda a ação que você aplicar incidirá apenas
no layer trabalhado, ou seja, na camada que você marcar como ativa no painel
Camadas. É possível, também esconder ou visualizar um layer. clicando no ícone
“olho” neste painel. Mas, se a sua imagem está colocada no Plano de Fundo
(background) e não em um layer específico, não lhe será possível, por exemplo,
contar com seu fundo em transparência.

8. Para criar um novo layer basta clicar com o
mouse em um ícone que se assemelha a uma folha de papel com canto dobrado na
base do painel Camadas. Caso queira, você também pode duplicar o plano de fundo
que aparecerá como novo layer, clicando como lado direito do mouse sobre ele no
painel e clicando em duplicar camada nas opções que surgem. Também é possível
selecionar toda a imagem – menu Seleção > Tudo, ir em menu Editar > Copiar (ou
simplesmente teclar Control C) e, em seguida clicar em Editar > Colar (ou teclar
Control V). Pronto! Uma nova camada aparecerá.
Você poderá criar também um novo layer através de uma seleção. Daí somente a
área selecionada será transportada como um novo layer. Para isso faça a seleção,
clique com o lado direito do mouse sobre ela e escola a opção Camada por cópia (ou,
em inglês, Layer via copy). Também é possível alterar o nível de transparência de
layers criados. Falaremos sobre seleções mais adiante.

9. CANVAS (TELA DE PINTURA) E TAMANHO DA IMAGEM
É muito comum as pessoas fazerem certa confusão a respeito de “tamanho de
imagem” x “tamanho da tela de pintura (canvas)”. Toda imagem pode ser mensurada
em área, tendo em sua largura e altura tanto uma quantidade limitada de pixels
como suas dimensões em milímetros. Estas dimensões podem ser alteradas no Menu
> Imagem, pela janela “Tamanho da tela de pintura”, onde ajustamos o tamanho da
imagem tendo como valores altura e largura. Uma redução do tamanho do canvas
implica diretamente em uma mutilação (corte) da imagem (esta será cortada em
função das novas dimensões, porém preservando-se ainda a sua taxa de pixels por
polegada - DPIs) como a original.

11. Diferentemente é o comando “tamanho da imagem” onde teremos também uma
diminuição das dimensões da imagem, porém sem mutilações e com possibilidades
de alteração na sua taxa de pixels por polegada (DPIs). É no “tamanho da imagem”
que podemos reduzir ou ampliar as dimensões em milímetros das imagens, bem
como sua taxa de pixels por polegadas. Lembrando que aumentar o tamanho físico
das imagens de bitmaps implica em se reduzir a taxa de pixels por polegada, pois
aumentaremos o tamanho destes.Como resultado teremos imagens serrilhadas e de
difícil aplicação, sobretudo nos meios impressos. Ainda no Canvas podemos ter a
opção de rotacioná-lo ou espelhá-lo vertical ou horizontalmente e estas opções
valerão para todas as camadas e imagens nele contidas.
TAMANHO DA IMAGEM PARA WEB

12. Este tipo de ajuste
interfere tanto no tamanho da imagem quanto no tamanho de seu canvas (área da
imagem) simultaneamente. Portanto é um comando importante porque além de
alterar o tamanho físico da imagem permite-nos também propor uma taxa de pixels
por polegadas (DPIs) para aplicações em websites. Basta clicar no menu Imagem >
Tamanho da imagem e na caixa de diálogo especificaras novas dimensões desejadas.
Lembrando que é possível reduzir a taxa de pixels por polegada atual da imagem
trabalhada e isso é o recomendável para arquivos de internet (até 96 DPIs no
máximo), mas não recomenda-se aumentar esta taxa a partir de um arquivo
pequeno, ou seja se temos um arquivo com 72 DPIs de internet e precisamos de um
com 300 DPIs para impressão, o Photoshop até consegue converter, mas a qualidade
gráfica da imagem continuará a de 72 DPIs. Tome cuidado com isso, principalmente
na hora de usar imagens de internet em impressos, o que não é recomendado, pois
como dito, elas não tem taxa de pixels suficiente para este fim.
Este vídeo explica com mais detalhes e passo a passo a questão de tamanhos de
imagem e telas de pintura. Confira:
< https://www.youtube.com/watch?v=6LyNVCVn7kg >.
RÉGUAS E LINHAS GUIA

13. Com sua imagem
aberta, perceba que, por convenção, existe às bordas da mesma uma estrutura
escalonada. Trata-se de réguas, cuja função é auxiliar em operações como
alinhamentos, seleções e recortes mais precisos de elementos. Para exibir a régua
vá em Visualizar e habilite Réguas. Para se obter as linhas guias basta posicionar o
mouse sobre a régua (horizontal ou vertical) e com o mouse pressionado arrastar a
mesma onde se queira. Para remover a linha, basta arrastá-la com a ferramenta
Seleção até à régua novamente. Você pode apenas ocultar as linhas desabilitando
em Visualizar > Extras (ou control H).
Uma explicação bem bacana sobre linhas guias você vê em:
< https://www.youtube.com/watch?v=AeUTD-cyA4U >.
HISTORY (HISTÓRICO)

14. O recurso
Histórico é muito importante, pois permite que você experimente ações e comandos
com toda tranquilidade e caso necessário for o refaça de acordo com o ponto que
achar conveniente. Ele atua em praticamente todos os seus movimentos no programa
em relação à imagem trabalhada. Assim como a grande maioria dos programas
conhecidos permite que se desfaça as operações não desejadas, o Photoshop
também o faz. Todos os passos que você der podem ser desfeitos acoinando-se
Control Z. Porém este comando, no Photoshop reverte apenas o último passo. Para
retroceder mais passos, acione Control Alt Z. Mas o Photoshop tem um painel
específico para você monitorar seus passos realizados, um a um e você pode
regressar passos quantos quiser. Por padrão ele registra os últimos vinte passos, mas
você pode alterar esta quantidade de “memorização” clicando em Editar >
Preferências. Lá você encontrará a opção níveis de histórico. Altere de acordo com
sua necessidade.
AJUSTES BÁSICOS
Neste momento vamos trabalhar com o que chamo de ajustes básicos. São retoques
simples que não implicam em intervenções mais complexas nas imagens mas que

15. sempre são necessários quando queremos melhorar a qualidade geral de uma
imagem. Estas opções você as encontrará sempre no Menu > Imagens > Ajustes.
Além das funções que cito aqui, existem várias outras que você pode experimentar
livremente, como a de ajuste de cor seletiva, a de curva de tons, a de ajustes por
canais de cor, etc. As funções que especifico, a seguir, são como que essenciais para
o seu trabalho com imagens para web.
BRILHO E CONTRASTE
No menu
Imagens > Ajustes procure a opção Brilho e Contraste (1a
. opção). Comece a deslizar
os controles da caixa de diálogo que aparece de maneira a perceber, já na imagem
as variações de claro a escuro (brilho) de meio tons à saturação luminosa (contraste).
Se você estiver em um layer, ou em uma seleção, assim como todos os demais
comandos, este também vai atuar somente neles. Clique ok para concluir a operação.
ESCALAR, ESPELHAR, GIRAR, DISTORCER E ADICIONAR PERSPECTIVA

16. Estas funções
estão disponíveis no menu Editar. Elas atuam em nível de camada e seleção e não
em imagens ainda condição de Plano de Fundo. A opção Redimensionar nos permite
diminuir ou aumentar uma imagem de acordo com sua preferência, seja
manualmente (pelos nós da imagem via mouse) ou digitando-se valores de
porcentagem ou dimensões na Barra de Opções. Se preferir o ajuste manual, não se
esqueça de manter a tecla Shift apertada ao arrastar os pontos com o mouse para
não haver distorções na imagem (esticada ou achatada). Tecle Enter para concluir.
O mesmo princípio vale para as demais opções: girar, inclinar, distorcer, etc. A
imagem será editada livremente com o auxílio mouse ou especificando-se parâmetros
para a imagem selecionada.
CORTE DEMARCADO

17. Na Barra de ferramentas você encontrará um ícone semelhante a um pequeno
quadrado com uma diagonal, logo abaixo das setas de seleção. Também conhecido
como “crop” este comando, ao arrastar-se o mouse pela imagem permite com que
esta, após demarcada a área e devidamente ajustada, seja aparada (cortada),
mantendo-se apenas um trecho da mesma e descartando-se o restante.
Procedimento semelhante pode ser feito, por exemplo, especificando-se um novo
tamanho para o canvas.
CARIMBO
Uma das ferramentas mais curiosas e interessantes do Photoshop. Localizada na
Barra de ferramentas e identificada com um ícone representando um carimbo, ela é
capaz de copiar trechos da imagem para outros campos da mesma. Basta você clicar
na ferramenta Carimbo, escolher a forma e o tamanho de seu raio de ação (painel
de pincéis na Barra de Opções) segurar a tecla Alt e com o mouse clicar na área
desejada que se queira duplicar (matriz). Em seguida, solte a tecla alt e com o mouse
vá clicando e/ou arrastando o cursor por sobre a área que deseja clonar a imagem.
Você verá que a parte da imagem clicada com Alt será duplicada fielmente no campo
que você está passando e/ou clicando o carimbo. Experimente! Com um pouco de
treino e paciência você consegue!
Veja um exemplo em:
< https://www.youtube.com/watch?v=9v0pt6F6oZM >.

18. ZOOM
Esta ferramenta auxilia na visualização e merece algumas observações. Com as
teclas de atalho Control (+) e Control (-) você aproxima e afasta a imagem de
maneira a se trabalhar de forma mais geral ou em detalhes na mesma. Mas isto não
implicará no seu tamanho enquanto imagem a ser visualizada ou impressa após ser
salva. O Zoom não altera o tamanho da imagem, é apenas visualização. Outra dica
é procurar trabalhar os níveis de visualização nos múltiplos 6.25%, 12.5%, 25%,
50% e 100% pois estas taxas permitem com que você visualize sua imagem sem
distorções nos pixels (serrilhados). Esta ferramenta caracteriza-se por uma pequena
lupa (ícone) localizada na barra de ferramentas.
DESFOQUES
Falar de desfoques é sempre muito interessante, pois bem aplicados podem trazer
um requinte bem interessante para as imagens. No menu Filtro, escolha Desfoque.
Você vai encontrar várias opções no sub menu como desfocagem gaussiana
(desfoque geral), desfoque radial ou de movimento, cada um deles trazendo uma
característica distinta e inúmeras possibilidades de ajustes. Podem ser aplicados
tanto em imagens inteiras, seleções ou textos.

19. 3) CORES: MODOS E CANAIS

20. De maneira bem sucinta,
em relação à teoria das cores aplicada na Computação Gráfica podemos classificá-
las em grupos, de acordo com suas características visíveis e internas. Existem as
imagens em tom absoluto (branco e preto), os tons de cinza (monocromática) as
RGB (cores luz) e as CMYK que são cores de impressão. Como previamente explicado,
as cores luz (RGB) possuem 03 canais de cores e as cores pigmento (CMYK) possuem
04 canais. Para internet não se usa o padrão CMYK assim como que para impressão
não se usa o padrão RGB. São dois mundos distintos. Mas é possível converter CMYK
em RGB e vice-versa. Basta ir ao menu Imagem > Modo e fazer sua escolha.
Lembrando que nestas conversões costuma haver alterações nas cores (leves ou
severas). Preste atenção se estas são preponderantes para seu projeto ou não. Se
ocorrerem distorções importantes nas cores, tente minimizartais efeitos em Imagens
> Ajustes compensando as perdas com os recursos ali disponíveis. Para monitorar os
canais de cores de sua imagem, vá em Janelas > Canais. É possível visualizá-los
individualmente e até excluir canais, mas cuidado isto não e um mero ajuste e sim
alteração no estrutural da imagem.
Lidando com canais, máscaras e recortes veja:
< https://www.youtube.com/watch?v=9Pki_TecvEk&feature=fvwrel >.
4) SELEÇÃO
Uma seleção nada mais é do que uma marcação de área que o Photoshop oferece de
modo a se tratar especificamente um trecho da sua imagem. Esta seleção pode ter
sua forma pré-definida (demarcada por retângulos e círculos) ou aleatória
(ferramentas como laço poligonal). Se você quisertrabalhar pontualmente um trecho
da sua imagem, deve selecioná-lo.
Recomenda-se após a seleção copiar e colar ou seja, criar um novo layer só com o
trecho selecionado fim de se trabalhar com ele de maneira mais particular. A seleção
pode ser utilizada para se retirar o fundo, ou seja, contorna-se a imagem com a

21. ferramenta laço poligonal e, em seguida copia-se e cola-se de modo que um novo
layer apareça. O layer primitivo (ou ainda o background) poderá ser descartado. O
resultado será um Layer com um trecho da imagem e destituído do restante (que
agora se tornou transparente).
A seleção também pode escolher o trecho de uma imagem a fim de apagá-lo. Basta
gerar a seleção como preferir e apertar a tecla Delete ou (ainda usar a ferramenta
borracha descrita mais adiante) dentro da mesma. Lembramos que se fizer isso no
plano de fundo (background) o mesmo não se tornará transparente e sim obedecerá
a cor que está indicada em um dos dois quadradinhos sobrepostos logo abaixo da
barra de ferramentas (o inferior). Como já explicado o quadradinho superior indica
as cores que o balde e os pincéis portarão (pintura de figuras) e o sobreposto a cor
do fundo.
CRIANDO ÁREAS COLORIDAS A PARTIR DAS SELEÇÕES
Você também pode
criar áreas de tons contínuos (chapados) a partir de seleções. Basta você criar a área
de seleção (via formas geométricas ou pela ferramenta Laço poligonal) disponíveis

22. na Caixa de ferramentas e com a ferramenta Lata de tinta ir preenchendo estas áreas
marcadas. Procure fazer isso em um novo layer, pois fica mais fácil editá-lo.
FERRAMENTA MAGIC WAND (VARINHA MÁGICA)
Tão importante quanto esta ferramenta é saber
como e quando utilizá-la. A varinha mágica (magic wand) é uma maneira rápida e
eficiente de selecionar áreas de cores em uma imagem (seu ícone acionador está na
barra de ferramentas). Se você tiver uma imagem que contenha uma informação
colorida em um fundo branco, por exemplo, e deseja extrair este fundo, comece
clicando com a varinha mágica nesta área branca.
Você vai notar que uma seleção marcou-a. Mas o raciocínio é este: marcamos a
minha não-figura (fundo branco) mas eu quero apenas a figura (não-branco). O que
temos a fazer é ir em: Menu > Selecionar e clicar em Inverter (ou teclar Shift +
Control + i). Pronto! Tudo o que era não-selecionado agora é selecionado. Basta
agora você teclar Control C (ou Menu > Editar > Copiar) e Control V (ou Menu >
Editar > Colar). A figura selecionada foi sem o fundo branco para um novo layer.
Caso queira, apague o layer original para perceber que o fundo não mais existe.
Veja um exemplo de sua aplicação em:
< https://www.youtube.com/watch?v=9v0pt6F6oZM >.
Você pode calibrar a
intensidade da força da varinha mágica na Barra de Opções em Tolerância. Porém,
com muita tolerância: ela corre o risco de invadir áreas que você não queira

23. selecionar. Pouca tolerância: se tiver áreas de tonalidades muito próximas, elas não
vão ser selecionadas. Outro detalhe: cuidado, pois este tipo de seleção em recortes
costuma propiciar, principalmente em imagens de baixa resolução um serrilhado
indesejado nas extremidades da imagem copiada em um novo layer. Isso pode ser
atenuado dando à seleção (logo antes do Copiar e Colar) um tratamento de difusão
(Feather) de pouca intensidade. Está em Selecionar > Modificar > Difusão ou
digitando o atalho Control Alt D. Mas pondere, veja qual o melhor meio de se
selecionar um trecho de uma imagem: laço poligonal, figuras geométricas ou curvas
em seleção, como veremos melhor mais adiante. Em matéria de seleção rápida, nem
tudo se resolve com a varinha mágica.
6) TEXTOS
O Photoshop possui um interessante editor de texto, porém não podemos nos
esquecer de que ele não é necessariamente um programa específico para
diagramação de textos e sim um poderoso editor de imagens. Clicando na letra T da
barra de ferramentas, o cursor de seu mouse automaticamente mudará de forma
para que você possa clicar na imagem e, a partir deste clique começar a digitar.
Também permite, ao arrastá-lo, abrir uma caixa de texto para que você possa inserir
grandes massas de textos em parágrafos. Selecionando o texto digitado (arrastando
o mouse sobre ele como você faz no MS Word, por exemplo) é possível escolher e
alterar a sua cor, o tipo de fonte (letra), especificar alinhamentos, entrelinhas, etc.;
tudo editável na Barra de opções.
7) ACTIONS
Este recurso é muito útil para quando você tiver que executar as mesmas ações (por
exemplo, alterar o tamanho da imagem, ou descolori-la, etc.) em diferentes arquivos.
Você não precisa fazer tudo repetitivamente um por um. Supondo que você pretenda
aplicar em duzentas imagens cinco procedimentos comuns. E fazer isso uma a uma,
fica bastante complicado, não é? Então, pensando nisso o Photoshop criou o comando
Actions, que tem a capacidade de gravar as suas ações e depois, apenas um clique,
aplicá-las instantaneamente na sua sequência de imagens. Vamos ver?
Abra todas as imagens que você deseja tratar com os mesmo efeitos. Agora, localize
o painel Ações no menu Janelas. Se houver alguma pasta lá, apague-as. Na sua parte
inferior você verá o ícone par criar uma nova ação. Clique-o. Ao abrir uma janela dê
o nome para esta ação e clique em Gravar. Volte ao painel Ações, lá terá uma bolinha
vermelha ativa (tipo REC de gravadores). Escolha uma imagem, ela será a primeira
e servirá de referencial para as demais. Agora comece a trabalhar a imagem como
preferir: altere sua cor, recorte com Crop, espelhe, etc. Neste momento o Photoshop
já começou a gravar seus passos, e você pode acompanhá-los no painel Actions.
Comandos como Salvar e Fechar também podem ser gravados. Terminados os
procedimentos na primeira imagem, clique no quadradinho (stop) na parte inferior
do painel Ações para cessar a gravação. Para aplicar nas demais basta apenas ir
clicando no botão triangular PLAY que se encontra também na parte inferior do painel
Actions e observar que a cada clique, as suas imagens vão sendo submetidas às
ações gravadas e, se você gravou Arquivo > Fechar elas vão também se fechando.
Interessante, não é?
Mas veja na prática em:
.

24. 8) PRINCIPAIS EFEITOS
O Photoshop possui uma infinidade de efeitos que podem ser aplicados isoladamente
ou combinados em suas imagens. Para especificá-los todos seriam necessárias
muitas horas de extensa dedicação e comentários explicativos. Porém, como
sugestão para o seu cotidiano como webdesigners, foram selecionados alguns efeitos
considerados imprescindíveis e que, de fato podem trazer bons diferenciais aos seus
trabalhos.
FILTROS
No menu Filtro encontramos uma série de possibilidade que você poderá explorar e
que são bem interessantes. Podemos dividi-las em grupos de acordo com as
características de seus efeitos.
ACABAMENTO
Estes efeitos propiciam imitar situações de spots de luz (como os de estúdios
fotográficos). Também nos permite criar reflexos de flash apara acentuar pontos
brilhantes em nossa imagem, como se fosse um estouro de luz de flash fotográfico
na mesma.

25. CAMADAS
Em Camada > Estilo de camada encontram-se efeitos bastante comuns por aí em
muitos materiais impressos ou digitais que conhecemos. Porém recomenda-se serem
usados com cautela e bom senso para não tornar seu trabalho visualmente “poluído”.
A aplicação destes efeitos somente é perceptível quando a imagem que os receberá
estiverem layer com fundo transparente e menor que o seu próprio Canvas, pois são
efeitos que trabalham, sobretudo nas bordas das imagens. Se você tiver uma foto,
por exemplo, não perceberá estes efeitos se suas 04 bordas estiverem coincidentes
com os limites do canvas. O ideal seria selecioná-la toda, copiar e colar a fim de se
criar um novo layer (camada), com o comando do menu: Editar > Escala reduzi-la
um pouquinho com o Shift apertado para não distorcer suas proporções e assim, no
menu Camada > Efeitos de Camadas escolher e aplicar o desejado.
Damos como sugestão experimentaros três mais trabalhados: Drop shadow (sombra
projetada), outer glow (brilho externo) e Bevel and emboss (chanfro e entalhe). A
sombra projetada, como o próprio nome diz cria uma sombra por detrás da imagem
e sua intensidade e característica pode ser controlada pelo painel referente. O efeito
é como se a imagem estivesse levemente elevada e projetando uma sombra sobre o
que está no layer abaixo. O brilho externo, por sua vez, pode ser trabalhado como
se fosse um brilho uniforme e luminoso ao redor da imagem. Dá-nos a impressão de
que o objeto possui uma aura, um esfumaçado luminoso em seu contorno. Ambos os
efeitos de sombra podem ser trabalhados em seus valores de cores. Vai do efeito que
você queira explorar. Os efeitos seguintes (chanfro / entalhe e relevo) simulam alto
e baixo relevo nas bordas das imagens e são muito interessantes, principalmente

26. para se criar botões para websites. Eles rebaixam ou elevam as bordas da imagem e
trabalham sombra e luz nas mesmas a fim de se ter a sensação de um efeito
tridimensional.
9) SMART OBJECT E CURVAS VETORIAIS
O Photoshop oferece a possibilidade de se trabalhar também com vetores, além dos
bitmaps. Em outras palavras podemos fazer e tratar desenhos com curvas vetoriais
no mesmo arquivo em que estamos editando, por exemplo, fotografias (rasters). É
possível trabalharem camadas, objetos importados do illustrator, por exemplo, como
desenhos de marcas, grafismos e ilustrações diversas. Isso é uma possibilidade
extremamente útil porque bem sabemos que a qualidade das imagens vetoriais é
infinitamente maior do que as de bitmap, pois se baseiam em cálculos matemáticos
que podem ser reorganizados livremente. Na prática, significa que podemos
aumentar ou diminuir livremente o tamanho dos desenhos vetoriais (que no
programa necessitam estarem layers separados) sem que sua qualidade gráfica seja
alterada.

27. Porém, em relação às imagens de bitmap (raster) observamos que se a diminuirmos
suas dimensões no Photoshop, ela pode sofrer um leve desfoque (suavização de
serrilhado) que pode interferir na sua apresentação visual. E uma vez diminuído, não
podemos mais aumentar porque o inverso é mais crítico ainda: ao redimensionarmos
para aumentar o tamanho de uma imagem (vide Editar > Escala), o objeto
selecionado, que é composto por pixels, terá alterada sua taxa de pixels por polegada
em função deste aumento e se aparentará totalmente distorcida (serrilhada) com
seus pixels aumentados e evidenciados. Como resultado teremos imagens pixeladas
e de péssima qualidade gráfica.

28. E também não adiantará tentarmos diminuí-la novamente no intento de "consertar",
pois a mesma já se converteu em uma imagem com uma nova taxa de pixel. A
sugestão então é, ao lidar com imagens raster (bitmap), procurar trabalhar com o
tamanho exato das mesmas, ou se for reduzir, que esta redução não seja tão
acentuada. E aumentar imagens dentro dos layers, evite, pois pode serrilhar
(estourar pixels)!
Retomando nosso raciocínio, para importar uma imagem vetorial do Illustrator para
o Photoshop proceda assim: No menu Arquivo, clique em Abrir. Na sua Caixa de
diálogos procure um arquivo do Illustratorque contenha a imagem que deseja trazer
para o Photoshop. Clique em abrir e imediatamente um quadro de importar PDF
aparecerá (é desta forma que ocorre a conversão / migração).
Dimensione a imagem para o tamanho desejado (em área e em pixels), lembrando
que uma imagem de boa qualidade para impressão é gerada com 300 DPIs de
resolução e dimensionada no tamanho ideal para sua aplicação. Por exemplo, se
tivermos uma imagem para uma capa de CD criada no Illustrator, devemos abri-la
no Photoshop como descrito, colocando como valores 300 DPIs e tamanho de área
aproximadamente 110 x 110 mm (11 x 11 cm) que é o tamanho médio de um encarte
de CD. E claro: escolhamos o modo de cor CMYK por se tratar de imagem a ser
impressa. Para arquivos de internet o raciocínio é o mesmo, porém trabalhe com
taxas de bitmap de no máximo 96 DPIs de resolução (para que seus arquivos não
fiquem muito pesados) o, modo de cor será RGB e suas dimensões tratadas em pixels

29. e não em milímetros, de acordo com a aplicação destinada. Depois destas
configurações, basta clicar em ok e seu vetor já estará no Photoshop.
Agora, resta apenas você clicar com o lado direito do mouse no layer (painel camada)
referente a ela e selecionar a opção “Converter em objeto inteligente”. Deste modo,
esta imagem poderá ser redimensionada livremente sem problemas de “estourar
pixels”, pois se tratará de uma referência vetorial.
Veja um exemplo em:
< https://www.youtube.com/watch?v=PjZF0KpSGJs >.
Outro recurso muito útil do Photoshop é o de se poder desenhar com curvas. Para
tanto utilize a ferramenta “Caneta”, que se encontra na sua Barra de ferramentas, à
esquerda da tela. Com ela você pode desenhar livremente formas como se fosse uma
ferramenta de ilustração vetorial. Para desenhar curvas basta utilizar a ferramenta
caneta, aplicando-a no arquivo e, através da ferramenta Seleção direta, ir inserindo
nós (pontos de ancoragem) e mantendo o mouse pressionado ir arrastando-os e
modelando-os até atingir a forma ideal. Utilize a tecla Alt do teclado para suavizá-
las.
Uma utilização muito comum para estie tipo de trabalho é em recortes pela
possibilidade de convertê-la em seleção. Você pode ir desenhando curvas em um
layer acima da imagem que se queira extrair do fundo. Contorne toda a imagem,
faça os ajustes nos nós como preferir e depois da imagem totalmente contornada,
clique com o lado direito do mouse na curva e clique na opção Criar seleção. Você
perceberá o que era curva se transformou em seleção. O que você tem a fazer agora
é deletar este layer (a seleção ficará flutuante), copiar e colar para ver sua imagem
duplicada e sem o fundo. A imagem selecionada foi para um novo layer. Delete o
layer de baixo (o da imagem original) para você ver que esta imagem estará
perfeitamente recortada (sem fundo). Este tipo de trabalho dará um refinamento
bem melhor ao recorte do que se você utilizar, por exemplo, a ferramenta varinha
mágica ou o laço poligonal.
Confira outras informações em:
< http://www.tecmundo.com.br/imagem/2554-photoshop-domine-a-pen-tool-e-
faca-curvas-elaboradas-.htm > ou
< https://www.youtube.com/watch?v=yUDBFoQ8EI4 >.
10) FILTROS DIVERSOS
No Menu > Filtro, poderão ser encontrados uma infinidade de efeitos aplicáveis em
seus trabalhos. São efeitos das mais variadas naturezas. Efeitos que imitam
pinceladas artísticas, lápis de cor, texturizadores, simuladores de materiais e
volumes, etc. Também é possível distorcer as imagens criando efeitos de lentes e
espelhos muito interessantes. Convém você abrir uma imagem no Photoshop (de

30. preferência uma foto da internet por ser mais leve) e ir experimentando livremente
estes efeitos a fim de se acostumar com eles. São efeitos que, se aplicados com bom
senso e imaginação, podem gerar trabalhos incríveis e diferenciados.
11) SALVAR
ARQUIVOS DE IMAGEM
Ao terminar seu trabalho, você pode salvá-lo em seu computador no formato de
imagem que desejar, a partir das opções que o Photoshop lhe propor. Lembrando
que o formato. PSD é o nativo e, uma vez criado, tem a propriedade de conservar
todas as propriedades do mesmo, como layers criados, efeitos aplicados, entre outros
e permite, desta forma, que você continue a edição de onde parou. Cada formato a

31. ser salvo depende de alguns parâmetros que você mesmo propõe no momento do
salvamento. Para web os mais comuns são GIF, JPG e PNG.
Um exemplo: se optar em salvar no formato JPG, o Photoshop pedirá, além do local
onde será salvo, as especificações de compactação.
DOIS MODOS PARA WEB
Supondo que você criou uma imagem para web que será aplicada em um topo de um
site, mas o webdeveloper (programador) solicitou a você que a enviasse toda
recortada (fatiada) para que a mesma pudesse ser carregada em etapas visando a
aceleração do carregamento do site. Pois bem, você não precisa fazer isso
manualmente, selecionando, recortando e salvando pedaço por pedaço. Existe um
comando que se chama “Fatiar” (slicer) também na barra de ferramentas, sendo um
submenu do Corte demarcado. Para aplicá-lo basta ir arrastando o fatiador sobre a
imagem criando áreas demarcadas por linhas que limitarão os campos de recortes.
Por fim, entre no Menu > Salvar para web, configure a extensão e a qualidade da
imagem e, ao salvarverifique se, na parte inferiorda caixa de diálogos estará a opção
'todas as fatias”. Salve. Pelo navegador de seu sistema operacional (Windows

32. Explore, por exemplo) localize a pasta em que você salvou e verá que lá estarão em
arquivos distintos todos os pedaços da sua imagem em uma pasta que o próprio
programa criou.
Além desta forma, para se gerar uma imagem compatível com uma boa aplicação na
internet, utilize a opção no Menu > Salvar para Web. Isto faz com que os arquivos
gerados tenham uma otimização para esta aplicação em específico, otimização,
sobretudo, no que diz respeito à seu tamanho em KB e à qualidade geral da imagem.

33. CONCLUSÃO
Embora seja um software bastante complexo, com uma infinidade de possibilidades
de aplicações e comandos, o Photoshop é um programa muito bem resolvido tanto
gráfica quanto ergonomicamente. Seu conceito de funcionalidade o torna bastante
intuitivo. Isto permite com que você possa ir experimentando os filtros, investigue e
estude a natureza dos efeitos e dos ajustes e ir aplicando em seus projetos. Enfim,
que estes conhecimentos possam de fato irem se somando e desta forma abrirem
novos horizontes para seus trabalhos com imagens. No próximo módulo vamos
conhecer um pouco do Adobe Fireworks e procurar integrá-lo com o Photoshop em
um exemplo de aplicação prática para um projeto de interface de um website.

34. TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 2 – Fireworks
1) APRESENTAÇÃO GERAL
O Adobe Fireworks além de ser uma ferramenta interessante de se trabalhar quando
o assunto é a integração com o Photoshop, a sua utilidade, está não somente no
momento da criação do layout para uma homepage, mas na possibilidade de já
possuirmos os elementos gráficos (botões, teclas,bordas e testeiras de tabelas, etc.)
já praticamente prontos para o recorte. Tudo de maneira instantânea, nas dimensões
e proporções exatas em relação aos outros elementos, à página como um todo, ao
navegador web, etc.
E como é a Adobe quem o produz, a interface gráfica do Fireworks aproveita muito
do cognitivo dos ícones e menus de seus outros programas, como o Photoshop e o
Illustrator por exemplo. Muitos colegas designers até brincam dizendo que o
Fireworks é uma “mistura destes dois programas”. Ele opera com grandes
possibilidades de interatividade tanto em nível de criação (desenhos) quanto na
manipulação de imagens (fotografias).

35. De maneira similar ao Photoshop, o Fireworks apresenta as suas opções de menus e
ícones com características ergonômicas, estéticas e visuais muito parecidas com os
demais programas da suíte de aplicativos CS5. Aliás, se você observar de relance o
Fireworks pode ser confundido facilmente com o Photoshop. Porém, olhando para as
sutilezas das ferramentas é que você, aos poucos vai percebendo a diferença e se
fascinando com ele também.
Veja uma introdução muito interessante em:
< https://www.youtube.com/watch?v=w-ZNsXQzHn8 >.
2) MENUS HORIZONTAIS (BARRA SUPERIOR)
> Arquivo
Resumidamente falando, este menu traz as opções de trabalho com arquivos (abrir,
fechar, salvar, importar e exportar, entre outros), além de possibilidade de

36. visualização dos trabalho simulando HTML e algumas opções de configurações mais
genéricas. Como são comandos relativamente básicos, vamos tralhando com eles à
medida que as demandas das outras ações e ferramentas irão exigindo.
> Editar
No Menu Editar, assim como na maioria dos programas conhecidos, encontram-se
atividades básicas como Copiar, Colar, Recortar, Duplicar, Clonar e o Preferências,
onde pode-se ajustar configurações de abertura de arquivos, parâmetros iniciais,
réguas, linhas guia, etc.

37. > Exibir
Este menu permite habilitar visualização e ajustar intensidades de componentes
como Zoom, Seleção, Escala, enfim, toda ferramenta submetida a este comando
pode ter sua exibição definida pelo usuário de acordo com suas necessidades.

38. > Menu Selecionar
No menu Selecionar estão os dispositivos que agem nos modos de seleção, ou seja,
na qualidade e intensidade das marcações das áreas onde o comandos de outras
ferramentas irão atuar. Ali, você pode definir, por exemplo, a área de atuação da
seleção, a forma com que ela vai agir e alguns modos de conversão das seleções.
Você pode converter seleções em objetos vetoriais ou bitmaps.

39. > Menu Modificar
Neste menu encontramos alguns comandos mais específicos. No submenu Tela de
desenho, por exemplo, encontramos possibilidades de alteração do tamanho e
posição da imagem (como acontece no Photoshop), onde se altera o tamanho dos
objetos em pixels ou milímetros, bem como o tamanho da tela de pintura. Neste
mesmo submenu podemos também alterar apenas o tamanho da tela de pintura
(como redimensionamos o “Canvas size” no Photoshop). Podemos espelhar e girar a
tela de pintura também.
O submenu Animação tem a função de criar e editar pequenas animações, como a
de um GIF, por exemplo. No submenu Símbolo conseguimos editar algumas
aplicações Flash. E o submenu Pop-up oferece uma possibilidade de se criar um
simples, porém eficiente menu pop-up para websites. Os submenus Máscara e Jpeg
seletivo trabalham com a possibilidade de se criar máscaras de transparência e
efeitos em objetos. Veremos posteriormente cada um deles mais adiante.
Ainda dentro do menu Modificar, encontramos possibilidade de edição de objetos
como transformar, organizar, alinhar, e também combinar e converter caminhos.
Podemos ainda agrupar e desagrupar objetos.

40. > Menu Texto
Assim como as imagens, os textos são também parte importante de um projeto de
websites. Como se sabe, a edição de textos demanda de parâmetros como Fonte
(tipo de letra) tamanho (dimensões em pontos do caracteres) estilo (se vai ser
negrito, itálico ou sublinhado) e alinhar (à esquerda, justificado, centralizado ou
alinhado à direita). Tudo isso você pode trabalhar tranquilamente em seus textos no
Fireworks, contando também com um bom revisor ortográfico que pode lhe ser útil
nas digitações.
> Comandos

41. Neste menu encontramos muitas possibilidades de trabalho tanto na questão de
procedimentos do próprio Fireworks (na execução de históricos, registros de
comandos, extensões e scripts) como especificamente em objetos, com efeitos muito
interessantes que valem a pena serem testados em imagens que você pode inserir
ou criar em seus estudos. Dá para executar comandos em lotes, que alteram
qualidades como nitidez, desfoques e giros de todo o conjunto trabalhado. Neste
menu existe também o comando que explora a possibilidade de se criar
apresentações em slides. Basicamente elas funcionam com base em um arquivo. SWF
(flash) acondicionado em um arquivo HTML operado por um script. Muito interessante
e pode ser bastante útil em websites, como forma de apresentar fotografias de
produtos, lugares, serviços, etc. Você vai ver também um submenu intitulado
Criativo. Nele se é possível trabalhar objetos com algumas pré-definições como, por
exemplo, colocar pontas de setas em linhas, criar sombras em objetos, multiplicar
objetos, conversão de cores, entre outros. Neste mesmo menu você encontra
também outros ajustes e implementações interessantes válidas para objetos exibidos
na web, formatação de textos, definições de avisos, entre outros; Precisaríamos de
muitas horas de estudo para explorarmos a totalidade destes recursos. Por hora,
vamos conhecendo estas possibilidades e aplicando-as conforme a demanda.
> Menu Filtros
Neste menu conseguimos fazer ajustes em bitmaps (rasters) como cores, desfoques
nitidez, adicionar ruídos e outros como conversão e canal alfa e alteração de bordas.
Isto ajuda muito porque não precisamos necessariamente levar esta imagem ao
Photoshop para fazer correções neste nível e retorná-las ao Fireworks. Dá para fazer
estes ajustes no próprio programa e com uma qualidade bem satisfatória.

42. > Menu janela
De maneira simplificada, o menu Janela lhe permite habilitar e ocultar itens como
painéis, caixas de ferramentas, comandos, entre outros. Ele implica diretamente na
personalização de sua interface. Ao trabalhar, você pode exibir ou esconder painéis
e ferramentas de acordo com sua necessidade. Um dos painéis mais úteis é o
Histórico, pois você pode controlar os níveis de ações aplicadas, regredindo de um a
vários passos em um único clique.
É neste menu que você vai encontrar painéis importantes como o Estado, que é
essencial para animações gifs e o estilo, onde você poderá pintar áreas vetoriais com
cores e acabamentos incríveis.

43. > Menu Ajuda
Ajuda, fóruns, atualizações, enfim, tudo o que se refere ao programa Fireworks
propriamente dito pode ser acessado no menu Ajuda. Como todo programa da Adobe
ele acaba se tornando um canal interativo no sentido de se obter suporte,
informações e esclarecimentos sobre como realizar atividades e manutenções no
Fireworks.

44. Um ótimo resumo do menu superior está em:
< https://www.youtube.com/watch?v=2xqHJppObyU&feature=relmfu >.
Barra de propriedades
Este painel é muito importante. Através dele você consegue visualizar, alterar
parâmetros, dimensões, cores, aplicar efeitos, formatar textos, enfim, é com este
painel que você vai trabalhar com os elementos visuais que compõem seu projeto.
A seguir apresentamos duas das várias instâncias da Barra de Propriedades. A
primeira refere-se a um bitmap (foto) e a segunda a um texto:

45. Vamos comentar agora um pouco sobre a Barra de ferramentas. De
imediato, você vai perceber que ela é bem parecida com a do Photoshop. E
de fato, isso é verdade porque muitas funções ali contidas aplicam-se às
imagens, como no Photoshop. São ferramentas extremamente simples e
funcionais. Vamos comentar, assim como fizemos com os itens do Menu
superior, de maneira sintética seus principais integrantes. Lembrando que
elas são divididas em seis grandes grupos: Selecionar, Bitmap, Vetor, Web,
Cores e Exibir. E a grande maioria das ferramentas desta barra oferece
outras tantas partindo de seus ícones primários, bastando segurar o mouse
apertado com o cursor sobre estes e aguardar o seu desdobramento.
Algumas ferramentas também permitem opções quando em trabalho de edição você
clicar com o lado direito do mouse sobre o objeto.
Selecionar: As quatro primeiras ferramentas são consideradas de uso geral: a
primeira seta em negro é a ferramenta ideal para selecionar objetos. A seta em
branco é considerada uma seta de sub-seleção, pois pode editar trechos de objetos
como nós. A terceira ferramenta consegue alterar o tamanho do objeto e a quarta é
o Cortar (como o crop), que é capaz de alterar o tamanho da tela de pintura
realizando recortes.
Bitmap: Traz algumas ferramentas de seleção como área de seleção, laço poligonal,
varinha mágica. Também traz a ferramenta Pincel, que combinada com suas funções
na Barra de Propriedades permite desenhar-se com vários tipos e espessuras de
pincéis. Tem também a ferramenta Lápis que também é um bom instrumento para
desenho e finalmente as ferramentas para nitidez, borrar, desfocar e Carimbo, capaz
de clonar, duplicar partes de um bitmap como se fosse no Photoshop.
Vetor: Linha, caneta, retângulo, texto, forma livre e faca. A ferramenta linha cria e
modela linhas vetoriais. A caneta cria contornos editáveis que podem ser convertidos
em seleções, por exemplo. A ferramenta retângulo, devido a seu ícone,

46. aparentemente parece produzir apenas figuras quadráticas, mas não é verdade. Ela
vai mais além: ao mantê-la pressionada este menu se desdobra numa grande
quantidade de figuras. Isso ajuda principalmente no momento de se desenhar no
Fireworks. A ferramenta Texto (T) é utilizada para a inserção e dição de textos em
seu trabalho e, ao clicá-la habilita-se automaticamente a Caixa de propriedades
(texto). A ferramenta forma livre edita com mais intensidade as curvas desenhadas
pela ferramenta linha. Funciona como se você empurrasse com o dedo para modelá-
la. Mantendo-se o ícone pressionado você tem sub-opções de alterar a forma de
áreas ou de caminhos realizados com pincéis sensíveis à pressão.
Web: com as ferramentas Pontos de acesso (circular, retangular e poligonal),
ferramenta Fatia (capaz de particionar uma imagem em vários arquivos de imagens
a fim de otimizarsua aplicação em websites no que diz respeito ao seu carregamento
(pois fracionando-a fica mais leve). Um detalhe é que ao ser construído um ponto de
acesso, ele solicitará o link (endereço do URL) na barra de propriedades. E clicando
com o lado direito do mouse nesta área você terá a possibilidade de inserir uma
imagem alternativa (ou seja quando passar o mouse por sobre ela chamará outra),
bem como permitir menus pop-up e textos alternativos (hint, ao se passar o mouse
sobre). Tudo isso facilitado por um comando que permite visualização destes
elementos assim como torná-los ocultos.
Cores: ferramentas que nos permitem colorir áreas e contornos de formas e pincéis
criados. Também oferece a ferramenta Conta-gotas que é capaz de, ao ser clicada
sobre uma área colorida, extrair dela os seus valores cromáticos para novas pinturas.
Por exemplo, se você clicar com ela em uma área vermelha, ela vai carregar
exatamente esta cor para as ferramentas de pintura (lata de tinta e pincéis, por
exemplo).
Exibir: Traz a tradicional ferramenta Zoom (ampliar e reduzir visualização), a
ferramenta Mão (navegar sobre as áreas de uma imagem) e os modos de
visualização: normal, tela cheia, escondendo barras e painéis.
Um vídeo bem ilustrativo sobre as Ferramentas está em:
< https://www.youtube.com/watch?v=CVuv7QZU1HE >
Como dito, o Fireworks é um programa que trabalha tanto com vetores quanto
bitmaps. É capaz de atuar como uma poderosa ferramenta no auxílio à construção
de homepages. Ele lhe permite até salvar já em html e de modo bem simplificado. O
exercício a seguir é uma combinação de uma aplicação dos dois programas
estudados: Photoshop e Fireworks. Combinando teoria e prática, cada passo que
dermos servirá para você enxergar como pode-se trabalhar combinados com estes
dois programas em alta produtividade e eficiência.
O exercício a seguir também lhe ajudará a entender como é a dinâmica do Fireworks
orientado à web e como ele pode “conversar” com o Photoshop em várias situações.
Além de ser um exercício estaremos mostrando algumas ferramentas em detalhes
para que você assimile como tratar determinados objetos quando estiverconstruindo
e modelando interfaces.
Bem, vamos partir de um modelo. No caso vamos partir de alguns parâmetros que
são considerados padrões. O primeiro é o seguinte: toda interface de um website
deve se apresentar-se navegável, assim como todo seu conteúdo acessível dentro do
que chamamos de janela do navegador (browser). Como exemplo de navegadores

47. podemos citar o Internet Explorer, o Mozilla Firefox, o Google Chrome, o Opera, o
Apple Safari, entre outros.
Esta área é dimensionada não em milímetros, mas sim em pixels. Esta taxa de pixels
pode alterar-se de acordo com a taxa de resolução dos monitores de vídeo. Como a
grande maioria ainda utiliza monitores com resolução de 1024 x 768 pixels, temos
que descontar desta totalidade as áreas destinadas à Barra de Tarefas do Windows,
a janela do navegador e a barra de rolagem vertical (na lateral direita). Ficaremos
então com uma área útil para a exibição do site, dentro desta resolução de tela, de
990 x 590 pixels.
Então vamos trabalhar nosso layout considerando uma área de 990 x 590 pixels a
uma taxa de 96 pixels por polegada (96 DPIs), uma vez que a resolução mínima para
a exibição de arquivos na web é de 72 DPIs. Primeiramente, então vamos abrir nosso
Fireworks e criar um arquivo (em PNG) com estas dimensões (990 x 590), 96 DPIs
e fundo branco. Vamos tentar?
Abra o Photoshop e vamos criar primeiramente um topo para ele. No Menu, vá em
Novo e especifique como largura 990 pixels e como altura 200 pixels a uma taxa de
96 DPIs em fundo branco. Clique ok e você verá uma faixa branca. Esta será a sua
área do topo. Como tema, vamos colocar uma imagem de fundo, trabalhar uma
mescla de cor e aplicar um texto com efeitos como exemplo. No menu abrir do

48. Photoshop, procure uma fotografia chamada Farol na pasta Imagem do seu Windows.
Caso não tenha, escolha outra qualquer de seu gosto apenas como título de exercício.
Abra esta imagem, em Selecionar escolha Tudo, em Editar clique em Copiar. Feche
este arquivo. No arquivo Novo que criamos primeiro, vá em Editar e clique em Colar.
Você vai ver que a fotografia foi colada em uma nova camada por sobre o
background, mas teve parte de sua imagem ocultada, pois estamos com uma área
de apenas 200 px de altura, lembra-se? Então, com a ferramenta Mover (a 1a
da
Barra de Ferramentas do Photoshop), posicione a imagem de acordo com seu gosto,
valorizando algum trecho desta dentro da janela.
Vamos aplicar agora a Mescla. Crie uma nova camada no Painel Camada, na Caixa
de ferramentas procure no quadradinho das cores (o superior) um tom de laranja, e
com a ferramenta Lata de tinta clique sobre a fotografia. Tudo irá ficar laranja.
No menu Camadas, onde há um campo escrito “Normal” clique e procure
“Multiplicar”. Você verá que a imagem ficou toda alaranjada.
Agora vamos escrever uma informação texto sobre a imagem. Clique na ferramenta
Texto e escreva com a fonte Cambria tamanho 48 o texto “Photoshop CS5” em preto.
No menu Camada, procure Estilo de Camada, clique em Brilho Externo. Mexa
livremente de modo a ter um contorno com espessura e cor de acordo com o seu
gosto. Clique ok. Salve para web como imagem JPG de qualidade 70.

49. Voltando ao Fireworks, no menu importar, procure onde você salvou o JPG que será
seu topo e importe-o, posicionando-o na parte superior da interface. Logo abaixo do
topo já colocado, com a ferramenta retângulo crie uma área retangular de 990 x 30
pixels na cor negra. Use a Barra de propriedades inferior do Fireworks para estas
definições. Esta será nossa área de menu principal. Vamos agora criar botões para
ela.
Faça um retângulo de 150 x 25 pixels. Na barra de propriedades, no quadradinho de
cor escolha ao lado a opção gradiente contorno. Edite as cores de modo a ter o seu
miolo vermelho e o contorno marrom escuro. Com a ferramenta texto clique sobre o

50. botão e digite com a fonte Verdana em branco (aqui volte à tecla Gradiente para
Sólido e clique no quadradinho branco) Bold, corpo 14 o termo A EMPRESA.
Depois do botão pronto selecione-o (botão mais texto), tecle Control C e Control V
OU Contro Alt D para duplicá-lo. Com as setinhas do teclado + Shift apertado fica
mais fácil tirá-lo do que está em baixo sem danificá-lo. Fazendo assim nós
conseguimos criar os demais botões: PRODUTOS SERVIÇOS SEDE FILIAIS
PARCEIROS APOIO CONTATO. Depois dos botões prontos, basta agrupar texto e
botão (em cada um deles separadamente) distribuí-los na área de menu (retângulo
preto) espalhando-os de maneira uniforme. Posteriormente poderemos transformá-
los em botões clicáveis. Vamos fazer um rodapé em tons diferentes de cor cinza em
gradiente linear e escrever nele o crédito do site (seu nome em Verdana, Branco,
formato 12, Bold).

51. Agora façamos um retângulo em cinza de 230 px de altura por 300 px de largura na
área central do site, porém um pouco mais deslocado em direção ao topo. Novamente
com a ferramenta Texto marque uma área dentro deste retângulo, de 195 px por
290 px. Nesta caixa de texto, digite um pequeno texto que complete-a (em Verdana
Regular, corpo 11 em cinza, alinhado à esquerda). Dois parágrafos serão suficientes.
Veja a ilustração a seguir como um exemplo. Todos os seus dados construtivos
podem ser vistos na sua barra de propriedades (parte inferior do Fireworks).

52. Veja uma montagem simples de um layout em:
< https://www.youtube.com/watch?feature=endscreen&v=FtP3o0Q3NCs&NR=1 >.
Nota: Existe um site que se chama <www.lipsum.com>. Este site contém textos
meramente fictícios para você aplicar em seus layouts simulando conteúdos textuais.
Bem melhor que ficar escrevendo nonono ou asdfdsfn, pois embora esta lá tudo em
latim, as palavras são reais e podem ajudar a simular melhor as manchas de texto
no seu layout. Pegue este texto que o exercício pede de lá, se preferir. Ao final deste,
ainda dentro do caixa cinza (fundo do texto) coloque Saiba mais... (em cinza, bold,
Verdana 11 e sublinhado).
Vamos transformar este Saiba mais... em um link. Para isso, selecione-o e tecle F8.
Na caixa que abre marque a opção botão e dê OK. Automaticamente o Fireworks cria
sobre ele um GIF transparente. Pois bem, dê dois cliques nesse GIF. Perceba que o
painel propriedades mudou. Na opção Estado (marcando Liberado) procure e habilite
Sobre. Perceba que ele desapareceu! Mas não se assuste, pois o Fireworks entende
que não há nada para ele alternar na hora de você passar o mouse em cima
(rollover). Localiza clique o botão “Copiar gráfico acima”. Pronto ele apareceu

53. novamente (foi copiado). Troque a cor, por exemplo, para marrom. Para voltar clique
na aba superior do arquivo “Pagina 1”.
Para inserir um link (pode ser um arquivo local, um endereço URL, por exemplo,
como http://www.unopar.br) digite-o na Barra de propriedades no campo “link”. Em
texto alternativo digite um comentário para seu link e em Destino, habilite _self (para
abrir na mesma aba do navegador), Dê F12 e passe o mouse sobre. Clique e teste
seu link.
Vamos colocar uma imagem ao lado deste texto para ilustrá-lo. Importe alguma outra
imagem da pasta Minhas Imagens do Windows: qualquer uma, pois será apenas
como exemplo. Sua altura deve ser igual ao do retângulo do fundo do texto que
criamos (230 px). A largura obviamente será proporcional, uma vez que não devemos
distorcer nem fotografias e nem letras. Todas as ampliações e reduções devem ser
proporcionais!
Clique F12 para visualizar.
Para finalizar esta etapa, vamos criar um menu vertical com os mesmos rótulos
(títulos) do menu horizontal. Faça cada palavra em Verdana Regular 12, branco. O
fundo deste menu será um retângulo em preto, alinhado à esquerda e conforme o
desenho a seguir.

54. Então, parcialmente temos o seguinte desenho de interface:

55. Vamos programar o menu vertical? Faça como descrito quando você programou o
Saiba mais..., lembra? Clique na palavra converta-a em botão F8). Dê dois cliques e
em Estado habilite Sobre e Copiar gráfico acima. Troque a cor do texto. Na aba
superior volte para Página 1. Dê F12 e teste-os. Por enquanto não terão ação
nenhuma a não ser o rollover. Posteriormente você irá colocar os links, nomeados de
acordo com as outras páginas HTMLs a serem criadas.
Veja a construção simples de um menu em:
< https://www.youtube.com/watch?v=LsRZJkePYZE >.
Abaixo da foto que você importou ao centro da interface, crie, conforme o exemplo
uma caixinha com a indicação de um campo para pesquisas. Este campo conterá a
indicação de uma área para digitação e dois botões: Limpar formulário e OK.

56. Terminado o desenho, na parte de Web da Barra de ferramentas encontre o ícone
Fatia. Faça um retângulo em volta do formulário e na caixa de propriedades habilite,
ao invés de Imagem de Primeiro plano, a opção HTML. Isto fará que este campo seja
reservado a um formulário programado em HTML em seu layout via programa de
edição HTML, como o Dreamweaver, por exemplo, que é o ideal para estes casos.

57. Vamos agora, para finalizar, criar um banner animado para colocar na base esquerda
(abaixo do menu de nossa interface). O meu roteiro foi esse:
1) Criar arquivo novo - 635 x 60 px;
2) Em Otimizar, mudar para WebSnap 128 e GIF animado;
3) Desenhar retângulo cinza também de 635 x 60 px;
4) Pintar com Estilo > Painel estilo > Estilo Plástico;
5) Escrever uma palavra: Fireworks e posicioná-la fora da área;
6) Inserir uma pequena imagem também (importar);
7) Selecionar tudo (Control A);
8) No painel Estado, crie mais 16 estados no ícone Novo (folha de papel c/ canto
dobrado). Copiados os elementos (marcados a partir do Estado 1), vá clicando nos
demais estados (painel) e dando Control V para colar;
9) Clique no texto com o lado direito do mouse, converta-o em Caminho. Com o lado
direito novamente, clique Animar seleção;
10) Coloque exatamente o número de estados como sendo a quantidade de frames.
Os demais parâmetros ficam como estão;
11) Clique e arraste o primeiro nó (ponto vermelho e espalhe a linha que estará
vinculada o texto até onde você quer;
12) Com a fotografia faremos a mesma coisa, só que ao invés de deslocamento,
vamos esmaecê-la [CA1] (fade in);

58. 13) No estado 1 clique na Foto com o lado direito do mouse > Animar > Animar
Seleção.
14) Na caixa altere para 16 estados e no item Opacidade coloque de 0 a 100 (e não
de 100 a 100). Apague nos demais estados a foto (deixe só transparente no
primeiro);
15) Dê F12 para conferir. Coloque o pontinho vermelho coincidindo com o primeiro
verde para não deslocar;
16) Para salvar: Export > Nomeie como Banner_01.
Tudo que temos a fazer é importar o gif do banner para nossa interface (no outro
arquivo) via programa específico para edição HTML, como o Adobe Dreamweaver,
por exemplo.
Exportamos então toda nossa interface como HTML, aceitando “Exportar fatias”
desabilitando a caixa “Somente fatias selecionadas” e habilitar “Incluir áreas sem
fatias”.
Na pasta que você salvou dê duplo clique no arquivo HTML criado e veja o resultado.

59. Detalhes sobre gifs podem ser vistos em:
< www.youtube.com/watch?v=XB8JSlp_x1g >
< www.maujor.com/fw/gifanifw.php >
SUGESTÃO DE LEITURA
ADOBE Creative Team. Adobe Fireworks CS5. São Paulo: Adobe Press, 2010.

60. ADOBE Creative Team. Guia autorizado Adobe: Photoshop 7.0. São Paulo: Makron
Books, 2003.
SCOTT, Kelby. Adobe Photoshop CS5: para fotógrafos digitais.São Paulo: Pearson,
2011.
WEB AULA
Unidade I – Programação PHP
PARA INICIARMOS NOSSO CURSO VAMOS ASSISTIR AS VÍDEO-AULAS 1 E 2.
E então? Vamos entender um pouco mais sobre o universo do desenvolvimento Web.
Como vimos na vídeo-aula 2, uma página pode conter diferentes linguagens, cada
uma tem seu objetivo. Vamos conhecê-las um pouco mais?
HTML
Farei uma breve introdução ao HTML neste curso de PHP, pois o mesmo é essencial
para compreendermos melhor este curso. Vocês terão uma disciplina específica sobre
HTML onde discutirão todos os detalhes, inovações, etc.
Vamos conhecê-lo?
Um documento HTML (HyperText Markup Language) é um conjunto de instruções
para definir a estrutura de páginas web. O HTML não é considerado uma linguagem
de programação, pois ela apenas define a apresentação do conteúdo. Por exemplo,
com HTML não é possível criar estruturas típicas de linguagens de programação como
comandos IF, while, etc.
Para definir a estrutura do documento, o HTML utiliza-se de tags (marcações) que
informam ao navegador como exibir o conteúdo, estas tags consistem do sinal “”
("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, Algum Texto. Note
que o símbolo que termina uma determinada marcação é igual aquele que a inicia,
antecedido por uma barra (/). Neste exemplo, diz ao navegador que está sendo
iniciado um novo parágrafo e indica que este parágrafo terminou! Alguma tags não
aparecem em pares, como por exemplo, a tag que realiza uma quebra de linha no
texto.

61. SAIBA MAIS
Existem diversas marcações (tags) HTML, para conhecê-las você pode acessar
<http://www.w3schools.com/html/html_intro.asp>
Página2 de 14
O HTML diferentemente do PHP não diferencia entre maiúsculas e minúsculas (não é
"case sensitive"). Então, por exemplo, a notaçãoé equivalente aou.
Veja a seguir um exemplo de uma simples página HTML com diferentes tags:
Arquivo pagina.html
Para testar esta pagina basta abrir o bloco de notas, copiar e colar este conteúdo e
então salvar com o nome pagina.html, aí é só abri-la em seu navegador!
CSS
Antes de comentarmos sobre o CSS navegue por diferentes páginas deste
linkhttp://www.mezzoblue.com/zengarden/alldesigns/. Você percebeu que as páginas
mesmo parecendo completamente diferentes, apresentam o mesmo conteúdo? Isto
é o CSS!
CSS (Cascading Style Sheets — Folhas de Estilos em Cascata) tem a finalidade de
dar uma forma de apresentação ao conteúdo do documento HTML. Inicialmente as
cores e tamanhos de fonte eram definidos diretamente pelo HTML, assim não era
possível separar o conteúdo do documento de sua formatação. Na prática era difícil
realizar alterações no layout das páginas Web, pois esta formatação estava
“misturada” com o código HTML. Com o CSS é possível modificar completamente a
aparência de um site alterando informações de apenas um arquivo CSS.
Vamos ver um exemplo! (Para simplificar a definição do CSS está na mesma página
que o HTML).

62. Arquivo css.html
A estrutura de formatação de estilos CSS é basicamente esta:
A palavra “seletor” corresponde a quais elementos HTML sofrerão as alterações de
layout e então definimos qual o valor para diferentes propriedades, no exemplo
anterior notamos várias formas de definir as cores dos conteúdos para diferentes
tags.
Execute o exemplo para visualizar!
Agora que já conhecemos um pouco sobre o HTML e o CSS, para podermos testar as
funcionalidades do PHP devemos preparar um ambiente para praticarmos! Vamos lá?
Página3 de 14
 ANTERIOR
 PRÓXIMA
Instalando o MySQL , Apache e PHP

63. Utilizaremos neste caso o WampServer, que instala e configura todos os recursos
necessários para executar nossos exemplos.
Devemos inicialmente fazer o download do WampServer em
<http://www.wampserver.com/en/>, ao clicar em download visualizaremos as
versões disponíveis. Escolha a correspondente ao seu sistema, 32 ou 64 bits.
Uma nova janela será aberta, clique então na opção you can download it directly
A instalação do WampServer é simples. Após ter realizado o download, basta
executar o aplicativo e seguir o Wizard para a instalação. A primeira tela é a de boas-
vindas, clique Next >.

64. Página4 de 14
É necessário concordar com os termos de licença:
Agora devemos configurar a pasta onde será instalado o programa. Se preferir, é
possível deixar a pasta que vem pré-configurada. Nós a utilizaremos em nossos
exemplos.
Após isso, o programa perguntará se deseja criar ícones na barra de tarefas e no
desktop, escolha o de sua preferência e clique em Next>.

65. Esta tela confirma as opções selecionadas, estando tudo ok, clique em Install.
Página5 de 14
Uma tela de progresso será exibida, basta aguardar!
Após instalar todos os recursos, aparecerá a pergunta sobre qual browser será
utilizado, apenas clique em Abrir:

66. A próxima tela perguntará sobre as configurações do PHP mail, apenas clique em
Next>.
Com a opção selecionada, basta clicar em Finish para finalizar o instalador
Página6 de 14
 ANTERIOR
 PRÓXIMA

67. Ao finalizarmos, podemos notar que surgiu um ícone no canto inferior direito da tela:
, a cor verde indica que o servidor está online. Clicando sobre o ícone, aparecem
diversas opções:
É importante compreender as diferentes funcionalidades:
Localhost O browser padrão do sistema será aberto com a página inicial do WampServer
phpMyAdmin O browser é aberto no phpMyAdmin, sistema que utilizaremos para criar e gerenciar nosso
banco de dados
wwwDirectory O Explorer é aberto na pasta em que devem ser colocados os arquivos .php que criaremos
Apache Trata-se do nosso servidor web que processa as requisições PHP. Ao selecionar esta opção
exibe um sub-menu para configurações adicionais
PHP Exibe um sub-menu para configurações adicionais do PHP
MySQL Exibe um sub-menu para configurações adicionais do banco de dados MySQL
webGrind Executa o webGrind que permite avaliar o desempenho de nosso sistema, para saber mais
acesse o site https://github.com/jokkedk/webgrind
Start, Stop, Restart
All Services
Estas opções permitem iniciar, parar ou reiniciar todos os serviços com apenas 1 clique. Utilize
essa opção se for feita alguma configuração adicional, ou se encontrar problemas na execução
de algum serviço
Put Online Se o computador for reiniciado e tivermos que executar o WampServer a partir do menu Iniciar,
devemos escolher esta opção para colocar o WampServer online, a cor do ícone é alterada de
acordo com o status. Verde: online, Amarelo: em transição, Vermelho: offline.

68. Para escrevermos nossos scripts PHP utilizaremos o Notepad++, disponível para
download em <http://www.baixaki.com.br/download/notepad-.htm>. Para quem não
conhece, funciona como um “super” bloco de notas, gratuito, fácil e rápido para
executar e utilizar. Servirá muito bem para trabalharmos e desenvolvermos nossos
scripts PHP.
Para o desenvolvimento de sistemas mais avançados e complexos existem IDEs
(Ambientes de Desenvolvimento Integrado), os quais devidamente configurados
facilitam ainda mais a programação de sistemas em PHP, a seguir temos uma lista
com alguns exemplos:
CodeLobster – desenvolvida especialmente para criação de scripts PHP em ambiente
Windows, é muito leve e fácil de utilizar
Site: <http://www.codelobster.com/>
Licença: Free, a versão comercial possui recursos adicionais
ZendStudio - uma ferramenta completa para quem trabalha com PHP (framework
adaptado sobre o Eclipse)
Site: < http://www.zend.com/en/ >
Licença: Trial
Eclipse for PHP Developers - excelente ferramenta, altamente customizável, leve e
rápida. Existem outras versões do Eclipse adaptadas para outras linguagens, você
pode utilizar a versão padrão e instalar um plugin para o PHP.
Site: <http://www.eclipse.org/>
Licença: Free
NetBeans - ótima ferramenta, muito utilizada na programação Java por facilitar a
criação de interfaces mais amigáveis, também pode ser utilizada para o
desenvolvimento de sites com PHP
Site: <http://netbeans.org/>
Licença: Free
Página7 de 14

69. Para testarmos o nosso servidor web, vamos clicar no ícone do WampServer e
escolher a opção www directory. O Windows Explorer abrirá como na imagem a seguir.
Crie uma pasta chamada exemplos:
Dentro dessa pasta, crie um novo documento de texto e renomeie para texto.php.
Atenção: os arquivos com scripts PHP devem ter a extensão.php para serem
processados corretamente pelo servidor Apache.
Abra este arquivo com o Notepad++ (ou a ferramenta que preferir) e insira o código
a seguir:
Arquivo texto.php
Neste código, podemos observar a “mistura” de PHP com HTML. Da linha 1 até a linha
6, e nas linhas 14 e 15, temos apenas código HTML. O código PHP é sempre declarado
entre as tags <?php e ?>, linhas 7 a 13. Neste exemplo, é possível visualizartambém
os 2 tipos de comentários que podemos fazer em PHP. Na linha 11 temos o
comando echo que permite gerar texto para ser exibido no navegador.
Vamos testar?
Para executar este código, clique novamente no ícone do WampServer e então em
Localhost, a seguinte tela será exibida no navegador:

70. Página8 de 14
No final da página, temos o título Your Projects, clique na pasta exemplos, e escolha
o arquivo que acabamos de criar texto.php. Outra forma de executar é ir diretamente
no navegador e digitar localhost/exemplos/texto.php
O resultado será:
Ao clicarmos com o botão direito do mouse e selecionarmos exibir código fonte,
veremos:
Por que não visualizamos o código em PHP?
Nenhuma parte do script em PHP é exibido no navegador. Isto porque o servidor lê
o código em PHP, interpreta e gera o HTML correspondente, que então é enviado
para o cliente, que é o responsável por processar e exibir o código HTML.
Variáveis
Para declarar uma variável em PHP devemos iniciar o nome dela com o símbolo $,
seguido por letras ou _ (underscore). A linguagem PHP é case-sensitive, o que significa
que ela diferencia letras maiúsculas e minúsculas, por exemplo, a variável x é
diferente de X.

71. Vamos ver um exemplo de variáveis. Crie um arquivo chamado variaveis.php com o
código:
Arquivo variaveis.php
Neste script, visualizamos nas linhas 2 a 5 exemplos de atribuição de valores para as
variáveis. Nas linhas 7 e 8, temos a função gettype que retorna o tipo da variável que
o PHP reservou para a variável de acordo com o valor que ela armazena.
Na linha 11, temos a função is_int que testa o tipo da variável. Similar a esta temos
outras como is_bool, is_string e is_float.
PARA SABER MAIS
O tipo booleano não é case sensitive, isto significa que para atribuir um valor
verdadeiro, por exemplo, tanto faz utilizar True ou TRUE ou true.
Página9 de 14
Veja agora a vídeo-aula 3 onde discutiremos um pouco mais sobre variáveis!
Array
é utilizado para armazenar vários elementos do mesmo tipo. Além disso, podemos
criar pares do tipo chave => valor, vejamos como funciona:
Para definir um array somente com valores utilizamos:
Arquivo vetor1.php

72. Note que o índice do array inicia-se em 0, por isso na linha 3 é exibido o valor 2!
Usando a forma chave => valor:
Arquivo vetor2.php
Constantes
Para definirmos uma constante em PHP devemos utilizar a estrutura:
Vejamos um exemplo:
Arquivo constante.php
FUNÇÃO
Para criarmos uma função em PHP basta utilizarmos a palavra reservada function,
segue a estrutura:
Vejamos um exemplo:

73. Arquivo funcao.php
OBJETOS
O PHP 5 oferece todos os recursos para o desenvolvimento de sites utilizando
programação orientada a objetos. Vejamos o exemplo de declaração de uma classe,
criação de uma instância e o acesso a atributos e métodos:
Arquivo classe.php
SAIBA MAIS
O tema Orientação a Objetos é muito extenso, você pode estudar mais em
<http://www.php.net/manual/pt_BR/language.oop5.php>
Página10 de 14
Operadores
A tabela a seguir exibe os principais operadores utilizados em PHP, sua descrição e
um exemplo. No decorrer do curso, veremos a utilização destes operadores.

74. Estruturas de Controle
As estruturas de controle de uma linguagem de programação permitem controlar o
fluxo de execução de nossos programas. Vamos ver em PHP como trabalhar com as
estruturas condicionais (decisão) e com as estruturas de repetição (loop).
IF
A instrução if é utilizada para tomada de decisão. Vejamos um exemplo:

75. Arquivo if.php
Este código mostra 3 tipos de utilização do IF. Na linha 5, temos um teste que verifica
se o valor da variável a é maior que b e então exibe a mensagem. Na linha 9, temos
o caminho alternativo do IF, representado pelo comando else, quando a condição é
falsa. Já na linha 16, a estrutura mostra diversos elseif para testar diferentes
condições e exibir a mensagem correspondente.
Agora é com você! Altere os valores das variáveis para visualizaros diferentes fluxos
tomados pelo script.
WHILE
A estrutura de repetição while, assim como a estrutura if, também trabalha com uma
condição. A diferença entre as duas é que se a condição for verdadeira para o if, ele
executa o bloco uma vez e no while, ele executa o bloco enquanto a condição for
verdadeira. Veja o exemplo:
Arquivo while.php
O bloco entre as chaves ficará executando até que a condição da linha 3 seja falsa.
Veja que na linha 5 a variável i é incrementada em uma unidade, o comando $i++ é
equivalente a $i = $i + 1
FOR
A estrutura de repetição for executará o bloco de comandos com um limite já pré-
definido, vejamos sua estrutura:
Agora um exemplo que você poderá testar:

76. Arquivo for.php
Página11 de 14
FOREACH
Este tipo de iteração é muito utilizada em PHP, é um tipo de for especial usado para
estruturas do tipo Array. Veja:
Exemplo:
Arquivo foreach.php
SWITCH
Ao invés de utilizarmos sequencias de if-else podemos utilizar a estrutura switch
quando estamos testando o valor de uma variável, percebam como o código
utilizando switch fica bem mais claro do que diversos if-else:
Arquivo switch.php

77. AJAX + PHP
AJAX (Asynchronous JavaScript And XML) permite atualizarmos o conteúdo de uma
página sem precisar carregá-la toda novamente! Vamos ver um exemplo para
facilitar o entendimento do poder do AJAX, precisaremos de 2 páginas, crie-as e
então salve com o nome especificado após o código-fonte:
Arquivo ajax.php

78. Arquivo maiuscula.php
Abra o arquivo ajax.php em seu navegador e digite algum texto, note que sem
recarregar toda a página, a cada tecla digitada o arquivo maiuscula.php é executado
e então o texto em maiúsculo aparece na outra caixa de texto. Atualmente quase
todos os sites apresentam conteúdo sendo exibido dessa forma, portanto é
imprescindível que qualquer desenvolvedor Web tenha conhecimentos de AJAX e
utilize estes recursos para tornar os sites mais dinâmicos.
Página12 de 14
Banco de dados
Antes de iniciarmos a integração do PHP com um banco de dados, veremos alguns
comandos básicos em SQL (Structured Query Language) que utilizaremos quando
estivermos trabalhando com banco de dados. O SQL é uma linguagem padrão para
acessar sistemas de gerenciamento de banco de dados relacionais: inserindo,
atualizando, excluindo e selecionando suas informações. Todo banco de dados
precisa de tabelas para organizar os dados, vamos ver a estrutura de como criar
uma:
Exemplo:
Neste momento não se preocupe em testar estes scripts, mais tarde quando
começarmos o desenvolvimento do nosso sistema veremos na prática a execução
destes comandos. Preste atenção a estrutura desta tabela, os outros comandos SQL
que veremos são baseados nesta estrutura.

79. Agora para inserirmos registros nesta tabela devemos usar o comando INSERT
vejamos:
Exemplo:
Página13 de 14
 Perceba neste exemplo que não é obrigatório inserirmos valores em todos os
campos da tabela, na realidade no momento que criamos a tabela podemos
definir o que é obrigatório e o que não é!
 Vamos agora atualizar estes dados, já que algumas informações não foram
completadas, com este objetivo devemos usar o comando UPDATE:

 Exemplo para atualizarmos o endereço e a cidade:

 Para selecionarmos informações de um banco de dados utilizamos o comando
SELECT:

 Exemplo para selecionarmos o nome dos clientes que vivem em Londrina:

 Vamos agora excluir este registro, a sintaxe do comando DELETE é:

 Exemplo:

 Observe que no exemplo acima utilizamos o campo nome e sobrenome para
encontrarmos o cliente para exclusão, isto é muito incomum em sistemas reais,
o que se costuma fazer é buscar o cliente por um código (identificador) que
seja único. Neste exemplo de exclusão, imaginando que nosso sistema tenha
diversos registros, ocorremos o risco excluir mais de um cliente, isso se o nome
e sobrenome destes clientes forem o mesmo!

80.  Agora para excluir toda a tabela devemos usar o comando DROP:

 Exemplo:

 SAIBA MAIS
As variações e combinações deste comando são imensas, para saber mais
você pode acessar o site:
< http://www.sql.org/ >.
 Discussão no Fórum:
Nesta unidade comentamos sobre diversos sistemas open source desenvolvidos
em PHP, encontre exemplos e então comente sobre o foco do sistema e se é viável
como uma solução a ser apresentada para um cliente?
 Página14 de 14
PROGRAMAÇÃO PHP PARTE 2
WEB AULA
Unidade I – Sistema Locadora
Sistema Locadora
Vamos criar um simples sistema que contará com a autenticação de usuários e o
gerenciamento dos veículos de nossa locadora. As páginas que desenvolveremos
servirão de exemplo para a criação das outras páginas do sistema, como por
exemplo, a que gerenciará a locação dos veículos. Uma sugestão de tabela para esta
funcionalidade será criada juntamente com o script que executaremos para a criação
das tabelas: login e veículo. O nosso sistema utilizará o MySQL como banco de dados,
o PHP como a linguagem de servidor, veremos um comando Javascript (linguagem
executada pelo navegador) e claro que o HTML, que é a base para a criação de
páginas Web.
Veja agora a vídeo-aula 4 para visualizar o funcionamento de nosso sistema!

81. Relembrando, é muito importante que você execute as páginas enquanto estuda os
códigos. Vamos começar?
MySQL
Podemos ter acesso ao MySQL utilizando o phpMyAdmin. Assim, clique no ícone do
WampServer e então em phpMyAdmin. A seguinte tela será exibida. Clique em Banco
de Dados.
Crie um novo banco de dados com o nome ‘locadora’.
Após criado, ele aparecerá no menu lateral esquerdo. Clique em locadora e então
escolha SQL no menu superior.
Entre com o código a seguir e clique em executar.

82. Arquivo tables.sql
Página1 de 9
Este script SQL cria 3 tabelas que utilizaremos para nosso sistema de locadora de
carros.
Vamos carregar algumas informações no nosso banco de dados, execute agora estes
comandos SQL:
Arquivo insert.sql
PHP + MySQL
Para acessar um banco de dados em PHP, devemos utilizar o
comando mysql_conect e mysql_select_db, veja a seguir:

83. Arquivo conexao.php
Crie uma nova pasta com o nome locadora no diretório www do WampServer. Salve
esta página com o nome conexao.php. Ao acessar localhost/locadora/conexao.php,
se obtiver uma página em branco, está correto! Caso algo dê errado, verifique o
nome de usuário e senha.
A variável $conn na linha 5 recebe a resposta de conexão com o banco de dados.
Variáveis deste tipo referenciam recursos criados que são utilizados para acessar
serviços ou objetos externos ao programa, como por exemplo, captura de imagens,
arquivos, acesso a banco de dados, etc.
Como as páginas de nosso sistema precisarão conectar no banco de dados para
selecionar ou alterar informações, colocamos os dados de conexão em um arquivo
separado e então incluiremos este arquivo nas nossas páginas. Esta prática impede
a repetição do mesmo código em diversas páginas e facilita a organização e
atualização dos dados de conexão.
Imagine se alterássemos a senha do banco de dados e então tivéssemos que abrir
cada página do site para alterá-la!
Agora que já configuramos a conexão para um banco de dados, vamos criar
nossa home. A página inicial de todo site em PHP deve possuir o nome index.php, pois
quando digitamos um endereço no navegador, o servidor procurará na pasta o
arquivo de nome index.php para exibi-lo inicialmente.
Criaremos uma página bem simples, para facilitar o entendimento e focar nas
funcionalidades do PHP, não nos preocuparemos com o design e nem com as
informações que todo site deve apresentar. Nossa simples página inicial tem o
código:

84. Arquivo index.php
Perceba que esta página possui somente código HTML, nós não vemos
nenhuma tag php. Todas as páginas web precisam do HTML para exibir conteúdo,
então o estudo de HTML é imprescindível para qualquer desenvolvedor.
E este é o resultado:
Página2 de 9
Nosso sistema de locadora de carros será utilizado apenas por funcionários, por isso
esta página possui apenas um link para a página de login do sistema, vamos criá-la
então:

85. Arquivo login.php
Aqui as coisas começam a ficar interessantes, vamos conhecer cada trecho do código:
O comando require_once executa todo o código presente no arquivo conexao.php
nesta página, no momento que é chamado, este comando é necessário pois nesta
página nós trocaremos informações com nossa base de dados.
O comando session_start() permite utilizarmos nesta página variáveis de sessão, que
são aquelas variáveis que podemos ler e gravar em todas as páginas do site, veja a
vídeo-aula 3 mais explicações sobre este tipo de variável.
Esta condição testa se a variável “op” foi enviada pelo método post por um formulário,
como é a primeira vez que esta página é aberta, esta condição é falsa e então o script
PHP desvia a execução para a linha 27, que é onde se inicia o código HTML, vamos
acompanhá-lo:
Página3 de 9
Este trecho contem a tag que indica ao navegador que está se iniciando um código
HTML, todo o cabeçalho está contido juntamente com a marcação que é o título que
aparece na aba do navegador. A tag <body > contém o “corpo” da página, é onde
fica a maior parte do conteúdo exibido no navegador.
Já conhecemos o código HTML até a linha 31, onde está a tag, vamos para a linha
32 onde temos:
Veja que a parte com fundo branco é HTML enquanto o trecho com fundo cinza é
código PHP, neste linha o HTML seta a fonte do texto que será exibido em vermelho

86. enquanto o PHP exibirá alguma mensagem se a variável $mensagem contiver algum
valor. Este trecho nos mostrará as mensagens de erro do formulário de login, para
ver seu funcionamento basta enviar a página sem preencher o campo login por
exemplo.
Continuando a análise, da linha 35 a 44 temos a declaração de um formulário, vamos
conhecer suas principais características:
A propriedade method é setada como post e então em action devemos colocar qual
página receberá os dados enviados pelo formulário, no nosso caso usaremos a
mesma página.
A marcação label delimita um texto que está associado a um campo do formulário
que neste caso é o login. Para exibirmos um campo de entrada de dados do tipo texto
em um formulário, devemos criar um input do tipo text, colocar seu nome (será
utilizado para receber o valor quando o formulário for enviado), o tamanho de
exibição da caixa de texto (size), e a quantidade máxima de caracteres que o usuário
pode inserir (maxlength).
Nestas 2 linhas temos as mesmas características que o campo login, perceba a
diferença na propriedade type que está setada como password, dessa forma os
caracteres digitados para senha são substituídos por *.
Nesta linha criamos o botão que será utilizado para enviar o formulário, a
propriedade value é o conteúdo que será exibido no botão.
Após o envio do formulário a mesma página é chamada, porém a condição agora
será verdadeira, então vamos analisar o código php.

87. Nas linhas 6 e 7 recebemos os valores de login e senha vindos do formulário
Este trecho valida os valores de login e senha, se eles foram enviados em branco a
variável mensagem é carregada e então posteriormente exibida na página.
Se os campos foram preenchidos, o programa entra no else e consulta o banco de
dados para verificar se a senha informada corresponde aquele login. Inicialmente
armazenamos na variável sql o comando select
Para executar este select basta utilizar a função mysql_query que precisa de 2
parâmetros, o primeiro é o comando SQL que será executado e o segundo é a
conexão – Lembram que criamos a variável $conn quando incluímos o arquivo
conexao.php!
Página4 de 9
A variável result recebe o retorno da função e então utilizamos o
comando mysql_fetch_assoc para gravar os valores retornados na variável array $row,
se não for possível significa que o login não foi encontrado (veja a mensagem gerada
associada ao else).

88. Se o login foi encontrado compara-se o valor retornado pelo banco com o informado
pelo usuário, se deu tudo certo o trecho a seguir será executado, senão novamente
o fluxo do programa segue o else e exibe ao usuário senha incorreta
Nesta linha gravamos a variável de sessão login com o login do usuário, esta variável
será utilizada para autenticarmos os usuários nas outras páginas de nosso sistema.
Se o login foi realizado com sucesso o usuário é redirecionado para a página que lista
os veículos.
Antes de criarmos a página que lista os veículos criaremos um script para autenticar
os usuários:
Arquivo autenticacao.php
Nesta página temos um condicional que valida se a variável de sessão login não
existe, e então redireciona o usuário para a página de login.
Basta incluirmos este arquivo em todas as páginas que queremos que apenas
usuários logados possam visualizar, como por exemplo, a página que lista os veículos
cadastrados no sistema:
Segue o código:

89. Arquivo veiculoLista.php
Página5 de 9
Vamos analisar o que temos de novo nesta página, na linha 16 aparece a
função mysql_num_rows que retorna a quantidade de linhas encontradas por nossa
consulta. A partir da linha 20 nós temos a criação de uma tabela em HTML que
organizará a listagem de veículos.

90. O marcador <tr > inicia uma nova linha enquanto o seu corresponde </tr > fecha a
linha. Já o marcador <td > é utilizado para as colunas. Note o <th > ele também é
utilizado para criar colunas, mas usado somente no cabeçalho, o h significa header.
Na linha 33 temos um exemplo prático do condicional switch visto anteriormente.
Aqui ele testa o valor da variável inteiro $tipo para exibir corretamente o texto.
Nesta página podemos criar um novo veículo ou abrir um cadastro existente, veja a
linha:
O comando a href do HTML cria um link para uma página (veiculo.php). Repare no
ponto de interrogação colocado após escrevermos a página, com ele podemos passar
variáveis com valores associados para a página que será aberta. Neste caso, estamos
passando a variável $op com o valor “abrir” e a variável $id com o código do veículo
que veio de nossa tabela do banco de dados. Quando passamos variáveis desta forma
estamos utilizando o método GET, ao contrário do método POST utilizado em nossos
formulários.
Vejamos agora a página veiculo.php, que é responsável pelo cadastro, visualização,
alteração e exclusão de um veículo:
Página veiculo.php em modo cadastro
Página veiculo.php em modo edição/exclusão
Segue o código:

92. Arquivo veiculo.php
Vamos verificar cada parte desta página:
Inicialmente autenticamos o usuário e incluímos o arquivo de conexão para o banco
de dados.
Setamos a variável $op com o valor “novo”, este valor é carregado por padrão nesta
página, na linha seguinte testamos a existência de uma variável $op passada pelo
método GET (o método utilizado para passar valores de variáveis pela URL). Se esta
variável existe então tem que ser do tipo “abrir” por ter vindo da página
veiculoLista.php.
Se a variável não está setada pelo método GET testamos pelo método POST (método
utilizadopara passar valores de variáveis por formulários). Neste caso a variável $op
pode assumir o valor “atualizar” ou “cadastrar” dependendo de como nosso
formulário foi aberto. Veremos mais a frente ainda nesta análise.
Nesta parte testamos a variável excluir vinda pelo método POST quando do envio do
formulário, se ela foi postada então recuperamos o id do registro que deve ser
excluído, montamos a query e a executamos em nosso banco de dados.

93. Este é o padrão de carregamento da nossa página, armazenamos o valor “cadastrar”
na variável $op, para quando enviarmos o formulário sabermos qual o tratamento
que devemos dar para os dados. Neste trecho nós podemos inicializar as variáveis
com valores padrão. Vamos testar? Insira um valor na variável $nome e veja ela ser
carregada ao abrirmos nosso formulário
Este trecho é executado quando o formulário foi aberto como novo e então os dados
foram preenchidos e o botão enviar foi clicado!
Utilizamos a função trim para remover os espaços em branco antes e depois da
variável $nome, salvamos também o valor do $tipo e validamos se a variável $nome
contem algum valor. Se tudo estiver ok inserimos este registro no banco.
Estes comandos são interpretados quando clicamos em abrir em um dos veículos
listados na página veiculoLista.php. Este comando SQL buscará no banco de dados o
nome e o tipo de veículo e então extrairá os valores encontrados para as variáveis

94. Este último trecho de código PHP executa a atualização no banco de dados,
inicialmente recebe os valores postados, valida o campo nome e então faz o update na
base de dados, se a operação pode ser executada corretamente redirecionará o
usuário para a página veiculoLista.php, senão exibirá uma mensagem de erro e
carregará novamente o formulário.
Agora vamos analisar alguns trechos do HTML, que ainda não vimos:
O marcador select cria uma lista de seleção para escolhermos um tipo de veículo,
note que testamos o valor de $tipo retornado para o banco para imprimirmos
“selected” este definirá qual dos itens de nossoselect será selecionado por padrão.
Este trecho exibe o checkbox para excluir o registro se a operação não for cadastrar
(não tem sentido mandarmos excluir um registro se ele ainda não existe!)
Se a operação é atualizar necessitamos enviar qual o $id do registro que está sendo
alterado, para isso utilizamos um tipo especial de input HTML que é
o hidden (escondido), ele tem este nome pois não aparece no formulário, o usuário
não pode alterá-lo!
Da mesma forma passamos a nossa variável de controle $op.
Nesta linha temos um exemplo de código Javascript para voltarmos a página que
lista os veículos.

95. E assim finalizamos a análise de nossa página de cadastro.
A última página do nosso site é:
Arquivo sair.php
Nesta página nós usamos o comando unset para removermos a variável de sessão
do usuário e dessa forma ele não possui mais permissão para acessar as páginas
protegidas do site. Após sair tente acessar o endereço
localhost/locadora/veiculoLista.php, você será redirecionado diretamente para a
página de login, o que não aconteceria se você ainda estivesse logado.
Para concluirmos nosso curso, veja a vídeo-aula 5.
Discussão no Fórum:
Quais mudanças deveríamos fazer em veiculoLista.php para que ao clicar no título da
tabela os registros listados fossem ordenados?
Programação em Flex
WEBAULA 1
Unidade 1 – Introdução à Ferramenta Adobe Flex
Objetivos de Aprendizagem: Nesta unidade você encontrará os princípios básicos
da programação web utilizando essa poderosa ferramenta de desenvolvimento de
aplicações ricas para internet. Serão apresentados vários detalhes que envolvem uma
visão geral da ferramenta, sua estrutura e suas linguagens suportadas. Também
serão vistos exemplos práticos facilitando o entendimento dos componentes aqui
mostrados.
INTRODUÇÃO AO ESTUDO

96. Como você vê a internet? O que vem a sua cabeça quando você ouve a frase “um
site da internet”? O site que você imagina tem uma interação ou somente uma
informação?
Antes de começarmos a estudar o desenvolvimento de aplicações ricas para internet
RIA (rich internet applications) devemos primeiro entender o que são.
Aplicações “ricas” procuram buscar as características visuais e de desempenho que
temos em nossos programas desktop para a internet.
Existem muitas vantagens em se programar utilizando ferramentas voltadas para
este tipo de aplicação, dentre estas vantagens estão a velocidade e facilidade de
desenvolvimento, uma vez que as ferramentas utilizadas disponibilizam vários
recursos pré-programados que podemos utilizar sem ter que escrever tudo do zero
como acontece quando utilizamos HTML e JavaScript para produzir os mesmos
efeitos.
SEÇÃO 1- ESTRUTURA FLEX
Nesta seção será apresentado o ambiente de programação FLEX, as linguagens nele
trabalhadas e os ambientes de compilação de seus códigos.
ESTRUTURA DA FERRAMENTA
O ambiente de programação Adobe Flex Buider 4.6 (2011 / 2012) foi projetado para
criação de programas que aumentem a experiência do usuário através da utilização
de aplicativos cada vez mais fáceis, ágeis e intuitivos.
Para entender melhor como a ferramenta funciona:
Nossa aplicação feita em Flex trabalha com arquivos de marcação mxml cujo objetivo
é dispor de forma rápida e fácil a criação de objetos em tela. Os arquivos .as (Action
Script) são utilizados para inserirmos nossas funções que controlarão eventos,
validações de tela, comunicação da ferramenta com outros serviços e linguagens. E
os arquivos de apoio são arquivos de imagens, sons, animações entre outros, que
farão parte do pacote da aplicação. Com tudo isso ao compilar seu código, a
ferramenta gera um arquivo .swf (até a versão 4.6) semelhante ao .class do Java
onde conseguiremos depois inserir em um site nossa aplicação sem grandes
dificuldades.
Alguns de vocês podem estarse perguntando mas porque investirem Flex sendo que
a Adobe descontinuou o projeto? Na verdade o que muita gente não sabe é que o
projeto agora é mantido pela Apache (Apache Flex), e todo o conteúdo gerado pela
ferramenta não mais será um swf e sim um HTML + JavaScript + CSS. Hoje na versão
4.8 o Flex se firma ainda mais como uma poderosa ferramenta para construção de
sites de forma rápida, segura e com um visual incrível.

97. Por motivos de facilidade de instalação,nesta aula estaremos utilizando a ferramenta
Flex versão 4.6 disponível para download no site (último acesso agosto
2012).
Para baixar basta fazer um cadastro simples (versão para 30 dias). Já aqueles que
quiserem a ferramenta versão sem limite de tempo, basta no cadastro indicar o
status de estudante e fazer upload da imagem da carteirinha da universidade ou do
atestado de matrícula que dentro de 10 dias a Adobe envia a chave. E enquanto a
chave não vem você pode ir usando a ferramenta.
AMBIENTE DE DESENVOLVIMENTO
A tela inicial apresentada na figura 1 a seguir é dividia em várias partes. Entre elas
estão:
1) Package Explorer – O package explorer é o local onde seus projetos Flex estarão
visíveis. Neste você poderá acessar todos os arquivos pertencentes ao projeto, bem
como gerenciá-los alterando, criando e excluindo conforme a necessidade.
2) Components / Outline – A aba Components apresenta os componentes que podem
ser utilizados na construção da aplicação Flex quando visualizado pelo Design (3);
dentre estes componentes podemos citar botões, labels, entrada de texto, gráficos,
imagens, entre outros. Já a aba Outline apresenta os componentes já estruturados
dentro do programa, uma vez o componente inserido ele fica em uma determinada
localização dentro do programa a aba Outline ajuda a mostrar visualmente esta
localização, facilitando seu acesso mais rapidamente (funciona quando visualizado
pelo source (3)).
3) Souce / Design – A aba Source apresenta ao usuário o código fonte MXML /
ActionScript, será onde iremos trabalhar a maior parte do conteúdo que veremos
adiante. A aba Design apresenta o código MXML convertido de forma gráfica, ex: um
< button > inserido no MXML é apresentado na forma de botão na aba Design.
4) Output / problems / outros – As abas ( 4 ) possuem por função principal informar
ao usuário sobre o andamento da execução do programa em diversas áreas além de
apresentar ao mesmo alguns problemas cujo código possa impedir de entrar em
execução. Estas também podem auxiliar no monitoramento de rede e / ou acesso a
algum serviço da aplicação.
Figura 1- Tela Inicial

98. Para conseguir ver todo o ambiente por completo vamos criar um novo projeto como
mostrado nas figuras 2 e 3.
Figura 2 - Acessando a criação de novo projeto.
Figura 3 - Criando um novo projeto
Após escolher o nome e selecionar onde quer que o projeto seja salvo, basta
pressionar finish. Para fins de aprendizagem evolutiva, inicialmente não iremos
utilizar as configurações avançadas de criação de projetos que esta ferramenta
possui.
Após criado podemos observar na aba Source de nosso projeto um código parecido
com o abaixo. Este em MXML será a base para inserirmos os componentes e ações
que nossa aplicação irá ter e executar.
Porém ao acessarmos a aba Design não encontraremos nada (figura 4).

99. Figura 4 - Tela de projeto vazia
Você deve estar se perguntando. Se existe código porque não existe nada
apresentando.
O que existe é apenas a estrutura, daqui para frente iremos aprender a incluir
componentes na aplicação e fazê-los interagir com os usuários de nosso sistema.
SEÇÃO 2: PRINCÍPIOS BÁSICOS DA PROGRAMAÇÃO EM FLEX
Esta seção apresentará os conceitos básicos da linguagem, suas estruturas de
controle e repetição, formas de criação de objetos, métodos e chamada de funções
simples.
CRIANDO O PRIMEIRO PROGRAMA
Bom agora que você já criou o primeiro projeto, vamos criar e compilar nosso
primeiro projeto Flex.
Para isso precisamos saber o que o programa irá fazer: definiremos uma tarefa inicial
bem simples. Imprimir nosso nome na tela.
Então com a aba design ativa vamos clicar em componentes e arrastar um
componente label para a tela, conforme apresentado nas figuras 5 e 6.
Figura 5 - Componente Label em componentes

100. Figura 6 - Componente Label já no mxml (aba design).
Podemos observar no código abaixo que ao inserirmos um componente arrastando e
soltando a ferramenta Adobe Flex cria automaticamente o código MXML, onde o
código em destaque informa o tipo de estrutura s:Label a seu posicionamento em
tela X e Y com as respectivas posições além da propriedade text que informa o texto
a ser apresentado; e é nesta propriedade que iremos trabalhar.
Vamos substituir a estrutura: text="Label"
Por: text="Pós-Graduação 2012 - Unopar"
E vamos observar compilar e executar nosso projeto, para vermos como ficou.
Para compilar basta clicar em Run conforme mostrado na figura 7.
Figura 7 - compilando um projeto Flex
Na Figura 8 antes de compilar se você ainda não salvou seu projeto depois da última
alteração, ele irá perguntar se para rodar irá ter que considerar as últimas alterações,
se for necessário então terá que salvar. Clique em OK.
Figura 8 - salvando projeto antes de compilar

101. Podemos ver o resultado deste código apresentado na figura 9.
Figura 9 - página gerada pela ferramenta
Podemos observar que os dados apresentados na aba Design são bem parecidos com
os apresentados na página compilada pelo sistema. Isso é importante comentar pois
a aba Design foi pensada justamente com esta funcionalidade, a de apresentar antes
da compilação um formato bem aproximado da estrutura gráfica que iremos ter
depois de compilado.
Podemos nos atentartambém que apesar deste projeto ser um projeto web este está
rodando localmente em nossa máquina basta visualizarmos o endereço da página.
Mas você deve estar se perguntando, se eu estou rodando uma página web
localmente eu não precisaria de um servidor web ou algum aplicativo tipo wamp
server ou Apache instalado em minha máquina para poder rodar algo web. Não para
testes em Flex, pois as páginas geradas (em acessos mais simples) não necessitam
de recursos web, diferente da linguagem PHP a qual depende de ferramentas web
para poder ser interpretada no servidor.
ACTIONSCRIPT / MXML
MXML
MXML é uma linguagem de marcação de texto muito parecida com XML comum que
você já deve estar cansado de ouvir falar. Iremos utilizar o MXML na inserção de
componentes visuais em nosso aplicativo. Esta linguagem será mais bem
apresentada no decorrer deste, onde serão apresentados vários componentes e suas
funcionalidades e aplicações.
Para que possamos entender melhor como esta linguagem trabalha iremos utilizar o
projeto que criamos e iremos inserir um novo botão conforme o código apresentado
a seguir.
Voltemos agora para a tela Design.
Vamos arrastar um componente Button para dentro da tela de Design. Teremos algo
como apresentado na figura 10:

102. Figura 10 - Incluindo botão no projeto
Podemos observar que uma tag Button surgiu. Esta tag foi criada automaticamente
quando arrastamos o botão da barra de componentes para dentro do design. O x e
y com um os números na frente trazem o posicionamento x e y do botão. O label
com um nome escrito entre aspas é a palavra escrita dentro do botão. Experimente
colocar seu nome no lugar para ver o que acontece.
Vamos inserir mais três botões e colocar seus nomes de Primeiro, Segundo, Terceiro,
Quarto.
PARA SABER MAIS
Ao inserir mais componentes observamos que aparecem algumas linhas
azul claro alinhando os botões, elas servem somente como sugestão de
alinhamento, facilitando assim ajustes de tela
Existem várias formas de alterar o nome de um botão, podemos utilizar o source,
podemos estar em design e clicar 2x no botão que ele ficará editável, podemos
também clicar 1x em cima do botão e alterar seu label em Flex Properties conforme
a figura 11 abaixo:
Figura 11 - Propriedades do componente Label
Após a criação teremos algo parecido com a figura 12.

103. Figura 12 - Primeiro botões Flex
Em nosso código teremos algo como o código apresentado a seguir. Lembrando que
a posição X e Y pode variar de acordo com o inserido por você.
Suponhamos que queremos que algo aconteça quando clicarmos em um dos botões,
como fazer isso?
Como havia sido dito anteriormente o Flex trabalha com o MXML e com o ActionScript
para executar funções em nossa aplicação. Precisaremos entender um pouco mais
sobre esta poderosa ferramenta para podermos prosseguir.
ACTIONSCRIPT
A linguagem de programação ActionScript é baseada no padrão ECMAScript3, que
garante a semelhança com várias linguagens derivadas do C como JAVA, C# entre
outras.
Esta linguagem é muito utilizada na programação de funções Flash, e tem uma ótima
interação com o MXML o qual através da ActionScript estaremos inserindo ações em
nossos formulários e botões incluídos no código MXML.
Até o momento inserimos componentes em nossa aplicação, porém nada aconteceu.
Como fazer então para “as coisas acontecerem?”.
Como irá notar, ActionScript 3 é muito semelhante a linguagens como Java; segue
também conceitos de orientação a objetos como ela.
SAIBA MAIS
Para saber mais sobre orientação a objetos e aplicações básicas acesse:
<http://downloads.caelum.com.br/apostila/caelum-java-objetos-
fj11.pdf>
O principio básico do ActionScript é executar um determinado código que é chamado
através de um nome de função. Ex:
Vamos entender um pouco mais o que é tudo isso:
- public é o nível de acesso que nossa função terá. Assim como em Java o acesso
público abre um leque para que essa função seja vista em qualquer parte de nossa
aplicação.
- function indica que estamos tratando de uma função
- mostrarMensagem( ) o nome de nossa função
- void é o tipo de retorno que teremos. No Flex como também no PHP e outras
linguagens as funções podem retornar resultados em tipos diferentes. Os tipos aqui
retornados são bem parecidos com os tipos em Java.
- { e } não podemos esquecer das chaves, que indicam o escopo de sua função.

104. PARA SABER MAIS
Dizer escopo de uma função é a mesma coisa que dizer até onde a função
se estende.
Para inserirmos códigos ActionScript 3 podemos assim fazê-lo de duas maneiras. A
primeira é inserindo o código junto com o MXML conforme apresentado abaixo.
O código apresentado cria uma função que mostra uma mensagem na tela, para
podermos usufruir deste recurso devemos vincular esta função a um botão. Para o
nosso exemplo vamos inserir no primeiro botão como ilustrado a seguir.
A partir de agora nossa interface ganha vida. Podemos associar botões a funções e
executarmos as mais diversas tarefas em nosso programa. Podemos ver o resultado
na figura 13.
Figura 13 - botão primeiro executando método mostrar mensagem
Outra maneira de trabalharmos é criando um arquivo separadamente do mxml com
a extensão .as e importarmos as funções para dentro de nosso arquivo.
Onde todo o conteúdo da tag CDATA é inserido em um arquivo separadamente que
em nosso exemplo chamamos de actionSeparado.as
Vimos até agora como fazer uma função mostrar uma mensagem na tela, mas se
quisermos que esta mensagem não seja fixa?
Vamos criar um novo componente TextInput em nossa tela e capturar suas
informações através da propriedade click de um botão.
Para fazer isso temos que primeiramente identificar nosso campo texto para
podermos capturar a informação nele contida. Pois não existe como se mostrar algo
que não se conhece. A identificação do campo se dá através da propriedade id de
nosso TextInput. Quase que a totalidade de todos os elementos que iremos utilizar
em nosso mxml possui esta propriedade. Ela serve para podermos identificar os
objetos de nosso programa.

105. Ex: posso ter 10 campos em meu programa, cada um com uma funcionalidade. Por
exemplo: para nome, endereço, telefone, idade, CPF, etc. Mas como vou saber qual
é qual? Com o id eu consigo distinguir um do outro, como se fosse o CPF do objeto,
cada um tem o seu.
Figura 14 - inserindo nome no componente TextInput
O código completo fica:
A função capturarTexto( ) acessa a propriedade text do TextInput identificado no
código como campoTexto.
DECLARANDO VARIÁVEIS
Podemos perceber que atribuir nomes a componentes de um sistema em MXML é
algo trivial. Agora quando queremos identificarelementos em ActionScript 3 teremos
que trabalhar como trabalhamos em outras linguagens, utilizando variáveis que
armazenam valores do tipo que lhe foi identificado.
Os tipos que mais utilizaremos são:
OPERADORES
Para podermos trabalhar com nossas variáveis necessitamos de algo para relacioná-
las. Os operadores são símbolos que podem ser utilizados para manipular valores e
variáveis realizando operações entre eles. Os tipos utilizados no ActionScript 3 são:

106. Estruturas de Controle
As estruturas de controle de uma linguagem de programação permitem controlar o
fluxo de execução de nossos programas. Vamos trabalhar com as estruturas
condicionais (decisão) e com as estruturas de repetição (loop).
Estruturas Condicionais
IF
A instrução IF é utilizada para tomada de decisão. Suas três sintaxes seguem abaixo:
SWITCH
A instrução switch utilizamos para testar várias condições evitando o uso repetitivo
de else if, evitando a poluição no código.
Estrutura de Repetição
WHILE
A estrutura de repetição while assim como a estrutura if também trabalha com uma
condição; a diferença entre as duas é que se a condição for verdadeira para o if ele
executa o bloco uma vez e no while ele executa o bloco enquanto a condição for
verdadeira.
O código fica executando até que a condição seja falsa.
DO..WHILE
Com a diferença de ser executado ao menos uma vez o a estrutura do..while possui
as mesmas características que o while. Sua estrutura é:
FOR
A estrutura de repetição for funciona repetindo comandos inúmeras vezes porém com
um limite já pré-definido. Sua sintaxe é:

107. Onde temos variável com valor inicial, condição onde essa variável será verificada n
vezes e atualização onde temos os termos de contagem.
FOR..IN
É utilizado para iteração com propriedades de um objeto e também com arrays. Muito
utilizado quando não sabemos o número de objetos com que iremos interagir.
Onde temos Lista como o conjunto de objetos do mesmo tipo ou array.
FOR..EACH..IN
Este tipo de iteração é usado quando queremos trabalhar com objetos e listas XML.
APROFUNDANDO O CONHECIMENTO
Para se aprofundar o conhecimento em desenvolvimento de aplicações
ricas para internet é importante a leitura dos tópicos 1.11 e 1.12 do livro
Ajax, Rich Internet Applications onde ser tem uma visão geral sobre
desenvolvimento de software e RIA.
Concluindo-se a leitura podemos perceber que existem inúmeras
ferramentas para desenvolvimento de aplicações para internet, e o mais
importante de tudo é saber qual dessas ferramentas oferecidas melhor se
encaixará nas necessidades de sua empresa e mercado.
QUESTÕES PARA REFLEXÃO
Comparando com outras linguagens de programação como Java, você
conseguiu notar a diferença entre elas? Foi possível notar agilidade de
desenvolvimento que o Flex possui sobre outras linguagens?
PARA CONCLUIR O ESTUDO DA UNIDADE
Começamos a estudar os conceitos da forma de desenvolvimento utilizando
ActionScript e mxml e já podemos perceber que a ferramenta disponibiliza vários
recursos interessantes, recursos que só conseguiríamos fazer em outra linguagem se
utilizássemos grande volume de código para possuirmos os mesmos efeitos que
conseguimos em poucas linhas na ferramenta anteriormente mostrada
Nos próximos capítulos iremos estudar formas de agregar este conhecimento
adquirido em nossos programas. Com isso poderemos focar mais nossos exemplos
em resolução de problemas cotidianos.
Para avaliar os conhecimentos por você adquiridos sugiro que resolva os problemas
abaixo propostos.
Visão geral
Apresentação da disciplina:
Sou o Professor Adriano Sepe, profissionalmente trabalho como
arquiteto de softwares com mais de 9 anos de experiência e sólidos
conhecimentos em arquitetura, sistemas distribuídos e
desenvolvimento de soluções web, desktop, mobile e SOA.
Obcecado por boas práticas de arquitetura e desenvolvimento de
software, para isso busco sempre dedicar-me ao conhecimento. Na

108. área acadêmica tenho ministrado disciplina nos cursos de Tecnologia
em Análise e Desenvolvimento de Sistemas, Engenharia Elétrica e
Engenharia da Computação.
Vamos aprender três importantes tecnologias que dão a sustentação
para a evolução da internet, HTML, CSS e JavaScript. Poderemos
compreender claramente qual é o papel individual de cada uma, e
como juntas elas permitem a criação de aplicações cada vez mais
ricas e indispensáveis para a maioria das pessoas. A concepção da
linguagem HTML teve como propósito o compartilhamento de
documentos entre pesquisadores, mas o que vemos atualmente é a
proliferação de aplicações extremamente complexas e funcionais,
inseridos em um contexto de internet, sendo utilizado por bilhões de
pessoas diariamente. Para este cenário as tecnologias que vamos
discutir são de vital importância, colocando-se em posições de
destaque.
Objetivos:
Nesta disciplina, vamos discutir e aprender sobre as linguagens
HTML, CSS e JavaScript. Vamos discutir detalhes e diferenças entre
as linguagem HTML e XHTML, mergulhando sobre os conceitos da
folha de estilo. No final vamos aprender linguagem de script
chamada JavaScript, e entender como podemos tornar nossas
aplicações web tão interativas e atraentes, aliada é claro ao CSS.
Conteúdo Programático:
1) Introdução ao HTML
a) O que é HTML
b) HTML vs XHTML
c) Tags
d) Documentos HTML
e) Elementos
f) Atributos
g) Sintaxe
h) Elementos aninhados
i) Boas práticas
2) HTML
a) Definindo o tipo do Documento
b) O que são Doctypes
i. Tipos de Doctypes
c) Adicionando Comentários
d) Trabalhando com Tabelas
e) Trabalhando com Listas
f) Listas ordenadas
i. Listas não ordenadas
ii. Listas de definição
g) Trabalhando com Formulários
h) Elementos de entrada de dados
i. Entendendo GET/POST
ii. Enviando dados para um servidor
i) Trabalhando com CSS

109. 3) JavaScript
a) Introdução a JavaScript
b) Trabalhando com HTML dinâmico
c) Introdução a DOM (Document Object Model)
Metodologia:
Na unidade utilizaremos todos os recursos necessários e disponíveis
para o desenvolvimento da discussão do conteúdo, sendo assim,
faremos uso de:
 Textos da própria web-aula e de outros sites que possam
contribuir para a discussão;
 Vídeos que podem esclarecer ou aprofundar determinados
conteúdos;
 Fóruns para discussão de tópicos onde seja possível a troca de
ideias e conteúdos entre os discentes e docentes;
 Avaliações virtuais onde será realizada a verificação do
aprendizado;
 Entre outros recursos que poderão ser utilizados visando
maior entendimento da matéria.
Avaliação Prevista:
Cada web-aula conterá uma avaliação virtual composta de 5
questões (sendo assim, temos 2 web-aulas com 5 questões cada).
Quando houver fórum de discussão o aluno será avaliado quanto ao
conteúdo de sua postagem, onde deverá comentar o tópico
apresentando respostas completas e com nível crítico de avaliação
pertinente ao nível de pós-graduação.
Critérios para Participação dos Alunos
no Fórum:
Quando houver fórum de discussão o aluno será avaliado quanto ao
conteúdo de sua postagem, onde deverá comentar o tópico
apresentando respostas completas e com nível crítico de avaliação
pertinente ao nível de pós-graduação. Textos apenas concordando
ou discordando de comentários de outros participantes do fórum
sem a devida justificativa ou complementação não acrescentam em
nada ao debate da disciplina, sendo assim, devem ser evitados. Os
textos devem sempre vir acompanhados das justificativas para a
opinião do discente sobre o conteúdo discutido, para que assim,
possamos dar continuidade ao debate em nível adequado. Além
disso, podem ser utilizados citações de artigos, livros e outros
recursos que fundamentem a opinião ou deem sustentação a sua
posição crítica sobre o assunto. Deve ser respeitado o tópico
principal do fórum, evitando debates que não tem relação com o
tema selecionado pelo professor.
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB

110. WEB AULA 1
Unidade 1 – Introdução ao HTML
00:00
00:00
O QUE É HTML
HTML é uma abreviação de Hypertext Markup Language Language (Linguagem de
Marcação de Hipertexto). A criação do HTML foi baseada em SGML que também é
uma abreviação para Standard Generalized Markup Language (Linguagem de
Marcação Generalizada Padrão). O SGML é um método internacionalmente
reconhecido e aceito, contendo normas gerais para criação de linguagens de
linguagens de marcação. Não é necessário o conhecimento sobre SGML para que seja
possível criar documentos utilizando HTML. Podemos entender HTML como uma
linguagem de marcação de textos, constituída de elementos e atributos (maiores
detalhes serão vistos na sequência). Observe que o ter marcação de texto não é por
acaso, pois esta linguagem tem por objetivo definir a estrutura do documento e não
se preocupar com a sua apresentação.
Quando pensamos em documentos percebemos que a maioria respeita uma estrutura
básica, por exemplo, títulos, parágrafos ou listas. Dessa forma os nomes dos
elementos existentes na linguagem HTML tiveram essa influência. Se olharmos para
o elemento que tem por objetivo marcar um cabeçalho descobriremos que o seu
nome é heading, o que facilita grandemente a sua associação.
Construir documentos utilizando uma linguagem de marcação implica na
estruturação hierárquica das informações, onde utilizamos tags específicas para
marcamos as informações. Indicando por exemplo onde estão as quebras de linhas,
onde são parágrafos e etc.
O QUE É XHTML
Para entendermos o que consiste XHTML primeiramente deveremos compreender
alguns fatos. A linguagem SGML foi utilizada na criação de duas linguagens de
marcação muito difundidas, HTML e XML. A linguagem XML foi criada com o propósito
de permitir a criação de documentos com dados organizados de forma hierárquica,
diferentemente do HTML a linguagem XML não define nenhum marcador, isso quer
dizer que podemos construir hierarquicamente estruturas de marcação de
documentos. Um dos grandes destaques do XML é a sua simplicidade de legibilidade,
tanto para humanos quanto para computadores além da sua capacidade de poder
ser validado estruturalmente. A linguagem XHTML (eXtensible Hypertext Markup
Language) foi a reformulação da linguagem HTML considerando as definições
impostas pela linguagem XML. Isso garante que todos os aspectos positivos que estão
atrelados a linguagem XML sejam absolvidos pela linguagem HTML que já havia se
destacado enormemente no seu propósito de marcação de texto. Com essa
incorporação foi vista pela indústria de software como um processo de padronização
com objetivos de compatibilização entres dispositivos (televisão, palm, celular, etc.)
para melhorar a acessibilidade. Podemos entender que, quando construímos
documentos XHTML estamos na verdade escrevendo documentos HTML reformulados
para XML.
VERSÕES DE XHTML

111. XHTML 1.0
A W3C foi responsável pela recomendação original de XHTML, que consistia apenas
na reformulação do HTML 4.01 em XML.
XHTML 1.1
Consistem em uma reformulação do XHTML 1.0 Strict com algumas pequena
modificações.
HTML VS XHTML
Vamos neste ponto discutiras diferenças entre XHTML e HTML. Contudo não podemos
encarar essas linguagens como concorrentes visto XHTML é uma evolução do HTML.
Analisando as principais diferenças entre as duas linguagens percebemos que XHTML
acrescentou nos seguintes aspectos:
 Restrições de XML serão aplicadas
 Tags necessariamente deverão ser escritas em minúsculo
 Aninhamento rigoroso de tags
 Fechamento de tags obrigatório
 Sintaxe rigorosa de atributos
RESTRIÇÕES DE XML SERÃO APLICADAS
Para melhorar a experiência do usuário os navegadores procuram interpretar e
resolver problemas de marcação de documentos. Visto que a frustração de não
conseguir visualizara informação acabara sendo do usuário. Quando estamos falando
de XHML devemos compreender que os documentos deverão necessariamente estar
bem formatados, isso se dá pelas regras definidas nas recomendações para XML 1.0.
O entendimento sobre o que seria um documento bem formatado será apresentado
a seguir.
Apenas um elemento raiz
Todo os demais elementos de marcação deverão ser inseridos dentro do elemento
raiz html, conforme mostrado a seguir:
Tags necessariamente deverão ser escritas em minúsculo
Todos os elementos XHTML deverão ser escritos em letra minúsculo, isso se dá
porque a linguagem XML tem a característica de ser sensível a caixa (case sensitive),
o que faz com que letras maiúsculas sejam diferenciadas de letras minúsculas. E
como padrão todos os elementos incorporados de HTML foram colocados em caixa
baixa, segue demonstração:

112. Aninhamento rigoroso de tags
Quando criamos uma hierarquia de elementos de marcação, devemos respeitas
rigorosamente a ordem de fechamento. Isso garantira maior facilidade na leitura do
documento bem como atendera essa restrição, veja a seguir:
Fechamento de tags obrigatório
Em HTML é permitido omitir o fechamento de alguns elementos, como exemplo
podemos destacar as tags p> e li>, agora quando estamos falando de XHTML a
omissão do fechamento passa a ser proibido, conforme poderemos verificar a seguir:
Fechamento de tags obrigatório
Outra regra que se aplica a prática de fechamento de elementos, neste caso para
todos os elementos vazios deverão ter uma tag de fechamento ou então terminar
com />, vamos verificar com isso se dará neste próximo exemplo:

113. Sintaxe rigorosa de atributos
Atributos em caixa baixa
Assim como aprendemos que as tags são sensíveis a caixa, o que nos obriga a
escreve-los sempre em minúsculo podemos associar essa regra também para os
atributos. Obrigatoriamente todos os atributos deverão ser escritos em caixa baixa:
Valores dos atributos
Todos os valores definidos para os atributos deverão ser colocado entre aspas duplos
(““), isso porque são tratados como alfanumérico (string) independente se o valor
corresponder a uma informação numérica;
Atributos e Valores
Todos os atributos deverão obrigatoriamente ter valores, a seguir, uma lista de
atributos que de regra acabam sendo esquecidos com relação a esta regra:
TAGS
Quando pensamos em uma linguagem de marcação consideramos naturalmente a
necessidade de existir um padrão para que seja feito esta marcação. É fato que se
não houvesse este padrão seria improvável que o computador pudesse analisar e
interpretar o documento. As tags são exatamente esse padrão que permite que um
navegador possa interpretar como o documento está estruturado, o que é cabeçalho

114. o que é parágrafo e assim por diante. Tecnicamente definimos tags como palavras
chaves envolvidos pelos caracteres e >, como html>, para tags que são
representadas por um par a primeira é tratada como marcador inicial e a segunda
como marcador final. Tags que são representadas com um par são também
chamadas de tags de abertura e fechamento. Abaixo poderemos conferir essas
regras:
Tags de Abertura e Fechamento
Podemos perceber que as tags de abertura e fechamento são envolvidas pelos
caracteres ‘ ’ e ‘>’, sendo que no de fechamento foi acrescido o caractere `/` antes
da escrita do nome da tag. Observe abaixo a marcação em XHTML para um texto
pré-formatado:
Tags vazias
Algumas tags são chamada de vazias isso porque não marcam uma região do texto.
Observe abaixo a marcação em XHTML para que seja apresentado o parágrafo com
uma quebra de linha:
DOCUMENTO HTML
Documentos HTML descrevem exatamente as páginas Web, onde são naturalmente
escritos com textos planos decorados com tags HTML.
Elementos
Podemos considerar que tags e elementos HTML se referem às mesmas coisas. Mas
elementos HTML são rigorosamente tudo o que estiver entre a marca de início e fim
incluindo as tags;
Atributos
Os elementos HTML podem ter atributos que proporcional informações adicionais, por
regra eles sempre são definidos na tag de abertura. No exemplo a seguir vamos
alterar o valor do atributo style:
Outra regra existente é que a declaração sempre se dará por nome=”valor” conforme
visto no exemplo anterior. Neste caso o atributo style que permite configurar
declarações de estilos para um elemento HTML recebeu um nova configurações. Na
sequência vamos considerar este novo exemplo:
Observe que o elemento ancora HTML ( a>) que define um hiperlink, quando clicado
será interpretado pelo navegador com a ação de direcionar o usuário para o
documento "novo_documento.hml". A definição de qual será o endereço destino

115. deste hiperlink foi feito através do atributo href, assim como havíamos feito no
exemplo anterior também alteramos as configurações do atributo style. Através
deste exemplo podemos compreender que os elementos poderão ter vários atributos
configuráveis, alguns atributos existem para a maioria já outros são específicos para
alguns marcadores.
HTML
Definição de Tipos de Documentos
A definição de tipo de documento consistem em regas que definem claramente quais
as tags que podem ser usadas em um documento criado a partir de uma linguagem
de marcação. Estes documentos também conhecidos pelo acrônimo DTD já eram
utilizados para validação de documentos escritos a partir da linguagem SGML, vale
lembrar que ela foi utilizada para especificar as linguagens HTML e XML e por
consequência a linguagem XHTML.
O que é !DOCTYPE>?
Como vimos anteriormente os tipos de documentos (Document Type Definitions –
DTD) servem para verificar se um documento está corretamente escrito e assim
garantir que a sintaxe e a gramática da linguagem de marcação será respeitada. A
linguagem XHTML tornou obrigatório a definição do !DOCTYPE> que corresponde às
instruções para o navegador sobre qual a versão do HTML que a página foi escrita.
Isso se dá através da referência que é feita para um DTD no qual especifica as regras
da linguagem de marcação, dessa forma o navegador poderá processar corretamente
o conteúdo. Como poderemos ver em seguida o !DOCTYPE> não corresponde a
uma tag HTML.
TIPOS DE !DOCTYPE>
HTML 4.01 Strict
Este DTD contém todos os elementos e atributos, mas não inclui elementos de
apresentação ou descontinuados, framesets também não são permitidos.
HTML 4.01 Transitional
Este DTD contém todos os elementos e atributos, incluindo os elementos de
apresentação e descontinuados, framesets não são permitidos.
HTML 4.01 Frameset
Este DTD é igual ao HTML 4.01 Transitional, mas permite a utilização de conteúdos
em frameset.
XHTML 1.0 Strict
Este DTD contém todos os elementos e atributos, mas não inclui elementos de
apresentação ou descontinuados, framesets também não são permitidos. Todos os

116. marcadores deverão ser escritos conforme as regras definidas para um documento
XML bem formatado.
XHTML 1.0 Transitional
Este DTD contém todos os elementos e atributos, incluindo os elementos de
apresentação e descontinuados, framesets não são permitidos. Todos os marcadores
deverão ser escritos conforme as regras definidas para um documento XML bem
formatado.
XHTML 1.0 Frameset
Este DTD é igual ao XHTML 1.0 Transitional, mas permite a utilização de conteúdos
em frameset.
ENTENDENDO HTML
Estrutura
A linguagem HTML especifica três tags com o objetivo de estruturação do documento,
isso é porque não tem o propósito de afetar a aparência da página apenas para
delimitar a estrutura do documento. As tags no qual estamos nos referindo são
html>, head> e body>. Elas não são obrigatórias considerando a definição exata
de HTML, mas considerando XHTML elas passam a ser obrigatórias. As sessões
prólogo XML e !DOCTYPE> também não são obrigatórios.
Prólogo XML
Todo documento XML deve necessariamente iniciar com a seção de prólogo. Essa
seção corresponde a declaração informando que o documento é um XML, instruções
de processamento, declarações de esquema de validação. A seguir podemos conferir
a seção prólogo declarada na primeira linha do documento XML:
Esta seção é opcional, isso faz com que alguns navegadores não processem
adequadamente essa informação, causando em algumas situações erros na
visualização do documento. Por conta disso vamos adotar não vamos adotar como
padrão a inclusão desta seção. No final deste tópico vamos verificar como ficará a
estrutura básica de documento HTML e nesta ocasião vamos incluir esta seção apenas
para entendimento da estrutura.

117. Onde vai o !DOCTYPE>
Anteriormente aprendemos qual é o objetivo de utilizarmos o !DOCTYPE>, embora
não seja considerado uma tag, muito menos de estrutura, devemos sempre incluir
essa definição em nossos documentos, isso porque faz parte das recomendações do
XHTML 1.0. Isso se dará sempre após a definição do prólogo XML.
Tag html>
Essa é sem dúvida nossa primeira tag de estrutura, onde seu objetivo é indicar que
todo o conteúdo do documento está em HTML. Ela sempre deverá ser inserida após
a definição do !DOCTYPE>. Todo o conteúdo do documento deverá ser inserido
entre as tags de abertura e fechamento html>.
Tag head>
Esta tag tem por objetivo indicar o cabeçalho do documento, devemos compreender
sua finalidade como prólogo, visto que agrupa elementos contendo informações sobre
o documento, tais como título do documento, palavras-chaves, codificação de
caracteres, metadados e outras informações sobre o conteúdo do documento.
Tag body>
Esta tag tem por finalidade envolver todo o conteúdo referente ao documento web
Recapitulando a Estrutura
Essa estrutura apresentada tem apenas o objetivo de ser um esqueleto para os
nossos documentos, as sessões de prólogo XML e !DOCTYPE> são opcionais
conforme foi dito anteriormente. Já a tag head> é muito utilizada para anunciar
detalhes específico do documento. As tags html> e body> já possuem o seus
propósitos bem definidos, na sequência vamos analisar como seria esta estrutura
básica.
Vale relembrar que a seção de prólogo XML não será adotada mais nos exemplos.
COMENTÁRIOS
Em algumas situações podemos desejar incluir informações em nossos documentos,
mas sem a possibilidade disso ser visto pelo usuário quando o navegador processe-
os. Temos um recursos muito interessante com o objetivo de adicionar comentários
aos documentos HTML que serão descartados pelo navegador. Para isso deveremos
fazer conforme o exemplo abaixo:
Conforme foi falado todo o comentário é descartado pelo navegador, a exemplo a
seguir possui um grande comentário inserido no corpo do documento e conforme a
imagem do documento processado é possível perceber que realmente o comentário
foi descartado.

118. Abaixo podemos verificar como o comentário foi despresado pelo navegador.
Vamos adotar em vários exemplos comentário diretamente no código, isso para
facilitar a compreensão do código HTML visto que o comentário é contextualizado.
Veja abaixo uma prévia disso:
TÍTULO DO DOCUMENTO

119. A tag title> deverá ser utilizada para indicar o assunto do documento web, as
funcionalidades relacionadas ao título podemos destacar que:
 Aparece na barra de título dos navegadores
 Utilizado por programas para catalogar
 Entrada de favoritos ou lista de preferências
As tags de título somente poderão ser utilizadas dentro da tag head>, sendo que
ela poderá ser definidas apenas uma vez e seu conteúdo poderá ser apenas texto,
conforme o exemplo:
Documento processado pelo navegador:
Dica
Você deve buscar criar títulos que possam realmente identificar o conteúdo das
páginas web sem esquecer de mantê-los curtos. Se considerarmos a ação do usuário
quando ele pesquisa dentro do histórico de navegação ao até mesmo nos favoritos,
esse processo se dará na perspectiva de que o usuário não recorda exatamente o
título, mas tem um lembrança do que se tratava o documento. Além do que muitos
mecanismos de pesquisas indexam as páginas e as disponibilizam como resultados

120. de pesquisas através de seus títulos. Mais um motivo para buscar nomes que
identifiquem de uma forma sucinta o conteúdo da página web.
CABEÇALHOS DO DOCUMENTO
Quando estamos escrevendo documentos em algum editor de texto possivelmente
utilizamos os cabeçalhos para dividir e organizar as sessões de texto. Não poderia
ser diferente o fato de qual o HTML define seis níveis de cabeçalhos, sendo que todos
são definidos pelo padrão abaixo:
Perceba que o padrão {Nível} corresponde ao nível desejado, que neste caso são
representados pelos valores que vão de 1 a 6. Podemos ver na sequencia uma
estrutura de documento utilizando todos os níveis possíveis:
Veja como o exemplo foi processado pelo navegador:
Devemos utilizar os cabeçalhos realmente para estruturar nossa informação, o
objetivo não deve ser o destaque visual visto que podemos mudar a qualquer

121. momento a forma que isso será processado visualmente. Devemos utilizarrealmente
para seccionar nosso documento criando um conceito de hierarquia de dados.
Algumas ferramentas de pesquisa podem indexar os cabeçalhos pois consideram que
são pontos importantes dos documentos web.
PARÁGRAFOS
Quando desejamos inserir texto no documento podemos utilizar a tag p> para
marca-los, isso é convenientemente importante pois facilitará a formatação visual de
nossos documentos. Lembre-se de que quando utilizamos o HTML estamos
estruturando nossos documentos dessa forma devemos representar adequadamente
cada parte. Vamos verificar abaixo como a utilização adequada de elementos
parágrafos em nossos documentos HTML:
TRABALHANDO COM LISTAS

122. Listas são importantes recursos na estruturação de documentos HTML, vamos na
sequencia conhecer vários tipos sendo que podemos destacar os seguintes tipos
indicado para uma certa ocasião:
 Listas Enumeradas
 Listas com Marcadores
 Listas de Glossários
Existe algumas características comuns a todos os tipos de listas, nos itens destacados
abaixo vamos apresentar essas características:
 Todas as listas deverá ser envolvida corretamente pelas tags de abertura e
fechamento correspondente ao tipo desejado, exemplo ul> e /ul> ou ol>
e /ol>
 Os itens das listas devem ser marcados adequadamente com as tags próprias,
isso porque todo tipo de lista possui um marcador próprio para os itens
Listas Ordenadas
Quando desejamos criar listas que sejam enumeradas quando processadas podemos
utilizar a tag ol> (abreviação de Ordered Lista, em português Lista Ordenada). Não
devemos nos preocupar em enumerar os itens isso será feito automaticamente
quando o navegador processar. Lembre-se que estamos estruturando o documento
e seus dados, a enumeração naturalmente deveria ser responsabilidade de quem vai
processar. Esse tipo de lista é muito utilizado quando queremos criar a ideia de
passos, nada mais natural do que enumera-los. Vamos verificar no exemplo abaixo
uma utilização possível para esse tipo de lista:

123. Veja na sequencia como essa página foi processada pelo navegado:
Lista Não Ordenadas
Esse tipo de lista que naturalmente não recebem nenhum tipo de ordenação, são
comumente utilizadas para destacar pontos importantes relacionados ao que se está
sendo discutido, vamos verificar abaixo algumas dicas de preparação para o
vestibular:

124. Vejamos como o navegador processou a nossa lista não ordenada:

125. Lista de Glossário
Diferentemente das duas listas que verificamos anteriormente, a lista de glossário
também é formada por itens, só que eles são definidos em duas propriedades, termo
e definição de termo. Para cada item é disponibilizado a estrutura do termo através
da tag <dt> (Definition Term ou Termo de Definição) e também a tag <dd>
(Definition Definition ou Definição definição). Vamos verificar o próximo exemplo que
poderá ajudar a entender como devemos incorporar esse elemento em nossos
documentos:
Veja como isso foi processado:

126. Lista dentro de lista, é possível?
É muito comum situações onde precisamos colocar listas dentro de listas, e
felizmente isso é totalmente suportado tanto pelo HTML quanto pelo navegadores
atuais. Vale destacas que a incorporação de uma lista se dá exatamente em um
elemento item da lista, veja a seguir:

127. Segue a visualização no navegador:

128. LINKS
Antes de estudarmos sobre este importante recurso chamado link vamos entender o
conceito que temos por trás do termo hipertexto. Quando falamos sobre linguagem
de marcação de hipertexto entendemos claramente o sentido de linguagem de
marcação pois já temos visto vários elementos com objetivos reais de marcar por
exemplo o título, cabeçalho e até mesmo um parágrafo. O sentido por trás da palavra
hipertexto é que os documentos HTML não são estruturados para serem lidos
linearmente (página após página) assim como temos os livros impressos, ao invés
dessa estrutura rígida os documentos podem facilmente ir de um ponto para outro,
proporcionando as possibilidades de voltar avançar. Essa dinâmica na leitura é o que
caracteriza o nosso HTML como hipertexto. Uma das maneiras que temos para
proporcionarmos essa dinâmica em nossos documentos é através do uso de links.
Para criar um link devemos ter em mesmo o nome do documento no qual desejamos
permitir a navegação e um texto que servirá como “ponto de atenção”, isso porque
apenas este texto é que será apresentado pelo navegador. Podemos ainda
acrescentar que hiperlink (ou link) é uma palavra, grupo de palavra, ou imagem que
pode ser clicado e o navegador será direcionado a apresentar um novo documento
ou até mesmo uma nova seção no documento corrente.
Tag a>

129. Esta tag tem o significado de ancora, isso porque cria a ideia de que um documento
está ancorado (amarrado) a outro documento. Quando desejamos criar um link para
um outro documento devemos adotar a seguinte sintaxe:
Podemos perceber que o referência ao outro documento é feita através do atributo
href, para facilitar a associação podemos compreender que o caractere ‘h’ tem o
sentido de hipertexto já a palavra “ref” seria o sentido de referência. Existe outros
atributos naturalmente para este elemento, vamos demonstrar no exemplo o uso do
atributo “title” que pode ser utilizado para auxiliar o usuário isso porque é
apresentado uma dica quando o usuário posiciona ou mouse sobre o link, na
sequencia vamos entender como podemos fazer links entre documentos.
VINCULANDO PÁGINAS
Neste exemplo vamos demonstrar como ao recurso de link passa a ser um importante
instrumento para criamos essa dinâmica que é tão natural a web. Inicialmente vamos
entender como estão acomodados fisicamente os nosso documentos, abaixo temos
uma imagem dessa estrutura física:
Podemos observar na estrutura física que os documentos “dia-anterior-
vestibular.html” e “prep.vestibular.html” estão armazenados dentro da subpasta
“dicas”, vamos agora observar o conteúdo dos documentos, foque principalmente os
detalhes sobre os links (tag a>):
· Documento: dicas-vestivular.html

130. Processado pelo Navegador
· Documento: unopar-historia.html

131. Processado pelo Navegador

132. · Documento: dicasdia-anterior-vestibular.html
Processado pelo Navegador

133. · Documento: dicasprep-vestibular.html
Processado pelo Navegador

134. Compreendendo o Fluxo
O exemplo demonstra quatro documentos com vínculos entre si, o documento “dicas-
vestibular.html” tem por objetivo apresentardicas sobre o vestibular. Para criar uma
organização nas informações foi optado por colocar as dicas em documentos distintos
que neste caso são os documentos “dia-anterior-vestibular.html” e “prep-
vestibular.html”. Veja que a utilização do links permite ao usuário navegar
diretamente para o conteúdo desejado. O documento “unopar-historia.html” que
também está acessível através do documento “dicas-vestibular.html” foi criado
apenas para colocar um outro conteúdo sem ser necessariamente uma dica de
vestibular. Essa organização de ideia e também de documentos foi refletida ainda na
estruturação física dos documentos, todos os documentos foram colocados em um
subdiretório chamado “dicas”. Isso trouxe à tona os conceitos de endereço relativo e
absoluto que será abordado tecnicamente na próxima seção.
ENDEREÇOS RELATIVOS VS ABSOLUTOS
Endereços Relativos
Quando pensamos em endereços relativos de documentos devemos entender que
estamos apontando para documentos baseados na localização física do documento
no qual está recebendo link. Devemos considerar os nomes dos diretórios ou então
para que haja uma mudança de níveis de diretórios, sendo totalmente flexível a nossa
necessidade. Quando estamos criando esses endereços ou caminhos relativos, o
estilo utilizado para isso se baseia no sistema operacional UNIX, independentemente
do sistema operacional que está sendo utilizadopara criação dos documentos e links.
Este estilo considera a separação entre nomes de diretórios e o arquivo utilizando o
caractere barra “/”, quando queremos indicar um nível acima do diretório atual
devemos utilizar os dois pontos “..”. Vamos avaliar na sequencia algumas
possibilidades através de exemplos de criação de endereços relativos a uma página
fictícia “conteudo1.html”:

135. Endereços Absolutos
Os endereços absolutos apontam para arquivos que se baseiam em sua localização
absoluta, isto é os endereços são definidos de forma completa considerando o mais
alto nível da hierarquia, para isso os endereços devem começar com o caractere
barra “/”. Para entendero que consiste o termo “mais alto nível da hierarquia” é mais
fácil quando conhecemos alguns conceitos de tecnologia que seja executada do lado
do servidor (server-side), isso porque quando falamos de nível mais alto estamos
considerando que existe um contexto hierárquico. Como foge o objetivo desta
disciplina vamos contextualizar, imagine que a nossa página web esteja hospedada
no endereço fictíciohttp://www.ead-pos-web.com.br/, vamos avaliar alguns
endereços absolutos:
Quando Utilizar
A ideia de utilizarendereços relativos deve sempre levar em consideração algum tipo
de relação forte entre os documentos e seus conteúdos, vamos imaginar a
possibilidade de algum documento ser movido de diretório o que acarretaria também
nas mudanças dos demais documentos relacionados, não sendo um problema na
perspectiva de que existe uma forte relação entre os conteúdos. Quando não há essa
relação forte entre os conteúdos, apenas uma forma de navegação entre eles
deveremos utilizar endereços absolutos para simplificar a criação dos próprios
endereços, isto porque todos partirão do mais ato nível hierárquico.
LINKS PARA SESSÕES DE DOCUMENTO

136. Podemos utilizar links para permitir que o fluxo (navegação) não seja apenas entre
documentos, mas também podemos indicar sessões específicas promovendo uma
navegação mais refinada. Para que isso seja possível devemos criar ancoras em
nossos documentos, esse recurso tem por objetivo marcar lugares específicos para o
qual poderá ser direcionado a qualquer momento, basta configurar adequadamente
um link. As ancoras também são criadas através da tag a>, só que ao invés de
configurarmos o atributo href vamos configurar o atributo id que servirá para
identificar a ancora, abaixo vamos verificar como seria a sintaxe:
As ancoras são muito utilizadas para permitir uma navegação entre os conteúdos do
próprio documento, neste caso quando desejarmos criar links para as ancoras vamos
adotar a sintaxe destacada abaixo:
Agora vamos imagina a situação onde desejamos a partir de um documento
(documento 1) criar um link para um outro documento (documento 2), mas
direcionar a navegação para um seção em específica. Naturalmente após a devida
configuração da ancora no documento 2 poderíamos partir para criar um link no
documento 1, abaixo poderemos verificar como construímos links para outros
documentos indicando uma determinada seção:
NAVEGAÇÃO EFICIENTE
As páginas da web suportam naturalmente recursos de navegação, através da criação
de links e ancoras podemos criar uma boa dinâmica no processo de leitura das
informações. Vamos ver no próximo exemplo como a navegação utilizando ancora
pode facilitar o acesso a pontos específicos de nossos documentos.

138. Baixo podemos verificar com ela foi processada pelo navegador:
TABELAS
Quando desejamos apresentar dados em uma organização tabular (linhas x colunas)
podemos utilizar o recurso de tabela que foi introduzido inicialmente como o HTML
2.0. Essa informação será apresentada visualmente como se fosse uma grade onde
os dados serão dispostos em suas respectivas células. Vamos abaixo analisar quais
estruturas compõem um tabela:
 Título: indica qual é natureza das informações contidas na tabela
 Cabeçalhos: são informações que definem a natureza das informações contidas
especificamente em uma coluna ou linha
 Células: elemento originado da relação linha x coluna, comumente podemos
ter títulos de colunas, linhas ou dados comuns
 Dados: correspondem exatamente a informação que se deseja apresentar, não
podemos esquecer que os cabeçalhos também são informações inerentes à
tabela
A tag table>
Para incluir uma tabela em um documento devemos utilizar o elemento table,
diferentemente de vários elementos que vimos até o momento a construção de uma
tabela depende de uma estrutura mais complexa, devemos compreender que a
tag table vai envolver todo os outros elementos que farão parte dessa estrutura
maior. Abaixo vamos verificar um exemplo dessa estrutura tabela, na sequencia
vamos discutir os detalhes:

139. Vamos entender de acordo com a estrutura do exemplo, foi adicionado o
atributo border para permitir uma melhor visualização dessa estrutura tabular pois
isso fará com que o navegador considere 1 pixel de borda para as estruturas da
tabela.
Tag caption>
Representa o título da tabela.
Tag tr>
Este elemento define uma linha dentro da tabela HTML. Para cada elemento tr> é
natural que existe um ou muitos elementos td> ou th>
Tag th>
É utilizado para criar uma célula cabeçalho, no exemplo como utilizamos a primeira
linha para rotular as colunas que podemos entender também como um cabeçalho da
colunas então utilizamos esta tag. Por padrão o texto colocado dentro de um
elemento th> é processado de forma centralizada e também em negrito.
Tag td>
Utilizado para definir células de dados (padrão) dentro da tabela HTML. Por padrão
essas celular são apresentadas com o texto a esquerda.
Incrementando a Tabela

140. Vamos agora verificar alguns outros elementos que podem ser utilizados na
construção de nossas tabelas. Veja inicialmente o exemplo anterior com algumas
alterações, na sequencia vamos discuti-las:
Tag thead>
Usamos essa tag para agrupar os conteúdos de cabeçalhos em tabelas HTML. Isso
pode ser útil por exemplo para tabelas com grande volume de dados quando impresso
os navegadores podem garantir que este grupo seja reimpresso, facilitando a leitura
dos dados impressos.
Tag tbody>
Utilizamos essa tag para agrupar os dados referentes ao corpo da tabela.
Tag tfoot>
Utilizamos essa tag para agrupas os conteúdos referentes ao rodapé em tabelas
HTML. Valendo-se da mesma característica que a tag thead, podemos tirar

141. vantagens em impressões de grandes volumes de dados pois em quebras de páginas
as sessões thead e tfoot serão reimpressas.
Atributos Colspan e Rowspan
Quando desejamos que uma célula ocupe mais de uma linha ou coluna podemos
utilizar respectivamente os atributos colspan e rowspan. Isso cria o efeito de
mesclar células, muito útil para formatação dos dados em estruturas
tabulares. Podemos verificar no exemplo anterior que a célula correspondente ao
rodapé ocupou o espaço de três colunas. Abaixo podemos verificar como a tabela foi
processada pelo navegador:
TRABALHANDO COM FORMULÁRIOS
Formulários são utilizados para permitir que dados sejam coletados dos usuários.
Quase todas as páginas web dispõem de alguma forma de interação, seja através de
um “Fale Conosco” ou em muitos casos através de um cadastro. O recursos em HTML
que promove esse tipo de interação se chama “Formulários HTML”. Na sequência
vamos navegar pelos elementos que poderemos utilizar em nossas construções. O
que não pode ser esquecido que quando projetamos um formulário indicamos qual
será o agente de software que processará as interações, em outras palavras devemos
desenvolver elementos de software capazes de receber os dados enviados pelo
usuário e comumente armazenar em uma base dedados. Isso com certeza poderia
ser codificado com alguma linguagem de rode em servidores Web, a exemplos
podemos pensarem PHP, ASP.NET, Java, Python e etc.
Projeto Exemplo
Durante o transcorrer de vários conteúdos que nos trouxeram até este ponto,
adotamos a prática de construir exemplos completos para simplificaro entendimento

142. e melhorar a didática. Vamos no decorrer desta seção “Trabalhando com Formulários”
desenvolver um pagina onde será possível efetuar um cadastro de frota. Conforme
nosso estudo de caso da locadora de veículos “Locadora Alunos UNOPAR” será
necessário construirmos módulos com o propósito de gerir os dados da frota, vamos
inicialmente construirmos o requisito “Cadastrar Novo Veículo”. Vale destacar que
vamos inicialmente construir a estrutura requerida do lado do cliente, já a estrutura
do lado do servidor vamos omitir por não ser o objetivo desta disciplina, mas você
poderá construir considerando o aprendizado nas demais disciplinas. Vamos em
frente!
Controles de Interação
Para permitir essa interação dispomos de vários controles com suas respectivas
funções, temos desde botões que naturalmente são utilizado para iniciar um ação
quanto controles de checagem. Vamos a partir deste ponto apresenta-los e discutir
como poderemos incorporá-los em nossos formulários. Vamos começar pelo principal
elemento HTML pois é responsável por vários detalhes que circundam essa técnica,
eu estou falando do elemento form.
Tag form>
Utilizamos esse elemento como container dos demais controles do formulário.
Devemos compreende-lo como o elemento responsável por receber as configurações
relacionadas ao formulário e naturalmente todos os controles serão aninhados a este,
em outras palavras este elemento vai envolver todos os demais elementos que
corresponderão ao controles do formulário HTML.
Vamos entender os principais elementos e atributos através do atributos através do
exemplo abaixo:
Maiores detalhes sobre o atributo method serão discutidos na seção “Entendendo
GET/POST”, vamos continuar nossa jornada pelos elementos de dados para
formulários HTML.
Tag input>

143. Este elemento pode ser utilizado para captar vários tipos de dados, isto porque pode
ser configurado através do atributo type, abaixo vamos verificar quais tipos e
controles gerados:
Tag button>
Podemos criar botões de ação através do elemento input conforme verificamos
anteriormente, só que eles (input) são elemento vazios o que implica que não podem
receber conteúdo. Já os elementos button possuem essa versatilidade, conforme
podemos conferir na sequência. O que devemos antes destacar é a existência dos
atributo type que atualmente suportam os valores listados abaixo:
Abaixo é possível verificar uma marcação muito frequente com este elemento:
Tag select>
Podemos utilizar este elemento para criar menu de escolher, em conjunto temos
também às tags option> e optgroup>. Abaixo podemos verificar como essa
marcação será feita e como o navegador a processará:
Sem Utilização de Grupos

144. Processado pelo navegado:
Utilizando Grupos
Processado pelo navegador:
Tag textarea>
Podemos utilizar esse elemento para permitir entrada de dados do tipo texto, mas
com múltiplas linhas. Vamos ao exemplo:
Vamos verificar como o navegado processou:

145. Tags label>, fieldset> e legend>
Vamos agrupar neste tópico alguns elementos que não são responsáveis por entrada
de dados, vamos começar pelo elemento label que deve ser utilizado quando
desejamos rotular uma entrada de dados. Já o elemento fieldset permite que
entradas de dados sejam agrupadas visualmente, permitindo assim distinguirgrupos
de informações em um formulário. O elemento legend tem exatamente a função de
definir o rótulo para um grupo de campos. Vamos analisar o exemplo abaixo:

146. Que foi processado assim:
As áreas destacadas em vermelho corresponde ao conteúdo dos elementos legend já
as áreas destacadas em verde corresponde aos elementos fieldset, já os
elementos label foram utilizados para associar um texto às entradas de dados, visto
que antes estávamos utilizando a tag p> para isso.
ENTENDO GET/POST
Quando utilizamos formulários HTML podemos configuramos para que os dados
sejam transmitidos aos elementos de software hospedados em servidores Web, isso
pois exige a necessidade de um agente de software capaz de processar os dados e
dar um devido fim para isso. Dispomos de dois métodos configurados no HTML que
são GET e POST, para entendermos suas diferenças vamos inicialmente entender os
métodos individualmente.
O método GET adiciona todos os dados coletados do formulário para a URL através
do padrão chave/valor. Este método é muito útil quando desejamos que os resultado
possa ser adicionado ao bookmark do usuário. Existe uma limitação por conta da
quantidade de caracteres suportados em um URL, isso varia de acordo com o
navegador. Essa limitação pode gerar problemas inesperados, pois as informações
podem ser truncadas. Existe uma limitação com relação a segurança, pois como os
dados são trafegados através da URL e isso está visível ao usuário através do
navegador, informações como senha ou informações que não podem ser expostas ao
usuário não estarão seguras.
Já o método POST garante que os dados coletados do formulário sejam transmitidos
no corpos da requisição, e isso não é visível ao usuário. Esse tipo de método não
permitir que seja criado um bookmark pelo usuário, pois não influência na
composição da URL. Podemos concluir que este método é mais robusto e seguro que
o método GET, pois não expõe os dados e também por não haver limitações do
tamanho dos dados.
Como funciona
Vamos avaliar um formulário de acesso ao nosso sistema, para isso deverá ser
informar o usuário e a senha. Vamos neste exemplo desconsiderar os detalhes dos
elementos contidos no formulário, pois serão discutidos mais a frente. Vamos apenas
nos atentar aos detalhes do funcionamento considerando os métodos GET e POST.
Vamos ao exemplo:

147. Vamos considerar que neste primeiro teste o método configurado seja GET, abaixo
poderemos verificar como a página foi processada pelo navegador:
Vamos efetuar a tentativa de autenticar, isso por lógica não funcionará pois não
construímos o agente de software no servidor intitulado de login.ashx, mas
podemos perceber que o navegador processara o click do botão “Entrar” e haverá o
redirecionamento para a seguinte URL, desconsidere o endereço do servidor web que
processaria esta requisição para fins de entendimento:
http:// /login.ashx?usuario=usuario1&senha=123
Podemos perceber que todos as informações foram transmitidas através da
composição da URL, o que é péssimo, pois até a senha que foi digitada está visível,
vamos verificar como isso apareceria no navegador:

148. Vamos neste ponto alterar o método do formulário para POST,
Não conseguiremos verificar os dados transmitidos, apenas caso capturássemos os
pacotes de dados trafegados, mas isso estálonge de nosso objetivo. Apenas devemos
perceber que os dados não estavam visíveis quando solicitamos para “Entrar”, veja
através da imagem abaixo:
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEB AULA 1
Unidade 2 – CSS e JavaScript
TRABALHANDO COM CSS
Você pode ter percebido que não discutimos exatamente nada sobre detalhes de
apresentação, visto que reforçamos a ideia que HTML é uma linguagem de marcação
e não deve em hipótese alguma ser utilizado com o propósito de apresentação.

149. Quando estamos interessado em formatar, ajustar, interferir na forma como nossos
documentos são apresentados (processado) devemos utilizadoa tecnologia CSS, que
tem grandes propriedade para tal feito.
Mas o que é CSS
O termo CSS é uma abreviação de Cascading Style Sheet, que traduzimos folha de
estilo em cascata. Segundo a W3C a definição de CSS é
“Folha de estilo em cascata é m mecanismo simples para adicionar estilos (por exemplo: fontes, cores,
espaçamentos) aos documentos web.”
Como Escrever
Para que você entenda a sintaxe do CSS, vamos destacarcomo escrevemos as regras
de apresentação.
Vamos entender os elementos que compões as regras de sintaxe de CSS:
 Regra CSS: As regras são constituídas de um seletor e o bloco de configuração
o Seletor: Quando construímos uma regra não fazemos de forma individual
por elemento de nosso documento, criamos na verdade um modelo que
será aplicado a todos os elementos no qual sejam enquadrados através
do seletor
o Configuração: Definimos como os elementos serão afetados com relação
a sua apresentação
 Propriedade: característica que será configurada
 Valor: valor que será atribuído a propriedade configurada
A seção de configuração pode conter mais de uma propriedade configurada,
flexibilizando as regras.
Em Funcionamento
Vamos avaliaralguns exemplos e na medida que forem apresentados novos conceitos
serão discutidos. Vamos configurar para que os elementos parágrafos sejam
estilizados conforme a próxima configuração:
Podemos perceber que ao fim de cada configuração devemos finalizar com o ponto-
e-vírgula. Para as propriedade que desejarmos atribuir um valor formado por palavra
composta deveremos escrevê-los entres aspas duplas (“ “), ou então utilizando aspas
simples (‘ ‘). Vamos a uma situação muito comum:

150. Vamos a mais algumas regras:
 Não é sensível a caixa: minúsculo ou maiúsculo é indiferente
 Espaços: os espaços serão descartados
Comentário?
Podemos utilizar comentários em nossos arquivos com propósitos variados, apenas
uma sintaxe é suportada. Comentários são criados a partir de blocos de textos
inseridos entre os símbolos /* e */, veja como podemos utilizar através dos
exemplos:
Agrupamento de seletores
Quando desejamos aplicaruma mesma regra a mais de um seletora seguinte sintaxe
é suportada e muito útil:
Seletores de Classes
Podemos considerar seletores criados a para tags específicas de HTML, uma outro
alternativa muito poderosa e a possibilidade de criar seletores de classe, que neste
caso podem também ser aplicadas a maioria de elementos HTML. Para criarmos esses
seletores devemos acrescentar o sinal de ponto antes do nome da classe. Podemos
ainda colocar antes deste ponto a tag no qual essa classes se aplica, vejamos os
exemplos:

151. Vamos agora verificar como poderíamos configurar o nosso html para ser selecionado
por estes seletores. Na sequência podemos verificar dois parágrafos configurados
para utilizar duas classes distintas:
A utilização de seletores de classes permite que elementos do mesmo tipo possam
ter apresentações diferenciadas. Podemos ainda configurar para um mesmo
elemento mais de uma classe, para isso apenas é necessário colocar um espaço entre
os nomes das classes, veja a seguir:
Seletor de Identificadores
Podemos ainda criar seletores especificando diretamente o identificador do elemento
HTML, como regra devemos entender que:
 O identificador deverá ser aplicado apenas a um elemento HTML através da
propriedade id
 Caso especificidade de um seletor de identificador é maior que o seletor de classe.
Para construirmos seletores de identificador deveremos utilizar o sustenido (#)
antecedendo o nome do seletor que no caso deverá ser necessariamente o
identificador do elemento. Assim como nos seletores de classe podemos anteceder
com o tipo da tag. Vamos analisando o exemplo a seguir:

152. Vinculando folhas de estilos a documentos HTML
Estamos vendo detalhes de como definir a apresentação de nossos documentos
através de CSS, mas ainda não verificamos como se dá a relação entre arquivos CSS
e documentos HTML. Vamos na sequencia mergulhar nos detalhes de como faremos
isso, já vou adiantando, são várias maneiras com seus prós e contras.
Estilo inline
Podemos definir a forma como um elemento deverá ser apresentado diretamente no
próprio elemento através da propriedade style. Vamos ao exemplo:
Com certeza essa não é uma boa abordagem, isso pelos fatos de que nós estamos
dificultando as futuras manutenções por estarmos misturando linguagem de
marcação e configurações de apresentação. Outro ponto de desvantagem é que
perdemos o controle centralizado sobre a forma de apresentação de um documento,
quando desejarmos alterar deveremos alterar possivelmente em muitos pontos.
Estilos Incorporados
Podemos construir as definições das regras CSS diretamente no documento HTML
conforme o exemplo:

153. Diante do estilo inline essa forma apresenta vantagens pois conseguimos centralizar
os estilos em um ponto do documento, isso para todos os tipos de seletores. Mas
existe uma desvantagem quando as mesmas regras serão aplicadas a mais de um
documento, neste caso deveremos copiar e naturalmente duplicar os pontos de
manutenção.
Estilos Externos
Colocar as regras de CSS em arquivos externos ao documento HTML sem dúvida é a
melhor estratégia para trabalhar com folha de estilo. Toda a capacidade de construir
e reutilizar, de alterar e afetar, isso tudo são características originadas do conceito
de folha de estilo. Para essa incorporação existem duas maneiras, segue;
- Folhas de estilos linkadas
Para incorporara uma folha de estilo externa podemos criar um elemento link
apontando para o arquivo em questão, vamos ao exemplo:
Podemos perceber que o atributo href é quem determina o caminho para o arquivo
de folha de estilo. Neste caso temos um caminha relativo.
- Folhas de estilos importadas
Podemos ainda importa-las, isso se dá através da seguinte sintaxe:
Conclusões
Devemos compreender que o uso correto de folhas de estilos considerando boas
práticas, a exemplo já podemos destacar a utilização de folhas externas. Isso com
certeza permitirá um controlo muito eficiente sobre a apresentação de documentos,
visto que podemos efetuar modificações em apenas um ou alguns documentos
dependendo de nossas organizações, e conseguirmos afetar aplicações web
compostas por algumas dezenas de milhares de páginas. Isso é algo impressionante
e para alguns casos fundamental.
JAVASCRIPT
Introdução
Podemos afirmar que JavaScript é uma das mais populares linguagens de script
existente atualmente, utilizada como padrão em aplicações web, mas com
possibilidade de desenvolver aplicações desktop, aplicações para dispositivos moveis

154. e até mesmo servidores web. Quando dizemos que JavaScript é uma linguagem de
script devemos compreender que:
 Linguagem de script tem por objetivo ser uma linguagem de programação leve
com suporte a criação de scripts
 Já os scripts são linhas de código que podem ser interpretados e executados
por demanda, dispensando a necessidade dos passos de compilação explicita e
linkedição.
Pra que JavaScript?
Quando construímos documentos HTML nosso foco sempre será a marcação
garantindo a semântica, por outro lado quando desejamos estilizar devemos optar
pelas folhas de estilos em cascata. E quando desejamos criar algum nível de
interatividade entre o documento e nosso usuário, isso fica sobe a responsabilidade
da linguagem de programação JavaScript. Vamos avaliar algumas possibilidades do
que podemos fazer com JavaScript:
 Manipulação de HTML: podemos manipular quaisquer elementos de nosso
documentos, podendo executar operações como adicionar, alterar ou excluir
elementos
 Manipulação de CSS: podemos alterar as configurações de apresentação de
quaisquer elementos
 Validação de Dados: em muitas situações devemos verificara consistências dos
dados fornecidos pelos usuários, e isso pode ser feito naturalmente com
JavaScript
 Armazenamento de Dados: podemos utilizarainda para recuperar e armazenar
informações do computador do visitante
 Reação a Eventos: podemos configurar ações para serem executadas quando
algumas coisas acontecem, criando uma real interatividade
Padronização do JavaScript
A linguagem JavaScript e seus propósitos iniciais foram definidos e criados por
Brendan Eich da Netscape, e inicialmente foi suportado pelo lendário navegador
Netscape em 1995. Essa linguagem foi chamada inicialmente de Mocha, então
LiveScript e por fim JavaScript.
A linguagem JavaScript foi adotada como padrão pela associação da indústria de
padronização em 1997. Este padrão chamado de ECMAScript-262 foi aprovado como
um padrão ISSO internacional em 1998, o seu processo de desenvolvimento continua
em nos dias atuais. Devemos compreender com isso que JavaScript corresponde ao
padrão ECMAScript.
TRABALHANDO COM JAVASCRIPT
Vamos no decorrer desta seção discutir vários conceitos e na medida que formos
apresentando iremos exemplificar através de exemplos reais. Vamos em um primeiro
momento entender alguns detalhes sobre a estrutura básica da linguagem, como ela
é organizada e na sequencia vamos abordar detalhes e recursos da API (Application
Program Interface) JavaScript.
Estrutura básica

155. JavaScript é uma linguagem orientada a objeto, quando acessamos os elementos da
página devemos compreender que este isso se dará de acordo com a hierarquia de
elementos já conhecidas no HTML. Dentro desta hierarquia, todos os elementos da
página estão contidos dentro de um container de objetos chamado window. Dentro
deste (window) existem outros containers menores com o propósitos distintos,
vamos destacar alguns objetos:
 location: este objeto disponibiliza informações sobre localização do
documento na web, podemos acessar informações como protocolo, nome do
domínio, path (caminho) e porta
 history: este objeto disponibiliza informações sobre os sites que foram
visitados durante a seção atual, permitindo também o acesso à funções
internar para alteração do conteúdo da janela atual
 document: Todos os objetos hierárquicos condizentes a estrutura do
documento ( html> head>.. /head> body> /body> /html>) podem ser
acessados através dele (document)
Propriedades e Métodos
Não vamos nos aprofundas nas técnicas de desenvolvimento orientado a objeto com
JavaScript, mas mesmo assim devemos compreender estes dois recursos. As
propriedades de um objetos são considerados tecnicamente como atributos, que tem
o objetivo de representar através de um valor uma característica do objeto. Abaixo
temos uma lista de propriedades como exemplos:
 document.title: título definido ao documento
 window.width: comprimento da janela
Já os métodos podemos compreender tecnicamente como comportamentos dos
objetos, vamos avaliar abaixo uma lista de métodos como exemplos:
 documento.write("Texto adicionado ao documento");
 window.alert("Mensagem de Alerta")
Variáveis
Como em álgebra as variáveis em JavaScript são utilizadas para armazenar valores
ou expressões, como são estruturas armazenadas na memória recebem um
identificador para serem manipuladas através da programação. Devemos
compreender algumas regras nas definições das variáveis:
 Os nomes são sensíveis a caixa (idade é diferente de IDADE ou até mesmo de
Idade)
 Todos os nomes devem necessariamente começar com uma letra, ou então o
caractere $, ou então o caractere sublinhado.
Declaramos variáveis utilizando a palavra reservada var. Isso cria uma variáveis com
o identificadorque fornecermos, ela estará vazia e então poderemos atribuir um valor
utilizando o símbolo de igual (=).
Podemos ainda optar por associarum valor diretamente na sua declaração, exemplo:

156. Tipos de Dados
Atualmente dispomos apenas de três tipos de dados, string, numérico e booleano.
 String: quando desejamos trabalhar com dados do tipo literal, devemos
colocar a sequência de caracteres entre aspas duplo (" ")
 Booleano: esse tipo de dados possui apenas dois valores possíveis, true e
false.
 Numérico: quando os dados são do tipo numérico inteiro ou com ponto
flutuante.
OPERADORES E EXPRESSÕES
Assim como fizemos a referência a álgebra quando discutimos variáveis você pode
estar se questionando sobre os operadores aritméticos, fundamentais para
instruirmos o computador para efetuarem cálculos e operarem os valores
armazenados nas variáveis, abaixo podemos avaliar uma série de operadores:
Operador de Atribuição
Quando desejamos alterar o valor de uma variável devemos utilizar o comando de
atribuição (=), podemos ver até aqui vários exemplos que já fazem uso deste
importante operador, segue mais um exemplo.
Comentários
Como vimos em HTML podemos querer colocar conteúdos em nossos scripts, mas
com propósitos de informar ou até mesmo ajudar a interpretação de um algoritmos.
Para isso JavaScript dispõe de duas formas, comentário de linha que é iniciado pela
sequência do caractere barra (/), já comentário de blocos são iniciados por /* e
finalizados por */. Abaixo podemos verificar como devemos fazer:

157. Caixa de Diálogos
Caixa de diálogos são janelas no qual podemos utilizar com o propósito de interagir
com o usuário, seja através de um alerta ou solicitando uma informação. Dispomos
de forma nativa de três tipos de caixas, sendo elas:
 Alerta: permite criar uma caixa de diálogo com o propósito de alertar o usuário
de algo;
 Confirmação: permite interagir com o usuário com o propósito de confirmar
algo
 Solicitação: permite interagir com o usuário para solicitar uma informação
No código descrito abaixo existem vários conceitos que vamos discutir na sequência,
mas já podemos ver em ação a caixa de diálogo para alertas.
Quando desejamos solicitar uma confirmação ao nosso usuário podemos fazer uma
construção parecida com o exemplo abaixo:

158. Para concluirmos vamos analisar o exemplo a seguir que demonstra com podemos
utilizar a caixa de entrada de dados:
INSERINDO JAVASCRIPT NO HTML
Quando desejamos criar algum nível de interatividade em nossos documentos vamos
construir isso através de scripts JavaScript, mas onde vamos escrever nossos
códigos. Temos três formas para adicionar essa inteligência, segue os modos:
 Inline: podemos escrever scripts diretamente na seção body do documento.
Essa abordagem não é aconselhável pois mistura linguagem de marcação com
linhagem de programação, dificultando o entendimento e a manutenção.
 Incorporado: podemos criar nosso código diretamente no documento HTML
através da tag script>.
 Externo: podemos incorporar arquivos externos contendo nossos scripts, isso
facilita a manutenção e também a reutilização de código. Considerado como a
melhor prática pela indústria de desenvolvimento.
Abaixo podemos avaliar como construiríamos nosso script utilizando o modo inline:
Na estratégia de incorporarmos ou utilizarmos externo o script vamos utilizar o tag
script>, vamos analisar primeiramente o modo de incorporar:

159. No modo externo ainda utilizamos a tag script>, mas utilizamos a
propriedade src para indicar o endereço do arquivo que possui nosso script, vamos
ao exemplo:
Operadores Relacionais
Operadores relacionais são utilizados quando desejamos expressar a relação de
grandeza entre operandos. Esses operadores são binários o que significa que são
aplicados a dois operandos, conforme os exemplos abaixo:

160. Operadores Lógicos
Declarações de Função
Como já discutimos JavaScript suporta o modelo de desenvolvimento orientado a
objeto, por mais que não utilizemos essa prática em nosso desenvolvimento não
podemos fugir do fato que toda API utiliza. Podemos ainda desenvolvernossos scripts
utilizando o modelo de desenvolvimento modular através da organização de nossos
códigos em função. A forma como podemos fazer isso será mostrada a seguir:
Podemos avaliar na sequencia uma função que foi construída para somar dois valores
e mostrar uma mensagem de alerta apresentando o resultado:
Quando desejamos que nossas funções retornem um valor condizente ao processo
executado podemos utilizar o recurso de retorno de valor, para isso devemos utilizar
a palavra reservada returnconforme o exemplo abaixo:
ESTRUTURAS DE PROGRAMAÇÃO
Vamos a partir deste ponto apresentar de forma sucinta as estruturas de
programação disponíveis em JavaScript, vamos considerar que a técnica de utilização
das estruturas já seja algo conhecido por todos.
ESTRUTURAS CONDICIONAIS
If
Modelo de construção da estrutura condicional if:
Exemplo de sua utilização:
else

161. Podemos utilizar para definir as ações para quando a expressão lógica definida
no if não for verdadeira (false).
Modelo de construção da estrutura condicional if-else:
Exemplo de sua utilização:
switch
Modelo de construção da estrutura condicional switch:
Exemplo de sua utilização:
ESTRUTURAS DE REPETIÇÃO (LOOP)
for
Modelo de construção da estrutura de repetição for:

162. Exemplo de sua utilização:
while
Modelo de construção da estrutura de repetição while:
Exemplo de sua utilização:
do-while
Modelo de construção da estrutura de repetição do-while:
Exemplo de sua utilização:
do {
var info = prompt("Pra sair digite o texto sair!");
} while (info != "sair");
Visão geral
Apresentação da disciplina:
Sou o professor Adriano Sepe, profissionalmente trabalho como
arquiteto de softwares com mais de nove anos de experiência e sólidos
conhecimentos em arquitetura, sistemas distribuídos e
desenvolvimento de soluções web, desktop, mobile e SOA. Obcecado
por boas práticas de arquitetura e desenvolvimento de software, para
isso busco sempre dedicar-me ao conhecimento. Na área acadêmica
tenho ministrado disciplina nos cursos de Tecnologia em Análise e
Desenvolvimento de Sistemas, Engenharia Elétrica e Engenharia da
Computação.

163. Vamos navegar pelos detalhes do funcionamento da quinta versão da
principal linguagem de marcação chamada HTML, mais conhecida
como HTML5. Com certeza uma tecnologia chave para a Internet que
conhecemos hoje. Vamos aprender sobre novos recursos relacionados
a semântica e acessibilidade, novos marcadores. Adicionaremos
recursos de áudio e vídeo sem a necessidade de utilização de
tecnologia (plug-in) de terceiros. Vamos ainda discutirem detalhes os
novos elementos para composição de formulários Web. Outro
importante ponto que será discutido será sobre os recursos de Drag &
Drop e Geolocalização. Concluímos com uma abordagem simplificada
sobre os novos recursos de desenho que foram adicionados através
do elemento Canvas. Finalizamos nosso aprendizado discutindo
detalhes técnicos sobre como trabalhar com gráficos vetorais SVG.
Objetivos
Compreender detalhes do funcionamento de algumas áreas da
tecnologia HTML5. O conhecimento partirá dos detalhes da nova
estrutura e semântica, passaremos pelos detalhes de incorporar áudio
e vídeos sem a utilização de recursos (plug-in) de terceiros. Vamos
ainda aprender importantes recursos que foram disponibilizada com a
mais nova verão do HTML, por exemplo: Drag & Drop, Geolocalização,
Desenhando com Canvas e concluímos com uma discussão técnica
sobre como adicionamos gráficos vetoriais com SVG (Scalable Vector
Graphics).
Conteúdo Programático:
a) Introdução a HTML 5
b) Suporte dos Navegadores
c) Novos elementos
I) Nova semântica
II) Nova estrutura
d) Elementos multimídia
I) Trabalhando com vídeo
II) Trabalhando com áudio
e) Elementos Drag & Drop
f) Gráficos
I) Trabalhando com Canvas
II) Trabalhando com SVG

164. Metodologia:
Na unidade utilizaremos todos os recursos necessários e disponíveis
para o desenvolvimento da discussão do conteúdo, sendo assim,
faremos uso de:
 Textos da própria web-aula e de outros sites que possam contribuir
para a discussão;
 Vídeos que podem esclarecer ou aprofundar determinados conteúdos;
 Fóruns para discussão de tópicos onde seja possível a troca de ideias
e conteúdos entre os discentes e docentes;
 Avaliações virtuais onde será realizada a verificação do aprendizado;
 Entre outros recursos que poderão ser utilizados visando maior
entendimento da matéria.
Avaliação Prevista:
Cada web-aula conterá uma avaliação virtual composta de 5 questões
(sendo assim, temos 2 web-aulas com 5 questões cada). Quando
houver fórum de discussão o aluno será avaliado quanto ao conteúdo
de sua postagem, onde deverá comentar o tópico apresentando
respostas completas e com nível crítico de avaliação pertinente ao
nível de pós-graduação.
TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 1 – Programação em HTML 5
00:00
00:00
Semântica com HTML5
HTML 5 não é sobre apenas mais alguns recursos interativos com JavaScript e vídeo.
Há mais de 20 novos elementos, que você pode usar para criar páginas da web,
adicionando semântica para entregar conteúdo reutilizável, mais acessível. Na
sequencia vamos aprender sobre novos controles de formulários HTML5 e elementos
multimídia. Vamos primeiramente aprender sobre os novos elementoes
estruturais header, hgroup, nav, footer, article, section, e aside, focados em como,
porque, e quando usar estes novos elementos, por conta própria e quando
combinados. Essencialmente, vamos dicutir os elementos que foram destacados na
figura abaixo.

165. Construção de um documento HTML5
Você está prestes a iniciar com HTML5, então vamos para a parte superior do
documento HTML. Embora o conteúdo desta seção imediata não contém elementos
novos, há um novo maneira de escrevê-los, então é melhor estar ciente antes de
começar a entrar no corpo.
Doctype
O doctype deve ser a primeira linha em um documento HTML. Chamado um
Documento Type Definition (DTD), o DOCTYPE é uma exigência dos padrões web, e
diz o navegador como processar o documento, razão pela qual deve ser a primeira
coisa em seu documento HTML. Se você não usar um DOCTYPE ou colocar qualquer
outro código antes de o doctype e, em seguida, o navegador pode apresentar
dificuldades em processar corretamente a sua página. É improvável que você iria
querer memorizar o doctype anterior. Por que seria você? É horrível e desajeitado.
Em HTML5, agora você tem um bom, fácil de lembrar DOCTYPE:
Codificação de Caracteres
A primeira linha que precisamos colocar dentro do head é a declaração do charset,
isso dirá ao navegador como os arquivos devem ser interpretados.
Em HTML 4 isso seria feito assim:
Já em HTML5 assim como o DOCTYPE, isso foi muito simplificado:
Como adicionar JavaScript & CSS

166. Antes para adicionarmos um arquivo externo JavaScript e CSS a sintaxe necessária
seria:
Agora com HTML 5 podemos omitir a propriedade type, veja como isso ficaria:
Flexibilidade na Sintaxe
Podemos escrever em HTML 5 com uma certa flexibilidade, isso porque algumas
regras não são aplicadas a está versão do HTML, por exemplo:
1. Não existe uma restrição para escrever os elementos e atributos em caixa alta ou
baixa, segue exemplos possíveis para um mesmo código:
2. Os elementos vazios não precisam ser fechados:
É importante destacar que por mais que exista uma flexibilidade na escrita é
importante que você adote um padrão consistente. Vamos no decorrer deste cursos
sempre adotar as premissas do XHTML, então todas as tags e atributos serão escritas
em minúsculo e todos os elemento serão devidamente aninhados e fechados.
Nos links abaixo poderemos ver mais detalhes introdutórios a tecnologia HTML5.
 http://tableless.com.br/html5/?chapter=3
 http://diveintohtml5.com.br/introduction.html
 http://diveintohtml5.com.br/past.html
 http://diveintohtml5.com.br/detect.html
Utilizando o elemento header para criar um cabeçalho do site
Quando analisamos uma página web típica encontramos conforme a imagem
apresentada no início, sendo muito comum a dotação de um menu no início do site.
Além disso, é comum adotar o padrão de apresentar a logo, o nome do site e / ou os
principais links de navegação. Essa seção pode ser utilizada mais de uma vez em
uma página, isso ainda pode ser utilizada para navegações para uma área em
particular não somente para navegações entre as páginas. Vamos verificar esse
simples exemplo:

167. Outro exemplo para demonstrar que não estamos restritos a utilizar apenas um
header por página, e isso não precisa ser no topo da página. Vamos na sequencia
explicar maiores detalhes, mas caso seja necessário colocar várias cabeçalhos em
uma página, considere adicionar os elementos header como este exemplo:
Utilizando o elemento hgroup para agrupar cabeçalhos
Podemos utilizar o novo elemento do HTML5 chamado hgroup para agrupar
cabeçalhos h1-6 com algum tipo de relação. Isso é importante quando possuímos um
sub-cabeçalho, neste caso podemos adotar a estrutura demonstrada abaixo:

168. Criando a navegação com o elemento nav
Este novo elemento assim como o seu nome indica, tem o propósito de indicar
conteúdo de navegação. Isso é utilizado para construímos conteúdos de links para
página ou então para partes da página. A forma mais comum de construirmos um
conteúdo de navegação é utilizando uma lista não ordenada, vamos avaliar como
isso se dará:
Para ajustar e utilizar este novo elemento é extremamente simples, isso porque
apenas será necessário envolvermos a lista não ordenada com o novo elemento nav,
vejamos o resultado:
Nós ainda podemos adicionar o nav no cabeçalho, como será mostrado a seguir.
Como o cabeçalho nos permite introduzir um conteúdo de navegação, mas não
ficando restrito apenas a este ponto:
Não devemos compreender que todo o link deverá ser envolvido por um
elemento nav, isso deverá ser feito apenas para o conteúdo de navegação de maior
importância do site.
4
Utilizando o novo elemento article
Quando desejamos criar um bloco de conteúdo independente podemos utilizar o
article. Este conteúdo deve existir sobre nossos próprios direitos, bem como o
propósito de ser reutilizado. Por exemplo, podemos considerar a possibilidade de

169. visualizar este conteúdo em um feed RSS. As especificações HTML5 sugerem alguns
exemplos para como um elemento article pode ser utilizado, isso como um post de
um fórum, uma revista ou um artigo em um newspaper, uma entrada em um blog,
ou então um comentário de um usuário. Vejamos o exemplo a seguir:
Agrupando conteúdos com o elemento section
Este elemento cria uma área de conteúdo que quase sempre necessita de um título.
Podemos utilizado para agrupar outros elementos criando uma ideia de seção. Não
devemos utilizar como um wrapper genérico (DIV) apenas para aplicar efeitos de
estilização, seu propósito é criar seções de conteúdos com suas semânticas
respeitadas. Vamos criar um exemplo:
Podemos considerar várias possibilidade na hora de estruturamos o nosso
documento, este novo elemento junto com os demais podem nos ajudar a criar
estruturas de dados melhores.
Criando uma barra lateral com o elemento aside
Este elemento tem por objetivo criar um grupo de conteúdo que está sempre
relacionada a conteúdos subjacentes, como, por exemplo, uma lista de post mais
populares, categorias de um blog ou então comentário recentes. Este tipo de
conteúdo também está relacionada ao conteúdo da página no qual o define, mas
também podemos considerar um conteúdo independente. Nas páginas atuais
da Web é muito comum haver uma barra lateral, isso não deve significar que os
elementos aside devem ser colocados na parte lateral de uma página fisicamente,
ou invés disso devemos compreender o seu objetivo que na maioria das vezes está

170. associado ao propósito de disponibilizar links ou listas de categorias e até mesmo
anúncios relacionados com o site. Vamos analisar com detalhes o exemplo abaixo:
Podemos ainda utilizar o elemento aside dentro de outros elementos, inclusive
elementos article.
5
Utilizando o elemento footer
Como o nome sugere, utilizamos este elemento tipicamente no fim de nossas
páginas. Contudo isso não deve ser tratado como regra. Utilizamos este elemento
direcionado para detalhes sobre uma determinada seção, incluindo informações
sobre o autor ou o proprietário do site, dados de copyright, e termos do site e
condições. Se o colocarmos dentro de um elemento article ou então section,
deveremos naturalmente colocar informações relativas ao contexto, por exemplo, a
data da publicação do artigo, tags, categorias e outros dados de metadata. Podemos
utilizarmais de um elemento footer por pagina, com o propósito real de estruturação
da informação. Vamos verificar mais um exemplo:

171. Utilizando os elementos figure e figcaption
Quando adicionamos uma imagem em nosso documento HTML podemos agora
envolvê-lo e dar uma descrição. Isso antes era resolvido utilizando o elemento div,
assim poderíamos adicionar um texto para a imagem. A ideia desses dois novos
elementos é realmente criar um vínculo semântico entre a imagem e o texto. Vamos
avalia o pedaço de código abaixo:
Podemos ainda utilizar o elemento figure e figcaption para várias imagens, como
o exemplo abaixo:
6

172. Marcando a data e hora com o elemento time
Isso permite que ao construirmos documentos que expõem informações relativas ao
tempo possamos garantir que isso será lido e compreendido pelas maquinas. Com
isso poderemos marcar as coisas com uma estampa de tempo como, por exemplo,
as datas de publicação ou eventos que podem ser consumido por outras tecnologias,
por exemplo, um calendário. O elemento time possui dois atributos opcionais, segue
os:
 datetime: O usuário visualiza o conteúdo do elemento, já a máquina considera o valor
contido neste documento.
 pubdate: Indica que a data/hora no elemento time é a data de publicação do
documento (ou o elemento mais próximo do ancestral article)
O elemento time é projetado para mostrar datas precisas, para isso devemos utilizar
o formato do calendário Gregoriano: YYYY-MM-DD, com o tempo codificado como
T00:00. Vamos analisar o exemplo a seguir:
Criando um Widget nativo para detalhes
Um recurso bem interessante e agora nativo a partir do HTML é a possibilidade de
apresentarmos itens e seus detalhes, que permitem que o usuário possa expandir e
retroceder. Isso facilitaa visualização de grandes quantidades de dados pois permite
ao usuário focar exatamente aquilo que lhe é importante. E isso tudo sem a
necessidade de JavaScript e CSS. Vamos ao exemplo:

173. Os conceitos relativos a semânticas são extremamente importantes para um bom
desenvolvimento web. Vamos nos aprofundar um pouco mais através dos links a
seguir:
http://diveintohtml5.com.br/semantics.html
http://www.maujor.com/blog/2009/10/05/navegacao-semantica-com-html-5/
http://www.slideshare.net/edu_agni/a-semntica-do-html5
https://www.youtube.com/watch?v=tQPz-7QLsj4
https://www.youtube.com/watch?v=H1mZFczyCX4
7
Trabalhando com Formulários
No decorrer desta seção vamos avaliar as novas funcionalidades disponíveis para o
desenvolvimento de formulários Web. Alguns recursos vieram realmente para facilitar
a vida dos desenvolvedores de aplicações Web, contudo ainda a falta de um melhor
suporte pelos principais navegadores ainda torna esta tecnologia um pouco
inacessível para a maioria das aplicações.
Validações
Além da possibilidade de utilizar novos controles de entrada ainda poderemos contar
com funcionalidades com o propósito de validar a entrada de dados. Antes disso, com
certeza, ou a Inteligência de validação ficaria do lado do servidor, em alguma
linguagem como PHP e Asp.NET, ou então poderíamos optar por coloca-la em
JavaScript, sempre com o objetivo de avaliar o conteúdo dos dados fornecidos para
então avisar ao usuários quando haver algum tipo de erro.
Agora com HTML5, a validação ficou bem simplificada. Podemos providenciar
validações online e retornar detalhes para o usuário quando ele tentar submeter o
formulário. O processamento do formulário se dá através de alguma inteligência do

174. lado do servidor, o que não vamos avaliar nesta disciplina. Sempre antes de
utilizarmos algum tipo de recurso deveremos verificar se o navegador alvo do projeto
já o suporta. Outro ponto importante é que como poderá haver diferenças entre os
navegadores nas validações, deveremos sempre considerar em revalidar os dados do
lado do servidor (server-side), isso evitará a entrada de dados inconsistentes. Vamos
construir nosso primeiro exemplo, neste caso vamos simular um formulário onde o
usuário entraria em contato com o possível administradordo site, vamos ao exemplo:
No exemplo acima utilizamos o conceito de dados requerido, isso indicou ao
navegador que algumas informações deveriam ser preenchidas antes do formulário
ser submetido. Isso se deu através da utilização atributo required=”required”.
Ainda utilizamos uma série de tipos de entradas que foram disponibilizados através
do HTML5, isso gerou algumas restrições sobre o padrão da informação fornecida.
Podemos perceber também que os dados (formulário) não foram submetidos
enquanto as restrições de preenchimento e do tipo da informação não foram
atendidos. Vamos na sequencia discutir detalhes destes novos elementos.
Tipo “email”
Quando utilizamos no atributo type o valor “email” estamos indicando ao navegador
que aquela informação deverá parecer com um e-mail válido. A validação se dá
apenas sobre a informação e não sobre a existência da conta de e-mail.
Tipo “tel”
Quando utilizamos no atributo type o valor “tel” estamos indicando ao navegador
que aquela informação deverá parecer com um telefone válido. Isso quer dizer que
deverá ser aceito qualquer tipo de caracteres, não somente números. Por exemplo o
caractere ‘+’.
Tipo “url”
Quando utilizamos no atributo type o valor “url” estamos indicando ao navegador
que aquela informação deverá parecer com uma URL válida. A restrição será apenas
sobre a informação e não sobre a existência da URL. Essa URL precisa ser um
endereço Web, para alguns navegadores ainda é necessário que o protocolo seja
fornecido, neste caso o endereço www.adrianosepe.com.br não seria considerado

175. válido, obrigando que o protocolo seja informado conforme o endereço
http://www.adrianosepe.com.br.
Criando um formulário de pesquisa
Quando desejamos criar um formulário de pesquisa podemos contar com um input
configurado comotype=”search”, isso na verdade aceitará qualquer termo de
pesquisa, por isso se assemelha muito ao input de type=”text”. Isso não concederá
nenhum efeito ou privilégio a mais ao seu formulário, apenas permitirá que o
navegadores saibam que o campo é de pesquisa. Vamos avaliar o exemplo abaixo de
como isso poderá ser feito:
8
Trabalhando com controles de calendário e tempo
Constantemente quando desejamos criar uma entrada de dados para receber uma
informação do tipo data e hora optamos por adicionar recursos externos com o
propósito de melhorar essa interação com o usuário. Isso sempre requereu
conhecimentos e bibliotecas em JavaScript, mas agora podemos contar com alguns
recursos nativos, facilitando em muito a nossa vida.
Tipo “datetime”
Agora podemos contar com este tipo de entrada, isso significa que não haverá
necessidade de adicionarmos JavaScript exclusivamente para permitir uma melhor
interação com o usuário em situações onde uma data / hora é requerida. Atualmente
apenas os navegadores Opera e iOS Safari que disponibilizam um Widget adequado.
O suporte nativo para esse tipo de dado traz uma série de vantagens, incialmente
podemos destacar a possibilidade de apresentar detalhes do calendário respeitando
a linguagem utilizada no sistema operacional.
Tipo “datetime-local”
Com o mesmo propósito que o tipo anterior, sendo que a diferença está no fato de
que no anterior é indicado que a data / hora deverá ser fornecida considerando o
horário UTC (Universal Time Coordinated), já neste novo controle a ideia é que a data
/ hora seja fornecida com base no horário local.

176. Tipo “date”
Este tipo de controle é muito similar ao “datetime” diferenciando-se no fato de que
a porção relacionada ao horário não é disponibilizada ao usuário.
Tipo “time”
Quando desejamos que o usuário forneça um horário no formato de 24 horas
podemos optar por este tipo de entrada, atualmente apenas o navegador Opera
suporta esse tipo de configuração.
Tipo “week”
Podemos ainda configurar um entrada de dados onde o usuário poderá selecionar
uma semana, na imagem abaixo podemos verificar que além da informação relativa
a semana foi destacado com uma cor de fundo a semana selecionada:
9
Tipo “month”
Quando desejamos que o usuário selecione um mês podemos configurar o input como
“month”, conforme podemos verificar na imagem abaixo a seleção é feita através
do mesmo controle, isso é claro para o navegador Opera no qual estamos utilizando
para testes:

177. Criando um seletor de número
Podemos contar com um seletor de números onde a restrição é que apenas números
serão aceitos. Ainda com relação a este controle podemos configurar informações
relativas a valores mínimo, máximo e o passo de incremento / decremento. Vamos
considerar o pedaço de código abaixo, na imagem poderemos verificar o navegador
restringindo o valor conforme a nossa configuração:
Criando um slider
Quando precisamos solicitar um valor considerando uma faixa possível é muito
comum disponibilizarmos um controle deslizante. Vejamos como isso se dará:
Criando um selector de cor
Podemos ainda criar um seletor de cor, onde o valor hexadecimal relacionado a cor
será armazenado no controle. Isso antes apenas era resolvido utilizando JavaScript:

178. 10
Mostrando resultados com o elemento output
Este elemento pode mostrar resultados de um cálculo através de JavaScript. Por
exemplo, quando desejamos apresentar o valor de um controle deslizante sem a
necessidade de criar um script JavaScript direto, podemos operar da seguinte forma:
Criando uma lista com autocomplete com list e datalist
O elemento datalist foi inserido junto com o HTML5, podemos combinar sua
utilizaçãocom a propriedade list de um outro controle de dado. A seleção do usuário
não é restringida as opções providenciadas na lista de autocomplete. O código para
um datalist é muito similar ao elemento select, contudo, com o elemento select o
usuário não pode digitar uma valor diferente dos disponibilizados.

179. Criando um elemento de progressão
Podemos ainda criar um controle de progressão para representar as mais variadas
situações de uma aplicação. Comumente utilizamos para indicar o estado de uma
atividade. Para tal feito este elemento dispões de dois atributos principais:
 value: representa quanto de uma tarefa foi completada
 max: representa a quantidade necessária para completar a tarefa.
As principais interações entre um documento HTML e o usuário são construídas a
partir de formulário, isso justifica um pouco mais de atenção sobre este assunto.
Vamos nos aprofundar um pouco mais através dos links sugeridos a seguir:
 http://diveintohtml5.com.br/forms.html
 http://www.oficinadanet.com.br/artigo/html/a_evolucao_dos_formularios_em_html_
5
 http://www.html5rocks.com/pt/tutorials/forms/html5forms/
 http://imasters.com.br/artigo/17603/web-standards/formularios-em-html5
 http://www.kadunew.com/blog/html5/validacao-de-formulario-com-html5
 http://tableless.com.br/html5/?chapter=7
 http://tableless.com.br/html5/?chapter=8
 https://www.youtube.com/watch?v=OoojUpXzsEw
 https://www.youtube.com/watch?v=d0r7nM0zomM
 https://www.youtube.com/watch?v=U48iKzwrJfM
00:00
00:00

180. TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 2
Unidade 1 – Programação em HTML 5
Adicionando vídeos aos nosso documentos HTML5
Imagino que você já tenha utilizadoalgum site de compartilhamento de vídeos como,
por exemplo, o Youtube ou então o Vimeo. A cada dia aumente o número de pessoas
que colocam vídeos online, seja de uma situação inusitada ou até mesmo um
angelical vídeo de seu animal de estimação. O problema de tudo isso é que nunca
houve um padrão para apresentação de vídeos, então surgiram vários plug-ins como
Flash, Silverlight ou utilizando um elemento objeto para tocar um arquivo
QuitckTime.
Possivelmente você pode pensar que isso não seria um problema, mesmo porque,
consumimos vídeos através destas tecnologias por anos. O problema que
contemplamos é realmente a necessidade de ter uma terceira parte (plug-in) para
publicarmos um vídeo. Agora em HTML5, possuímos um recurso padrão e nativo para
apresentar vídeos em páginas web. Para isso utilizamos o elemento vídeo.
Vamos incluir um vídeo através do elemento vídeo
Como mencionamos anteriormente para incorporar um vídeo em um documento
HTML5 basta inserir o elemento vídeo como o exemplo abaixo:
Um problema muito comum é a possibilidade de que a máquina no qual o navegador
esteja sendo executado não possua o codec (Codificador/Decodificador) adequado
para reprodução do vídeo, uma alternativa para isso é disponibilizarmos o mesmo
vídeo em vários formatos e então incorpora-los ao documento HTML. Veja o exemplo
abaixo como isso é simples de ser feito, aumentando as possibilidades de
acessibilidade ao vídeo:
Podemos verificar no exemplo acima que configuramos a altura e largura do vídeo,
como boa prática isso deve ser feito utilizandofolha de estilo (CSS). Podemos utilizar
a propriedade controls para indicar que os controles básicos de vídeo devem ser

181. apresentados junto com o vídeo. Já as possíveis fontes do vídeo devem ser
registradas através de dois atributos src para indicar o locar do arquivo e o
atributo type, muito importante para indicar ao navegador qual é o tipo do vídeo.
Isso garante que caso o navegador não suporte esse tipo de vídeo ele não fará o
download desnecessário, evitando o consumo da conexão de internet.
Conhecendo melhor os atributos do elemento video
São muitos os atributos disponíveis para o elemento vídeo, vamos a partir desta
seção discutir alguns:
Atributo “src”
Ao utilizarmos este atributo restringimos o elemento vídeo para apenas um arquivo
/ formato, vale lembrar da introdução que fizemos onde foi destacado a diversidade
de máquinas e suportes aos formatos, com isso devemos optar por publicar diversos
formatos de um mesmo vídeo e então utilizarmos os elementos source para registra-
los.
Atributo “poster”
Podemos apresentaruma imagem no lugar do vídeo enquanto ele está sendo baixado
ou então esperando para ser iniciado. Para isso devemos utilizar o
atributo poster, seu propósito é mostrar ao usuário uma ideia do vídeo, como se
fosse uma página de “sobre”. A imagem que desejarmos colocar como um pôster
deverá poderá ter os seguintes formatos: gif, .jpg ou .png (imagens png com
transparência não sobreporão o vídeo). Quando não qualificarmos uma imagem como
postes então o navegador mostrara o primeiro frame do vídeo, o que pode ser
alterado caso seja necessário. Vamos avaliar o exemplo a seguir:

182. 1
Atributo “preload”
Quando trabalhamos com vídeos relativamente grandes, que podem causar pausas
por conta da sua carga ou até mesmo vídeos que temos a certeza que o usuário
efetivamente assistirá, então podemos configurar algumas possibilidade para que o
navegador faça na carga do documento, vamos as possibilidades:
 auto: informa ao navegador para iniciar o download do vídeo automaticamente
quando a página carregar.
 none: informa ao navegador que nada deve ser carregado, apenas após interação do
usuário solicitando o início do vídeo
 metada: solicita a carga de informações (metadata) sobre o vídeo, incluindo duração,
primeiro frame, dimensões do vídeo e a lista de faixas.
Atributo “loop”
Podemos solicitar que um vídeo seja reproduzido eternamente, para isso podemos
utilizar o atributo loop.
Atributo “autoplay”
Ao utilizar o atributo autoplay podemos configurar que o vídeo seja iniciado
automaticamente após a carga da página. Existem algumas considerações relativas
aos conceitos de acessibilidade e usabilidade, com relação a iniciar um vídeo
automaticamente, mas independente disso caso seja necessário não será necessário
a inclusão de código JavaScript para tal feito, apenas utilizando este atributo
alcançaremos o objetivo.
Atributo “controls”
Quando desejamos que sejam incluídos os controles básicos para interação com o
vídeo, por exemplo, início / pausa, barra de progressão, duração / tempo de
reprodução, e controles de volume. Caso não desejarmos estes controles, o usuário
poderá ainda interagir com o controle através de um menu de contexto que é
apresentado quando clicamos com o botão direito. Podemos utilizar nossos próprios
controles através de customização em CSS.
API JavaScript
A API (Application Program Interface) para manipulação do elemento vídeo através
de JavaSript é realmente vasta. Podemos controlar vários aspectos e obter uma série
de informações relacionadas ao vídeo e sua reprodução. Vamos avaliar um exemplo
completo onde poderemos avaliar o poder desta API:

183. Podemos verificar o quanto é fácil a adição de vídeos em nossas páginas Web a partir
da versão 5 do HTML. Por não haver a necessidade de plug-ins de terceiros podemos
ter a garantir que caso o nosso cliente utilize algum navegador com uma frequência
razoável de atualização poderemos contar com o suporte à reprodução de vídeos de
forma nativa.
Não depender de uma tecnologia é algo extremamente interessante para o
desenvolvimento, vamos nos aprofundar ainda mais através dos links listados a
seguir:
 http://diveintohtml5.com.br/video.html
 http://www.html5rocks.com/pt/tutorials/video/basics/
 http://www.tecmundo.com.br/tutorial/23238-como-converter-um-video-para-
html5.htm

184.  http://www.videoaulasbrasil.com.br/html/audio-e-video-com-html5/
 http://fabriciosanchez.com.br/2/html-5-incio-meio-e-fim-a-tag-video-parte-3/
 https://www.youtube.com/watch?v=V9VbVrMX6SQ
2
00:00
00:00
Realmente poder contar com esse tipo de interação é algo muito legal, podemos
tornar nossas aplicações Web ainda mais parecidas com as aplicações Desktop. Na
lista a seguir estão disponíveis vários recursos online que poderemos utilizarpara um
aprofundamento sobre o assunto:
 http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-drag-and-drop-parte-7/
 http://www.html5rocks.com/pt/tutorials/dnd/basics/
 http://tableless.com.br/html5/?chapter=10
Adicionando áudios aos nosso documentos HTML5
Assim como o elemento vídeo, podemos agora contar com um novo elemento
chamado audio para embutir arquivos de áudio em nossas páginas sem a
necessidade de adicionar plug-ins de terceiros, como exemplo o Flash, Silverlight ou
qualquer outra tecnologia. Podemos considerar a possibilidade de reproduzir nossos
áudios em navegadores modernos de uma forma nativa e sem risco de falta de
suporte, exceto pela falta de um codec apropriado.
Como adicionar o elemento áudio
Para essa tarefa podemos adotar um sintaxe simplificada como podemos verificar no
elemento de vídeo, vamos ao exemplo:
Assim como podemos nos deparar com a situação de não haver um codec adequado
para a apresentação de um vídeo, quando estamos falando de áudio também
podemos passar por isso. Então a melhor forma de adicionarmos um áudio é
utilizando elementos source, o que possibilitará a disponibilização de mais de um
tipo de formato. Isso tende a minimizar os problemas com codec. Existe dois
principais tipos de codec, o primeiro seria o Ogg Vorbis (.ogg) e o MP3 (.mp3).
Podemos ainda considerar o tipo WAV (.wav), mas devemos nos concentrar
basicamente entre o tipo Ogg Vorbis e MP3 isso porque usualmente arquivos WAV
são grandes e por isso muito complicados de serem carregados na web, além disso
nos deparamos com o fato de que arquivos WAV não suportam metadata, por
exemplo os nomes do artista e do título.
Processando áudio em vários navegadores

185. Como falamos anteriormente, podemos alterar a propriedade src para indicar o
arquivo no qual desejamos incorporar, mas como uma melhor prática podemos
disponibilizar o mesmo áudio em formatos diferentes garantindo uma maior
acessibilidade. Para isso adotamos uma sintaxe muito parecida com o
elemento video, vamos analisar:
3
Atributo “src”
Utilizando este atributo restringimos o elemento a apenas um arquivo / formato, vale
lembrar dos problemas que podemos ter com codec, com isso devemos optar por
utilizar os elementos sourceenvolvidos pelo elemento audio.
Atributo “preload”
Quando temos áudios relativamente grandes, que podem causar pausas por conta
da carga ou até mesmo áudios que temos a certeza que o usuário efetivamente
ouvirá, então podemos configurar algumas possibilidades para que o navegador faça
na carga do documento, vamos as possibilidades:
 auto: informa ao navegador para iniciar o download do áudio automaticamente
quando a página carregar.
 none: informa ao navegador que nada deverá ser carregado, apenas após interação
do usuário solicitando o início do áudio.
 metada: solicita a carga de informações (metadata) sobre o áudio, incluindo duração,
dimensões do áudio e a lista de faixas.
Atributo “loop”
Podemos solicitar que um vídeo seja reproduzido eternamente, para isso utilizamos
a propriedade de nome bem sugestível loop.
Atributo “autoplay”
Ao utilizar o atributo autoplay podemos configurar que o áudio seja iniciado
automaticamente após a carga da página. Existem algumas considerações relativas
aos conceitos de acessibilidade e usabilidade, com relação a iniciar um áudio
automaticamente, mas independente disso caso seja necessário, não haverá a
necessidade da inclusão de código JavaScript para tal feito, apenas utilizando este
atributo alcançaremos o objetivo.
Atributo “controls”
Quando desejamos que sejam incluídos os controles básicos para interação com o
áudio, por exemplo, início / pausa, barra de progressão, duração / tempo de
reprodução, e controles de volume. Caso não desejarmos esses controles, o usuário
poderá interagir com o controle através de um menu de contexto que é apresentado
quando clicamos com o botão direito. Podemos usar nossos próprios controles
através de customização em CSS.
API JavaScript

186. A API (Application Program Interface) para manipulação do elemento áudio através
de JavaScript é realmente vasta. Podemos controlar vários aspectos e obter uma
série de informações relacionadas ao áudio e sua execução. Vamos avaliar um
exemplo completo onde poderemos avaliar o poder desta API:
Podemos perceber a semelhança existente entre a utilização dos
elementos vídeo e áudio, tanto para declaração em um documento HTML5 quando
para a manipulação através da API Javascript. Essa padronização só traz grandes
vantagens para o desenvolvimento, visto que a curva de aprendizado tende a ser
minimizada.
Poder adicionar um recurso de áudio sem a preocupação de acessibilidade é algo
realmente interessante, ainda sem a necessidade de aprender uma nova tecnologia.
Vamos aprofundar sobre o assunto através dos links a seguir:

187.  http://tableless.com.br/elemento-tag-audio/
 http://msdn.microsoft.com/pt-br/library/hh475803.aspx
 http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-a-tag/
 http://tableless.com.br/html5/?chapter=11
 https://www.youtube.com/watch?v=mnrLKYgxSPQ
 https://www.youtube.com/watch?v=odjZ5LGkDkQ
4
00:00
00:00
Criar uma serviço utilizando informações de Geolocalização pode ser uma grande
sacada para as nossas aplicações, agora a tecnologia já nos dá suporte. Podemos
ainda melhorar o entendimento sobre este assunto através dos links abaixo:
 http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-geolocalizacao/
 http://diveintohtml5.com.br/geolocation.html
 http://tableless.com.br/html5/?chapter=24
Trabalhando com Canvas
As especificações HTML5 adotaram o elemento canvas para o desenvolvimento de
um elemento de desenho baseado em pixel. O coração desta implementação está
distribuída em dois componentes: o elemento canvas e a manipulação em Javascript
para efetuar operações sobre o canvas. Esse elemento é desenha como um quando
branco, até que o manipulemos através da linguagem de script utilizando pincel,
ferramentas, e outros para criar um resultado de um trabalho artístico. Da mesma
maneira podemos criar programas que possam usar formas e ferramentas, efeitos e
até mesmo transformações. Depois é só desenhar tudo sobre uma canvas,
resultando em uma nova configuração dos pixels. Vamos iniciar com o exemplo
abaixo:
Vamos a algumas considerações, podemos adicionar um texto alt para que seja
apresentado caso o elemento canvas não seja suportado, mas caso isso realmente
ocorra, então qualquer conteúdo que tenha sido envolvido pelo elemento será
apresentado. Isso é muito oportuno para apresentar informações indicando a
necessidade de um navegador com suporte para a tecnologia. Para verificarmos o
suporte de canvas pelo navegado o código abaixo é uma ótima possibilidade:

188. Ou então podemos como foi falado envolver ao elemento canvas um conteúdo
explicando a limitação do navegador, vejamos o exemplo:
5
Coordenadas X e Y
Antes de iniciarmos a nossa aventura sobre os detalhes do funcionamento do
elemento canvas e sua manipulação através de Javascript, devemos entender o
sistema coordenadas utilizado para desenhar. Como já falamos canvas é baseado
em pixel, dessa forma as coordenada (x, y) são utilizada para determina uma
localização particular ou um pixel que necessita ser atualizado. O ponto chave para
entendero sistema de coordenadas é o fato que o ponto (0, 0) se refere a exatamente
por padrão ao ponto no topo a esquerda. No próximo exemplo poderemos ver a API
de canvas em ação bem como o sistema de coordenada evidenciado através de um
mapeamento detalhado, por mais que apresente detalhes ainda não discutidos é
possível adquirir uma boa compreensão visto que o algoritmo é relativamente
simples:

190. 6
Desenhando retângulos e quadrados
Quando desejamos desenhar um retângulo ou um quadrado podemos utilizar o
método fillRect(pos=x, pox=y, width, height) de canvas. O exemplo abaixo cria um
quadrado de 100 x 100 pixels e o coloca no canto superior-esquerdo (0, 0)
de canvas. Vamos avaliar alguns métodos comuns de efeitos, que estão disponíveis
para as formas:
 strokeStyle: Define a cor ou estilo para as linhas em volta da forma
 fillStyle: Define a cor ou estilo usados dentro de uma forma
 shadowOffsetX / shadowOffsetY: Define a distância da sobra
 shadowBlur: Define o nível de efeito de desfocagem
 shadowColor: Define a cor da sobra
 createLinearGradiente: Cria um gradiente linear dentro da forma
 createRadialGradiente: cria um gradiente radial dentro da forma
Vamos desenhar um quadrado, certo para isso vamos utilizar o contexto 2D como o
exemplo a seguir:
Neste próximo exemplo vamos demonstrar como podemos estilizar ainda mais
nossas formas. Os métodos são autoexplicativos e o resultado poderá ser avaliado
na sequência:

191. 7
Utilizando gradiente com formas
Um importante recurso que dispomos para trabalhar com formas sem dúvida é a
utilização de gradientes. Podemos utilizar gradiente para preencher em canvas,
utilizando o métodocreateLinearGradient ou radial através
de createRadialGradiente. Para adicionarmos cores ao gradiente utilizamos a
propriedade addColorStop. Vamos abaixo criar dois retângulos cada um com um
tipo de gradiente, vejamos:

192. Desenhando linhas e caminhos
Para que possamos desenhar linhas utilizando canvas, possuímos três métodos,
vejamos:
 moveTo(x, y): Move para a posição indicada por x e y, caso a linha seja
desenhada ela partirá deste ponto
 lineTo(x, y): Determina para canvas onde é o fim da linha a ser desenhada.
 stroke(): Após sua chamada canvas irá desenhar a linha. Caso não tenha
sido alterado o estilo do traço então o padrão adotado será o sólido preto
Vamos avaliar como a combinação destes métodos resulta no efeito desejado,
vejamos:

193. 8
Quando desejamos criar um caminho devemos utilizar dois novos
métodos: beginPath e closePath. Sendo que beginPath indica a canvas que um
caminho será informado, já closePath finaliza este desenho. Vejamos o exemplo a
seguir:
Desenhando polígonos com um caminho
Podemos utilizar uma técnica parecida para desenhar um polígono, nós vamos
desenhar um caminho através das funcionalidades da API Canvas para desenhar
um polígono. Vamos, no exemplo, criar um polígono considerando um cálculo

194. matemático, mas poderíamos construir qualquer forma caso desejássemos,
vejamos:
9
Desenhando arcos e círculos
Podemos adicionar curvas a canvas, para isso utilizamos o método e valores
conforme abaixo:
Caso desejarmos adicionar um círculo podemos novamente utilizar o
método arc sendo que o parâmetro startAngle deverá ser zero e terminar com 2 *
Math.PI, vejamos o exemplo:

195. Trabalhando com Texto
Para trabalhar com texto a API de canvas disponibiliza dois
métodos: fillText e strokeText, sendo que o primeiro fillTexto apresenta um texto
em uma determinada coordenada (x, y) utilizando o preenchimento das letras, já o
método strokeText tem utilização idêntica só que o comportamento um pouco
diferente, o texto desenhado será apenas com relação a borda, não havendo o
preenchimento das letras, em outras palavras um texto vazado será desenhado.
Vamos analisar o exemplo a seguir:

196. Criar jogos diretamente através do navegador é algo possível, procure na internet e
verá que existe vários já desenvolvidos. Essa tecnologia vale um pouco mais de
dedicação, vamos nos aprofundar através dos links a seguir:
 http://diveintohtml5.com.br/canvas.html
 http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-a-tag-canvas/
 http://tableless.com.br/html5/?chapter=14
 http://www.criarweb.com/manual-canvas-html5/
 https://www.youtube.com/watch?v=hLvBv0tJShs
 https://www.youtube.com/watch?v=Zsh2YC3XLKU
 https://www.youtube.com/watch?v=-QL5Y4Zl840
00:00
00:00

197. A possibilidade de adicionar gráficos vetoriais associado a dispositivos cada vez mais
com altas resoluções pode ser algo bem interessante, para alguns tipos de aplicações
isso é fundamental. Vamos analisar outros recursos e ganhar em conhecimento
através dos links a seguir:
 http://flatschart.com/html5/svg.html
 http://murilomedeiros.com/projetos/1/svg.php
 http://msdn.microsoft.com/pt-br/library/ie/hh771834(v=vs.85).aspx
10