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/2015Horario: 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 1Unidade 1 – Ferramentas Visuais ADOBE PHOTOSHOP CS5 ORIENTADO Á WEB1) APRESENTAÇÃO DO PROGRAMA

Bem sabemos que a tecnologia está aí e sempre à disposição do homem e de seus interesses. Conhecer sobre novas tecnologias é ter a noção de que poderemos estar sempre um passo adiante em relação a nossos próprios conhecimentos, nos destacando assim da concorrência, sobretudo no mundo do trabalho. A informática - mais especificamente – o design gráfico e o web design - é um campo onde o conhecimento de novos processos e ferramentas é determinante. E o Photoshop faz parte deste mundo, e você, ao conhecê-lo um pouquinho, se surpreenderá com suas possibilidades.

O Photoshop é um programa que tem como finalidade básica o tratamento de imagens digitais. Estas se formam através de uma combinação de bits e bytes (zeros e uns sistematicamente agrupados) que o computador lê, interpreta e atribui a esta a formação de um ponto e a este um valor de cor e uma posição definida.

Em outras palavras, se pegarmos como exemplo uma fotografia impressa (química fixa sobre papel) e seu processamento em um scanner (digitalizador), veremos que este aparelho converte, através de uma leitura ótica, as informações pictóricas da imagem impressa em dados. Estes dados são interpretados pelo computador e seus valores geram pontos dispostos em um dispositivo de saída (um monitor de vídeo, por exemplo), recompondo a imagem. Portanto ela ganhou uma versão virtual, ou seja, extrapolou de uma origem física à computadorizada através do processo de scanning.O Photoshop justamente entra em processos onde exige-se algo para além do que a imagem real trouxe estampada fisicamente. Muito útil em composições gráficas como cartazes, capas de livros, agendas, calendários, enfim, numa infinidade de aplicações em que faz-se necessária a intervenção ou supressão de elementos visuais ou ainda correções na imagem a fim de se enriquecer uma mensagem. Veja uma breve demonstração em:

< https://www.youtube.com/watch?v=iWxsXqHsROE >.Vale lembrar que neste módulo trataremos de alguns comandos tidos como fundamentais do Photoshop para seu trabalho com imagens na web. Porém, como todo programa, você também poderá procurar maior aprofundamento sobre ele em outras fontes, necessitando dedicar muitas horas de incessantes estudos, o que será muito divertido, garanto. Além de se conhecer bem os comandos do Photoshop, faz-se importante procurar obter também conhecimentos periféricos relacionados às imagens e à luz, como física, ótica, cromática, teoria das cores, composição, técnicas de artes plásticas e fotografia, entre outros, para que seus trabalhos ganhem a qualidade e os diferencias que você procura. Vamos começar? a) COMENTANDO A INTERFACEComo a maioria dos softwares de edição, o Adobe Photoshop possui uma interface que aproveita o cognitivo dos usuários, ou seja, distribui itens de menu e sua caixa de ferramentas como que seguindo um certo padrão já conhecido, ficando assim mais fácil de se encontrar os comandos que se queira aplicar pois você já vem sendo “historicamente treinado” para isto. E em relação às versões anteriores à CS5 a sua interface aparentemente não apresentou mudanças estruturais significativas, e lembramos que esta versão já trabalha (assim como desde a versão CS3) otimizações e integrações com outros softwares da própria Adobe, como o Illustrator, o Fireworks e o InDesign, por exemplo.

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

Logo abaixo desta encontra-se a Barra de Opções, cuja função é especificar as ações das ferramentas acionadas. Á direita encontra-se a Área de Painéis, onde serão ajustadas todas as funções complementares e informativas da imagem tratada. Também trará controles importantes como o Histórico de ações, os Layers (camadas), entre outros.A área central é destinada ao trabalho em si, ou seja, é ali que sua imagem será exibida e editada. Alguns técnicos a chamam de Área de trabalho ou ainda de Palco. Percebe-se que a ergonomia (modo com que os elementos da interface estão compostos e distribuídos) ajuda bastante, pois o espaço para se trabalhar com as imagens é bem amplo. E se você tiver um monitor de vídeo de grande formato, melhor ainda. Na parte inferior temos a Barra de Status que informa dados genéricos como o nome do nosso arquivo a quantidade de zoom (ampliação da visualização da imagem) e sua taxa de resolução (tamanho da imagem em pixels).Conheça um pouco mais do visual da interface em:

< https://www.youtube.com/watch?v=9M-5JEqfhFc >.

 

IMAGENS DE BITMAP – TIPOS MAIS UTILIZADOS NA WEB

Imagens raster (ou bitmap - que significa mapa de bits em inglês) são imagens formadas por pixels, ou seja, por pontos quadráticos com qualidades como tamanho e cores e que se encontram organizados em um grande diagrama. Elas diferem das imagens em vetores. As imagens vetoriais não são compostas por pixels e sim por infinitos pontos organizados em coordenadas e frutos de cálculos matemáticos. A grande vantagem das imagens vetoriais é que pode ser ampliadas e reduzidas praticamente sem perdas de qualidade gráfica, o que não ocorre com as imagens raster, pois são compostas por um número definido de pixels por área (geralmente polegadas).

Um bitmap pode ser monocromático, em escala de cinza ou colorido. Na web, os pixels possuem por padrão o sistema de cores RGB (Red, Green, Blue) conhecidas como cores-luz e que, combinadas, formam as 16 milhões de cores possíveis para representar o mundo real. Quando a imagem possuir além das três cores matrizes uma transparência ele será RGBA (sendo A o nível de alfa de cada pixel). Para mídias impressas (livros, cartazes, revistas, por exemplo) utiliza-se o modo de cor CMYK (Ciano, Magenta, Amarelo e Preto), pois são as quatro cores primárias para pigmentos em impressões (na prática as tintas para offset podem exemplificá-las).

Um pouco desta teoria você pode conhecer melhor em: <http://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.html>

A maioria das imagens requer um número muito grande de pixels para ser representada completa e integralmente, e isso implica diretamente no tamanho de seus arquivos em unidades de memória (bits, bytes, kilobytes, etc.). Quando se fala em um grande número de imagens armazenadas em discos magnéticos ou transmitidas via rede, surge a necessidade de compactação destas para reduzir espaço em memória e aumentar a velocidade de transmissão entre máquinas. Esta compactação pode ser com ou sem perdas.

Os principais formatos adotados com possibilidade de compactação e exibição de imagens na internet são: GIF (máximo 256 cores, indicado para desenhos como ícones, carttons, entre outros), o JPEG (ou JPGs, do P&B até 16 milhões de cores) prioritariamente indicado para fotografias e com alto poder de compressão e o mais recente, o PNG (também até 16 milhões de cores) suportando também transparências e excelentes para cores uniformes. Os JPEGs podem se apresentar também no sistema CMYK, mas este formato de 24 milhões de cores é recomendável apenas para impressões, como dito anteriormente. O Photoshop é totalmente compatível com estes tipos de arquivos e consegue trabalhar não apenas com estes, mas com outros formatos como o BMP (bitmap da Microsoft), o TIFF (alta resolução para impressões), o PDF (formato para distribuição), os EPSs (encapsulados), entre tantos outros.

Veja a origem destes arquivos em detalhes em: <http://www.infowester.com/imagens.php>.

 

2) EDIÇÃO DE IMAGEM – FUNÇÕES INICIAIS

Editar imagem significa trabalhar uma imagem, ou seja, alterar suas características visuais procurando os resultados desejados para ela. Pode ser um desenho à mão livre posteriormente digitalizado, uma fotografia digital, um gráfico de natureza vetorial, enfim, qualquer tipo de imagem é passível de edição e o Photoshop é o software mais indicado, sobretudo para imagens de natureza raster (bitmaps). Como dito nos permite concluir que, ao operarmos com o Photoshop, trabalharemos prioritariamente com pixels.

 ABRIR ARQUIVOPara 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á editar as posições de linhas-guias, arrastar imagens, marcar layers, entre outras funções. É a primeira da Barra de Ferramentas.

O LAYER (CAMADA)

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

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

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

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

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

< https://www.youtube.com/watch?v=6LyNVCVn7kg >.  RÉGUAS E LINHAS GUIA

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

< https://www.youtube.com/watch?v=AeUTD-cyA4U >. HISTORY (HISTÓRICO)

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

uma imagem. Estas opções você as encontrará sempre no Menu > Imagens > Ajustes. Além das funções que cito aqui, existem várias outras que você pode experimentar livremente, como a de ajuste de cor seletiva, a de curva de tons, a de ajustes por canais de cor, etc. As funções que especifico, a seguir, são como que essenciais para o seu trabalho com imagens para web. BRILHO E CONTRASTE

No menu Imagens > Ajustes procure a opção Brilho e Contraste (1a. opção). Comece a deslizar os controles da caixa de diálogo que aparece de maneira a perceber, já na imagem as variações de claro a escuro (brilho) de meio tons à saturação luminosa (contraste). Se você estiver em um layer, ou em uma seleção, assim como todos os demais comandos, este também vai atuar somente neles. Clique ok para concluir a operação.

  

ESCALAR, ESPELHAR, GIRAR, DISTORCER E ADICIONAR PERSPECTIVA

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

Na Barra de ferramentas você encontrará um ícone semelhante a um pequeno quadrado com uma diagonal, logo abaixo das setas de seleção. Também conhecido como “crop” este comando, ao arrastar-se o mouse pela imagem permite com que esta, após demarcada a área e devidamente ajustada, seja aparada (cortada), mantendo-se apenas um trecho da mesma e descartando-se o restante. Procedimento semelhante pode ser feito, por exemplo, especificando-se um novo tamanho para o canvas. 

  CARIMBO

Uma das ferramentas mais curiosas e interessantes do Photoshop. Localizada na Barra de ferramentas e identificada com um ícone representando um carimbo, ela é capaz de copiar trechos da imagem para outros campos da mesma. Basta você clicar na ferramenta Carimbo, escolher a forma e o tamanho de seu raio de ação (painel de pincéis na Barra de Opções) segurar a tecla Alt e com o mouse clicar na área desejada que se queira duplicar (matriz). Em seguida, solte a tecla alt e com o mouse vá clicando e/ou arrastando o cursor por sobre a área que deseja clonar a imagem. Você verá que a parte da imagem clicada com Alt será duplicada fielmente no campo que você está passando e/ou clicando o carimbo. Experimente! Com um pouco de treino e paciência você consegue!Veja um exemplo em:

< https://www.youtube.com/watch?v=9v0pt6F6oZM >. 

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

 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 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 minimizar tais 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ÇÃOUma 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ê quiser trabalhar pontualmente um trecho da sua imagem, deve selecioná-lo.Recomenda-se após a seleção copiar e colar ou seja, criar um novo layer só com o trecho selecionado fim de se trabalhar com ele de maneira mais particular. A seleção pode ser utilizada para se retirar o fundo, ou seja, contorna-se a imagem com a ferramenta laço poligonal e, em seguida copia-se e cola-se de modo que um

novo layer apareça. O layer primitivo (ou ainda o background) poderá ser descartado. O resultado será um Layer com um trecho da imagem e destituído do restante (que agora se tornou transparente).

 

A seleção também pode escolher o trecho de uma imagem a fim de apagá-lo. Basta gerar a seleção como preferir e apertar a tecla Delete ou (ainda usar a ferramenta borracha descrita mais adiante) dentro da mesma. Lembramos que se fizer isso no plano de fundo (background) o mesmo não se tornará transparente e sim obedecerá a cor que está indicada em um dos dois quadradinhos sobrepostos logo abaixo da barra de ferramentas (o inferior). Como já explicado o quadradinho superior indica as cores que o balde e os pincéis portarão (pintura de figuras) e o sobreposto a cor do fundo. CRIANDO ÁREAS COLORIDAS A PARTIR DAS SELEÇÕES

Você também pode criar áreas de tons contínuos (chapados) a partir de seleções. Basta você criar a área de seleção (via formas geométricas ou pela ferramenta Laço poligonal) disponíveis na Caixa de ferramentas e com a ferramenta Lata de tinta ir

preenchendo estas áreas marcadas. Procure fazer isso em um novo layer, pois fica mais fácil editá-lo.      FERRAMENTA MAGIC WAND (VARINHA MÁGICA)

Tão importante quanto esta ferramenta é saber como e quando utilizá-la. A varinha mágica (magic wand) é uma maneira rápida e eficiente de selecionar áreas de cores em uma imagem (seu ícone acionador está na barra de ferramentas). Se você tiver uma imagem que contenha uma informação colorida em um fundo branco, por exemplo, e deseja extrair este fundo, comece clicando com a varinha mágica nesta área branca.Você vai notar que uma seleção marcou-a. Mas o raciocínio é este: marcamos a minha não-figura (fundo branco) mas eu quero apenas a figura (não-branco). O que temos a fazer é ir em: Menu > Selecionar e clicar em Inverter (ou teclar Shift + Control + i). Pronto! Tudo o que era não-selecionado agora é selecionado. Basta agora você teclar Control C (ou Menu > Editar > Copiar) e Control V (ou Menu > Editar > Colar). A figura selecionada foi sem o fundo branco para um novo layer. Caso queira, apague o layer original para perceber que o fundo não mais existe.Veja um exemplo de sua aplicação em:

< https://www.youtube.com/watch?v=9v0pt6F6oZM >.

Você pode calibrar a intensidade da força da varinha mágica na Barra de Opções em Tolerância. Porém, com muita tolerância: ela corre o risco de invadir áreas que você não queira selecionar. Pouca tolerância: se tiver áreas de tonalidades muito próximas, elas não

vão ser selecionadas. Outro detalhe: cuidado, pois este tipo de seleção em recortes costuma propiciar, principalmente em imagens de baixa resolução um serrilhado indesejado nas extremidades da imagem copiada em um novo layer. Isso pode ser atenuado dando à seleção (logo antes do Copiar e Colar) um tratamento de difusão (Feather) de pouca intensidade. Está em Selecionar > Modificar > Difusão ou digitando o atalho Control Alt D. Mas pondere, veja qual o melhor meio de se selecionar um trecho de uma imagem: laço poligonal, figuras geométricas ou curvas em seleção, como veremos melhor mais adiante. Em matéria de seleção rápida, nem tudo se resolve com a varinha mágica.6) TEXTOSO 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) ACTIONSEste recurso é muito útil para quando você tiver que executar as mesmas ações (por exemplo, alterar o tamanho da imagem, ou descolori-la, etc.) em diferentes arquivos. Você não precisa fazer tudo repetitivamente um por um. Supondo que você pretenda aplicar em duzentas imagens cinco procedimentos comuns. E fazer isso uma a uma, fica bastante complicado, não é? Então, pensando nisso o Photoshop criou o comando Actions, que tem a capacidade de gravar as suas ações e depois, apenas um clique, aplicá-las instantaneamente na sua sequência de imagens. Vamos ver?Abra todas as imagens que você deseja tratar com os mesmo efeitos. Agora, localize o painel Ações no menu Janelas. Se houver alguma pasta lá, apague-as. Na sua parte inferior você verá o ícone par criar uma nova ação. Clique-o. Ao abrir uma janela dê o nome para esta ação e clique em Gravar. Volte ao painel Ações, lá terá uma bolinha vermelha ativa (tipo REC de gravadores). Escolha uma imagem, ela será a primeira e servirá de referencial para as demais. Agora comece a trabalhar a imagem como preferir: altere sua cor, recorte com Crop, espelhe, etc. Neste momento o Photoshop já começou a gravar seus passos, e você pode acompanhá-los no painel Actions. Comandos como Salvar e Fechar também podem ser gravados. Terminados os procedimentos na primeira imagem, clique no quadradinho (stop) na parte inferior do painel Ações para cessar a gravação. Para aplicar nas demais basta apenas ir clicando no botão triangular PLAY que se encontra também na parte inferior do painel Actions e observar que a cada clique, as suas imagens vão sendo submetidas às ações gravadas e, se você gravou Arquivo > Fechar elas vão também se fechando. Interessante, não é?Mas veja na prática em:

.8) PRINCIPAIS EFEITOS

O Photoshop possui uma infinidade de efeitos que podem ser aplicados isoladamente ou combinados em suas imagens. Para especificá-los todos seriam necessárias muitas horas de extensa dedicação e comentários explicativos. Porém, como sugestão para o seu cotidiano como webdesigners, foram selecionados alguns efeitos considerados imprescindíveis e que, de fato podem trazer bons diferenciais aos seus trabalhos. FILTROSNo 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. ACABAMENTOEstes 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.

  

CAMADASEm 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á estiver em 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 experimentar os três mais trabalhados: Drop shadow (sombra projetada), outer glow (brilho externo) e Bevel and emboss (chanfro e entalhe). A sombra projetada, como o próprio nome diz cria uma sombra por detrás da imagem e sua intensidade e característica pode ser controlada pelo painel referente. O efeito é como se a imagem estivesse levemente elevada e projetando uma sombra sobre o que está no layer abaixo. O brilho externo, por sua vez, pode ser trabalhado como se fosse um brilho uniforme e luminoso ao redor da imagem. Dá-nos a impressão de que o objeto possui uma aura, um esfumaçado luminoso em seu contorno. Ambos os efeitos de sombra podem ser trabalhados em seus valores de cores. Vai do efeito que você queira explorar. Os efeitos seguintes (chanfro / entalhe e relevo) simulam alto e baixo relevo nas bordas das imagens e são muito interessantes, principalmente para se criar botões para websites. Eles rebaixam ou

elevam as bordas da imagem e trabalham sombra e luz nas mesmas a fim de se ter a sensação de um efeito tridimensional.

  9) SMART OBJECT E CURVAS VETORIAISO 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 trabalhar em 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 estar em layers separados) sem que sua qualidade gráfica seja alterada.

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

E também não adiantará tentarmos diminuí-la novamente no intento de "consertar", pois a mesma já se converteu em uma imagem com uma nova taxa de pixel. A sugestão então é, ao lidar com imagens raster (bitmap), procurar trabalhar com o tamanho exato das mesmas, ou se for reduzir, que esta redução não seja tão acentuada. E aumentar imagens dentro dos layers, evite, pois pode serrilhar (estourar pixels)! 

  

Retomando nosso raciocínio, para importar uma imagem vetorial do Illustrator para o Photoshop proceda assim: No menu Arquivo, clique em Abrir. Na sua Caixa de diálogos procure um arquivo do Illustrator que contenha a imagem que deseja trazer para o Photoshop. Clique em abrir e imediatamente um quadro de importar PDF aparecerá (é desta forma que ocorre a conversão / migração).

Dimensione a imagem para o tamanho desejado (em área e em pixels), lembrando que uma imagem de boa qualidade para impressão é gerada com 300 DPIs de resolução e dimensionada no tamanho ideal para sua aplicação. Por exemplo, se tivermos uma imagem para uma capa de CD criada no Illustrator, devemos abri-la no Photoshop como descrito, colocando como valores 300 DPIs e tamanho de área aproximadamente 110 x 110 mm (11 x 11 cm) que é o tamanho médio de um encarte de CD. E claro: escolhamos o modo de cor CMYK por se tratar de imagem a ser impressa. Para arquivos de internet o raciocínio é o mesmo, porém trabalhe com taxas de bitmap de no máximo 96 DPIs de resolução (para que seus arquivos não fiquem muito pesados) o, modo de cor será RGB e suas dimensões tratadas em pixels e não em milímetros, de acordo com a aplicação destinada. Depois destas configurações, basta clicar em ok e seu vetor já estará no Photoshop.

Agora, resta apenas você clicar com o lado direito do mouse no layer (painel camada) referente a ela e selecionar a opção “Converter em objeto inteligente”. Deste modo, esta imagem poderá ser redimensionada livremente sem problemas de “estourar pixels”, pois se tratará de uma referência vetorial.

Veja um exemplo em:

< https://www.youtube.com/watch?v=PjZF0KpSGJs >.

Outro recurso muito útil do Photoshop é o de se poder desenhar com curvas. Para tanto utilize a ferramenta “Caneta”, que se encontra na sua Barra de ferramentas, à esquerda da tela. Com ela você pode desenhar livremente formas como se fosse uma ferramenta de ilustração vetorial. Para desenhar curvas basta utilizar a ferramenta caneta, aplicando-a no arquivo e, através da ferramenta Seleção direta, ir inserindo nós (pontos de ancoragem) e mantendo o mouse pressionado ir arrastando-os e modelando-os até atingir a forma ideal. Utilize a tecla Alt do teclado para suavizá-las.

Uma utilização muito comum para estie tipo de trabalho é em recortes pela possibilidade de convertê-la em seleção. Você pode ir desenhando curvas em um layer acima da imagem que se queira extrair do fundo. Contorne toda a imagem, faça os ajustes nos nós como preferir e depois da imagem totalmente contornada, clique com o lado direito do mouse na curva e clique na opção Criar seleção. Você perceberá o que era curva se transformou em seleção. O que você tem a fazer agora é deletar este layer (a seleção ficará flutuante), copiar e colar para ver sua imagem duplicada e sem o fundo. A imagem selecionada foi para um novo layer. Delete o layer de baixo (o da imagem original) para você ver que esta imagem estará perfeitamente recortada (sem fundo). Este tipo de trabalho dará um refinamento bem melhor ao recorte do que se você utilizar, por exemplo, a ferramenta varinha mágica ou o laço poligonal.

Confira outras informações em:

< http://www.tecmundo.com.br/imagem/2554-photoshop-domine-a-pen-tool-e-faca-curvas-elaboradas-.htm > ou

 

< https://www.youtube.com/watch?v=yUDBFoQ8EI4 >.

 

10) FILTROS DIVERSOS

No Menu > Filtro, poderão ser encontrados uma infinidade de efeitos aplicáveis em seus trabalhos. São efeitos das mais variadas naturezas. Efeitos que imitam pinceladas artísticas, lápis de cor, texturizadores, simuladores de materiais e volumes, etc. Também é possível distorcer as imagens criando efeitos de lentes e espelhos muito interessantes. Convém você abrir uma imagem no Photoshop (de preferência uma foto da internet por ser mais leve) e ir experimentando livremente estes efeitos a fim de se acostumar com eles. São efeitos que, se aplicados com bom senso e imaginação, podem gerar trabalhos incríveis e diferenciados.

 

 

 11) SALVAR

ARQUIVOS DE IMAGEMAo terminar seu trabalho, você pode salvá-lo em seu computador no formato de imagem que desejar, a partir das opções que o Photoshop lhe propor. Lembrando que o formato. PSD é o nativo e, uma vez criado, tem a propriedade de conservar todas as propriedades do mesmo, como layers criados, efeitos aplicados, entre outros e permite, desta forma, que você continue a edição de onde parou. Cada formato a ser salvo depende de alguns parâmetros que você mesmo propõe no momento do salvamento. Para web os mais comuns são GIF, JPG e PNG.Um exemplo: se optar em salvar no formato JPG, o Photoshop pedirá, além do local onde será salvo, as especificações de compactação.

 DOIS MODOS PARA WEBSupondo 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 salvar verifique se, na parte inferior da caixa de diálogos estará a opção 'todas as fatias”. Salve. Pelo navegador de seu sistema operacional (Windows Explore, por exemplo) localize a pasta em que você salvou e verá que lá estarão em arquivos distintos todos os pedaços da sua imagem em uma pasta que o próprio programa criou.

 

Além desta forma, para se gerar uma imagem compatível com uma boa aplicação na internet, utilize a opção no Menu > Salvar para Web. Isto faz com que os arquivos gerados tenham uma otimização para esta aplicação em específico, otimização, sobretudo, no que diz respeito à seu tamanho em KB e à qualidade geral da imagem.

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

  

  TECNOLOGIAS PARA APLICAÇÕES WEB

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

De maneira similar ao Photoshop, o Fireworks apresenta as suas opções de menus e ícones com características ergonômicas, estéticas e visuais muito parecidas com os demais programas da suíte de aplicativos CS5. Aliás, se você observar de relance o Fireworks pode ser confundido facilmente com o Photoshop. Porém, olhando para as sutilezas das ferramentas é que você, aos poucos vai percebendo a diferença e se fascinando com ele também.Veja uma introdução muito interessante em:

< https://www.youtube.com/watch?v=w-ZNsXQzHn8 >. 2) MENUS HORIZONTAIS (BARRA SUPERIOR)> ArquivoResumidamente falando, este menu traz as opções de trabalho com arquivos (abrir, fechar, salvar, importar e exportar, entre outros), além de possibilidade de visualização dos trabalho simulando HTML e algumas opções de configurações mais

genéricas. Como são comandos relativamente básicos, vamos tralhando com eles à medida que as demandas das outras ações e ferramentas irão exigindo.

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

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

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

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

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

> Comandos

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

> Menu FiltrosNeste menu conseguimos fazer ajustes em bitmaps (rasters) como cores, desfoques nitidez, adicionar ruídos e outros como conversão e canal alfa e alteração de bordas. Isto ajuda muito porque não precisamos necessariamente levar esta imagem ao Photoshop para fazer correções neste nível e retorná-las ao Fireworks. Dá para fazer estes ajustes no próprio programa e com uma qualidade bem satisfatória.

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

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

 Um ótimo resumo do menu superior está em:

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

 

 

Vamos comentar agora um pouco sobre a Barra de ferramentas. De imediato, você vai perceber que ela é bem parecida com a do Photoshop. E de fato, isso é verdade porque muitas funções ali contidas aplicam-se às imagens, como no Photoshop. São ferramentas extremamente simples e funcionais. Vamos comentar, assim como fizemos com os itens do Menu superior, de maneira sintética seus principais integrantes. Lembrando que

 

elas são divididas em seis grandes grupos: Selecionar, Bitmap, Vetor, Web, Cores e Exibir. E a grande maioria das ferramentas desta barra oferece outras tantas partindo de seus ícones primários, bastando segurar o mouse apertado com o cursor sobre estes e aguardar o seu desdobramento.

 Algumas ferramentas também permitem opções quando em trabalho de edição você clicar com o lado direito do mouse sobre o objeto.Selecionar: As quatro primeiras ferramentas são consideradas de uso geral: a primeira seta em negro é a ferramenta ideal para selecionar objetos. A seta em branco é considerada uma seta de sub-seleção, pois pode editar trechos de objetos como nós. A terceira ferramenta consegue alterar o tamanho do objeto e a quarta é o Cortar (como o crop), que é capaz de alterar o tamanho da tela de pintura realizando recortes.Bitmap: Traz algumas ferramentas de seleção como área de seleção, laço poligonal, varinha mágica. Também traz a ferramenta Pincel, que combinada com suas funções na Barra de Propriedades permite desenhar-se com vários tipos e espessuras de pincéis. Tem também a ferramenta Lápis que também é um bom instrumento para desenho e finalmente as ferramentas para nitidez, borrar, desfocar e Carimbo, capaz de clonar, duplicar partes de um bitmap como se fosse no Photoshop.Vetor: Linha, caneta, retângulo, texto, forma livre e faca. A ferramenta linha cria e modela linhas vetoriais. A caneta cria contornos editáveis que podem ser convertidos em seleções, por exemplo. A ferramenta retângulo, devido a seu ícone,

aparentemente parece produzir apenas figuras quadráticas, mas não é verdade. Ela vai mais além: ao mantê-la pressionada este menu se desdobra numa grande quantidade de figuras. Isso ajuda principalmente no momento de se desenhar no Fireworks. A ferramenta Texto (T) é utilizada para a inserção e dição de textos em seu trabalho e, ao clicá-la habilita-se automaticamente a Caixa de propriedades (texto). A ferramenta forma livre edita com mais intensidade as curvas desenhadas pela ferramenta linha. Funciona como se você empurrasse com o dedo para modelá-la. Mantendo-se o ícone pressionado você tem sub-opções de alterar a forma de áreas ou de caminhos realizados com pincéis sensíveis à pressão.Web: com as ferramentas Pontos de acesso (circular, retangular e poligonal), ferramenta Fatia (capaz de particionar uma imagem em vários arquivos de imagens a fim de otimizar sua 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 estiver construindo e modelando interfaces.Bem, vamos partir de um modelo. No caso vamos partir de alguns parâmetros que são considerados padrões. O primeiro é o seguinte: toda interface de um website deve se apresentar-se navegável, assim como todo seu conteúdo acessível dentro do que chamamos de janela do navegador (browser). Como exemplo de navegadores podemos citar o Internet Explorer, o Mozilla Firefox, o Google Chrome, o Opera, o Apple Safari, entre outros.

Esta área é dimensionada não em milímetros, mas sim em pixels. Esta taxa de pixels pode alterar-se de acordo com a taxa de resolução dos monitores de vídeo. Como a grande maioria ainda utiliza monitores com resolução de 1024 x 768 pixels, temos que descontar desta totalidade as áreas destinadas à Barra de Tarefas do Windows, a janela do navegador e a barra de rolagem vertical (na lateral direita). Ficaremos então com uma área útil para a exibição do site, dentro desta resolução de tela, de 990 x 590 pixels. Então vamos trabalhar nosso layout considerando uma área de 990 x 590 pixels a uma taxa de 96 pixels por polegada (96 DPIs), uma vez que a resolução mínima para a exibição de arquivos na web é de 72 DPIs. Primeiramente, então vamos abrir nosso Fireworks e criar um arquivo (em PNG) com estas dimensões (990 x 590), 96 DPIs e fundo branco. Vamos tentar?

Abra o Photoshop e vamos criar primeiramente um topo para ele. No Menu, vá em Novo e especifique como largura 990 pixels e como altura 200 pixels a uma taxa de 96 DPIs em fundo branco. Clique ok e você verá uma faixa branca. Esta será a sua área do topo. Como tema, vamos colocar uma imagem de fundo, trabalhar uma mescla de cor e aplicar um texto com efeitos como exemplo. No menu abrir do Photoshop, procure uma fotografia chamada Farol na pasta Imagem do seu Windows. Caso não tenha, escolha outra qualquer de seu gosto apenas como título de exercício. Abra esta imagem, em Selecionar escolha Tudo, em Editar clique em

Copiar. Feche este arquivo. No arquivo Novo que criamos primeiro, vá em Editar e clique em Colar.Você vai ver que a fotografia foi colada em uma nova camada por sobre o background, mas teve parte de sua imagem ocultada, pois estamos com uma área de apenas 200 px de altura, lembra-se? Então, com a ferramenta Mover (a 1a da Barra de Ferramentas do Photoshop), posicione a imagem de acordo com seu gosto, valorizando algum trecho desta dentro da janela.

Vamos aplicar agora a Mescla. Crie uma nova camada no Painel Camada, na Caixa de ferramentas procure no quadradinho das cores (o superior) um tom de laranja, e com a ferramenta Lata de tinta clique sobre a fotografia. Tudo irá ficar laranja.No menu Camadas, onde há um campo escrito “Normal” clique e procure “Multiplicar”. Você verá que a imagem ficou toda alaranjada.

Agora vamos escrever uma informação texto sobre a imagem. Clique na ferramenta Texto e escreva com a fonte Cambria tamanho 48 o texto “Photoshop CS5” em preto. No menu Camada, procure Estilo de Camada, clique em Brilho Externo. Mexa livremente de modo a ter um contorno com espessura e cor de acordo com o seu gosto. Clique ok. Salve para web como imagem JPG de qualidade 70.

Voltando ao Fireworks, no menu importar, procure onde você salvou o JPG que será seu topo e importe-o, posicionando-o na parte superior da interface. Logo abaixo do

topo já colocado, com a ferramenta retângulo crie uma área retangular de 990 x 30 pixels na cor negra. Use a Barra de propriedades inferior do Fireworks para estas definições. Esta será nossa área de menu principal. Vamos agora criar botões para ela.

Faça um retângulo de 150 x 25 pixels. Na barra de propriedades, no quadradinho de cor escolha ao lado a opção gradiente contorno. Edite as cores de modo a ter o seu miolo vermelho e o contorno marrom escuro. Com a ferramenta texto clique sobre o botão e digite com a fonte Verdana em branco (aqui volte à tecla Gradiente para Sólido e clique no quadradinho branco) Bold, corpo 14 o termo A EMPRESA.

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

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

 Veja uma montagem simples de um layout em:< https://www.youtube.com/watch?feature=endscreen&v=FtP3o0Q3NCs&NR=1 >.

 

Nota: Existe um site que se chama <www.lipsum.com>. Este site contém textos meramente fictícios para você aplicar em seus layouts simulando conteúdos textuais. Bem melhor que ficar escrevendo nonono ou asdfdsfn, pois embora esta lá tudo em latim, as palavras são reais e podem ajudar a simular melhor as manchas de texto no seu layout. Pegue este texto que o exercício pede de lá, se preferir. Ao final deste, ainda dentro do caixa cinza (fundo do texto) coloque Saiba mais... (em cinza, bold, Verdana 11 e sublinhado).

Vamos transformar este Saiba mais... em um link. Para isso, selecione-o e tecle F8. Na caixa que abre marque a opção botão e dê OK. Automaticamente o Fireworks cria sobre ele um GIF transparente. Pois bem, dê dois cliques nesse GIF. Perceba que o painel propriedades mudou. Na opção Estado (marcando Liberado) procure e habilite Sobre. Perceba que ele desapareceu! Mas não se assuste, pois o Fireworks entende que não há nada para ele alternar na hora de você passar o mouse em cima (rollover). Localiza clique o botão “Copiar gráfico acima”. Pronto ele apareceu

novamente (foi copiado). Troque a cor, por exemplo, para marrom. Para voltar clique na aba superior do arquivo “Pagina 1”.

Para inserir um link (pode ser um arquivo local, um endereço URL, por exemplo, como http://www.unopar.br) digite-o na Barra de propriedades no campo “link”. Em texto alternativo digite um comentário para seu link e em Destino, habilite _self (para abrir na mesma aba do navegador), Dê F12 e passe o mouse sobre. Clique e teste seu link.

Vamos colocar uma imagem ao lado deste texto para ilustrá-lo. Importe alguma outra imagem da pasta Minhas Imagens do Windows: qualquer uma, pois será apenas como exemplo. Sua altura deve ser igual ao do retângulo do fundo do texto que criamos (230 px). A largura obviamente será proporcional, uma vez que não devemos distorcer nem fotografias e nem letras. Todas as ampliações e reduções devem ser proporcionais!

Clique F12 para visualizar.

Para finalizar esta etapa, vamos criar um menu vertical com os mesmos rótulos (títulos) do menu horizontal. Faça cada palavra em Verdana Regular 12, branco. O fundo deste menu será um retângulo em preto, alinhado à esquerda e conforme o desenho a seguir.

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

Vamos programar o menu vertical? Faça como descrito quando você programou o Saiba mais..., lembra? Clique na palavra converta-a em botão F8). Dê dois cliques e em Estado habilite Sobre e Copiar gráfico acima. Troque a cor do texto. Na aba superior volte para Página 1. Dê F12 e teste-os. Por enquanto não terão ação nenhuma a não ser o rollover. Posteriormente você irá colocar os links, nomeados de acordo com as outras páginas HTMLs a serem criadas.

Veja a construção simples de um menu em:

< https://www.youtube.com/watch?v=LsRZJkePYZE >.

 

Abaixo da foto que você importou ao centro da interface, crie, conforme o exemplo uma caixinha com a indicação de um campo para pesquisas. Este campo conterá a indicação de uma área para digitação e dois botões: Limpar formulário e OK.

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

 

Vamos agora, para finalizar, criar um banner animado para colocar na base esquerda (abaixo do menu de nossa interface). O meu roteiro foi esse:

1) Criar arquivo novo - 635 x 60 px;

2) Em Otimizar, mudar para WebSnap 128 e GIF animado;

3) Desenhar retângulo cinza também de 635 x 60 px;

4) Pintar com Estilo > Painel estilo > Estilo Plástico;

5) Escrever uma palavra: Fireworks e posicioná-la fora da área;

6) Inserir uma pequena imagem também (importar);

7) Selecionar tudo (Control A);

8) No painel Estado, crie mais 16 estados no ícone Novo (folha de papel c/ canto dobrado). Copiados os elementos (marcados a partir do Estado 1), vá clicando nos demais estados (painel) e dando Control V para colar;

9) Clique no texto com o lado direito do mouse, converta-o em Caminho. Com o lado direito novamente, clique Animar seleção;

10) Coloque exatamente o número de estados como sendo a quantidade de frames. Os demais parâmetros ficam como estão;

11) Clique e arraste o primeiro nó (ponto vermelho e espalhe a linha que estará vinculada o texto até onde você quer;

12) Com a fotografia faremos a mesma coisa, só que ao invés de deslocamento, vamos esmaecê-la [CA1] (fade in);

13) No estado 1 clique na Foto com o lado direito do mouse > Animar > Animar Seleção.

14) Na caixa altere para 16 estados e no item Opacidade coloque de 0 a 100 (e não de 100 a 100). Apague nos demais estados a foto (deixe só transparente no primeiro);

15) Dê F12 para conferir. Coloque o pontinho vermelho coincidindo com o primeiro verde para não deslocar;

16) Para salvar: Export > Nomeie como Banner_01.

Tudo que temos a fazer é importar o gif do banner para nossa interface (no outro arquivo) via programa específico para edição HTML, como o Adobe Dreamweaver, por exemplo.

Exportamos então toda nossa interface como HTML, aceitando “Exportar fatias” desabilitando a caixa “Somente fatias selecionadas” e habilitar “Incluir áreas sem fatias”.

Na pasta que você salvou dê duplo clique no arquivo HTML criado e veja o resultado.

 

Detalhes sobre gifs podem ser vistos em:

< www.youtube.com/watch?v=XB8JSlp_x1g >

< www.maujor.com/fw/gifanifw.php >

 

 

 

SUGESTÃO DE LEITURAADOBE Creative Team. Adobe Fireworks CS5. São Paulo: Adobe Press, 2010.

ADOBE Creative Team. Guia autorizado Adobe: Photoshop 7.0. São Paulo: Makron Books, 2003.SCOTT, Kelby. Adobe Photoshop CS5: para fotógrafos digitais. São Paulo: Pearson, 2011.

WEB AULAUnidade I – Programação PHP

PARA INICIARMOS NOSSO CURSO VAMOS ASSISTIR AS VÍDEO-AULAS 1 E 2.

E então? Vamos entender um pouco mais sobre o universo do desenvolvimento Web.

Como vimos na vídeo-aula 2, uma página pode conter diferentes linguagens, cada uma tem seu objetivo. Vamos conhecê-las um pouco mais?

HTML

Farei uma breve introdução ao HTML neste curso de PHP, pois o mesmo é essencial para compreendermos melhor este curso. Vocês terão uma disciplina específica sobre HTML onde discutirão todos os detalhes, inovações, etc.

Vamos conhecê-lo?

Um documento HTML (HyperText Markup Language) é um conjunto de instruções para definir a estrutura de páginas web. O HTML não é considerado uma linguagem de programação, pois ela apenas define a apresentação do conteúdo. Por exemplo, com HTML não é possível criar estruturas típicas de linguagens de programação como comandos IF, while, etc.

Para definir a estrutura do documento, o HTML utiliza-se de tags (marcações) que informam ao navegador como exibir o conteúdo, estas tags consistem do sinal “” ("maior que").

De um modo geral, as tags aparecem em pares, por exemplo, Algum Texto. Note que o símbolo que termina uma determinada marcação é igual aquele que a inicia, antecedido por uma barra (/). Neste exemplo, diz ao navegador que está sendo iniciado um novo parágrafo e indica que este parágrafo terminou! Alguma tags não

aparecem em pares, como por exemplo, a tag que realiza uma quebra de linha no texto.

SAIBA MAISExistem diversas marcações (tags) HTML, para conhecê-las você pode acessar <http://www.w3schools.com/html/html_intro.asp>

Página2 de 14

O HTML diferentemente do PHP não diferencia entre maiúsculas e minúsculas (não é "case sensitive"). Então, por exemplo, a notaçãoé equivalente aou.

Veja a seguir um exemplo de uma simples página HTML com diferentes tags:

Arquivo pagina.html

Para testar esta pagina basta abrir o bloco de notas, copiar e colar este conteúdo e então salvar com o nome pagina.html, aí é só abri-la em seu navegador!

CSS

Antes de comentarmos sobre o CSS navegue por diferentes páginas deste linkhttp://www.mezzoblue.com/zengarden/alldesigns/. Você percebeu que as páginas mesmo parecendo completamente diferentes, apresentam o mesmo conteúdo? Isto é o CSS!

CSS (Cascading Style Sheets — Folhas de Estilos em Cascata) tem a finalidade de dar uma forma de apresentação ao conteúdo do documento HTML. Inicialmente as cores e tamanhos de fonte eram definidos diretamente pelo HTML, assim não era possível separar o conteúdo do documento de sua formatação. Na prática era difícil realizar alterações no layout das páginas Web, pois esta formatação estava “misturada” com o código HTML. Com o CSS é possível modificar completamente a aparência de um site alterando informações de apenas um arquivo CSS.

Vamos ver um exemplo! (Para simplificar a definição do CSS está na mesma página que o HTML).

Arquivo css.html

A estrutura de formatação de estilos CSS é basicamente esta:

A palavra “seletor” corresponde a quais elementos HTML sofrerão as alterações de layout e então definimos qual o valor para diferentes propriedades, no exemplo anterior notamos várias formas de definir as cores dos conteúdos para diferentes tags.

Execute o exemplo para visualizar!

Agora que já conhecemos um pouco sobre o HTML e o CSS, para podermos testar as funcionalidades do PHP devemos preparar um ambiente para praticarmos! Vamos lá?

Página3 de 14

 ANTERIOR

PRÓXIMA

Instalando o MySQL , Apache e PHP

Utilizaremos neste caso o WampServer, que instala e configura todos os recursos necessários para executar nossos exemplos.

Devemos inicialmente fazer o download do WampServer em <http://www.wampserver.com/en/>, ao clicar em download visualizaremos as versões disponíveis. Escolha a correspondente ao seu sistema, 32 ou 64 bits.

Uma nova janela será aberta, clique então na opção you can download it directly

A instalação do WampServer é simples. Após ter realizado o download, basta executar o aplicativo e seguir o Wizard para a instalação. A primeira tela é a de boas-vindas, clique Next >.

 

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

Esta tela confirma as opções selecionadas, estando tudo ok, clique em Install.

Página5 de 14

Uma tela de progresso será exibida, basta aguardar!

Após instalar todos os recursos, aparecerá a pergunta sobre qual browser será utilizado, apenas clique em Abrir:

A próxima tela perguntará sobre as configurações do PHP mail, apenas clique em Next>.

Com a opção selecionada, basta clicar em Finish para finalizar o instalador

Página6 de 14

 ANTERIOR

PRÓXIMA

Ao finalizarmos, podemos notar que surgiu um ícone no canto inferior direito da tela:  , a cor verde indica que o servidor está online. Clicando sobre o ícone, aparecem diversas opções:

É importante compreender as diferentes funcionalidades:

Localhost O browser padrão do sistema será aberto com a página inicial do WampServer

phpMyAdmin O browser é aberto no phpMyAdmin, sistema que utilizaremos para criar e gerenciar nosso

banco de dados

wwwDirectory O Explorer é aberto na pasta em que devem ser colocados os arquivos .php que criaremos

Apache Trata-se do nosso servidor web que processa as requisições PHP. Ao selecionar esta opção

exibe um sub-menu para configurações adicionais

PHP Exibe um sub-menu para configurações adicionais do PHP

MySQL Exibe um sub-menu para configurações adicionais do banco de dados MySQL

webGrind Executa o webGrind que permite avaliar o desempenho de nosso sistema, para saber mais

acesse o site https://github.com/jokkedk/webgrind

Start, Stop, Restart

All Services

Estas opções permitem iniciar, parar ou reiniciar todos os serviços com apenas 1 clique. Utilize

essa opção se for feita alguma configuração adicional, ou se encontrar problemas na execução

de algum serviço

Put Online Se o computador for reiniciado e tivermos que executar o WampServer a partir do menu Iniciar,

devemos escolher esta opção para colocar o WampServer online, a cor do ícone é alterada de

acordo com o status. Verde: online, Amarelo: em transição, Vermelho: offline.

Para escrevermos nossos scripts PHP utilizaremos o Notepad++, disponível para download em <http://www.baixaki.com.br/download/notepad-.htm>. Para quem não conhece, funciona como um “super” bloco de notas, gratuito, fácil e rápido para executar e utilizar. Servirá muito bem para trabalharmos e desenvolvermos nossos scripts PHP.

Para o desenvolvimento de sistemas mais avançados e complexos existem IDEs (Ambientes de Desenvolvimento Integrado), os quais devidamente configurados facilitam ainda mais a programação de sistemas em PHP, a seguir temos uma lista com alguns exemplos:

CodeLobster – desenvolvida especialmente para criação de scripts PHP em ambiente Windows, é muito leve e fácil de utilizar

Site: <http://www.codelobster.com/>

Licença: Free, a versão comercial possui recursos adicionais

ZendStudio - uma ferramenta completa para quem trabalha com PHP (framework adaptado sobre o Eclipse)

Site: < http://www.zend.com/en/   >

Licença: Trial

Eclipse for PHP Developers - excelente ferramenta, altamente customizável, leve e rápida. Existem outras versões do Eclipse adaptadas para outras linguagens, você pode utilizar a versão padrão e instalar um plugin para o PHP.

Site: <http://www.eclipse.org/>

Licença: Free

NetBeans - ótima ferramenta, muito utilizada na programação Java por facilitar a criação de interfaces mais amigáveis, também pode ser utilizada para o desenvolvimento de sites com PHP

Site: <http://netbeans.org/>

Licença: Free

Página7 de 14

Para testarmos o nosso servidor web, vamos clicar no ícone do WampServer e escolher a opção www directory. O Windows Explorer abrirá como na imagem a seguir. Crie uma pasta chamada exemplos:

Dentro dessa pasta, crie um novo documento de texto e renomeie para texto.php. Atenção: os arquivos com scripts PHP devem ter a extensão.php para serem processados corretamente pelo servidor Apache.

Abra este arquivo com o Notepad++ (ou a ferramenta que preferir) e insira o código a seguir:

Arquivo texto.php

Neste código, podemos observar a “mistura” de PHP com HTML. Da linha 1 até a linha 6, e nas linhas 14 e 15, temos apenas código HTML. O código PHP é sempre declarado entre as tags <?php e ?>, linhas 7 a 13. Neste exemplo, é possível visualizar també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:

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.

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 MAISO tipo booleano não é case sensitive, isto significa que para atribuir um valor verdadeiro, por exemplo, tanto faz utilizar True ou TRUE ou true.

Página9 de 14

Veja agora a vídeo-aula 3 onde discutiremos um pouco mais sobre variáveis!

Array

é utilizado para armazenar vários elementos do mesmo tipo. Além disso, podemos criar pares do tipo chave => valor, vejamos como funciona:

Para definir um array somente com valores utilizamos:

Arquivo vetor1.php

Note que o índice do array inicia-se em 0, por isso na linha 3 é exibido o valor 2!

Usando a forma chave => valor:

Arquivo vetor2.php

 Constantes

Para definirmos uma constante em PHP devemos utilizar a estrutura:

Vejamos um exemplo:

Arquivo constante.php

 FUNÇÃO

Para criarmos uma função em PHP basta utilizarmos a palavra reservada function, segue a estrutura:

Vejamos um exemplo:

Arquivo funcao.php

 OBJETOS

O PHP 5 oferece todos os recursos para o desenvolvimento de sites utilizando programação orientada a objetos. Vejamos o exemplo de declaração de uma classe, criação de uma instância e o acesso a atributos e métodos:

Arquivo classe.php

SAIBA MAIS

O tema Orientação a Objetos é muito extenso, você pode estudar mais em

<http://www.php.net/manual/pt_BR/language.oop5.php>

Página10 de 14

Operadores

A tabela a seguir exibe os principais operadores utilizados em PHP, sua descrição e um exemplo. No decorrer do curso, veremos a utilização destes operadores.

Estruturas de Controle

As estruturas de controle de uma linguagem de programação permitem controlar o fluxo de execução de nossos programas. Vamos ver em PHP como trabalhar com as estruturas condicionais (decisão) e com as estruturas de repetição (loop).

IF

A instrução if é utilizada para tomada de decisão. Vejamos um exemplo:

Arquivo if.php

Este código mostra 3 tipos de utilização do IF. Na linha 5, temos um teste que verifica se o valor da variável a é maior que b e então exibe a mensagem. Na linha 9, temos o caminho alternativo do IF, representado pelo comando else, quando a condição é falsa. Já na linha 16, a estrutura mostra diversos elseif para testar diferentes condições e exibir a mensagem correspondente.

Agora é com você! Altere os valores das variáveis para visualizar os diferentes fluxos tomados pelo script.

 WHILE

A estrutura de repetição while, assim como a estrutura if, também trabalha com uma condição. A diferença entre as duas é que se a condição for verdadeira para o if, ele executa o bloco uma vez e no while, ele executa o bloco enquanto a condição for verdadeira. Veja o exemplo:

Arquivo while.php

O bloco entre as chaves ficará executando até que a condição da linha 3 seja falsa. Veja que na linha 5 a variável i é incrementada em uma unidade, o comando $i++ é equivalente a $i = $i + 1

FOR

A estrutura de repetição for executará o bloco de comandos com um limite já pré-definido, vejamos sua estrutura:

Agora um exemplo que você poderá testar:

Arquivo for.php

Página11 de 14

FOREACH

Este tipo de iteração é muito utilizada em PHP, é um tipo de for especial usado para estruturas do tipo Array. Veja:

Exemplo:

Arquivo foreach.php

 SWITCH

Ao invés de utilizarmos sequencias de if-else podemos utilizar a estrutura switch quando estamos testando o valor de uma variável, percebam como o código utilizando switch fica bem mais claro do que diversos if-else:

Arquivo switch.php

 

AJAX + PHP

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

Arquivo ajax.php

Arquivo maiuscula.php

Abra o arquivo ajax.php em seu navegador e digite algum texto, note que sem recarregar toda a página, a cada tecla digitada o arquivo maiuscula.php é executado e então o texto em maiúsculo aparece na outra caixa de texto. Atualmente quase todos os sites apresentam conteúdo sendo exibido dessa forma, portanto é imprescindível que qualquer desenvolvedor Web tenha conhecimentos de AJAX e utilize estes recursos para tornar os sites mais dinâmicos.

Página12 de 14

Banco de dados

Antes de iniciarmos a integração do PHP com um banco de dados, veremos alguns comandos básicos em SQL (Structured Query Language) que utilizaremos quando estivermos trabalhando com banco de dados. O SQL é uma linguagem padrão para acessar sistemas de gerenciamento de banco de dados relacionais: inserindo, atualizando, excluindo e selecionando suas informações. Todo banco de dados precisa de tabelas para organizar os dados, vamos ver a estrutura de como criar uma:

Exemplo:

Neste momento não se preocupe em testar estes scripts, mais tarde quando começarmos o desenvolvimento do nosso sistema veremos na prática a execução destes comandos. Preste atenção a estrutura desta tabela, os outros comandos SQL que veremos são baseados nesta estrutura.

Agora para inserirmos registros nesta tabela devemos usar o comando INSERT vejamos:

Exemplo:

Página13 de 14

Perceba neste exemplo que não é obrigatório inserirmos valores em todos os campos da tabela, na realidade no momento que criamos a tabela podemos definir o que é obrigatório e o que não é!

Vamos agora atualizar estes dados, já que algumas informações não foram completadas, com este objetivo devemos usar o comando UPDATE:

Exemplo para atualizarmos o endereço e a cidade:

Para selecionarmos informações de um banco de dados utilizamos o comando SELECT:

Exemplo para selecionarmos o nome dos clientes que vivem em Londrina:

Vamos agora excluir este registro, a sintaxe do comando DELETE é:

Exemplo:

Observe que no exemplo acima utilizamos o campo nome e sobrenome para encontrarmos o cliente para exclusão, isto é muito incomum em sistemas reais, o que se costuma fazer é buscar o cliente por um código (identificador) que seja único. Neste exemplo de exclusão, imaginando que nosso sistema tenha diversos registros, ocorremos o risco excluir mais de um cliente, isso se o nome e sobrenome destes clientes forem o mesmo!

Agora para excluir toda a tabela devemos usar o comando DROP:

Exemplo:

SAIBA MAISAs 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 AULAUnidade I – Sistema Locadora

Sistema Locadora

Vamos criar um simples sistema que contará com a autenticação de usuários e o gerenciamento dos veículos de nossa locadora. As páginas que desenvolveremos servirão de exemplo para a criação das outras páginas do sistema, como por exemplo, a que gerenciará a locação dos veículos. Uma sugestão de tabela para esta funcionalidade será criada juntamente com o script que executaremos para a criação das tabelas: login e veículo. O nosso sistema utilizará o MySQL como banco de dados, o PHP como a linguagem de servidor, veremos um comando Javascript (linguagem executada pelo navegador) e claro que o HTML, que é a base para a criação de páginas Web.

Veja agora a vídeo-aula 4 para visualizar o funcionamento de nosso sistema!

Relembrando, é muito importante que você execute as páginas enquanto estuda os códigos. Vamos começar?

MySQL

Podemos ter acesso ao MySQL utilizando o phpMyAdmin. Assim, clique no ícone do WampServer e então em phpMyAdmin. A seguinte tela será exibida. Clique em Banco de Dados.

Crie um novo banco de dados com o nome ‘locadora’.

Após criado, ele aparecerá no menu lateral esquerdo. Clique em locadora e então escolha SQL no menu superior.

Entre com o código a seguir e clique em executar.

Arquivo tables.sql

Página1 de 9

Este script SQL cria 3 tabelas que utilizaremos para nosso sistema de locadora de carros.

Vamos carregar algumas informações no nosso banco de dados, execute agora estes comandos SQL:

Arquivo insert.sql

 PHP + MySQL

Para acessar um banco de dados em PHP, devemos utilizar o comando mysql_conect e mysql_select_db, veja a seguir:

Arquivo conexao.php

Crie uma nova pasta com o nome locadora no diretório www do WampServer. Salve esta página com o nome conexao.php. Ao acessar localhost/locadora/conexao.php, se obtiver uma página em branco, está correto! Caso algo dê errado, verifique o nome de usuário e senha.

A variável $conn na linha 5 recebe a resposta de conexão com o banco de dados. Variáveis deste tipo referenciam recursos criados que são utilizados para acessar serviços ou objetos externos ao programa, como por exemplo, captura de imagens, arquivos, acesso a banco de dados, etc.

Como as páginas de nosso sistema precisarão conectar no banco de dados para selecionar ou alterar informações, colocamos os dados de conexão em um arquivo separado e então incluiremos este arquivo nas nossas páginas. Esta prática impede a repetição do mesmo código em diversas páginas e facilita a organização e atualização dos dados de conexão.

Imagine se alterássemos a senha do banco de dados e então tivéssemos que abrir cada página do site para alterá-la!

Agora que já configuramos a conexão para um banco de dados, vamos criar nossa home. A página inicial de todo site em PHP deve possuir o nome index.php, pois quando digitamos um endereço no navegador, o servidor procurará na pasta o arquivo de nome index.php para exibi-lo inicialmente.

Criaremos uma página bem simples, para facilitar o entendimento e focar nas funcionalidades do PHP, não nos preocuparemos com o design e nem com as informações que todo site deve apresentar. Nossa simples página inicial tem o código:

Arquivo index.php

Perceba que esta página possui somente código HTML, nós não vemos nenhuma tag php. Todas as páginas web precisam do HTML para exibir conteúdo, então o estudo de HTML é imprescindível para qualquer desenvolvedor.

E este é o resultado:

 

Página2 de 9

Nosso sistema de locadora de carros será utilizado apenas por funcionários, por isso esta página possui apenas um link para a página de login do sistema, vamos criá-la então:

Arquivo login.php

Aqui as coisas começam a ficar interessantes, vamos conhecer cada trecho do código:

O comando require_once executa todo o código presente no arquivo conexao.php nesta página, no momento que é chamado, este comando é necessário pois nesta página nós trocaremos informações com nossa base de dados.

O comando session_start() permite utilizarmos nesta página variáveis de sessão, que são aquelas variáveis que podemos ler e gravar em todas as páginas do site, veja a vídeo-aula 3 mais explicações sobre este tipo de variável.

Esta condição testa se a variável “op” foi enviada pelo método post por um formulário, como é a primeira vez que esta página é aberta, esta condição é falsa e então o script PHP desvia a execução para a linha 27, que é onde se inicia o código HTML, vamos acompanhá-lo:

Página3 de 9

Este trecho contem a tag que indica ao navegador que está se iniciando um código HTML, todo o cabeçalho está contido juntamente com a marcação que é o título que aparece na aba do navegador. A tag <body > contém o “corpo” da página, é onde fica a maior parte do conteúdo exibido no navegador.

Já conhecemos o código HTML até a linha 31, onde está a tag, vamos para a linha 32 onde temos:

Veja que a parte com fundo branco é HTML enquanto o trecho com fundo cinza é código PHP, neste linha o HTML seta a fonte do texto que será exibido em vermelho enquanto o PHP exibirá alguma mensagem se a variável $mensagem contiver algum valor. Este trecho nos mostrará as mensagens de erro do formulário de login, para ver seu funcionamento basta enviar a página sem preencher o campo login por exemplo.

Continuando a análise, da linha 35 a 44 temos a declaração de um formulário, vamos conhecer suas principais características:

 

A propriedade method é setada como post e então em action devemos colocar qual página receberá os dados enviados pelo formulário, no nosso caso usaremos a mesma página.

 

A marcação label delimita um texto que está associado a um campo do formulário que neste caso é o login. Para exibirmos um campo de entrada de dados do tipo texto em um formulário, devemos criar um input do tipo text, colocar seu nome (será utilizado para receber o valor quando o formulário for enviado), o tamanho de exibição da caixa de texto (size), e a quantidade máxima de caracteres que o usuário pode inserir (maxlength).

 

Nestas 2 linhas temos as mesmas características que o campo login, perceba a diferença na propriedade type que está setada como password, dessa forma os caracteres digitados para senha são substituídos por *.

 

Nesta linha criamos o botão que será utilizado para enviar o formulário, a propriedade value é o conteúdo que será exibido no botão.

Após o envio do formulário a mesma página é chamada, porém a condição agora será verdadeira, então vamos analisar o código php.

 

Nas linhas 6 e 7 recebemos os valores de login e senha vindos do formulário

 

Este trecho valida os valores de login e senha, se eles foram enviados em branco a variável mensagem é carregada e então posteriormente exibida na página.

Se os campos foram preenchidos, o programa entra no else e consulta o banco de dados para verificar se a senha informada corresponde aquele login. Inicialmente armazenamos na variável sql o comando select

 

Para executar este select basta utilizar a função mysql_query que precisa de 2 parâmetros, o primeiro é o comando SQL que será executado e o segundo é a conexão – Lembram que criamos a variável $conn quando incluímos o arquivo conexao.php!

 

Página4 de 9

A variável result recebe o retorno da função e então utilizamos o comando mysql_fetch_assoc para gravar os valores retornados na variável array $row, se não for possível significa que o login não foi encontrado (veja a mensagem gerada associada ao else).

Se o login foi encontrado compara-se o valor retornado pelo banco com o informado pelo usuário, se deu tudo certo o trecho a seguir será executado, senão novamente o fluxo do programa segue o else  e exibe ao usuário senha incorreta

Nesta linha gravamos a variável de sessão login com o login do usuário, esta variável será utilizada para autenticarmos os usuários nas outras páginas de nosso sistema.

Se o login foi realizado com sucesso o usuário é redirecionado para a página que lista os veículos.

Antes de criarmos a página que lista os veículos criaremos um script para autenticar os usuários:

Arquivo autenticacao.php

Nesta página temos um condicional que valida se a variável de sessão login não existe, e então redireciona o usuário para a página de login.

Basta incluirmos este arquivo em todas as páginas que queremos que apenas usuários logados possam visualizar, como por exemplo, a página que lista os veículos cadastrados no sistema:

Segue o código:

Arquivo veiculoLista.php

Página5 de 9

Vamos analisar o que temos de novo nesta página, na linha 16 aparece a função mysql_num_rows que retorna a quantidade de linhas encontradas por nossa

consulta. A partir da linha 20 nós temos a criação de uma tabela em HTML que organizará a listagem de veículos.

O marcador <tr > inicia uma nova linha enquanto o seu corresponde </tr > fecha a linha. Já o marcador <td > é utilizado para as colunas. Note o <th > ele também é utilizado para criar colunas, mas usado somente no cabeçalho, o h significa header.

Na linha 33 temos um exemplo prático do condicional switch visto anteriormente. Aqui ele testa o valor da variável inteiro $tipo para exibir corretamente o texto.

Nesta página podemos criar um novo veículo ou abrir um cadastro existente, veja a linha:

 

O comando a href do HTML cria um link para uma página (veiculo.php). Repare no ponto de interrogação colocado após escrevermos a página, com ele podemos passar variáveis com valores associados para a página que será aberta. Neste caso, estamos passando a variável $op com o valor “abrir” e a variável $id com o código do veículo que veio de nossa tabela do banco de dados. Quando passamos variáveis desta forma estamos utilizando o método GET, ao contrário do método POST utilizado em nossos formulários.

Vejamos agora a página veiculo.php, que é responsável pelo cadastro, visualização, alteração e exclusão de um veículo:

Página veiculo.php em modo cadastro

Página veiculo.php em modo edição/exclusão

Segue o código:

Arquivo veiculo.php

Vamos verificar cada parte desta página:

Inicialmente autenticamos o usuário e incluímos o arquivo de conexão para o banco de dados.

Setamos a variável $op com o valor “novo”, este valor é carregado por padrão nesta página, na linha seguinte testamos a existência de uma variável $op passada pelo método GET (o método utilizado para passar valores de variáveis pela URL). Se esta variável existe então tem que ser do tipo “abrir” por ter vindo da página veiculoLista.php.

Se a variável não está setada pelo método GET testamos pelo método POST (método utilizado para passar valores de variáveis por formulários). Neste caso a variável $op pode assumir o valor “atualizar” ou “cadastrar” dependendo de como nosso formulário foi aberto. Veremos mais a frente ainda nesta análise.

Nesta parte testamos a variável excluir vinda pelo método POST quando do envio do formulário, se ela foi postada então recuperamos o id do registro que deve ser excluído, montamos a query e a executamos em nosso banco de dados.

Este é o padrão de carregamento da nossa página, armazenamos o valor “cadastrar” na variável $op, para quando enviarmos o formulário sabermos qual o tratamento que devemos dar para os dados. Neste trecho nós podemos inicializar as variáveis com valores padrão. Vamos testar? Insira um valor na variável $nome e veja ela ser carregada ao abrirmos nosso formulário

Este trecho é executado quando o formulário foi aberto como novo e então os dados foram preenchidos e o botão enviar foi clicado!

Utilizamos a função trim para remover os espaços em branco antes e depois da variável $nome, salvamos também o valor do $tipo e validamos se a variável $nome contem algum valor. Se tudo estiver ok inserimos este registro no banco.

 

Estes comandos são interpretados quando clicamos em abrir em um dos veículos listados na página veiculoLista.php. Este comando SQL buscará no banco de dados o nome e o tipo de veículo e então extrairá os valores encontrados para as variáveis

Este último trecho de código PHP executa a atualização no banco de dados, inicialmente recebe os valores postados, valida o campo nome e então faz o update na base de dados, se a operação pode ser executada corretamente redirecionará o usuário para a página veiculoLista.php, senão exibirá uma mensagem de erro e carregará novamente o formulário.

Agora vamos analisar alguns trechos do HTML, que ainda não vimos:

O marcador select cria uma lista de seleção para escolhermos um tipo de veículo, note que testamos o valor de $tipo retornado para o banco para imprimirmos “selected” este definirá qual dos itens de nossoselect será selecionado por padrão.

Este trecho exibe o checkbox para excluir o registro se a operação não for cadastrar (não tem sentido mandarmos excluir um registro se ele ainda não existe!)

Se a operação é atualizar necessitamos enviar qual o $id do registro que está sendo alterado, para isso utilizamos um tipo especial de input HTML que é o hidden (escondido), ele tem este nome pois não aparece no formulário, o usuário não pode alterá-lo!

Da mesma forma passamos a nossa variável de controle $op.

Nesta linha temos um exemplo de código Javascript para voltarmos a página que lista os veículos.

E assim finalizamos a análise de nossa página de cadastro.

A última página do nosso site é:

Arquivo sair.php

Nesta página nós usamos o comando unset para removermos a variável de sessão do usuário e dessa forma ele não possui mais permissão para acessar as páginas protegidas do site. Após sair tente acessar o endereço localhost/locadora/veiculoLista.php, você será redirecionado diretamente para a página de login, o que não aconteceria se você ainda estivesse logado.

Para concluirmos nosso curso, veja a vídeo-aula 5.

 

Discussão no Fórum:Quais mudanças deveríamos fazer em veiculoLista.php para que ao clicar no título da

tabela os registros listados fossem ordenados?

 Programação em Flex

WEBAULA 1Unidade 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 ESTUDOComo você vê a internet? O que vem a sua cabeça quando você ouve a frase “um site da internet”? O site que você imagina tem uma interação ou somente uma informação?

Antes de começarmos a estudar o desenvolvimento de aplicações ricas para internet RIA (rich internet applications) devemos primeiro entender o que são.Aplicações “ricas” procuram buscar as características visuais e de desempenho que temos em nossos programas desktop para a internet.Existem muitas vantagens em se programar utilizando ferramentas voltadas para este tipo de aplicação, dentre estas vantagens estão a velocidade e facilidade de desenvolvimento, uma vez que as ferramentas utilizadas disponibilizam vários recursos pré-programados que podemos utilizar sem ter que escrever tudo do zero como acontece quando utilizamos HTML e JavaScript para produzir os mesmos efeitos.SEÇÃO 1- ESTRUTURA FLEXNesta seção será apresentado o ambiente de programação FLEX, as linguagens nele trabalhadas e os ambientes de compilação de seus códigos.ESTRUTURA DA FERRAMENTAO ambiente de programação Adobe Flex Buider 4.6 (2011 / 2012) foi projetado para criação de programas que aumentem a experiência do usuário através da utilização de aplicativos cada vez mais fáceis, ágeis e intuitivos.Para entender melhor como a ferramenta funciona:

Nossa aplicação feita em Flex trabalha com arquivos de marcação mxml cujo objetivo é dispor de forma rápida e fácil a criação de objetos em tela. Os arquivos .as (Action Script) são utilizados para inserirmos nossas funções que controlarão eventos, validações de tela, comunicação da ferramenta com outros serviços e linguagens. E os arquivos de apoio são arquivos de imagens, sons, animações entre outros, que farão parte do pacote da aplicação. Com tudo isso ao compilar seu código, a ferramenta gera um arquivo .swf (até a versão 4.6) semelhante ao .class do Java onde conseguiremos depois inserir em um site nossa aplicação sem grandes dificuldades.Alguns de vocês podem estar se perguntando mas porque investir em Flex sendo que a Adobe descontinuou o projeto? Na verdade o que muita gente não sabe é que o projeto agora é mantido pela Apache (Apache Flex), e todo o conteúdo gerado pela ferramenta não mais será um swf e sim um HTML + JavaScript + CSS. Hoje na versão 4.8 o Flex se firma ainda mais como uma poderosa ferramenta para construção de sites de forma rápida, segura e com um visual incrível.Por motivos de facilidade de instalação, nesta aula estaremos utilizando a ferramenta Flex versão 4.6 disponível para download no site  (último acesso agosto 2012).Para baixar basta fazer um cadastro simples (versão para 30 dias). Já aqueles que quiserem a ferramenta versão sem limite de tempo, basta no cadastro indicar o status de estudante e fazer upload da imagem da carteirinha da universidade ou do

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

Figura 1- Tela Inicial

Para conseguir ver todo o ambiente por completo vamos criar um novo projeto como mostrado nas figuras 2 e 3.

Figura 2 - Acessando a criação de novo projeto.

Figura 3 - Criando um novo projeto

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

Figura 4 - Tela de projeto vazia

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

Figura 5 - Componente Label em componentes

Figura 6 - Componente Label já no mxml (aba design).

Podemos observar no código abaixo que ao inserirmos um componente arrastando e soltando a ferramenta Adobe Flex cria automaticamente o código MXML, onde o código em destaque informa o tipo de estrutura  s:Label a seu posicionamento em tela X e Y com as respectivas posições além da propriedade text que informa o texto a ser apresentado; e é nesta propriedade que iremos trabalhar.Vamos substituir a estrutura: text="Label"Por: text="Pós-Graduação 2012 - Unopar"E vamos observar compilar e executar nosso projeto, para vermos como ficou.Para compilar basta clicar em Run conforme mostrado na figura 7.

Figura 7 - compilando um projeto Flex

Na Figura 8 antes de compilar se você ainda não salvou seu projeto depois da última alteração, ele irá perguntar se para rodar irá ter que considerar as últimas alterações, se for necessário então terá que salvar. Clique em OK.

Figura 8 - salvando projeto antes de compilar

Podemos ver o resultado deste código apresentado na figura 9.

Figura 9 - página gerada pela ferramenta

Podemos observar que os dados apresentados na aba Design são bem parecidos com os apresentados na página compilada pelo sistema. Isso é importante comentar pois a aba Design foi pensada justamente com esta funcionalidade, a de apresentar antes da compilação um formato bem aproximado da estrutura gráfica que iremos ter depois de compilado.Podemos nos atentar também que apesar deste projeto ser um projeto web este está rodando localmente em nossa máquina basta visualizarmos o endereço da página.Mas você deve estar se perguntando, se eu estou rodando uma página web localmente eu não precisaria de um servidor web ou algum aplicativo tipo wamp server ou Apache instalado em minha máquina para poder rodar algo web. Não para testes em Flex, pois as páginas geradas (em acessos mais simples) não necessitam de recursos web, diferente da linguagem PHP a qual depende de ferramentas web para poder ser interpretada no servidor.

ACTIONSCRIPT / MXMLMXMLMXML é uma linguagem de marcação de texto muito parecida com XML comum que você já deve estar cansado de ouvir falar. Iremos utilizar o MXML na inserção de componentes visuais em nosso aplicativo. Esta linguagem será mais bem apresentada no decorrer deste, onde serão apresentados vários componentes e suas funcionalidades e aplicações.Para que possamos entender melhor como esta linguagem trabalha iremos utilizar o projeto que criamos e iremos inserir um novo botão conforme o código apresentado a seguir.Voltemos agora para a tela Design.Vamos arrastar um componente Button para dentro da tela de Design. Teremos algo como apresentado na figura 10:

Figura 10 - Incluindo botão no projeto

Podemos observar que uma tag Button surgiu. Esta tag foi criada automaticamente quando arrastamos o botão da barra de componentes para dentro do design. O x e y com um os números na frente trazem o posicionamento x e y do botão. O label com um nome escrito entre aspas é a palavra escrita dentro do botão. Experimente colocar seu nome no lugar para ver o que acontece.Vamos inserir mais três botões e colocar seus nomes de Primeiro, Segundo, Terceiro, Quarto.

PARA SABER MAISAo inserir mais componentes observamos que aparecem algumas linhas azul claro alinhando os botões, elas servem somente como sugestão de alinhamento, facilitando assim ajustes de tela

Existem várias formas de alterar o nome de um botão, podemos utilizar o source, podemos estar em design e clicar 2x no botão que ele ficará editável, podemos também clicar 1x em cima do botão e alterar seu label em Flex Properties conforme a figura 11 abaixo:

Figura 11 - Propriedades do componente Label

Após a criação teremos algo parecido com a figura 12.

Figura 12 - Primeiro botões Flex

Em nosso código teremos algo como o código apresentado a seguir. Lembrando que a posição X e Y pode variar de acordo com o inserido por você.Suponhamos que queremos que algo aconteça quando clicarmos em um dos botões, como fazer isso?Como havia sido dito anteriormente o Flex trabalha com o MXML e com o ActionScript para executar funções em nossa aplicação. Precisaremos entender um pouco mais sobre esta poderosa ferramenta para podermos prosseguir.ACTIONSCRIPTA linguagem de programação ActionScript é baseada no padrão ECMAScript3, que garante a semelhança com várias linguagens derivadas do C como JAVA, C# entre outras.Esta linguagem é muito utilizada na programação de funções Flash, e tem uma ótima interação com o MXML o qual através da ActionScript estaremos inserindo ações em nossos formulários e botões incluídos no código MXML.Até o momento inserimos componentes em nossa aplicação, porém nada aconteceu. Como fazer então para “as coisas acontecerem?”.Como irá notar, ActionScript 3 é muito semelhante a linguagens como Java; segue também conceitos de orientação a objetos como ela.

SAIBA MAISPara saber mais sobre orientação a objetos e aplicações básicas acesse:<http://downloads.caelum.com.br/apostila/caelum-java-objetos-fj11.pdf>

O principio básico do ActionScript é executar um determinado código que é chamado através de um nome de função. Ex:Vamos entender um pouco mais o que é tudo isso:- public é o nível de acesso que nossa função terá. Assim como em Java o acesso público abre um leque para que essa função seja vista em qualquer parte de nossa aplicação.- function indica que estamos tratando de uma função- mostrarMensagem( ) o nome de nossa função- void é o tipo de retorno que teremos. No Flex como também no PHP e outras linguagens as funções podem retornar resultados em tipos diferentes. Os tipos aqui retornados são bem parecidos com os tipos em Java.- { e } não podemos esquecer das chaves, que indicam o escopo de sua função.

PARA SABER MAISDizer escopo de uma função é a mesma coisa que dizer até onde a função

se estende.Para inserirmos códigos ActionScript 3 podemos assim fazê-lo de duas maneiras. A primeira é inserindo o código junto com o MXML conforme apresentado abaixo.O código apresentado cria uma função que mostra uma mensagem na tela, para podermos usufruir deste recurso devemos vincular esta função a um botão. Para o nosso exemplo vamos inserir no primeiro botão como ilustrado a seguir.A partir de agora nossa interface ganha vida. Podemos associar botões a funções e executarmos as mais diversas tarefas em nosso programa. Podemos ver o resultado na figura 13.

Figura 13 - botão primeiro executando método mostrar mensagem

Outra maneira de trabalharmos é criando um arquivo separadamente do mxml com a extensão .as e importarmos as funções para dentro de nosso arquivo.Onde todo o conteúdo da tag CDATA é inserido em um arquivo separadamente que em nosso exemplo chamamos de actionSeparado.asVimos até agora como fazer uma função mostrar uma mensagem na tela, mas se quisermos que esta mensagem não seja fixa?Vamos criar um novo componente TextInput em nossa tela e capturar suas informações através da propriedade click de um botão.Para fazer isso temos que primeiramente identificar nosso campo texto para podermos capturar a informação nele contida. Pois não existe como se mostrar algo que não se conhece. A identificação do campo se dá através da propriedade id de nosso TextInput. Quase que a totalidade de todos os elementos que iremos utilizar em nosso mxml possui esta propriedade. Ela serve para podermos identificar os objetos de nosso programa.Ex: posso ter 10 campos em meu programa, cada um com uma funcionalidade. Por exemplo: para nome, endereço, telefone, idade, CPF, etc. Mas como vou saber qual é qual? Com o id eu consigo distinguir um do outro, como se fosse o CPF do objeto, cada um tem o seu.

Figura 14 - inserindo nome no componente TextInput

O código completo fica:A função capturarTexto( ) acessa a propriedade text do TextInput identificado no código como campoTexto.DECLARANDO VARIÁVEISPodemos perceber que atribuir nomes a componentes de um sistema em MXML é algo trivial. Agora quando queremos identificar elementos em ActionScript 3 teremos que trabalhar como trabalhamos em outras linguagens, utilizando variáveis que armazenam valores do tipo que lhe foi identificado.Os tipos que mais utilizaremos são:

OPERADORESPara podermos trabalhar com nossas variáveis necessitamos de algo para relacioná-las. Os operadores são símbolos que podem ser utilizados para manipular valores e variáveis realizando operações entre eles. Os tipos utilizados no ActionScript 3 são:

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

Onde temos variável com valor inicial, condição onde essa variável será verificada n vezes e atualização onde temos os termos de contagem.FOR..INÉ utilizado para iteração com propriedades de um objeto e também com arrays. Muito utilizado quando não sabemos o número de objetos com que iremos interagir.Onde temos Lista como o conjunto de objetos do mesmo tipo ou array.FOR..EACH..INEste tipo de iteração é usado quando queremos trabalhar com objetos e listas XML.

APROFUNDANDO O CONHECIMENTOPara se aprofundar o conhecimento em desenvolvimento de aplicações ricas para internet é importante a leitura dos tópicos 1.11 e 1.12 do livro Ajax, Rich Internet Applications onde ser tem uma visão geral sobre desenvolvimento de software e RIA.Concluindo-se a leitura podemos perceber que existem inúmeras ferramentas para desenvolvimento de aplicações para internet, e o mais importante de tudo é saber qual dessas ferramentas oferecidas melhor se encaixará nas necessidades de sua empresa e mercado.

QUESTÕES PARA REFLEXÃOComparando com outras linguagens de programação como Java, você conseguiu notar a diferença entre elas? Foi possível notar agilidade de desenvolvimento que o Flex possui sobre outras linguagens?

PARA CONCLUIR O ESTUDO DA UNIDADEComeçamos a estudar os conceitos da forma de desenvolvimento utilizando ActionScript e mxml e já podemos perceber que a ferramenta disponibiliza vários recursos interessantes, recursos que só conseguiríamos fazer em outra linguagem se utilizássemos grande volume de código para possuirmos os mesmos efeitos que conseguimos em poucas linhas na ferramenta anteriormente mostradaNos próximos capítulos iremos estudar formas de agregar este conhecimento adquirido em nossos programas. Com isso poderemos focar mais nossos exemplos em resolução de problemas cotidianos.Para avaliar os conhecimentos por você adquiridos sugiro que resolva os problemas abaixo propostos.

Visão geralApresentação da disciplina:

Sou o Professor Adriano Sepe, profissionalmente trabalho como arquiteto de softwares com mais de 9 anos de experiência e sólidos conhecimentos em arquitetura, sistemas distribuídos e desenvolvimento de soluções web, desktop, mobile e SOA. Obcecado por boas práticas de arquitetura e desenvolvimento de software, para isso busco sempre dedicar-me ao conhecimento. Na área acadêmica tenho ministrado disciplina nos cursos de Tecnologia em Análise e Desenvolvimento de Sistemas, Engenharia

Elétrica e Engenharia da Computação.Vamos aprender três importantes tecnologias que dão a sustentação para a evolução da internet, HTML, CSS e JavaScript. Poderemos compreender claramente qual é o papel individual de cada uma, e como juntas elas permitem a criação de aplicações cada vez mais ricas e indispensáveis para a maioria das pessoas. A concepção da linguagem HTML teve como propósito o compartilhamento de documentos entre pesquisadores, mas o que vemos atualmente é a proliferação de aplicações extremamente complexas e funcionais, inseridos em um contexto de internet, sendo utilizado por bilhões de pessoas diariamente. Para este cenário as tecnologias que vamos discutir são de vital importância, colocando-se em posições de destaque. 

 

Objetivos:Nesta disciplina, vamos discutir e aprender sobre as linguagens HTML, CSS e JavaScript. Vamos discutir detalhes e diferenças entre as linguagem HTML e XHTML, mergulhando sobre os conceitos da folha de estilo. No final vamos aprender linguagem de script chamada JavaScript, e entender como podemos tornar nossas aplicações web tão interativas e atraentes, aliada é claro ao CSS.

Conteúdo Programático:1) Introdução ao HTMLa) O que é HTMLb) HTML vs XHTMLc) Tagsd) Documentos HTMLe) Elementosf) Atributosg) Sintaxeh) Elementos aninhadosi) Boas práticas2) HTMLa) Definindo o tipo do Documentob) O que são Doctypes    i. Tipos de Doctypesc) Adicionando Comentáriosd) Trabalhando com Tabelase) Trabalhando com Listasf) Listas ordenadas    i. Listas não ordenadas    ii. Listas de definiçãog) Trabalhando com Formuláriosh) Elementos de entrada de dados    i. Entendendo GET/POST    ii. Enviando dados para um servidori) Trabalhando com CSS3) JavaScripta) Introdução a JavaScriptb) Trabalhando com HTML dinâmico

c) Introdução a DOM (Document Object Model)

Metodologia:Na unidade utilizaremos todos os recursos necessários e disponíveis para o desenvolvimento da discussão do conteúdo, sendo assim, faremos uso de:

Textos da própria web-aula e de outros sites que possam contribuir para a discussão;

Vídeos que podem esclarecer ou aprofundar determinados conteúdos;

Fóruns para discussão de tópicos onde seja possível a troca de ideias e conteúdos entre os discentes e docentes;

Avaliações virtuais onde será realizada a verificação do aprendizado;

Entre outros recursos que poderão ser utilizados visando maior entendimento da matéria.

 

Avaliação Prevista:Cada web-aula conterá uma avaliação virtual composta de 5 questões (sendo assim, temos 2 web-aulas com 5 questões cada). Quando houver fórum de discussão o aluno será avaliado quanto ao conteúdo de sua postagem, onde deverá comentar o tópico apresentando respostas completas e com nível crítico de avaliação pertinente ao nível de pós-graduação.

 

Critérios para Participação dos Alunos no Fórum:

Quando houver fórum de discussão o aluno será avaliado quanto ao conteúdo de sua postagem, onde deverá comentar o tópico apresentando respostas completas e com nível crítico de avaliação pertinente ao nível de pós-graduação. Textos apenas concordando ou discordando de comentários de outros participantes do fórum sem a devida justificativa ou complementação não acrescentam em nada ao debate da disciplina, sendo assim, devem ser evitados. Os textos devem sempre vir acompanhados das justificativas para a opinião do discente sobre o conteúdo discutido, para que assim, possamos dar continuidade ao debate em nível adequado. Além disso, podem ser utilizados citações de artigos, livros e outros recursos que fundamentem a opinião ou deem sustentação a sua posição crítica sobre o assunto. Deve ser respeitado o tópico principal do fórum, evitando debates que não tem relação com o tema selecionado pelo professor.

 ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES WEB

WEB AULA 1Unidade 1 – Introdução ao HTML

00:00

00:00

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

Consistem em uma reformulação do XHTML 1.0 Strict com algumas pequena modificações.HTML VS XHTMLVamos neste ponto discutir as diferenças entre XHTML e HTML. Contudo não podemos encarar essas linguagens como concorrentes visto XHTML é uma evolução do HTML. Analisando as principais diferenças entre as duas linguagens percebemos que XHTML acrescentou nos seguintes aspectos:

Restrições de XML serão aplicadas Tags necessariamente deverão ser escritas em minúsculo Aninhamento rigoroso de tags Fechamento de tags obrigatório Sintaxe rigorosa de atributos

RESTRIÇÕES DE XML SERÃO APLICADASPara melhorar a experiência do usuário os navegadores procuram interpretar e resolver problemas de marcação de documentos. Visto que a frustração de não conseguir visualizar a informação acabara sendo do usuário. Quando estamos falando de XHML devemos compreender que os documentos deverão necessariamente estar bem formatados, isso se dá pelas regras definidas nas recomendações para XML 1.0. O entendimento sobre o que seria um documento bem formatado será apresentado a seguir.Apenas um elemento raizTodo os demais elementos de marcação deverão ser inseridos dentro do elemento raiz html, conforme mostrado a seguir:

 Tags necessariamente deverão ser escritas em minúsculoTodos os elementos XHTML deverão ser escritos em letra minúsculo, isso se dá porque a linguagem XML tem a característica de ser sensível a caixa (case sensitive), o que faz com que letras maiúsculas sejam diferenciadas de letras minúsculas. E como padrão todos os elementos incorporados de HTML foram colocados em caixa baixa, segue demonstração:

Aninhamento rigoroso de tags

Quando criamos uma hierarquia de elementos de marcação, devemos respeitas rigorosamente a ordem de fechamento. Isso garantira maior facilidade na leitura do documento bem como atendera essa restrição, veja a seguir:

Fechamento de tags obrigatórioEm HTML é permitido omitir o fechamento de alguns elementos, como exemplo podemos destacar as tags  p> e  li>, agora quando estamos falando de XHTML a omissão do fechamento passa a ser proibido, conforme poderemos verificar a seguir:

 Fechamento de tags obrigatórioOutra regra que se aplica a prática de fechamento de elementos, neste caso para todos os elementos vazios deverão ter uma tag de fechamento ou então terminar com />, vamos verificar com isso se dará neste próximo exemplo:

Sintaxe rigorosa de atributosAtributos em caixa baixa

Assim como aprendemos que as tags são sensíveis a caixa, o que nos obriga a escreve-los sempre em minúsculo podemos associar essa regra também para os atributos. Obrigatoriamente todos os atributos deverão ser escritos em caixa baixa:Valores dos atributosTodos os valores definidos para os atributos deverão ser colocado entre aspas duplos (““), isso porque são tratados como alfanumérico (string) independente se o valor corresponder a uma informação numérica;Atributos e ValoresTodos os atributos deverão obrigatoriamente ter valores, a seguir, uma lista de atributos que de regra acabam sendo esquecidos com relação a esta regra:

TAGSQuando pensamos em uma linguagem de marcação consideramos naturalmente a necessidade de existir um padrão para que seja feito esta marcação. É fato que se não houvesse este padrão seria improvável que o computador pudesse analisar e interpretar o documento. As tags são exatamente esse padrão que permite que um navegador possa interpretar como o documento está estruturado, o que é cabeçalho o que é parágrafo e assim por diante. Tecnicamente definimos tags como palavras chaves envolvidos pelos caracteres   e >, como  html>, para tags que são representadas por um par a primeira é tratada como marcador inicial e a segunda como marcador final. Tags que são representadas com um par são também chamadas de tags de abertura e fechamento. Abaixo poderemos conferir essas regras:

Tags de Abertura e FechamentoPodemos perceber que as tags de abertura e fechamento são envolvidas pelos caracteres ‘ ’ e ‘>’, sendo que no de fechamento foi acrescido o caractere `/` antes

da escrita do nome da tag. Observe abaixo a marcação em XHTML para um texto pré-formatado:

Tags vaziasAlgumas tags são chamada de vazias isso porque não marcam uma região do texto. Observe abaixo a marcação em XHTML para que seja apresentado o parágrafo com uma quebra de linha:

DOCUMENTO HTMLDocumentos HTML descrevem exatamente as páginas Web, onde são naturalmente escritos com textos planos decorados com tags HTML.ElementosPodemos considerar que tags e elementos HTML se referem às mesmas coisas. Mas elementos HTML são rigorosamente tudo o que estiver entre a marca de início e fim incluindo as tags;AtributosOs elementos HTML podem ter atributos que proporcional informações adicionais, por regra eles sempre são definidos na tag de abertura. No exemplo a seguir vamos alterar o valor do atributo style:

Outra regra existente é que a declaração sempre se dará por nome=”valor” conforme visto no exemplo anterior. Neste caso o atributo style que permite configurar declarações de estilos para um elemento HTML recebeu um nova configurações. Na sequência vamos considerar este novo exemplo:

Observe que o elemento ancora HTML ( a>) que define um hiperlink, quando clicado será interpretado pelo navegador com a ação de direcionar o usuário para o documento "novo_documento.hml". A definição de qual será o endereço destino deste hiperlink foi feito através do atributo href, assim como havíamos feito no exemplo anterior também alteramos as configurações do atributo style. Através deste exemplo podemos compreender que os elementos poderão ter vários atributos configuráveis, alguns atributos existem para a maioria já outros são específicos para alguns marcadores.HTMLDefinição de Tipos de DocumentosA definição de tipo de documento consistem em regas que definem claramente quais as tags que podem ser usadas em um documento criado a partir de uma linguagem de marcação. Estes documentos também conhecidos pelo acrônimo DTD já eram utilizados para validação de documentos escritos a partir da linguagem SGML, vale lembrar que ela foi utilizada para especificar as linguagens HTML e XML e por consequência a linguagem XHTML.O que é  !DOCTYPE>?

Como vimos anteriormente os tipos de documentos (Document Type Definitions – DTD) servem para verificar se um documento está corretamente escrito e assim garantir que a sintaxe e a gramática da linguagem de marcação será respeitada. A linguagem XHTML tornou obrigatório a definição do  !DOCTYPE> que corresponde às instruções para o navegador sobre qual a versão do HTML que a página foi escrita. Isso se dá através da referência que é feita para um DTD no qual especifica as regras da linguagem de marcação, dessa forma o navegador poderá processar corretamente o conteúdo.  Como poderemos ver em seguida o  !DOCTYPE> não corresponde a uma tag HTML.TIPOS DE  !DOCTYPE>HTML 4.01 StrictEste DTD contém todos os elementos e atributos, mas não inclui elementos de apresentação ou descontinuados, framesets também não são permitidos.

HTML 4.01 TransitionalEste DTD contém todos os elementos e atributos, incluindo os elementos de apresentação e descontinuados, framesets não são permitidos.

HTML 4.01 FramesetEste DTD é igual ao HTML 4.01 Transitional, mas permite a utilização de conteúdos em frameset.

XHTML 1.0 StrictEste DTD contém todos os elementos e atributos, mas não inclui elementos de apresentação ou descontinuados, framesets também não são permitidos. Todos os marcadores deverão ser escritos conforme as regras definidas para um documento XML bem formatado.

XHTML 1.0 TransitionalEste DTD contém todos os elementos e atributos, incluindo os elementos de apresentação e descontinuados, framesets não são permitidos. Todos os marcadores deverão ser escritos conforme as regras definidas para um documento XML bem formatado.XHTML 1.0 FramesetEste DTD é igual ao XHTML 1.0 Transitional, mas permite a utilização de conteúdos em frameset.

ENTENDENDO HTML

EstruturaA linguagem HTML especifica três tags com o objetivo de estruturação do documento, isso é porque não tem o propósito de afetar a aparência da página apenas para delimitar a estrutura do documento. As tags no qual estamos nos referindo são  html>,  head> e  body>. Elas não são obrigatórias considerando a definição exata de HTML, mas considerando XHTML elas passam a ser obrigatórias. As sessões prólogo XML e  !DOCTYPE> também não são obrigatórios.Prólogo XMLTodo documento XML deve necessariamente iniciar com a seção de prólogo. Essa seção corresponde a declaração informando que o documento é um XML, instruções de processamento, declarações de esquema de validação. A seguir podemos conferir a seção prólogo declarada na primeira linha do documento XML:

Esta seção é opcional, isso faz com que alguns navegadores não processem adequadamente essa informação, causando em algumas situações erros na visualização do documento. Por conta disso vamos adotar não vamos adotar como padrão a inclusão desta seção. No final deste tópico vamos verificar como ficará a estrutura básica de documento HTML e nesta ocasião vamos incluir esta seção apenas para entendimento da estrutura.Onde vai o  !DOCTYPE>Anteriormente aprendemos qual é o objetivo de utilizarmos o  !DOCTYPE>, embora não seja considerado uma tag, muito menos de estrutura, devemos sempre incluir essa definição em nossos documentos, isso porque faz parte das recomendações do XHTML 1.0. Isso se dará sempre após a definição do prólogo XML.Tag  html>Essa é sem dúvida nossa primeira tag de estrutura, onde seu objetivo é indicar que todo o conteúdo do documento está em HTML. Ela sempre deverá ser inserida após a definição do   !DOCTYPE>. Todo o conteúdo do documento deverá ser inserido entre as tags de abertura e fechamento  html>.Tag  head>Esta tag tem por objetivo indicar o cabeçalho do documento, devemos compreender sua finalidade como prólogo, visto que agrupa elementos contendo informações sobre o documento, tais como título do documento, palavras-chaves, codificação de caracteres, metadados e outras informações sobre o conteúdo do documento.Tag  body>

Esta tag tem por finalidade envolver todo o conteúdo referente ao documento webRecapitulando a EstruturaEssa estrutura apresentada tem apenas o objetivo de ser um esqueleto para os nossos documentos, as sessões de prólogo XML e  !DOCTYPE> são opcionais conforme foi dito anteriormente. Já a tag  head> é muito utilizada para anunciar detalhes específico do documento. As tags  html> e  body> já possuem o seus propósitos bem definidos, na sequência vamos analisar como seria esta estrutura básica.

Vale relembrar que a seção de prólogo XML não será adotada mais nos exemplos.COMENTÁRIOSEm algumas situações podemos desejar incluir informações em nossos documentos, mas sem a possibilidade disso ser visto pelo usuário quando o navegador processe-os. Temos um recursos muito interessante com o objetivo de adicionar comentários aos documentos HTML que serão descartados pelo navegador.  Para isso deveremos fazer conforme o exemplo abaixo:

Conforme foi falado todo o comentário é descartado pelo navegador, a exemplo a seguir possui um grande comentário inserido no corpo do documento e conforme a imagem do documento processado é possível perceber que realmente o comentário foi descartado.

Abaixo podemos verificar como o comentário foi despresado pelo navegador.

Vamos adotar em vários exemplos comentário diretamente no código, isso para facilitar a compreensão do código HTML visto que o comentário é contextualizado. Veja abaixo uma prévia disso:

TÍTULO DO DOCUMENTOA tag  title> deverá ser utilizada para indicar o assunto do documento web, as funcionalidades relacionadas ao título podemos destacar que:

Aparece na barra de título dos navegadores Utilizado por programas para catalogar Entrada de favoritos ou lista de preferências

As tags de título somente poderão ser utilizadas dentro da tag  head>, sendo que ela poderá ser definidas apenas uma vez e seu conteúdo poderá ser apenas texto, conforme o exemplo:

Documento processado pelo navegador:

DicaVocê deve buscar criar títulos que possam realmente identificar o conteúdo das páginas web sem esquecer de mantê-los curtos. Se considerarmos a ação do usuário quando ele pesquisa dentro do histórico de navegação ao até mesmo nos favoritos, esse processo se dará na perspectiva de que o usuário não recorda exatamente o título, mas tem um lembrança do que se tratava o documento. Além do que muitos mecanismos de pesquisas indexam as páginas e as disponibilizam como resultados de pesquisas através de seus títulos.  Mais um motivo para buscar nomes que identifiquem de uma forma sucinta o conteúdo da página web.CABEÇALHOS DO DOCUMENTOQuando estamos escrevendo documentos em algum editor de texto possivelmente utilizamos os cabeçalhos para dividir e organizar as sessões de texto. Não poderia ser diferente o fato de qual o HTML define seis níveis de cabeçalhos, sendo que todos são definidos pelo padrão abaixo:

Perceba que o padrão {Nível} corresponde ao nível desejado, que neste caso são representados pelos valores que vão de 1 a 6. Podemos ver na sequencia uma estrutura de documento utilizando todos os níveis possíveis:

Veja como o exemplo foi processado pelo navegador:

Devemos utilizar os cabeçalhos realmente para estruturar nossa informação, o objetivo não deve ser o destaque visual visto que podemos mudar a qualquer momento a forma que isso será processado visualmente. Devemos utilizar realmente para seccionar nosso documento criando um conceito de hierarquia de dados. Algumas ferramentas de pesquisa podem indexar os cabeçalhos pois consideram que são pontos importantes dos documentos web.PARÁGRAFOSQuando desejamos inserir texto no documento podemos utilizar a tag  p> para marca-los, isso é convenientemente importante pois facilitará a formatação visual de nossos documentos. Lembre-se de que quando utilizamos o HTML estamos estruturando nossos documentos dessa forma devemos representar

adequadamente cada parte. Vamos verificar abaixo como a utilização adequada de elementos parágrafos em nossos documentos HTML:

TRABALHANDO COM LISTASListas são importantes recursos na estruturação de documentos HTML, vamos na sequencia conhecer vários tipos sendo que podemos destacar os seguintes tipos indicado para uma certa ocasião:

Listas Enumeradas Listas com Marcadores Listas de Glossários

Existe algumas características comuns a todos os tipos de listas, nos itens destacados abaixo vamos apresentar essas características:

Todas as listas deverá ser envolvida corretamente pelas tags de abertura e fechamento correspondente ao tipo desejado, exemplo  ul> e  /ul> ou  ol> e  /ol>

Os itens das listas devem ser marcados adequadamente com as tags próprias, isso porque todo tipo de lista possui um marcador próprio para os itens

Listas OrdenadasQuando desejamos criar listas que sejam enumeradas quando processadas podemos utilizar a tag  ol> (abreviação de Ordered Lista, em português Lista Ordenada). Não devemos nos preocupar em enumerar os itens isso será feito automaticamente quando o navegador processar.  Lembre-se que estamos estruturando o documento e seus dados, a enumeração naturalmente deveria ser responsabilidade de quem vai processar. Esse tipo de lista é muito utilizado quando queremos criar a ideia de passos, nada mais natural do que enumera-los. Vamos verificar no exemplo abaixo uma utilização possível para esse tipo de lista:

Veja na sequencia como essa página foi processada pelo navegado:

Lista Não OrdenadasEsse tipo de lista que naturalmente não recebem nenhum tipo de ordenação, são comumente utilizadas para destacar pontos importantes relacionados ao que se está sendo discutido, vamos verificar abaixo algumas dicas de preparação para o vestibular:

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

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

Veja como isso foi processado:

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

Segue a visualização no navegador:

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

Esta tag tem o significado de ancora, isso porque cria a ideia de que um documento está ancorado (amarrado) a outro documento.  Quando desejamos criar um link para um outro documento devemos adotar a seguinte sintaxe:

Podemos perceber que o referência ao outro documento é feita através do atributo href, para facilitar a associação podemos compreender que o caractere ‘h’ tem o sentido de hipertexto já a palavra “ref” seria o sentido de referência. Existe outros atributos naturalmente para este elemento, vamos demonstrar no exemplo o uso do atributo “title” que pode ser utilizado para auxiliar o usuário isso porque é apresentado uma dica quando o usuário posiciona ou mouse sobre o link, na sequencia vamos entender como podemos fazer links entre documentos.VINCULANDO PÁGINASNeste exemplo vamos demonstrar como ao recurso de link passa a ser um importante instrumento para criamos essa dinâmica que é tão natural a web. Inicialmente vamos entender como estão acomodados fisicamente os nosso documentos, abaixo temos uma imagem dessa estrutura física:

Podemos observar na estrutura física que os documentos “dia-anterior-vestibular.html” e “prep.vestibular.html” estão armazenados dentro da subpasta “dicas”, vamos agora observar o conteúdo dos documentos, foque principalmente os detalhes sobre os links (tag  a>):· Documento: dicas-vestivular.html

Processado pelo Navegador

· Documento: unopar-historia.html

Processado pelo Navegador

· Documento: dicas\dia-anterior-vestibular.html

Processado pelo Navegador

· Documento: dicas\prep-vestibular.html

Processado pelo Navegador

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

Endereços AbsolutosOs endereços absolutos apontam para arquivos que se baseiam em sua localização absoluta, isto é os endereços são definidos de forma completa considerando o mais alto nível da hierarquia, para isso os endereços devem começar com o caractere barra “/”. Para entender o que consiste o termo “mais alto nível da hierarquia” é mais fácil quando conhecemos alguns conceitos de tecnologia que seja executada do lado do servidor (server-side), isso porque quando falamos de nível mais alto estamos considerando que existe um contexto hierárquico. Como foge o objetivo desta disciplina vamos contextualizar, imagine que a nossa página web esteja hospedada no endereço fictíciohttp://www.ead-pos-web.com.br/, vamos avaliar alguns endereços absolutos:

Quando UtilizarA ideia de utilizar endereços relativos deve sempre levar em consideração algum tipo de relação forte entre os documentos e seus conteúdos, vamos imaginar a possibilidade de algum documento ser movido de diretório o que acarretaria também nas mudanças dos demais documentos relacionados, não sendo um problema na perspectiva de que existe uma forte relação entre os conteúdos. Quando não há essa relação forte entre os conteúdos, apenas uma forma de navegação entre eles deveremos utilizar endereços absolutos para simplificar a criação dos próprios endereços, isto porque todos partirão do mais ato nível hierárquico.LINKS PARA SESSÕES DE DOCUMENTO

Podemos utilizar links para permitir que o fluxo (navegação) não seja apenas entre documentos, mas também podemos indicar sessões específicas promovendo uma navegação mais refinada. Para que isso seja possível devemos criar ancoras em nossos documentos, esse recurso tem por objetivo marcar lugares específicos para o qual poderá ser direcionado a qualquer momento, basta configurar adequadamente um link. As ancoras também são criadas através da tag  a>, só que ao invés de configurarmos o atributo href vamos configurar o atributo id que servirá para identificar a ancora, abaixo vamos verificar como seria a sintaxe:

As ancoras são muito utilizadas para permitir uma navegação entre os conteúdos do próprio documento, neste caso quando desejarmos criar links para as ancoras vamos adotar a sintaxe destacada abaixo:

Agora vamos imagina a situação onde desejamos a partir de um documento (documento 1) criar um link para um outro documento (documento 2), mas direcionar a navegação para um seção em específica. Naturalmente após a devida configuração da ancora no documento 2 poderíamos partir para criar um link no documento 1, abaixo poderemos verificar como construímos links para outros documentos indicando uma determinada seção:

NAVEGAÇÃO EFICIENTEAs páginas da web suportam naturalmente recursos de navegação, através da criação de links e ancoras podemos criar uma boa dinâmica no processo de leitura das informações. Vamos ver no próximo exemplo como a navegação utilizando ancora pode facilitar o acesso a pontos específicos de nossos documentos.

Baixo podemos verificar com ela foi processada pelo navegador:

TABELASQuando desejamos apresentar dados em uma organização tabular (linhas x colunas) podemos utilizar o recurso de tabela que foi introduzido inicialmente como o HTML 2.0. Essa informação será apresentada visualmente como se fosse uma grade onde os dados serão dispostos em suas respectivas células. Vamos abaixo analisar quais estruturas compõem um tabela:

Título: indica qual é natureza das informações contidas na tabela Cabeçalhos: são informações que definem a natureza das informações

contidas especificamente em uma coluna ou linha Células: elemento originado da relação linha x coluna, comumente podemos

ter títulos de colunas, linhas ou dados comuns Dados: correspondem exatamente a informação que se deseja apresentar,

não podemos esquecer que os cabeçalhos também são informações inerentes à tabela

A tag  table>Para incluir uma tabela em um documento devemos utilizar o elemento table, diferentemente de vários elementos que vimos até o momento a construção de uma tabela depende de uma estrutura mais complexa, devemos compreender que a tag table vai envolver todo os outros elementos que farão parte dessa estrutura maior. Abaixo vamos verificar um exemplo dessa estrutura tabela, na sequencia vamos discutir os detalhes:

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

Vamos agora verificar alguns outros elementos que podem ser utilizados na construção de nossas tabelas. Veja inicialmente o exemplo anterior com algumas alterações, na sequencia vamos discuti-las:

Tag  thead>Usamos essa tag para agrupar os conteúdos de cabeçalhos em tabelas HTML. Isso pode ser útil por exemplo para tabelas com grande volume de dados quando impresso os navegadores podem garantir que este grupo seja reimpresso, facilitando a leitura dos dados impressos.Tag  tbody>Utilizamos essa tag para agrupar os dados referentes ao corpo da tabela.Tag  tfoot>Utilizamos essa tag para agrupas os conteúdos referentes ao rodapé em tabelas HTML. Valendo-se da mesma característica que a tag thead, podemos tirar

vantagens em impressões de grandes volumes de dados pois em quebras de páginas as sessões thead e tfoot serão reimpressas.Atributos Colspan e RowspanQuando desejamos que uma célula ocupe mais de uma linha ou coluna podemos utilizar respectivamente os atributos colspan e rowspan. Isso cria o efeito de mesclar células, muito útil para formatação dos dados em estruturas tabulares. Podemos verificar no exemplo anterior que a célula correspondente ao rodapé ocupou o espaço de três colunas. Abaixo podemos verificar como a tabela foi processada pelo navegador:

TRABALHANDO COM FORMULÁRIOSFormulários são utilizados para permitir que dados sejam coletados dos usuários. Quase todas as páginas web dispõem de alguma forma de interação, seja através de um “Fale Conosco” ou em muitos casos através de um cadastro. O recursos em HTML que promove esse tipo de interação se chama “Formulários HTML”. Na sequência vamos navegar pelos elementos que poderemos utilizar em nossas construções. O que não pode ser esquecido que quando projetamos um formulário indicamos qual será o agente de software que processará as interações, em outras palavras devemos desenvolver elementos de software capazes de receber os dados enviados pelo usuário e comumente armazenar em uma base dedados. Isso com certeza poderia ser codificado com alguma linguagem de rode em servidores Web, a exemplos podemos pensarem PHP, ASP.NET, Java, Python e etc.Projeto ExemploDurante o transcorrer de vários conteúdos que nos trouxeram até este ponto, adotamos a prática de construir exemplos completos para simplificar o entendimento e melhorar a didática. Vamos no decorrer desta seção “Trabalhando

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

Maiores detalhes sobre o atributo method serão discutidos na seção “Entendendo GET/POST”, vamos continuar nossa jornada pelos elementos de dados para formulários HTML.Tag  input>

Este elemento pode ser utilizado para captar vários tipos de dados, isto porque pode ser configurado através do atributo type, abaixo vamos verificar quais tipos e controles gerados:

Tag  button>Podemos criar botões de ação através do elemento input conforme verificamos anteriormente, só que eles (input) são elemento vazios o que implica que não podem receber conteúdo. Já os elementos button possuem essa versatilidade, conforme podemos conferir na sequência. O que devemos antes destacar é a existência dos atributo type que atualmente suportam os valores listados abaixo:

Abaixo é possível verificar uma marcação muito frequente com este elemento:

Tag  select>Podemos utilizar este elemento para criar menu de escolher, em conjunto temos também às tags  option> e  optgroup>. Abaixo podemos verificar como essa marcação será feita e como o navegador a processará:Sem Utilização de Grupos

Processado pelo navegado:

Utilizando Grupos

Processado pelo navegador:

Tag  textarea>Podemos utilizar esse elemento para permitir entrada de dados do tipo texto, mas com múltiplas linhas.  Vamos ao exemplo:

Vamos verificar como o navegado processou:

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

Que foi processado assim:

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

Vamos considerar que neste primeiro teste o método configurado seja GET, abaixo poderemos verificar como a página foi processada pelo navegador:

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

Vamos neste ponto alterar o método do formulário para POST,

Não conseguiremos verificar os dados transmitidos, apenas caso capturássemos os pacotes de dados trafegados, mas isso está longe de nosso objetivo. Apenas devemos perceber que os dados não estavam visíveis quando solicitamos para “Entrar”, veja através da imagem abaixo:

 ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES WEB

WEB AULA 1Unidade 2 – CSS e JavaScriptTRABALHANDO COM CSSVocê pode ter percebido que não discutimos exatamente nada sobre detalhes de apresentação, visto que reforçamos a ideia que HTML é uma linguagem de marcação e não deve em hipótese alguma ser utilizado com o propósito de apresentação. Quando estamos interessado em formatar, ajustar, interferir na

forma como nossos documentos são apresentados (processado) devemos utilizado a tecnologia CSS, que tem grandes propriedade para tal feito.Mas o que é CSSO termo CSS é uma abreviação de Cascading Style Sheet, que traduzimos folha de estilo em cascata. Segundo a W3C a definição de CSS é“Folha de estilo em cascata é m mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.”Como EscreverPara que você entenda a sintaxe do CSS, vamos destacar como escrevemos as regras de apresentação.

Vamos entender os elementos que compões as regras de sintaxe de CSS:

Regra CSS: As regras são constituídas de um seletor e o bloco de configuração

o Seletor: Quando construímos uma regra não fazemos de forma individual por elemento de nosso documento, criamos na verdade um modelo que será aplicado a todos os elementos no qual sejam enquadrados através do seletor

o Configuração: Definimos como os elementos serão afetados com relação a sua apresentação

Propriedade: característica que será configurada Valor: valor que será atribuído a propriedade configurada

A seção de configuração pode conter mais de uma propriedade configurada, flexibilizando as regras.Em FuncionamentoVamos avaliar alguns exemplos e na medida que forem apresentados novos conceitos serão discutidos. Vamos configurar para que os elementos parágrafos sejam estilizados conforme a próxima configuração:

Podemos perceber que ao fim de cada configuração devemos finalizar com o ponto-e-vírgula. Para as propriedade que desejarmos atribuir um valor formado por palavra composta deveremos escrevê-los entres aspas duplas (“ “), ou então utilizando aspas simples (‘ ‘). Vamos a uma situação muito comum:

Vamos a mais algumas regras:

Não é sensível a caixa: minúsculo ou maiúsculo é indiferente Espaços: os espaços serão descartados

Comentário?Podemos utilizar comentários em nossos arquivos com propósitos variados, apenas uma sintaxe é suportada. Comentários são criados a partir de blocos de textos inseridos entre os símbolos /* e */, veja como podemos utilizar através dos exemplos:

Agrupamento de seletoresQuando desejamos aplicar uma mesma regra a mais de um seletor a seguinte sintaxe é suportada e muito útil:

Seletores de ClassesPodemos considerar seletores criados a para tags específicas de HTML, uma outro alternativa muito poderosa e a possibilidade de criar seletores de classe, que neste caso podem também ser aplicadas a maioria de elementos HTML. Para criarmos esses seletores devemos acrescentar o sinal de ponto antes do nome da classe. Podemos ainda colocar antes deste ponto a tag no qual essa classes se aplica, vejamos os exemplos:

Vamos agora verificar como poderíamos configurar o nosso html para ser selecionado por estes seletores. Na sequência podemos verificar dois parágrafos configurados para utilizar duas classes distintas:

A utilização de seletores de classes permite que elementos do mesmo tipo possam ter apresentações diferenciadas. Podemos ainda configurar para um mesmo elemento mais de uma classe, para isso apenas é necessário colocar um espaço entre os nomes das classes, veja a seguir:

Seletor de IdentificadoresPodemos ainda criar seletores especificando diretamente o identificador do elemento HTML, como regra devemos entender que:

O identificador deverá ser aplicado apenas a um elemento HTML através da propriedade id

Caso especificidade de um seletor de identificador é maior que o seletor de classe.

Para construirmos seletores de identificador deveremos utilizar o sustenido (#) antecedendo o nome do seletor que no caso deverá ser necessariamente o identificador do elemento. Assim como nos seletores de classe podemos anteceder com o tipo da tag. Vamos analisando o exemplo a seguir:

Vinculando folhas de estilos a documentos HTMLEstamos vendo detalhes de como definir a apresentação de nossos documentos através de CSS, mas ainda não verificamos como se dá a relação entre arquivos CSS e documentos HTML. Vamos na sequencia mergulhar nos detalhes de como faremos isso, já vou adiantando, são várias maneiras com seus prós e contras.Estilo inlinePodemos definir a forma como um elemento deverá ser apresentado diretamente no próprio elemento através da propriedade style. Vamos ao exemplo:

Com certeza essa não é uma boa abordagem, isso pelos fatos de que nós estamos dificultando as futuras manutenções por estarmos misturando linguagem de marcação e configurações de apresentação. Outro ponto de desvantagem é que perdemos o controle centralizado sobre a forma de apresentação de um documento, quando desejarmos alterar deveremos alterar possivelmente em muitos pontos.Estilos IncorporadosPodemos construir as definições das regras CSS diretamente no documento HTML conforme o exemplo:

Diante do estilo inline essa forma apresenta vantagens pois conseguimos centralizar os estilos em um ponto do documento, isso para todos os tipos de seletores. Mas existe uma desvantagem quando as mesmas regras serão aplicadas a mais de um documento, neste caso deveremos copiar e naturalmente duplicar os pontos de manutenção.Estilos ExternosColocar as regras de CSS em arquivos externos ao documento HTML sem dúvida é a melhor estratégia para trabalhar com folha de estilo. Toda a capacidade de construir e reutilizar, de alterar e afetar, isso tudo são características originadas do conceito de folha de estilo. Para essa incorporação existem duas maneiras, segue;- Folhas de estilos linkadasPara incorporara uma folha de estilo externa podemos criar um elemento link apontando para o arquivo em questão, vamos ao exemplo:

Podemos perceber que o atributo href é quem determina o caminho para o arquivo de folha de estilo. Neste caso temos um caminha relativo.- Folhas de estilos importadasPodemos ainda importa-las, isso se dá através da seguinte sintaxe:

ConclusõesDevemos compreender que o uso correto de folhas de estilos considerando boas práticas, a exemplo já podemos destacar a utilização de folhas externas. Isso com certeza permitirá um controlo muito eficiente sobre a apresentação de documentos, visto que podemos efetuar modificações em apenas um ou alguns documentos dependendo de nossas organizações, e conseguirmos afetar aplicações web compostas por algumas dezenas de milhares de páginas. Isso é algo impressionante e para alguns casos fundamental.JAVASCRIPTIntroduçãoPodemos afirmar que JavaScript é uma das mais populares linguagens de script existente atualmente, utilizada como padrão em aplicações web, mas com possibilidade de desenvolver aplicações desktop, aplicações para dispositivos moveis e até mesmo servidores web. Quando dizemos que JavaScript é uma linguagem de script devemos compreender que:

Linguagem de script tem por objetivo ser uma linguagem de programação leve com suporte a criação de scripts

Já os scripts são linhas de código que podem ser interpretados e executados por demanda, dispensando a necessidade dos passos de compilação explicita e linkedição.

Pra que JavaScript?Quando construímos documentos HTML nosso foco sempre será a marcação garantindo a semântica, por outro lado quando desejamos estilizar devemos optar pelas folhas de estilos em cascata.  E quando desejamos criar algum nível de interatividade entre o documento e nosso usuário, isso fica sobe a responsabilidade da linguagem de programação JavaScript. Vamos avaliar algumas possibilidades do que podemos fazer com JavaScript:

Manipulação de HTML: podemos manipular quaisquer elementos de nosso documentos, podendo executar operações como adicionar, alterar ou excluir elementos

Manipulação de CSS: podemos alterar as configurações de apresentação de quaisquer elementos

Validação de Dados: em muitas situações devemos verificar a consistências dos dados fornecidos pelos usuários, e isso pode ser feito naturalmente com JavaScript

Armazenamento de Dados: podemos utilizar ainda para recuperar e armazenar informações do computador do visitante

Reação a Eventos: podemos configurar ações para serem executadas quando algumas coisas acontecem, criando uma real interatividade

Padronização do JavaScriptA linguagem JavaScript e seus propósitos iniciais foram definidos e criados por Brendan Eich da Netscape, e inicialmente foi suportado pelo lendário navegador Netscape em 1995. Essa linguagem foi chamada inicialmente de Mocha, então LiveScript e por fim JavaScript.A linguagem JavaScript foi adotada como padrão pela associação da indústria de padronização em 1997. Este padrão chamado de ECMAScript-262 foi aprovado como um padrão ISSO internacional em 1998, o seu processo de desenvolvimento continua em nos dias atuais. Devemos compreender com isso que JavaScript corresponde ao padrão ECMAScript.TRABALHANDO COM JAVASCRIPTVamos no decorrer desta seção discutir vários conceitos e na medida que formos apresentando iremos exemplificar através de exemplos reais. Vamos em um primeiro momento entender alguns detalhes sobre a estrutura básica da linguagem, como ela é organizada e na sequencia vamos abordar detalhes e recursos da API (Application Program Interface) JavaScript.Estrutura básicaJavaScript é uma linguagem orientada a objeto, quando acessamos os elementos da página devemos compreender que este isso se dará de acordo com a hierarquia de elementos já conhecidas no HTML. Dentro desta hierarquia, todos os elementos da página estão contidos dentro de um container de objetos chamado window. Dentro deste (window) existem outros containers menores com o propósitos distintos, vamos destacar alguns objetos:

location:  este objeto disponibiliza informações sobre localização do documento na web, podemos acessar informações como protocolo, nome do domínio, path (caminho) e porta

history: este objeto disponibiliza informações sobre os sites que foram visitados durante a seção atual, permitindo também o acesso à funções internar para alteração do conteúdo da janela atual

document: Todos os objetos hierárquicos condizentes a estrutura do documento ( html> head>.. /head> body> /body> /html>) podem ser acessados através dele (document)

Propriedades e MétodosNão vamos nos aprofundas nas técnicas de desenvolvimento orientado a objeto com JavaScript, mas mesmo assim devemos compreender estes dois recursos. As propriedades de um objetos são considerados tecnicamente como atributos, que tem o objetivo de representar através de um valor uma característica do objeto. Abaixo temos uma lista de propriedades como exemplos:

document.title: título definido ao documento window.width: comprimento da janela

Já os métodos podemos compreender tecnicamente como comportamentos dos objetos, vamos avaliar abaixo uma lista de métodos como exemplos:

documento.write("Texto adicionado ao documento"); window.alert("Mensagem de Alerta")

VariáveisComo em álgebra as variáveis em JavaScript são utilizadas para armazenar valores ou expressões, como são estruturas armazenadas na memória recebem um identificador para serem manipuladas através da programação. Devemos compreender algumas regras nas definições das variáveis:

Os nomes são sensíveis a caixa (idade é diferente de IDADE ou até mesmo de Idade)

Todos os nomes devem necessariamente começar com uma letra, ou então o caractere $, ou então o caractere sublinhado.

Declaramos variáveis utilizando a palavra reservada var. Isso cria uma variáveis com o identificador que fornecermos, ela estará vazia e então poderemos atribuir um valor utilizando o símbolo de igual (=).

Podemos ainda optar por associar um valor diretamente na sua declaração, exemplo:

Tipos de DadosAtualmente dispomos apenas de três tipos de dados, string, numérico e booleano.

String: quando desejamos trabalhar com dados do tipo literal, devemos colocar a sequência de caracteres entre aspas duplo (" ") 

Booleano: esse tipo de dados possui apenas dois valores possíveis, true e false. 

Numérico: quando os dados são do tipo numérico inteiro ou com ponto flutuante.

OPERADORES E EXPRESSÕESAssim como fizemos a referência a álgebra quando discutimos variáveis você pode estar se questionando sobre os operadores aritméticos, fundamentais para instruirmos o computador para efetuarem cálculos e operarem os valores armazenados nas variáveis, abaixo podemos avaliar uma série de operadores:

Operador de AtribuiçãoQuando desejamos alterar o valor de uma variável devemos utilizar o comando de atribuição (=), podemos ver até aqui vários exemplos que já fazem uso deste importante operador, segue mais um exemplo.ComentáriosComo vimos em HTML podemos querer colocar conteúdos em nossos scripts, mas com propósitos de informar ou até mesmo ajudar a interpretação de um algoritmos. Para isso JavaScript dispõe de duas formas, comentário de linha que é iniciado pela sequência do caractere barra (/), já comentário de blocos são iniciados por /* e finalizados por */. Abaixo podemos verificar como devemos fazer:

Caixa de DiálogosCaixa de diálogos são janelas no qual podemos utilizar com o propósito de interagir com o usuário, seja através de um alerta ou solicitando uma informação. Dispomos de forma nativa de três tipos de caixas, sendo elas:

Alerta: permite criar uma caixa de diálogo com o propósito de alertar o usuário de algo;

Confirmação: permite interagir com o usuário com o propósito de confirmar algo

Solicitação: permite interagir com o usuário para solicitar uma informação

No código descrito abaixo existem vários conceitos que vamos discutir na sequência, mas já podemos ver em ação a caixa de diálogo para alertas.

Quando desejamos solicitar uma confirmação ao nosso usuário podemos fazer uma construção parecida com o exemplo abaixo:

Para concluirmos vamos analisar o exemplo a seguir que demonstra com podemos utilizar a caixa de entrada de dados:

INSERINDO JAVASCRIPT NO HTMLQuando desejamos criar algum nível de interatividade em nossos documentos vamos construir isso através de scripts JavaScript, mas onde vamos escrever nossos códigos. Temos três formas para adicionar essa inteligência, segue os modos:

Inline: podemos escrever scripts diretamente na seção body do documento. Essa abordagem não é aconselhável pois mistura linguagem de marcação com linhagem de programação, dificultando o entendimento e a manutenção.

Incorporado: podemos criar nosso código diretamente no documento HTML através da tag script>.

Externo: podemos incorporar arquivos externos contendo nossos scripts, isso facilita a manutenção e também a reutilização de código. Considerado como a melhor prática pela indústria de desenvolvimento.

Abaixo podemos avaliar como construiríamos nosso script utilizando o modo inline:

Na estratégia de incorporarmos ou utilizarmos externo o script vamos utilizar o tag  script>, vamos analisar primeiramente o modo de incorporar:

No modo externo ainda utilizamos a tag  script>, mas utilizamos a propriedade src para indicar o endereço do arquivo que possui nosso script, vamos ao exemplo:

Operadores RelacionaisOperadores relacionais são utilizados quando desejamos expressar a relação de grandeza entre operandos. Esses operadores são binários o que significa que são aplicados a dois operandos, conforme os exemplos abaixo:

Operadores Lógicos

Declarações de FunçãoComo já discutimos JavaScript suporta o modelo de desenvolvimento orientado a objeto, por mais que não utilizemos essa prática em nosso desenvolvimento não podemos fugir do fato que toda API utiliza. Podemos ainda desenvolver nossos

scripts utilizando o modelo de desenvolvimento modular através da organização de nossos códigos em função. A forma como podemos fazer isso será mostrada a seguir:

Podemos avaliar na sequencia uma função que foi construída para somar dois valores e mostrar uma mensagem de alerta apresentando o resultado:

Quando desejamos que nossas funções retornem um valor condizente ao processo executado podemos utilizar o recurso de retorno de valor, para isso devemos utilizar a palavra reservada returnconforme o exemplo abaixo:

ESTRUTURAS DE PROGRAMAÇÃOVamos a partir deste ponto apresentar de forma sucinta as estruturas de programação disponíveis em JavaScript, vamos considerar que a técnica de utilização das estruturas já seja algo conhecido por todos.ESTRUTURAS CONDICIONAISIfModelo de construção da estrutura condicional if:

Exemplo de sua utilização:

elsePodemos utilizar para definir as ações para quando a expressão lógica definida no if não for verdadeira (false).Modelo de construção da estrutura condicional if-else:

Exemplo de sua utilização:

switchModelo de construção da estrutura condicional switch:

Exemplo de sua utilização:

ESTRUTURAS DE REPETIÇÃO (LOOP)forModelo de construção da estrutura de repetição for:

Exemplo de sua utilização:

whileModelo de construção da estrutura de repetição while:

Exemplo de sua utilização:

do-whileModelo de construção da estrutura de repetição do-while:

Exemplo de sua utilização:do {    var info = prompt("Pra sair digite o texto sair!");} while (info != "sair");

Visão geralApresentação da disciplina:

Sou o professor Adriano Sepe, profissionalmente trabalho como arquiteto de softwares com mais de nove anos de experiência e sólidos conhecimentos em arquitetura, sistemas distribuídos e desenvolvimento de soluções web, desktop, mobile e SOA. Obcecado por boas práticas de arquitetura e desenvolvimento de software, para isso busco sempre dedicar-me ao conhecimento. Na área acadêmica tenho ministrado disciplina nos cursos de Tecnologia em Análise e Desenvolvimento de Sistemas, Engenharia Elétrica e Engenharia da Computação.Vamos navegar pelos detalhes do funcionamento da quinta versão da principal linguagem de marcação chamada HTML, mais conhecida como HTML5. Com certeza uma tecnologia chave para a Internet que conhecemos hoje. Vamos aprender sobre novos recursos relacionados a semântica e acessibilidade, novos marcadores. Adicionaremos recursos de áudio e vídeo sem a necessidade de utilização de tecnologia (plug-in) de terceiros. Vamos ainda discutir em detalhes os novos elementos para composição de formulários Web. Outro importante ponto que será discutido será sobre os recursos de Drag & Drop e Geolocalização. Concluímos com uma abordagem simplificada sobre os novos recursos de desenho que foram adicionados através do elemento Canvas. Finalizamos nosso aprendizado discutindo detalhes técnicos sobre como trabalhar com

gráficos vetorais SVG.

 

ObjetivosCompreender detalhes do funcionamento de algumas áreas da tecnologia HTML5. O conhecimento partirá dos detalhes da nova estrutura e semântica, passaremos pelos detalhes de incorporar áudio e vídeos sem a utilização de recursos (plug-in) de terceiros. Vamos ainda aprender importantes recursos que foram disponibilizada com a mais nova verão do HTML, por exemplo: Drag & Drop, Geolocalização, Desenhando com Canvas e concluímos com uma discussão técnica sobre como adicionamos gráficos vetoriais com SVG (Scalable Vector Graphics).

Conteúdo Programático:a) Introdução a HTML 5b) Suporte dos Navegadoresc) Novos elementosI)  Nova semânticaII) Nova estruturad) Elementos multimídiaI)  Trabalhando com vídeoII) Trabalhando com áudioe) Elementos Drag & Dropf)  GráficosI)  Trabalhando com CanvasII) Trabalhando com SVG

Metodologia:Na unidade utilizaremos todos os recursos necessários e disponíveis para o desenvolvimento da discussão do conteúdo, sendo assim, faremos uso de:

Textos da própria web-aula e de outros sites que possam contribuir para a discussão;

Vídeos que podem esclarecer ou aprofundar determinados conteúdos;

Fóruns para discussão de tópicos onde seja possível a troca de ideias e conteúdos entre os discentes e docentes;

Avaliações virtuais onde será realizada a verificação do aprendizado;

Entre outros recursos que poderão ser utilizados visando maior entendimento da matéria.

 

Avaliação Prevista:Cada web-aula conterá uma avaliação virtual composta de 5 questões (sendo assim, temos 2 web-aulas com 5 questões cada). Quando houver fórum de discussão o aluno será avaliado quanto ao conteúdo de sua postagem, onde deverá comentar o tópico apresentando respostas completas e com nível crítico de avaliação pertinente ao nível de pós-graduação.

 TECNOLOGIAS PARA APLICAÇÕES WEB

WEB AULA 1Unidade 1 – Programação em HTML 5

00:0000:00

Semântica com HTML5HTML 5 não é sobre apenas mais alguns recursos interativos com JavaScript e vídeo. Há mais de 20 novos elementos, que você pode usar para criar páginas da web, adicionando semântica para entregar conteúdo reutilizável, mais acessível. Na sequencia vamos aprender sobre novos controles de formulários HTML5 e elementos multimídia. Vamos primeiramente aprender sobre os novos elementoes estruturais header, hgroup, nav, footer, article, section, e aside, focados em como, porque, e quando usar estes novos elementos, por conta própria e quando combinados. Essencialmente, vamos dicutir os elementos que foram destacados na figura abaixo.

 Construção de um documento HTML5Você está prestes a iniciar com HTML5, então vamos para a parte superior do documento HTML. Embora o conteúdo desta seção imediata não contém elementos novos, há um novo maneira de escrevê-los, então é melhor estar ciente antes de começar a entrar no corpo.Doctype

O doctype deve ser a primeira linha em um documento HTML. Chamado um Documento Type Definition (DTD), o DOCTYPE é uma exigência dos padrões web, e diz o navegador como processar o documento, razão pela qual deve ser a primeira coisa em seu documento HTML. Se você não usar um DOCTYPE ou colocar qualquer outro código antes de o doctype e, em seguida, o navegador pode apresentar dificuldades em processar corretamente a sua página. É improvável que você iria querer memorizar o doctype anterior. Por que seria você? É horrível e desajeitado. Em HTML5, agora você tem um bom, fácil de lembrar DOCTYPE:

Codificação de CaracteresA primeira linha que precisamos colocar dentro do head é a declaração do charset, isso dirá ao navegador como os arquivos devem ser interpretados.Em HTML 4 isso seria feito assim:

Já em HTML5 assim como o DOCTYPE, isso foi muito simplificado:

Como adicionar JavaScript & CSS

Antes para adicionarmos um arquivo externo JavaScript e CSS a sintaxe necessária seria:

Agora com HTML 5 podemos omitir a propriedade type, veja como isso ficaria:

Flexibilidade na SintaxePodemos escrever em HTML 5 com uma certa flexibilidade, isso porque algumas regras não são aplicadas a está versão do HTML, por exemplo:1. Não existe uma restrição para escrever os elementos e atributos em caixa alta ou baixa, segue exemplos possíveis para um mesmo código:

2. Os elementos vazios não precisam ser fechados:

É importante destacar que por mais que exista uma flexibilidade na escrita é importante que você adote um padrão consistente. Vamos no decorrer deste cursos sempre adotar as premissas do XHTML, então todas as tags e atributos serão escritas em minúsculo e todos os elemento serão devidamente aninhados e fechados.Nos links abaixo poderemos ver mais detalhes introdutórios a tecnologia HTML5.

http://tableless.com.br/html5/?chapter=3 http://diveintohtml5.com.br/introduction.html http://diveintohtml5.com.br/past.html http://diveintohtml5.com.br/detect.html

Utilizando o elemento   header  para criar um cabeçalho do site Quando analisamos uma página web típica encontramos conforme a imagem apresentada no início, sendo muito comum a dotação de um menu no início do site. Além disso, é comum adotar o padrão de apresentar a logo, o nome do site e / ou os principais links de navegação.  Essa seção pode ser utilizada mais de uma vez em uma página, isso ainda pode ser utilizada para navegações para uma área em particular não somente para navegações entre as páginas. Vamos verificar esse simples exemplo:

Outro exemplo para demonstrar que não estamos restritos a utilizar apenas um header por página, e isso não precisa ser no topo da página. Vamos na sequencia explicar maiores detalhes, mas caso seja necessário colocar várias cabeçalhos em uma página, considere adicionar os elementos header como este exemplo:

Utilizando o elemento   hgroup   para agrupar cabeçalhos Podemos utilizar o novo elemento do HTML5 chamado hgroup para agrupar cabeçalhos h1-6 com algum tipo de relação. Isso é importante quando possuímos um sub-cabeçalho, neste caso podemos adotar a estrutura demonstrada abaixo:

Criando a navegação com o elemento   nav Este novo elemento assim como o seu nome indica, tem o propósito de indicar conteúdo de navegação. Isso é utilizado para construímos conteúdos de links para página ou então para partes da página. A forma mais comum de construirmos um conteúdo de navegação é utilizando uma lista não ordenada, vamos avaliar como isso se dará:

Para ajustar e utilizar este novo elemento é extremamente simples, isso porque apenas será necessário envolvermos a lista não ordenada com o novo elemento nav, vejamos o resultado:

Nós ainda podemos adicionar o nav no cabeçalho, como será mostrado a seguir. Como o cabeçalho nos permite introduzir um conteúdo de navegação, mas não ficando restrito apenas a este ponto:

Não devemos compreender que todo o link deverá ser envolvido por um elemento nav, isso deverá ser feito apenas para o conteúdo de navegação de maior importância do site.4Utilizando o novo elemento   articleQuando desejamos criar um bloco de conteúdo independente podemos utilizar o article. Este conteúdo deve existir sobre nossos próprios direitos, bem como o propósito de ser reutilizado. Por exemplo, podemos considerar a possibilidade de visualizar este conteúdo em um feed RSS. As especificações HTML5 sugerem

alguns exemplos para como um elemento article pode ser utilizado, isso como um post de um fórum, uma revista ou um artigo em um newspaper, uma entrada em um blog, ou então um comentário de um usuário. Vejamos o exemplo a seguir:

Agrupando conteúdos com o elemento   sectionEste elemento cria uma área de conteúdo que quase sempre necessita de um título. Podemos utilizado para agrupar outros elementos criando uma ideia de seção. Não devemos utilizar como um wrapper genérico (DIV) apenas para aplicar efeitos de estilização, seu propósito é criar seções de conteúdos com suas semânticas respeitadas. Vamos criar um exemplo:

Podemos considerar várias possibilidade na hora de estruturamos o nosso documento, este novo elemento junto com os demais podem nos ajudar a criar estruturas de dados melhores.Criando uma barra lateral com o elemento   asideEste elemento tem por objetivo criar um grupo de conteúdo que está sempre relacionada a conteúdos subjacentes, como, por exemplo, uma lista de post mais populares, categorias de um blog ou então comentário recentes. Este tipo de conteúdo também está relacionada ao conteúdo da página no qual o define, mas também podemos considerar um conteúdo independente. Nas páginas atuais da Web é muito comum haver uma barra lateral, isso não deve significar que os elementos aside devem ser colocados na parte lateral de uma página fisicamente, ou invés disso devemos compreender o seu objetivo que na maioria das vezes está associado ao propósito de disponibilizar links ou listas de categorias e até mesmo anúncios relacionados com o site. Vamos analisar com detalhes o exemplo abaixo:

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

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

Podemos ainda utilizar o elemento figure e figcaption para várias imagens, como o exemplo abaixo:

6

Marcando a data e hora com o elemento timeIsso permite que ao construirmos documentos que expõem informações relativas ao tempo possamos garantir que isso será lido e compreendido pelas maquinas. Com isso poderemos marcar as coisas com uma estampa de tempo como, por exemplo, as datas de publicação ou eventos que podem ser consumido por outras tecnologias, por exemplo, um calendário. O elemento time possui dois atributos opcionais, segue os:

datetime: O usuário visualiza o conteúdo do elemento, já a máquina considera o valor contido neste documento.

pubdate: Indica que a data/hora no elemento time é a data de publicação do documento (ou o elemento mais próximo do ancestral article)

O elemento time é projetado para mostrar datas precisas, para isso devemos utilizar o formato do calendário Gregoriano: YYYY-MM-DD, com o tempo codificado como T00:00. Vamos analisar o exemplo a seguir:

Criando um Widget nativo para detalhesUm recurso bem interessante e agora nativo a partir do HTML é a possibilidade de apresentarmos itens e seus detalhes, que permitem que o usuário possa expandir e retroceder. Isso facilita a visualização de grandes quantidades de dados pois permite ao usuário focar exatamente aquilo que lhe é importante. E isso tudo sem a necessidade de JavaScript e CSS. Vamos ao exemplo:

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

utilizarmos algum tipo de recurso deveremos verificar se o navegador alvo do projeto já o suporta. Outro ponto importante é que como poderá haver diferenças entre os navegadores nas validações, deveremos sempre considerar em revalidar os dados do lado do servidor (server-side), isso evitará a entrada de dados inconsistentes. Vamos construir nosso primeiro exemplo, neste caso vamos simular um formulário onde o usuário entraria em contato com o possível administrador do site, vamos ao exemplo:

No exemplo acima utilizamos o conceito de dados requerido, isso indicou ao navegador que algumas informações deveriam ser preenchidas antes do formulário ser submetido. Isso se deu através da utilização atributo required=”required”. Ainda utilizamos uma série de tipos de entradas que foram disponibilizados através do HTML5, isso gerou algumas restrições sobre o padrão da informação fornecida. Podemos perceber também que os dados (formulário) não foram submetidos enquanto as restrições de preenchimento e do tipo da informação não foram atendidos. Vamos na sequencia discutir detalhes destes novos elementos.Tipo “email”Quando utilizamos no atributo type o valor “email” estamos indicando ao navegador que aquela informação deverá parecer com um e-mail válido. A validação se dá apenas sobre a informação e não sobre a existência da conta de e-mail.Tipo “tel”Quando utilizamos no atributo type o valor “tel” estamos indicando ao navegador que aquela informação deverá parecer com um telefone válido. Isso quer dizer que deverá ser aceito qualquer tipo de caracteres, não somente números. Por exemplo o caractere ‘+’.Tipo “url”Quando utilizamos no atributo type o valor “url” estamos indicando ao navegador que aquela informação deverá parecer com uma URL válida. A restrição será apenas sobre a informação e não sobre a existência da URL. Essa URL precisa ser um endereço Web, para alguns navegadores ainda é necessário que o protocolo seja fornecido, neste caso o endereço www.adrianosepe.com.br não seria

considerado válido, obrigando que o protocolo seja informado conforme o endereço http://www.adrianosepe.com.br.Criando um formulário de pesquisaQuando desejamos criar um formulário de pesquisa podemos contar com um input configurado comotype=”search”, isso na verdade aceitará qualquer termo de pesquisa, por isso se assemelha muito ao input de type=”text”. Isso não concederá nenhum efeito ou privilégio a mais ao seu formulário, apenas permitirá que o navegadores saibam que o campo é de pesquisa. Vamos avaliar o exemplo abaixo de como isso poderá ser feito:

8Trabalhando com controles de calendário e tempoConstantemente quando desejamos criar uma entrada de dados para receber uma informação do tipo data e hora optamos por adicionar recursos externos com o propósito de melhorar essa interação com o usuário. Isso sempre requereu conhecimentos e bibliotecas em JavaScript, mas agora podemos contar com alguns recursos nativos, facilitando em muito a nossa vida.Tipo “datetime”Agora podemos contar com este tipo de entrada, isso significa que não haverá necessidade de adicionarmos JavaScript exclusivamente para permitir uma melhor interação com o usuário em situações onde uma data / hora é requerida. Atualmente apenas os navegadores Opera e iOS Safari que disponibilizam um Widget adequado. O suporte nativo para esse tipo de dado traz uma série de vantagens, incialmente podemos destacar a possibilidade de apresentar detalhes do calendário respeitando a linguagem utilizada no sistema operacional.Tipo “datetime-local”Com o mesmo propósito que o tipo anterior, sendo que a diferença está no fato de que no anterior é indicado que a data / hora deverá ser fornecida considerando o horário UTC (Universal Time Coordinated),  já neste novo controle a ideia é que a data / hora seja fornecida com base no horário local.

Tipo “date”

Este tipo de controle é muito similar ao “datetime” diferenciando-se no fato de que a porção relacionada ao horário não é disponibilizada ao usuário.Tipo “time”Quando desejamos que o usuário forneça um horário no formato de 24 horas podemos optar por este tipo de entrada, atualmente apenas o navegador Opera suporta esse tipo de configuração.

Tipo “week”Podemos ainda configurar um entrada de dados onde o usuário poderá selecionar uma semana, na imagem abaixo podemos verificar que além da informação relativa a semana foi destacado com uma cor de fundo a semana selecionada:

9Tipo “month”Quando desejamos que o usuário selecione um mês podemos configurar o input como “month”, conforme podemos verificar na imagem abaixo a seleção é feita através do mesmo controle, isso é claro para o navegador Opera no qual estamos utilizando para testes:

Criando um seletor de   númeroPodemos contar com um seletor de números onde a restrição é que apenas números serão aceitos. Ainda com relação a este controle podemos configurar informações relativas a valores mínimo, máximo e o passo de incremento / decremento. Vamos considerar o pedaço de código abaixo, na imagem poderemos verificar o navegador restringindo o valor conforme a nossa configuração:

Criando um   sliderQuando precisamos solicitar um valor considerando uma faixa possível é muito comum disponibilizarmos um controle deslizante. Vejamos como isso se dará:

Criando um selector de corPodemos ainda criar um seletor de cor, onde o valor hexadecimal relacionado a cor será armazenado no controle. Isso antes apenas era resolvido utilizando JavaScript:

10Mostrando resultados com o elemento outputEste elemento pode mostrar resultados de um cálculo através de JavaScript. Por exemplo, quando desejamos apresentar o valor de um controle deslizante sem a necessidade de criar um script JavaScript direto, podemos operar da seguinte forma:

Criando uma lista com autocomplete com list e datalistO elemento datalist foi inserido junto com o HTML5, podemos combinar sua utilização com a propriedade list de um outro controle de dado. A seleção do usuário não é restringida as opções providenciadas na lista de autocomplete. O código para um datalist é muito similar ao elemento select, contudo, com o elemento select o usuário não pode digitar uma valor diferente dos disponibilizados.

Criando um elemento de progressãoPodemos ainda criar um controle de progressão para representar as mais variadas situações de uma aplicação. Comumente utilizamos para indicar o estado de uma atividade. Para tal feito este elemento dispões de dois atributos principais:

value: representa quanto de uma tarefa foi completada max: representa a quantidade necessária para completar a tarefa.

As principais interações entre um documento HTML e o usuário são construídas a partir de formulário, isso justifica um pouco mais de atenção sobre este assunto. Vamos nos aprofundar um pouco mais através dos links sugeridos a seguir:

http://diveintohtml5.com.br/forms.html http://www.oficinadanet.com.br/artigo/html/a_evolucao_dos_formularios_em_html_5 http://www.html5rocks.com/pt/tutorials/forms/html5forms/ http://imasters.com.br/artigo/17603/web-standards/formularios-em-html5 http://www.kadunew.com/blog/html5/validacao-de-formulario-com-html5 http://tableless.com.br/html5/?chapter=7 http://tableless.com.br/html5/?chapter=8 https://www.youtube.com/watch?v=OoojUpXzsEw https://www.youtube.com/watch?v=d0r7nM0zomM https://www.youtube.com/watch?v=U48iKzwrJfM

00:0000:00

 

 TECNOLOGIAS PARA APLICAÇÕES WEB

WEB AULA 2Unidade 1 – Programação em HTML 5Adicionando vídeos aos nosso documentos HTML5Imagino que você já tenha utilizado algum site de compartilhamento de vídeos como, por exemplo, o Youtube ou então o Vimeo. A cada dia aumente o número de pessoas que colocam vídeos online, seja de uma situação inusitada ou até mesmo um angelical vídeo de seu animal de estimação. O problema de tudo isso é que nunca houve um padrão para apresentação de vídeos, então surgiram vários plug-ins como Flash, Silverlight ou utilizando um elemento objeto para tocar um arquivo QuitckTime.Possivelmente você pode pensar que isso não seria um problema, mesmo porque, consumimos vídeos através destas tecnologias por anos. O problema que contemplamos é realmente a necessidade de ter uma terceira parte (plug-in) para publicarmos um vídeo. Agora em HTML5, possuímos um recurso padrão e nativo para apresentar vídeos em páginas web. Para isso utilizamos o elemento vídeo.Vamos incluir um vídeo através do elemento   vídeoComo mencionamos anteriormente para incorporar um vídeo em um documento HTML5 basta inserir o elemento vídeo como o exemplo abaixo:

Um problema muito comum é a possibilidade de que a máquina no qual o navegador esteja sendo executado não possua o codec (Codificador/Decodificador) adequado para reprodução do vídeo, uma alternativa para isso é disponibilizarmos o mesmo vídeo em vários formatos e então incorpora-los ao documento HTML. Veja o exemplo abaixo como isso é simples de ser feito, aumentando as possibilidades de acessibilidade ao vídeo:

Podemos verificar no exemplo acima que configuramos a altura e largura do vídeo, como boa prática isso deve ser feito utilizando folha de estilo (CSS). Podemos utilizar a propriedade controls para indicar que os controles básicos de vídeo devem ser apresentados junto com o vídeo. Já as possíveis fontes do vídeo devem ser registradas através de dois atributos src para indicar o locar do arquivo e o

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

1

Atributo “preload”

Quando trabalhamos com vídeos relativamente grandes, que podem causar pausas por conta da sua carga ou até mesmo vídeos que temos a certeza que o usuário efetivamente assistirá, então podemos configurar algumas possibilidade para que o navegador faça na carga do documento, vamos as possibilidades:

auto: informa ao navegador para iniciar o download do vídeo automaticamente quando a página carregar.

none: informa ao navegador que nada deve ser carregado, apenas após interação do usuário solicitando o início do vídeo

metada: solicita a carga de informações (metadata) sobre o vídeo, incluindo duração, primeiro frame, dimensões do vídeo e a lista de faixas.

Atributo “loop”Podemos solicitar que um vídeo seja reproduzido eternamente, para isso podemos utilizar o atributo loop.Atributo “autoplay”Ao utilizar o atributo autoplay podemos configurar que o vídeo seja iniciado automaticamente após a carga da página. Existem algumas considerações relativas aos conceitos de acessibilidade e usabilidade, com relação a iniciar um vídeo automaticamente, mas independente disso caso seja necessário não será necessário a inclusão de código JavaScript para tal feito, apenas utilizando este atributo alcançaremos o objetivo.Atributo “controls”Quando desejamos que sejam incluídos os controles básicos para interação com o vídeo, por exemplo, início / pausa, barra de progressão, duração / tempo de reprodução, e controles de volume. Caso não desejarmos estes controles, o usuário poderá ainda interagir com o controle através de um menu de contexto que é apresentado quando clicamos com o botão direito. Podemos utilizar nossos próprios controles através de customização em CSS.API JavaScriptA API (Application Program Interface) para manipulação do elemento vídeo através de JavaSript é realmente vasta. Podemos controlar vários aspectos e obter uma série de informações relacionadas ao vídeo e sua reprodução. Vamos avaliar um exemplo completo onde poderemos avaliar o poder desta API:

Podemos verificar o quanto é fácil a adição de vídeos em nossas páginas Web a partir da versão 5 do HTML. Por não haver a necessidade de plug-ins de terceiros podemos ter a garantir que caso o nosso cliente utilize algum navegador com uma frequência razoável de atualização poderemos contar com o suporte à reprodução de vídeos de forma nativa.Não depender de uma tecnologia é algo extremamente interessante para o desenvolvimento, vamos nos aprofundar ainda mais através dos links listados a seguir:

http://diveintohtml5.com.br/video.html http://www.html5rocks.com/pt/tutorials/video/basics/ http://www.tecmundo.com.br/tutorial/23238-como-converter-um-video-para-

html5.htm

http://www.videoaulasbrasil.com.br/html/audio-e-video-com-html5/ http://fabriciosanchez.com.br/2/html-5-incio-meio-e-fim-a-tag-video-parte-3/ https://www.youtube.com/watch?v=V9VbVrMX6SQ

2

00:00

00:00

Realmente poder contar com esse tipo de interação é algo muito legal, podemos tornar nossas aplicações Web ainda mais parecidas com as aplicações Desktop. Na lista a seguir estão disponíveis vários recursos online que poderemos utilizar para um aprofundamento sobre o assunto:

http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-drag-and-drop-parte-7/ http://www.html5rocks.com/pt/tutorials/dnd/basics/ http://tableless.com.br/html5/?chapter=10

Adicionando áudios aos nosso documentos HTML5Assim como o elemento vídeo, podemos agora contar com um novo elemento chamado audio para embutir arquivos de áudio em nossas páginas sem a necessidade de adicionar plug-ins de terceiros, como exemplo o Flash, Silverlight ou qualquer outra tecnologia. Podemos considerar a possibilidade de reproduzir nossos áudios em navegadores modernos de uma forma nativa e sem risco de falta de suporte, exceto pela falta de um codec apropriado.Como adicionar o elemento áudioPara essa tarefa podemos adotar um sintaxe simplificada como podemos verificar no elemento de vídeo, vamos ao exemplo:

Assim como podemos nos deparar com a situação de não haver um codec adequado para a apresentação de um vídeo, quando estamos falando de áudio também podemos passar por isso. Então a melhor forma de adicionarmos um áudio é utilizando elementos source, o que possibilitará a disponibilização de mais de um tipo de formato. Isso tende a minimizar os problemas com codec. Existe dois principais tipos de codec, o primeiro seria o Ogg Vorbis (.ogg) e o MP3 (.mp3). Podemos ainda considerar o tipo WAV (.wav), mas devemos nos concentrar basicamente entre o tipo Ogg Vorbis e MP3 isso porque usualmente arquivos WAV são grandes e por isso muito complicados de serem carregados na web, além disso nos deparamos com o fato de que arquivos WAV não suportam metadata, por exemplo os nomes do artista e do título.Processando áudio em vários navegadoresComo falamos anteriormente, podemos alterar a propriedade src para indicar o arquivo no qual desejamos incorporar, mas como uma melhor prática podemos

disponibilizar o mesmo áudio em formatos diferentes garantindo uma maior acessibilidade. Para isso adotamos uma sintaxe muito parecida com o elemento video, vamos analisar:

3

Atributo “src”Utilizando este atributo restringimos o elemento a apenas um arquivo / formato, vale lembrar dos problemas que podemos ter com codec, com isso devemos optar por utilizar os elementos sourceenvolvidos pelo elemento audio.Atributo “preload”Quando temos áudios relativamente grandes, que podem causar pausas por conta da carga ou até mesmo áudios que temos a certeza que o usuário efetivamente ouvirá, então podemos configurar algumas possibilidades para que o navegador faça na carga do documento, vamos as possibilidades:

auto: informa ao navegador para iniciar o download do áudio automaticamente quando a página carregar.

none: informa ao navegador que nada deverá ser carregado, apenas após interação do usuário solicitando o início do áudio.

metada: solicita a carga de informações (metadata) sobre o áudio, incluindo duração, dimensões do áudio e a lista de faixas.

Atributo “loop”Podemos solicitar que um vídeo seja reproduzido eternamente, para isso utilizamos a propriedade de nome bem sugestível loop.Atributo “autoplay”Ao utilizar o atributo autoplay podemos configurar que o áudio seja iniciado automaticamente após a carga da página. Existem algumas considerações relativas aos conceitos de acessibilidade e usabilidade, com relação a iniciar um áudio automaticamente, mas independente disso caso seja necessário, não haverá a necessidade da inclusão de código JavaScript para tal feito, apenas utilizando este atributo alcançaremos o objetivo.Atributo “controls”Quando desejamos que sejam incluídos os controles básicos para interação com o áudio, por exemplo, início / pausa, barra de progressão, duração / tempo de reprodução, e controles de volume. Caso não desejarmos esses controles, o usuário poderá interagir com o controle através de um menu de contexto que é apresentado quando clicamos com o botão direito. Podemos usar nossos próprios controles através de customização em CSS.API JavaScriptA API (Application Program Interface) para manipulação do elemento áudio através de JavaScript é realmente vasta. Podemos controlar vários aspectos e obter uma série de informações relacionadas ao áudio e sua execução. Vamos avaliar um exemplo completo onde poderemos avaliar o poder desta API:

Podemos perceber a semelhança existente entre a utilização dos elementos vídeo e áudio, tanto para declaração em um documento HTML5 quando para a manipulação através da API Javascript. Essa padronização só traz grandes vantagens para o desenvolvimento, visto que a curva de aprendizado tende a ser minimizada.Poder adicionar um recurso de áudio sem a preocupação de acessibilidade é algo realmente interessante, ainda sem a necessidade de aprender uma nova tecnologia. Vamos aprofundar sobre o assunto através dos links a seguir:

http://tableless.com.br/elemento-tag-audio/ http://msdn.microsoft.com/pt-br/library/hh475803.aspx http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-a-tag/ http://tableless.com.br/html5/?chapter=11 https://www.youtube.com/watch?v=mnrLKYgxSPQ

https://www.youtube.com/watch?v=odjZ5LGkDkQ

4

00:00

00:00

Criar uma serviço utilizando informações de Geolocalização pode ser uma grande sacada para as nossas aplicações, agora a tecnologia já nos dá suporte. Podemos ainda melhorar o entendimento sobre este assunto através dos links abaixo:

http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-geolocalizacao/ http://diveintohtml5.com.br/geolocation.html http://tableless.com.br/html5/?chapter=24

Trabalhando com CanvasAs especificações HTML5 adotaram o elemento canvas para o desenvolvimento de um elemento de desenho baseado em pixel. O coração desta implementação está distribuída em dois componentes: o elemento canvas e a manipulação em Javascript para efetuar operações sobre o canvas. Esse elemento é desenha como um quando branco, até que o manipulemos através da linguagem de script utilizando pincel, ferramentas, e outros para criar um resultado de um trabalho artístico.  Da mesma maneira podemos criar programas que possam usar formas e ferramentas, efeitos e até mesmo transformações. Depois é só desenhar tudo sobre uma canvas, resultando em uma nova configuração dos pixels. Vamos iniciar com o exemplo abaixo:

Vamos a algumas considerações, podemos adicionar um texto alt para que seja apresentado caso o elemento canvas não seja suportado, mas caso isso realmente ocorra, então qualquer conteúdo que tenha sido envolvido pelo elemento será apresentado. Isso é muito oportuno para apresentar informações indicando a necessidade de um navegador com suporte para a tecnologia. Para verificarmos o suporte de canvas pelo navegado o código abaixo é uma ótima possibilidade:

Ou então podemos como foi falado envolver ao elemento canvas um conteúdo explicando a limitação do navegador, vejamos o exemplo:

5

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

6

Desenhando retângulos e quadradosQuando desejamos desenhar um retângulo ou um quadrado podemos utilizar o método fillRect(pos=x, pox=y, width, height) de canvas. O exemplo abaixo cria um quadrado de 100 x 100 pixels e o coloca no canto superior-esquerdo (0, 0) de canvas. Vamos avaliar alguns métodos comuns de efeitos, que estão disponíveis para as formas:

strokeStyle: Define a cor ou estilo para as linhas em volta da forma fillStyle: Define a cor ou estilo usados dentro de uma forma shadowOffsetX / shadowOffsetY: Define a distância da sobra shadowBlur: Define o nível de efeito de desfocagem shadowColor: Define a cor da sobra createLinearGradiente: Cria um gradiente linear dentro da forma createRadialGradiente: cria um gradiente radial dentro da forma

Vamos desenhar um quadrado, certo para isso vamos utilizar o contexto 2D como o exemplo a seguir:

Neste próximo exemplo vamos demonstrar como podemos estilizar ainda mais nossas formas. Os métodos são autoexplicativos e o resultado poderá ser avaliado na sequência:

7

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

Desenhando linhas e caminhosPara que possamos desenhar linhas utilizando canvas, possuímos três métodos, vejamos:

moveTo(x, y): Move para a posição indicada por x e y, caso a linha seja desenhada ela partirá deste ponto

lineTo(x, y): Determina para canvas onde é o fim da linha a ser desenhada. stroke(): Após sua chamada canvas  irá desenhar a linha. Caso não tenha

sido alterado o estilo do traço então o padrão adotado será o sólido preto

Vamos avaliar como a combinação destes métodos resulta no efeito desejado, vejamos:

8

Quando desejamos criar um caminho devemos utilizar dois novos métodos: beginPath e closePath. Sendo que beginPath indica a canvas que um caminho será informado, já closePath finaliza este desenho. Vejamos o exemplo a seguir:

Desenhando polígonos com um caminhoPodemos utilizar uma técnica parecida para desenhar um polígono, nós vamos

desenhar um caminho através das funcionalidades da API Canvas para desenhar um polígono. Vamos, no exemplo, criar um polígono considerando um cálculo

matemático, mas poderíamos construir qualquer forma caso desejássemos,

vejamos:9

Desenhando arcos e círculosPodemos adicionar curvas a canvas, para isso utilizamos o método e valores conforme abaixo:

Caso desejarmos adicionar um círculo podemos novamente utilizar o método arc sendo que o parâmetro startAngle deverá ser zero e terminar com 2 * Math.PI, vejamos o exemplo:

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

Criar jogos diretamente através do navegador é algo possível, procure na internet e verá que existe vários já desenvolvidos. Essa tecnologia vale um pouco mais de dedicação, vamos nos aprofundar através dos links a seguir:

http://diveintohtml5.com.br/canvas.html http://fabriciosanchez.com.br/2/html-5-inicio-meio-e-fim-a-tag-canvas/ http://tableless.com.br/html5/?chapter=14 http://www.criarweb.com/manual-canvas-html5/ https://www.youtube.com/watch?v=hLvBv0tJShs https://www.youtube.com/watch?v=Zsh2YC3XLKU https://www.youtube.com/watch?v=-QL5Y4Zl840

00:0000:00

A possibilidade de adicionar gráficos vetoriais associado a dispositivos cada vez mais com altas resoluções pode ser algo bem interessante, para alguns tipos de aplicações isso é fundamental. Vamos analisar outros recursos e ganhar em conhecimento através dos links a seguir:

http://flatschart.com/html5/svg.html http://murilomedeiros.com/projetos/1/svg.php http://msdn.microsoft.com/pt-br/library/ie/hh771834(v=vs.85).aspx

10