2a Prova Pós Web - Ferramentas Visuais Photoshop

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.

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.

À 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.

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).

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>.

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.

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.

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.

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.

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

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

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)

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

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

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

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 >.

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.

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

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

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

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:
.

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.

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

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.

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.

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

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

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

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

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.

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.

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).

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

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.

> 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.

> 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.

> 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.

> 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

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.

> 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.

> 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.

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:

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,

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

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

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.

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

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).

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).

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

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.

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

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.

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.

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);

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.

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.

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.

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).

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

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 >.

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>.

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:

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

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.

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

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:

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.

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

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:

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.

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:

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:

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

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

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.

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!

 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!

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.

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:

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:

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:

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

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.

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).

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:

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.

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:

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.

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

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.

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

2a Prova Pós Web - Ferramentas Visuais Photoshop

2a Prova Pós Web - Ferramentas Visuais Photoshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Semelhante a 2a Prova Pós Web - Ferramentas Visuais Photoshop

Semelhante a 2a Prova Pós Web - Ferramentas Visuais Photoshop (20)

Último

Último (20)

2a Prova Pós Web - Ferramentas Visuais Photoshop