2ª Prova Pós Web - INGRESSO: 08/08/2014 1ª Chamada - ESPECIALIZAÇÃO EM TECNOLOGIAS
PARA APLICAÇÕES WEB foi reagendada para...
Em outras palavras, se pegarmos como exemplo uma
fotografia impressa (química fixa sobre papel) e seu processamento em um ...
À esquerda, encontra-se o painel Ferramentas (ou caixa de ferramentas). Estas são
utilizadas para operar a imagens. Estão ...
Logo abaixo desta encontra-se a Barra de Opções, cuja
função é especificaras ações das ferramentas acionadas. Á direita en...
Um
bitmap pode ser monocromático, em escala de cinza ou colorido. Na web, os pixels
possuem por padrão o sistema de cores ...
2) EDIÇÃO DE IMAGEM – FUNÇÕES INICIAIS
Editar imagem significa trabalhar uma imagem, ou seja, alterar suas características...
O LAYER (CAMADA)
Assim como uma
revista possui várias páginas sobrepostas, o Photoshop também possui um sistema
muito inte...
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
b...
CANVAS (TELA DE PINTURA) E TAMANHO DA IMAGEM
É muito comum as pessoas fazerem certa confusão a respeito de “tamanho de
ima...
Diferentemente é o comando “tamanho da imagem” onde teremos também uma
diminuição das dimensões da imagem, porém sem mutil...
Este tipo de ajuste
interfere tanto no tamanho da imagem quanto no tamanho de seu canvas (área da
imagem) simultaneamente....
Com sua imagem
aberta, perceba que, por convenção, existe às bordas da mesma uma estrutura
escalonada. Trata-se de réguas,...
O recurso
Histórico é muito importante, pois permite que você experimente ações e comandos
com toda tranquilidade e caso n...
sempre são necessários quando queremos melhorar a qualidade geral de uma
imagem. Estas opções você as encontrará sempre no...
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...
Na Barra de ferramentas você encontrará um ícone semelhante a um pequeno
quadrado com uma diagonal, logo abaixo das setas ...
ZOOM
Esta ferramenta auxilia na visualização e merece algumas observações. Com as
teclas de atalho Control (+) e Control (...
3) CORES: MODOS E CANAIS
De maneira bem sucinta,
em relação à teoria das cores aplicada na Computação Gráfica podemos classificá-
las em grupos, de...
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 ...
na Caixa de ferramentas e com a ferramenta Lata de tinta ir preenchendo estas áreas
marcadas. Procure fazer isso em um nov...
selecionar. Pouca tolerância: se tiver áreas de tonalidades muito próximas, elas não
vão ser selecionadas. Outro detalhe: ...
8) PRINCIPAIS EFEITOS
O Photoshop possui uma infinidade de efeitos que podem ser aplicados isoladamente
ou combinados em s...
CAMADAS
Em Camada > Estilo de camada encontram-se efeitos bastante comuns por aí em
muitos materiais impressos ou digitais...
para se criar botões para websites. Eles rebaixam ou elevam as bordas da imagem e
trabalham sombra e luz nas mesmas a fim ...
Porém, em relação às imagens de bitmap (raster) observamos que se a diminuirmos
suas dimensões no Photoshop, ela pode sofr...
E também não adiantará tentarmos diminuí-la novamente no intento de "consertar",
pois a mesma já se converteu em uma image...
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á e...
preferência uma foto da internet por ser mais leve) e ir experimentando livremente
estes efeitos a fim de se acostumar com...
ser salvo depende de alguns parâmetros que você mesmo propõe no momento do
salvamento. Para web os mais comuns são GIF, JP...
Explore, por exemplo) localize a pasta em que você salvou e verá que lá estarão em
arquivos distintos todos os pedaços da ...
CONCLUSÃO
Embora seja um software bastante complexo, com uma infinidade de possibilidades
de aplicações e comandos, o Phot...
TECNOLOGIAS PARA APLICAÇÕES WEB
WEB AULA 1
Unidade 2 – Fireworks
1) APRESENTAÇÃO GERAL
O Adobe Fireworks além de ser uma f...
De maneira similar ao Photoshop, o Fireworks apresenta as suas opções de menus e
ícones com características ergonômicas, e...
visualização dos trabalho simulando HTML e algumas opções de configurações mais
genéricas. Como são comandos relativamente...
> Exibir
Este menu permite habilitar visualização e ajustar intensidades de componentes
como Zoom, Seleção, Escala, enfim,...
> Menu Selecionar
No menu Selecionar estão os dispositivos que agem nos modos de seleção, ou seja,
na qualidade e intensid...
> Menu Modificar
Neste menu encontramos alguns comandos mais específicos. No submenu Tela de
desenho, por exemplo, encontr...
> Menu Texto
Assim como as imagens, os textos são também parte importante de um projeto de
websites. Como se sabe, a ediçã...
Neste menu encontramos muitas possibilidades de trabalho tanto na questão de
procedimentos do próprio Fireworks (na execuç...
> Menu janela
De maneira simplificada, o menu Janela lhe permite habilitar e ocultar itens como
painéis, caixas de ferrame...
> Menu Ajuda
Ajuda, fóruns, atualizações, enfim, tudo o que se refere ao programa Fireworks
propriamente dito pode ser ace...
Um ótimo resumo do menu superior está em:
< https://www.youtube.com/watch?v=2xqHJppObyU&feature=relmfu >.
Barra de proprie...
Vamos comentar agora um pouco sobre a Barra de ferramentas. De
imediato, você vai perceber que ela é bem parecida com a do...
aparentemente parece produzir apenas figuras quadráticas, mas não é verdade. Ela
vai mais além: ao mantê-la pressionada es...
podemos citar o Internet Explorer, o Mozilla Firefox, o Google Chrome, o Opera, o
Apple Safari, entre outros.
Esta área é ...
Photoshop, procure uma fotografia chamada Farol na pasta Imagem do seu Windows.
Caso não tenha, escolha outra qualquer de ...
Voltando ao Fireworks, no menu importar, procure onde você salvou o JPG que será
seu topo e importe-o, posicionando-o na p...
botão e digite com a fonte Verdana em branco (aqui volte à tecla Gradiente para
Sólido e clique no quadradinho branco) Bol...
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...
Veja uma montagem simples de um layout em:
< https://www.youtube.com/watch?feature=endscreen&v=FtP3o0Q3NCs&NR=1 >.
Nota: E...
novamente (foi copiado). Troque a cor, por exemplo, para marrom. Para voltar clique
na aba superior do arquivo “Pagina 1”....
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 conve...
Terminado o desenho, na parte de Web da Barra de ferramentas encontre o ícone
Fatia. Faça um retângulo em volta do formulá...
Vamos agora, para finalizar, criar um banner animado para colocar na base esquerda
(abaixo do menu de nossa interface). O ...
13) No estado 1 clique na Foto com o lado direito do mouse > Animar > Animar
Seleção.
14) Na caixa altere para 16 estados ...
Detalhes sobre gifs podem ser vistos em:
< www.youtube.com/watch?v=XB8JSlp_x1g >
< www.maujor.com/fw/gifanifw.php >
SUGEST...
ADOBE Creative Team. Guia autorizado Adobe: Photoshop 7.0. São Paulo: Makron
Books, 2003.
SCOTT, Kelby. Adobe Photoshop CS...
SAIBA MAIS
Existem diversas marcações (tags) HTML, para conhecê-las você pode acessar
<http://www.w3schools.com/html/html_...
Arquivo css.html
A estrutura de formatação de estilos CSS é basicamente esta:
A palavra “seletor” corresponde a quais elem...
Utilizaremos neste caso o WampServer, que instala e configura todos os recursos
necessários para executar nossos exemplos....
Página4 de 14
É necessário concordar com os termos de licença:
Agora devemos configurar a pasta onde será instalado o prog...
Esta tela confirma as opções selecionadas, estando tudo ok, clique em Install.
Página5 de 14
Uma tela de progresso será ex...
A próxima tela perguntará sobre as configurações do PHP mail, apenas clique em
Next>.
Com a opção selecionada, basta clica...
Ao finalizarmos, podemos notar que surgiu um ícone no canto inferior direito da tela:
, a cor verde indica que o servidor ...
Para escrevermos nossos scripts PHP utilizaremos o Notepad++, disponível para
download em <http://www.baixaki.com.br/downl...
Para testarmos o nosso servidor web, vamos clicar no ícone do WampServer e
escolher a opção www directory. O Windows Explo...
Página8 de 14
No final da página, temos o título Your Projects, clique na pasta exemplos, e escolha
o arquivo que acabamos...
Vamos ver um exemplo de variáveis. Crie um arquivo chamado variaveis.php com o
código:
Arquivo variaveis.php
Neste script,...
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...
Arquivo funcao.php
OBJETOS
O PHP 5 oferece todos os recursos para o desenvolvimento de sites utilizando
programação orient...
Estruturas de Controle
As estruturas de controle de uma linguagem de programação permitem controlar o
fluxo de execução de...
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á...
Arquivo for.php
Página11 de 14
FOREACH
Este tipo de iteração é muito utilizada em PHP, é um tipo de for especial usado par...
AJAX + PHP
AJAX (Asynchronous JavaScript And XML) permite atualizarmos o conteúdo de uma
página sem precisar carregá-la to...
Arquivo maiuscula.php
Abra o arquivo ajax.php em seu navegador e digite algum texto, note que sem
recarregar toda a página...
Agora para inserirmos registros nesta tabela devemos usar o comando INSERT
vejamos:
Exemplo:
Página13 de 14
 Perceba nest...
 Agora para excluir toda a tabela devemos usar o comando DROP:

 Exemplo:

 SAIBA MAIS
As variações e combinações des...
Relembrando, é muito importante que você execute as páginas enquanto estuda os
códigos. Vamos começar?
MySQL
Podemos ter a...
Arquivo tables.sql
Página1 de 9
Este script SQL cria 3 tabelas que utilizaremos para nosso sistema de locadora de
carros.
...
Arquivo conexao.php
Crie uma nova pasta com o nome locadora no diretório www do WampServer. Salve
esta página com o nome c...
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 ...
Arquivo login.php
Aqui as coisas começam a ficar interessantes, vamos conhecer cada trecho do código:
O comando require_on...
enquanto o PHP exibirá alguma mensagem se a variável $mensagem contiver algum
valor. Este trecho nos mostrará as mensagens...
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 o login foi encontrado compara-se o valor retornado pelo banco com o informado
pelo usuário, se deu tudo certo o trecho...
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_...
O marcador <tr > inicia uma nova linha enquanto o seu corresponde </tr > fecha a
linha. Já o marcador <td > é utilizado pa...
Arquivo veiculo.php
Vamos verificar cada parte desta página:
Inicialmente autenticamos o usuário e incluímos o arquivo de ...
Este é o padrão de carregamento da nossa página, armazenamos o valor “cadastrar”
na variável $op, para quando enviarmos o ...
Este último trecho de código PHP executa a atualização no banco de dados,
inicialmente recebe os valores postados, valida ...
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 ...
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
Próximos SlideShares
Carregando em…5
×

2ª prova pós web 1ª chamada

654 visualizações

Publicada em

Atividade da Pós em Desenvolvimento WEB.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
654
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
15
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

2ª prova pós web 1ª chamada

  1. 1. 2ª Prova Pós Web - INGRESSO: 08/08/2014 1ª Chamada - ESPECIALIZAÇÃO EM TECNOLOGIAS PARA APLICAÇÕES WEB foi reagendada para: Dia: 06/06/2015 Horario: 08:30 as 10:00 (Horario de Brasilia) Disciplinas: FERRAMENTAS VISUAIS, PROGRAMAÇÃO EM PHP, PROGRAMAÇÃO EM FLEX, PROGRAMAÇÃO EM HTML, PROGRAMAÇÃO EM HTML 5 WEB AULA 1 Unidade 1 – Ferramentas Visuais ADOBE PHOTOSHOP CS5 ORIENTADO Á WEB 1) APRESENTAÇÃO DO PROGRAMA Bem sabemos que a tecnologia estáaí e sempre à disposição do homem e de seus interesses. Conhecer sobre novas tecnologias é ter a noção de que poderemos estar sempre um passo adiante em relação a nossos próprios conhecimentos, nos destacando assim da concorrência, sobretudo no mundo do trabalho. A informática - mais especificamente – o design gráfico e o web design - é um campo onde o conhecimento de novos processos e ferramentas é determinante. E o Photoshop faz parte deste mundo, e você, ao conhecê-lo um pouquinho, se surpreenderá com suas possibilidades. O Photoshop é um programa que tem como finalidade básica o tratamento de imagens digitais. Estas se formam através de uma combinação de bits e bytes (zeros e uns sistematicamente agrupados) que o computador lê, interpreta e atribui a esta a formação de um ponto e a este um valor de cor e uma posição definida.
  2. 2. Em outras palavras, se pegarmos como exemplo uma fotografia impressa (química fixa sobre papel) e seu processamento em um scanner (digitalizador), veremos que este aparelho converte, através de uma leitura ótica, as informações pictóricas da imagem impressa em dados. Estes dados são interpretados pelo computador e seus valores geram pontos dispostos em um dispositivo de saída (um monitor de vídeo, por exemplo), recompondo a imagem. Portanto ela ganhou uma versão virtual, ou seja, extrapolou de uma origem física à computadorizada através do processo de scanning. O Photoshop justamente entra em processos onde exige-se algo para além do que a imagem real trouxe estampada fisicamente. Muito útil em composições gráficas como cartazes, capas de livros, agendas, calendários, enfim, numa infinidade de aplicações em que faz-se necessária a intervenção ou supressão de elementos visuais ou ainda correções na imagem a fim de se enriquecer uma mensagem. Veja uma breve demonstração em: < https://www.youtube.com/watch?v=iWxsXqHsROE >. Vale lembrar que neste módulo trataremos de alguns comandos tidos como fundamentais do Photoshop para seu trabalho com imagens na web. Porém, como todo programa, você também poderá procurar maior aprofundamento sobre ele em outras fontes, necessitando dedicar muitas horas de incessantes estudos, o que será muito divertido, garanto. Além de se conhecer bem os comandos do Photoshop, faz- se importante procurar obter também conhecimentos periféricos relacionados às imagens e à luz, como física, ótica, cromática, teoria das cores, composição, técnicas de artes plásticas e fotografia, entre outros, para que seus trabalhos ganhem a qualidade e os diferencias que você procura. Vamos começar? a) COMENTANDO A INTERFACE Como a maioria dos softwares de edição, o Adobe Photoshop possui uma interface que aproveita o cognitivo dos usuários, ou seja, distribui itens de menu e sua caixa de ferramentas como que seguindo um certo padrão já conhecido, ficando assim mais fácil de se encontrar os comandos que se queira aplicar pois você já vem sendo “historicamente treinado” para isto. E em relação às versões anteriores à CS5 a sua interface aparentemente não apresentou mudanças estruturais significativas, e lembramos que esta versão já trabalha (assim como desde a versão CS3) otimizações e integrações com outros softwares da própria Adobe, como o Illustrator, o Fireworks e o InDesign, por exemplo.
  3. 3. À esquerda, encontra-se o painel Ferramentas (ou caixa de ferramentas). Estas são utilizadas para operar a imagens. Estão dispostas em grupos e subgrupos (para vê- los basta clicar e segurar um pouquinho o mouse). Na parte superior temos a Barra de Aplicativos que contém os menus de opções de áreas de trabalho e outros aplicativos.
  4. 4. Logo abaixo desta encontra-se a Barra de Opções, cuja função é especificaras ações das ferramentas acionadas. Á direita encontra-se a Área de Painéis, onde serão ajustadas todas as funções complementares e informativas da imagem tratada. Também trará controles importantes como o Histórico de ações, os Layers (camadas), entre outros. A área central é destinada ao trabalho em si, ou seja, é ali que sua imagem será exibida e editada. Alguns técnicos a chamam de Área de trabalho ou ainda de Palco. Percebe-se que a ergonomia (modo com que os elementos da interface estão compostos e distribuídos) ajuda bastante, pois o espaço para se trabalhar com as imagens é bem amplo. E se você tiver um monitor de vídeo de grande formato, melhor ainda. Na parte inferior temos a Barra de Status que informa dados genéricos como o nome do nosso arquivo a quantidade de zoom (ampliação da visualização da imagem) e sua taxa de resolução (tamanho da imagem em pixels). Conheça um pouco mais do visual da interface em: < https://www.youtube.com/watch?v=9M-5JEqfhFc >. IMAGENS DE BITMAP – TIPOS MAIS UTILIZADOS NA WEB Imagens raster (ou bitmap - que significa mapa de bits em inglês) são imagens formadas por pixels, ou seja, por pontos quadráticos com qualidades como tamanho e cores e que se encontram organizados em um grande diagrama. Elas diferem das imagens em vetores. As imagens vetoriais não são compostas por pixels e sim por infinitos pontos organizados em coordenadas e frutos de cálculos matemáticos. A grande vantagem das imagens vetoriais é que pode ser ampliadas e reduzidas praticamente sem perdas de qualidade gráfica, o que não ocorre com as imagens raster, pois são compostas por um número definido de pixels por área (geralmente polegadas).
  5. 5. Um bitmap pode ser monocromático, em escala de cinza ou colorido. Na web, os pixels possuem por padrão o sistema de cores RGB (Red, Green, Blue) conhecidas como cores-luz e que, combinadas, formam as 16 milhões de cores possíveis para representar o mundo real. Quando a imagem possuir além das três cores matrizes uma transparência ele será RGBA (sendo A o nível de alfa de cada pixel). Para mídias impressas (livros, cartazes, revistas, por exemplo) utiliza-se o modo de cor CMYK (Ciano, Magenta, Amarelo e Preto), pois são as quatro cores primárias para pigmentos em impressões (na prática as tintas para offset podem exemplificá-las). Um pouco desta teoria você pode conhecer melhor em: <http://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.html> A maioria das imagens requer um número muito grande de pixels para ser representada completa e integralmente, e isso implica diretamente no tamanho de seus arquivos em unidades de memória (bits, bytes, kilobytes, etc.). Quando se fala em um grande número de imagens armazenadas em discos magnéticos ou transmitidas via rede, surge a necessidade de compactação destas para reduzir espaço em memória e aumentar a velocidade de transmissão entre máquinas. Esta compactação pode ser com ou sem perdas. Os principais formatos adotados com possibilidade de compactação e exibição de imagens na internet são: GIF (máximo 256 cores, indicado para desenhos como ícones, carttons, entre outros), o JPEG (ou JPGs, do P&B até 16 milhões de cores) prioritariamente indicado para fotografias e com alto poder de compressão e o mais recente, o PNG (também até 16 milhões de cores) suportando também transparências e excelentes para cores uniformes. Os JPEGs podem se apresentar também no sistema CMYK, mas este formato de 24 milhões de cores é recomendável apenas para impressões, como dito anteriormente. O Photoshop é totalmente compatível com estes tipos de arquivos e consegue trabalhar não apenas com estes, mas com outros formatos como o BMP (bitmap da Microsoft), o TIFF (alta resolução para impressões), o PDF (formato para distribuição), os EPSs (encapsulados), entre tantos outros. Veja a origem destes arquivos em detalhes em: <http://www.infowester.com/imagens.php>.
  6. 6. 2) EDIÇÃO DE IMAGEM – FUNÇÕES INICIAIS Editar imagem significa trabalhar uma imagem, ou seja, alterar suas características visuais procurando os resultados desejados para ela. Pode ser um desenho à mão livre posteriormente digitalizado, uma fotografia digital, um gráfico de natureza vetorial, enfim, qualquer tipo de imagem é passível de edição e o Photoshop é o software mais indicado, sobretudo para imagens de natureza raster (bitmaps). Como dito nos permite concluir que, ao operarmos com o Photoshop, trabalharemos prioritariamente com pixels. ABRIR ARQUIVO Para trabalharmos com o Photoshop vamos partir do princípio de que você tenha uma versão do CS5 em português. Mas como muitos termos são genéricos do inglês, vamos misturá-los um pouquinho para você já ir adquirindo o jargão do software. Inicialmente, abra o programa clicando no ícone respectivo dentro do meu iniciar de seu sistema operacional (Windows, MacOS, etc.). Aparecerá de pronto a tela de Splash indicando que o programa está sendo carregado. Ao término do carregamento você verá a interface do programa como apresentada no item 1/a desta web-aula. No menu (superior) localize Abrir. Uma caixa de diálogo aparecerá e você poderá escolher, navegando em suas pastas qual imagem gostaria de abrir. Lembrando que ele está habilitado abrir inúmeras extensões (tipos) de imagens, como por exemplo, jpegs, bmps, gifs, pngs e claro, os psds, que são os arquivos de edição nativos do Photoshop. Escolha e marque um arquivo de imagem e, em seguida, clique em abrir (open). Lá estará a imagem ao centro do programa, pronta para ser editada. A ferramenta inicial mais utilizada é a de Seleção. Com ela você poderá editaras posições de linhas-guias, arrastar imagens, marcar layers, entre outras funções. É a primeira da Barra de Ferramentas.
  7. 7. O LAYER (CAMADA) Assim como uma revista possui várias páginas sobrepostas, o Photoshop também possui um sistema muito interessante e funcional para lidar com as imagens composto por layers (camadas). Dominar os layers é assegurar-se de que você fará muita coisa no Photoshop com absoluto sucesso. Você pode criar, apagar, combinar e até apagar layers. Por enquanto, basta dizer que toda a ação que você aplicar incidirá apenas no layer trabalhado, ou seja, na camada que você marcar como ativa no painel Camadas. É possível, também esconder ou visualizar um layer. clicando no ícone “olho” neste painel. Mas, se a sua imagem está colocada no Plano de Fundo (background) e não em um layer específico, não lhe será possível, por exemplo, contar com seu fundo em transparência.
  8. 8. Para criar um novo layer basta clicar com o mouse em um ícone que se assemelha a uma folha de papel com canto dobrado na base do painel Camadas. Caso queira, você também pode duplicar o plano de fundo que aparecerá como novo layer, clicando como lado direito do mouse sobre ele no painel e clicando em duplicar camada nas opções que surgem. Também é possível selecionar toda a imagem – menu Seleção > Tudo, ir em menu Editar > Copiar (ou simplesmente teclar Control C) e, em seguida clicar em Editar > Colar (ou teclar Control V). Pronto! Uma nova camada aparecerá. Você poderá criar também um novo layer através de uma seleção. Daí somente a área selecionada será transportada como um novo layer. Para isso faça a seleção, clique com o lado direito do mouse sobre ela e escola a opção Camada por cópia (ou, em inglês, Layer via copy). Também é possível alterar o nível de transparência de layers criados. Falaremos sobre seleções mais adiante.
  9. 9. CANVAS (TELA DE PINTURA) E TAMANHO DA IMAGEM É muito comum as pessoas fazerem certa confusão a respeito de “tamanho de imagem” x “tamanho da tela de pintura (canvas)”. Toda imagem pode ser mensurada em área, tendo em sua largura e altura tanto uma quantidade limitada de pixels como suas dimensões em milímetros. Estas dimensões podem ser alteradas no Menu > Imagem, pela janela “Tamanho da tela de pintura”, onde ajustamos o tamanho da imagem tendo como valores altura e largura. Uma redução do tamanho do canvas implica diretamente em uma mutilação (corte) da imagem (esta será cortada em função das novas dimensões, porém preservando-se ainda a sua taxa de pixels por polegada - DPIs) como a original.
  10. 10. 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
  11. 11. 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
  12. 12. 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)
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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 >.
  17. 17. 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.
  18. 18. 3) CORES: MODOS E CANAIS
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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: .
  23. 23. 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.
  24. 24. 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
  25. 25. 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.
  26. 26. 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.
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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.
  32. 32. 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.
  33. 33. 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).
  34. 34. 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
  35. 35. 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.
  36. 36. > 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.
  37. 37. > 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.
  38. 38. > 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.
  39. 39. > 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
  40. 40. 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.
  41. 41. > 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.
  42. 42. > 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.
  43. 43. 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:
  44. 44. 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,
  45. 45. 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
  46. 46. 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
  47. 47. 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.
  48. 48. 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
  49. 49. 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).
  50. 50. 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).
  51. 51. 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
  52. 52. 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.
  53. 53. Então, parcialmente temos o seguinte desenho de interface:
  54. 54. 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.
  55. 55. 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.
  56. 56. 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);
  57. 57. 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.
  58. 58. 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.
  59. 59. 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.
  60. 60. 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).
  61. 61. 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
  62. 62. 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 >.
  63. 63. Página4 de 14 É necessário concordar com os termos de licença: Agora devemos configurar a pasta onde será instalado o programa. Se preferir, é possível deixar a pasta que vem pré-configurada. Nós a utilizaremos em nossos exemplos. Após isso, o programa perguntará se deseja criar ícones na barra de tarefas e no desktop, escolha o de sua preferência e clique em Next>.
  64. 64. 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:
  65. 65. 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
  66. 66. 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.
  67. 67. 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
  68. 68. 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:
  69. 69. Página8 de 14 No final da página, temos o título Your Projects, clique na pasta exemplos, e escolha o arquivo que acabamos de criar texto.php. Outra forma de executar é ir diretamente no navegador e digitar localhost/exemplos/texto.php O resultado será: Ao clicarmos com o botão direito do mouse e selecionarmos exibir código fonte, veremos: Por que não visualizamos o código em PHP? Nenhuma parte do script em PHP é exibido no navegador. Isto porque o servidor lê o código em PHP, interpreta e gera o HTML correspondente, que então é enviado para o cliente, que é o responsável por processar e exibir o código HTML. Variáveis Para declarar uma variável em PHP devemos iniciar o nome dela com o símbolo $, seguido por letras ou _ (underscore). A linguagem PHP é case-sensitive, o que significa que ela diferencia letras maiúsculas e minúsculas, por exemplo, a variável x é diferente de X.
  70. 70. 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
  71. 71. 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:
  72. 72. 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.
  73. 73. 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:
  74. 74. 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:
  75. 75. 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
  76. 76. 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
  77. 77. 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.
  78. 78. 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!
  79. 79.  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!
  80. 80. 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.
  81. 81. 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:
  82. 82. 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:
  83. 83. 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:
  84. 84. 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
  85. 85. 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.
  86. 86. 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).
  87. 87. 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:
  88. 88. 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.
  89. 89. 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:
  90. 90. 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.
  91. 91. 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
  92. 92. 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.
  93. 93. 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

×