FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design RELATÓRIO FINAL DE ESTÁGIO

Tamanho: px
Começar a partir da página:

Download "FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design RELATÓRIO FINAL DE ESTÁGIO"

Transcrição

1 FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design RELATÓRIO FINAL DE ESTÁGIO Desenvolvimento do Portal Paraíba Jovem Marcus Vinícius de Barros Pontes João Pessoa PB 2007

2 FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design Desenvolvimento do Portal Paraíba Jovem Marcus Vinícius de Barros Pontes Relatório do apresentado Estágio à Supervisionado disciplina Estágio Supervisionado do Curso Superior de Tecnologia em Web Design como requisito final para a obtenção do grau de Tecnólogo em Web Design. Orientador: Aérton Ferreira Diniz Supervisor: Ricardo Roberto de Lima Coordenador do Curso de Web Design: Cândido Egypto Empresa: Vsoft Tecnologia Período: 24/10/2006 a 24/11/2007 João Pessoa PB 2007

3 RESUMO O estágio resume-se a montar páginas a partir de layouts desenvolvidos por um designer, utilizando para isso o editor de imagens Adobe Photoshop, além das tecnologias XHTML, CSS e Adobe Flash. Além disso, há também a atualização de conteúdo de sites dos clientes. O objeto analisado deste relatório é a construção do Portal Paraíba Jovem (www.paraibajovem.com), partindo de um layout desenvolvido por um designer.

4 AGRADECIMENTOS Agradeço primeiramente à minha família, aos meus amigos e colegas de classe, colegas de trabalho, professores, à Instituição FATEC. Sem estas pessoas este relatório não seria possível.

5 LISTA DE FIGURAS Figura 1: O portal Paraíba Jovem atualmente...13 Figura 2: Estrutura de pastas utilizadas pelos projetos de site da Vsoft...19 Figura 3: Exemplo do código XHTML padrão à todas as páginas...22 Figura 4: Exemplo de um código de estrutura em três colunas, comum em portais...23 Figura 5: Estrutura principal de uma página secundária...24 Figura 6: este código exemplifica o padrão utilizado para construir blocos de conteúdo...24 Figura 7: código XHTML que ilustra o menu principal da página...25 Figura 8: bloco de código XHTML que estrutura o bloco "tour virtual"...26 Figura 9: bloco de código XHTML que estrutura uma enquete...26 Figura 10: explicação gráfica do conceito de camadas...28 Figura 11: código CSS aplicado à DIV identificada por "container", centralizando os elementos contidos...30 Figura 12: código HTML que permite a estruturação de três colunas em uma página web...31 Figura 13: folhas de estilo que formatam o código HTML apresentado acima em três colunas paralelas...32 Figura 14: arquivos CSS incluídos na página interna...32 Figura 15: Código HTML que compõe o rodapé...33 Figura 16: código HTML que estrutura o topo...34 Figura 17: Código CSS que transforma um elemento textual em uma imagem...35 Figura 18: dois comentários condicionais inseridos na página. Um para cada arquivo CSS diferente...39 Figura 19: o arquivo Flash utilizado como base, antes de ser personalizado...40 Figura 20: área de trabalho do Flash 8, com o arquivo carregado e pronto para edição...41 Figura 21: O arquivo Flash depois de modificado para se adaptar ao formato requisitado pelo projeto...41 Figura 22: camadas que compõem a maioria dos projetos. Outras camadas são possíveis...44 Figura 23: layout que ilustra a página inicial do projeto...45 Figura 24: layout que ilustra uma página de artigo do projeto...45 Figura 25: layout que ilustra uma página de conteúdo, listando vários artigos, dando um destaque a um deles...45 Figura 26: layout que ilustra a página de mural de recados...45 Figura 27: exemplos de imagens obtidas depois do corte Figura 28: as principais áreas de conteúdo que compõe a página...47 Figura 29: blocos de conteúdo secundários. Estes blocos sempre pertencerão a um dos blocos principais...48 Figura 30: explicação gráfica como funciona a técnica de image replacement...49

6 Figura 31: a comparação acima é entre o Opera 9.25 (à esquerda) e o Internet Explorer 6 (à direita)....49

7 GLOSSÁRIO Web Design é o design (ou projeto de um produto, que neste caso é um site) voltado para internet. Site como é comumente chamado uma série de páginas interligadas e relacionadas entre site, todas hospedadas no mesmo domínio. layout é o desenho da aparência de um site, geralmente criado em algum software de criação vetorial ou de edição de imagens. Interface o mesmo que layout. Software é o mesmo que aplicação. É um programa desenvolvido para realizar alguma função ou resolver algum problema. Hardware é a parte física dos sistemas computacionais, como por exemplo as placas de rede, discos rígidos, memória. XHTML sigla para extensible HyperText Markup Language. É uma linguagem de marcação utilizada para a criação de páginas e aplicações para internet, baseada no HTML e no XML. HTML sigla para HyperText Markup Language. É uma linguagem de marcação utilizada na criação de páginas e aplicações para a internet. XML sigla para extensible Markup Language. É uma linguagem de marcação muito flexível, usada freqüentemente para estruturar dados. SGML sigla para Standard Generalized Markup Language. É uma linguagem utilizada para descrever linguagens de marcação. O XML e o HTML são baseados nela. DTD sigla para Document Type Definition (Definição de Tipo de Documento). São especificações para diferentes tipos de documentos HTML ou XHTML.

8 Clientside são tecnologias que compõem uma página de internet, cujo bom funcionamento depende unicamente do lado cliente da aplicação (os navegadores dos usuários, por exemplo). Serverside são tecnologias que compõem uma página de internet, cujo bom funcionamento depende unicamente do lado servidor da aplicação (o hardware do servidor e os softwares que funcionam nele). CSS sigla para Cascating Style Sheet. É uma linguagem de alto nível para a formatação de documentos de marcação. JPEG sigla para Joint Picture Expert Group. É um formato digital de arquivo para imagens, com suporte a milhões de cores e compactação. GIF sigla para Graphics Interchange Format. É um formato digital de arquivo para imagens, que possui o recurso de transparência, animação e compactação a partir da redução do número de cores. PNG sigla para Portable Network Graphics. é um formato digital aberto para imagens para internet, com recurso de suporte a milhões de cores e transparência alfa, entre outras coisas. Macromedia/Adobe Flash aplicação comercial voltada para a criação de gráficos e aplicações que utilizem primariamente gráficos vetoriais..swf é a extensão de uma aplicação/gráfico compilado desenvolvido no Flash..fla é a extensão que define um arquivo-fonte de uma aplicação/gráfico em Flash. Marcação também são chamadas de tags. São delimitações de blocos de informações em um documento, feito através dos caracteres <...> e </...>. Atributo Aplicado à uma marcação, permite alterar a exibição, aplicar formatação, identificar ou passar parâmetros à um elemento HTML. Pixel é a menor unidade que compõe uma imagem digital. Seletor CSS é uma série de propriedades CSS que pode ser aplicada a um elemento HTML.

9 INDÍCE 1. INTRODUÇÃO Objetivo A Empresa Política de Qualidade Missão Visão Sobre o portal Paraíba Jovem Descrição Geral das Atividades Hardware e software utilizados Organização do Relatório EMBASAMENTO TEÓRICO XHTML CSS Adobe Flash ATIVIDADES DO PROJETO Organização de pastas do projeto Análise e corte do layout aprovado Estruturação do documento em XHTML Formatação do documento através de CSS Exemplificando o efeito de camadas O conceito de modelo de caixa ( box model ) CSS Centralizando os elementos principais do layout Posicionando as colunas do layout Colocando o rodapé no local certo A técnica de image replacement Posicionando elementos através da propriedade CSS position Ajuste de incompatibilidades entre navegadores Criação do destaque em Flash na página principal...38

10 4. CONSIDERAÇÕES FINAIS REFERÊNCIAS ANEXOS Camadas de um projeto Layout aprovado pelo cliente modelo de quatro páginas Exemplo de imagens obtidas durante o corte do layout Blocos principais de conteúdo que compõe a página Blocos secundários de conteúdo do projeto Gráfico ilustrativo da técnica de Image Replacement Comparações entre a renderização de CSS entre o Opera e o IE

11

12 10 1. INTRODUÇÃO A criação e implementação do Portal de entretenimento "Paraíba Jovem" (www.paraibajovem.com) foi realizado durante o período de dois meses, durante estágio na Vsoft Tecnologia. O site "Paraíba Jovem" é um portal de entretenimento voltado ao público jovem paraibano, além de rádio online especializada em forró. Este relatório trata das etapas design e de engenharia de interface do portal, desenvolvidos utilizando os Padrões Web fornecidos pelo W3C, além de padrões internos da própria empresa. Ambos têm o objetivo de padronizar e agilizar o desenvolvimento de sites e aplicações para a internet. 1.1 Objetivo O estágio realizado na Vsoft Tecnologia teve como objetivo aperfeiçoar o conhecimento técnico na área de Desenvolvimento de Interfaces para Internet, através do desenvolvimento de novos sites e também da manutenção dos mesmos. 1.2 A Empresa A Vsoft Tecnologia é uma empresa que atua no segmento de software, como fornecedora independente especializada em Gestão Empresarial, Segurança e Internet. Foi desenvolvida a fim de atender a crescente necessidade de mercado, uma vez que as empresas convencionais, com o advento da globalização, precisavam se modernizar para continuarem competitivas. Além da questão mencionada, a Vsoft foi estruturada visando suprir a visível carência por serviços condizentes com as reais necessidades e expectativas dos públicos que abrange. Tendo em vista o largo mercado que se descortinava, a Vsoft foi constituída em maio

13 11 de 2000, registrada através de uma sociedade por cotas de responsabilidade limitada, iniciando as atividades no mercado no mesmo ano. A Vsoft também é a única empresa da Paraíba que é Microsoft Certified Partner Política de Qualidade A Vsoft Tecnologia estabelece como prioridade a satisfação de seus clientes e o atendimento das especificações por eles exigidas, através da melhoria contínua de seus processos e da participação e empenho de todos os seus colaboradores Missão Desenvolver soluções inovadoras em software, capazes de otimizar os processos, reduzir custos e aumentar o faturamento de seus clientes, sempre dentro de rigorosos padrões internacionais Visão Ser a maior e mais lucrativa fornecedora independente de soluções em software. 1.3 Sobre o portal Paraíba Jovem Fundada em agosto de 2005 por Rodrigo Senador em João Pessoa na Paraíba, com a finalidade de expansão cultural dos ritmos nordestinos, a Rádio Online ganhou o mundo em pouquíssimo tempo com ouvintes espalhados em todo planeta. Em janeiro de 2006 entram no projeto os jovens Renato Miranda e Rodolfo Pablo (Bozo). A parceria formada pelos três jovens abriu ainda mais as portas para o Paraíba Jovem, onde investiu-se na aquisição dos mais modernos equipamentos de transmissão de áudio via Internet, com a busca incansável de parceiros, a Web Rádio logo se transformou em um portal composto por: TV Web, Web Rádio, central de noticias, entrevistas, projetos sociais, cobertura de eventos e outros serviços.

14 12 Dentro do seu público-alvo (Jovens de todas as classes e ambos os sexos, com idade entre 10 e 28 anos), a Radio Online Paraíba Jovem mantém uma média de audiência de mais de ouvintes diretos no site/mês e cerca de conectados em sites parceiros. A cobertura da Web Rádio é mundial, sendo necessário apenas um computador conectado à Internet, interligando o usuário ao mundo globalizado e integrando o Brasil aos demais países do mundo, numa arrojada iniciativa da difusão da nossa cultura aos diversos recantos do mundo. Figura 1: O portal Paraíba Jovem atualmente.

15 Descrição Geral das Atividades As atividades desenvolvidas durante o estágio foram as seguintes: Projeto de Interface (corte e montagem do layout utilizando CSS e XHTML) Criação do projeto no Visual Studio.Net Detalhes da Interface (Banners em Flash, destaques) Manutenção em sites já desenvolvidos Ajustes finais 1.5 Hardware e software utilizados Durante o estágio foi utilizado um computador desktop com as seguintes configurações de hardware: Athon XP 2.4Ghz Memória RAM de 1GB Disco Rígido com capacidade para 40GB Placa de Vídeo Integrada de 32MB Monitor de 17 Samsung Syncmaster Também foram utilizados os seguintes softwares: Editor de Textos Notepad ++ Editor Vetorial Inkscape Editor de fotos Adobe Photoshop CS

16 14 Adobe Flash 8 Internet Explorer versões 6 e 7 Opera 9.23 Firefox Organização do Relatório Este relatório é dividido em quatro partes principais: a primeira parte consiste em uma breve introdução, a segunda parte consiste em descrição das tecnologias e ferramentas utilizadas, a terceira parte descreve as atividades desenvolvidas durante o estágio, e a quarta, as considerações finais.

17 15 2. EMBASAMENTO TEÓRICO Esta parte do relatório visa descrever as tecnologias e softwares utilizados no desenvolvimento do Portal Paraíba Jovem, Contanto com um breve histórico e apresentação das mesmas, visando um melhor entendimento. Para cumprir o projeto foram utilizados: para compor a camada de estrutura, XHTML; para a camada de apresentação, CSS e também Adobe Flash; para a camada lógica, C#; e para armazenamento de dados, Microsoft SQL Server. XHTML, CSS e Flash são tecnologias/linguagens clientside (funcionam no lado cliente apenas), enquanto que C# e o Microsoft SQL Server são tecnologias serverside (que para funcionar necessitam de um servidor que irá tratar as requisições de página). Este relatório só irá abranger as tecnologias clientside envolvidas no projeto. 2.1 XHTML XHTML significa extensible HyperText Markup Language e é uma especificação de documento para internet publicada pela W3C (World Wide Web Consortium) em 26 de Janeiro de 2006, e revisada em 1 de Agosto de 2002 [4]. Esta especificação é uma reformulação do HTML 4 como uma aplicação XML 1.0 (extended Markup Language). Seu objetivo é dar continuidade à evolução dos documentos de hipertexto para internet, substituindo completa e gradativamente o HTML 4 [4]. O HTML 4 é uma aplicação SGML (Standard Generalized Markup Language), publicada em conformidade com o Padrão Internacional ISO 8859, e foi por muito tempo o padrão definido para a publicação de documentos para internet [4]. SGML é uma linguagem para descrever linguagens de marcação, utilizada particularmente em documentos eletrônicos. Sua publicação foi feita por volta de 1980 e temse mantido estável desde então [4].

18 16 O XHTML possui uma série de vantagens em relação ao seu antecessor, como por exemplo a possibilidade de ser melhor manipulado por aplicações, e melhor interoperabilidade entre vários dispositivos de renderização. Contudo, ele deve obedecer uma série de regras que o validam como uma aplicação XML, como por exemplo: separar a camada de apresentação da camada de estrutura, escrever as marcações e atributos desta todas em minúsculo, entre outras. É importante ressaltar que tanto o HTML quanto o XHTML não são linguagens de programação, e sim de marcação. Documentos XHTML podem ser escritos em qualquer editor de textos ASCII. O XHTML conta com três DTDs (Document Type Definition) publicados: Transitional, mais flexível à erros; Frameset, utilizado em documentos que contém frames (quadros); e Strict, que não aceita erros em sua sintaxe. Atualmente o XHTML está na versão 1.1 (versão 1, revisão 1), considerada Strict por definição. 2.2 CSS CSS significa Cascating Style Sheets e é uma recomendação definida pela W3C. Sua primeira versão foi publicada em 17 de Dezembro de 1996, sendo revisada pela primeira vez em 11 Janeiro de 1999 e pela segunda vez em 19 em Julho de 2007 [5;6]. Seu objetivo é permitir aos autores e leitores de documentos aplicar estilos (de fonte, cor, espaçamento, posicionamento e visibilidade) à documentos estruturados, como HTML, XHTML e XML. Ela foi desenvolvida para ser uma linguagem de formatação de alto nível (facilmente compreendida e escrita por seres humanos) e que pode ser escrita em qualquer editor de textos ASCII [5;6]. Um dos recursos fundamentais do CSS é o efeito cascata. Este recurso permite que o leitor possa anexar um arquivo de estilos pessoal e este arquivo irá sobrescrever a folha de estilo definida pelo autor. Isso permite, por exemplo, que um leitor com problemas visuais possa ajustar corretamente o nível de contraste e tamanho de fonte. O efeito cascata também permite definir estilos para vários dispositivos, como Tvs, celulares, impressoras e

19 17 dispositivos braile. O CSS pode ser inserido na página de três formas diferentes: pode ser escrita diretamente em uma marcação HTML, utilizando para isso o atributo style; pode ser incorporada ao cabeçalho da página (a região delimitada pela marcação <head></head>) através da marcação <style></style>; ou pode ser inserida na página a partir de um arquivo externo. Esta é a forma mais recomendada. Atualmente o CSS está na versão 2.1 (versão 2, especificação 1). 2.3 Adobe Flash O Adobe Flash é uma aplicação comercial e proprietária voltada inicialmente para a criação de gráficos vetoriais e animações vetoriais. Contudo, hoje é uma plataforma de autoração multimídia completa, tanto para conteúdo online quanto offline, trabalhando com vídeo, áudio e imagens bitmaps. Sua história se inicia em 1995, com a empresa Futurewave e o software Future Flash Animator, o antecessor direto do Flash. A empresa mais tarde foi adquirida pela Macromedia, e o software Future Flash Animator se tornou o Flash 1.0 [7]. Em Agosto de 2005, a Adobe Systems adquiriu a Macromedia em uma transação de 3,4 bilhões de dólares. O Flash está atualmente na versão CS3, completamente integrado à suíte de aplicativos da Adobe [7]. Ao se criar uma animação de Flash, gera-se dois arquivos; um contendo todos os arquivos-fonte utilizados na criação da arte, e um arquivo compilado, de menor tamanho, com a animação gerada. Este arquivo compilado é o que será incluído na página. O Flash conta com uma linguagem de script com recursos bastante avançados, baseada na linguagem de programação C, chamada ActionScript. Atualmente o ActionScript está na versão 3.0. Por ser uma aplicação comercial e não uma especificação da W3C, é necessário um

20 18 plugin (uma pequena aplicação integrada ao navegador) para o funcionamento da animação, distribuído gratuitamente pela Adobe.

21 19 3. ATIVIDADES DO PROJETO As atividades desenvolvidas neste projeto foram: organização das pastas do projeto, análise e corte do layout desenvolvido e aprovado pelo cliente, estruturação do documento em XHTML, formatação do documento através de CSS, ajuste de incompatibilidades entre navegadores e criação do destaque em Flash da página inicial. Para um entendimento geral do projeto, as atividades serão detalhadas a seguir. 3.1 Organização de pastas do projeto Todos os projetos de site desenvolvidos pela Vsoft Tecnologia seguem rigidamente uma estrutura de pastas, que pode ser visto na figura abaixo: Figura 2: Estrutura de pastas utilizadas pelos projetos de site da Vsoft. Cada pasta contém uma parte dos arquivos que compõe o projeto. Suas funções são descritas abaixo: / (pasta raiz): esta página contém apenas um único arquivo, o Default.aspx. A sua função é unicamente redirecionar o usuário para o arquivo /Start/Default.aspx. /Content: Contém todas as páginas estáticas (páginas que contém informações

22 20 que não são atualizados dinamicamente) do site. Um exemplo de página contida nesta pasta é o Sobre.aspx, que contém informações institucionais do Paraíba Jovem. /Form: Contém todos os formulários utilizados pelos usuários finais para enviar dados para o servidor. Um exemplo de arquivo contido por esta pasta é o Contato.aspx, que é um formulário de contato padrão. /_Imgs: Contém todas as imagens que fazem parte da composição do layout. /_Resources/: Contém os demais arquivos que fazem parte do projeto, mas não estão relacionados ao conteúdo diretamente. São armazenados nesta pasta os arquivos CSS, os arquivos de javascript e também os arquivos de Flash. Css/:Contém todos os arquivos CSS que fazem parte do projeto. Flash/: Contém todos os arquivos Flash que fazem parte do projeto. /Start: Contém unicamente o arquivo Default.aspx, que representa a página inicial do site. Algumas pastas são adicionadas posteriormente ao projeto, e contém scripts e páginas de administração. Estas páginas não estão sob análise deste relatório. 3.2 Análise e corte do layout aprovado A análise preliminar do layout, desenvolvido pelo designer, se faz necessária para que o projetista da interface possa saber como irá proceder no corte do layout e também na hora de estruturar a página, utilizando XHTML. O corte nada mais é que a divisão do layout em várias imagens menores, realizado através de algum programa de edição de imagens (neste caso, o Adobe Photoshop CS), que irão fazer parte da composição do layout. Estas imagens serão inseridas na página através de CSS. O corte sempre será feito pensando na melhor economia de recursos do servidor, tanto

23 21 em relação ao consumo de banda quanto ao consumo de espaço em disco. As imagens originadas do corte serão sempre nos formatos JPEG, GIF, ou mais raramente, PNG. A escolha do formato varia de acordo com o número de cores da imagem e o que se quer fazer com ela. Imagens compostas de gradientes ou de áreas repetitivas são cortadas de forma mais estreita possível. Isso é feito porque é possível repetir a imagem infinitamente, tanto horizontalmente quanto verticalmente, através de CSS, permitindo assim preencher grandes áreas com imagens, sem a necessidade de se ter grandes imagens. Depois do corte, faz-se uma análise visual para identificar os blocos principais de conteúdo que compõe a página do projeto. A identificação destes blocos é essencial para criar uma estrutura XHTML concisa. Os principais blocos de conteúdo da página inicial do projeto são: tocador de áudio, topo da página, coluna da esquerda, coluna da direita, coluna central, rodapé. Também são definidos os blocos secundários de conteúdo. Estes blocos estarão sempre contidos dentro dos blocos principais. Todas as demais páginas seguem o mesmo padrão mostrado acima, salvo algumas modificações (por exemplo, observe que nos layouts das páginas internas só existem duas colunas, a coluna da esquerda e a coluna principal). 3.3 Estruturação do documento em XHTML A estruturação do documento pode ser feito em qualquer editor de texto ASCII. O software utilizado para esta etapa foi o Notepad++, um editor de textos leve, mas com vários recursos de edição de código. O DTD escolhido para o projeto foi o Transitional, pois é mais flexível em relação à erros. O conteúdo do site é gerenciado por terceiros, utilizando o sistema de gerenciamento criado especificamente para isso. Por isso não é possível manter um código-fonte completamente seguro de erros e outras falhas.

24 22 Todo documento XHTML é composto por por algumas marcações padrão, como por exemplo, a declaração de tipo de documento (DTD), a marcação HTML, o cabeçalho (sendo que este contém o título da página e também as metatags e marcações de estilo) e o corpo, onde irá todo o conteúdo que será visualizado na página. Abaixo, segue um trecho de código para exemplificar a explicação acima: Figura 3: Exemplo do código XHTML padrão à todas as páginas Note que existem vários arquivos CSS sendo incluídos na página. O objetivo disso é facilitar a pesquisa e alteração de código durante a manutenção. Em vez de existir um único arquivo com centenas de linhas, tem-se vários arquivos menores, divididos em áreas ou funcionalidades. As páginas internas do projeto ainda contam com mais um arquivo CSS, pag-internas.css, responsável por realizar alterações visuais necessárias. Feito isso, escreve-se a estrutura principal do layout. Esta estrutura é delimitada com marcações DIV (cujo nome vem de divisor ). Cada área é identificada unicamente através do atributo HTML id. Estas demarcações de área são uma espécie de padrão, e são encontradas em todos os projetos desenvolvidos. Evita-se variar os ids para não causar enganos.

25 23 Abaixo, segue o código da estrutura principal da página principal do projeto: Figura 4: Exemplo de um código de estrutura em três colunas, comum em portais. A estrutura principal das páginas internas do projeto é ligeiramente diferente, pois, ao invés de existir três colunas principais, há apenas duas. Além do mais, as páginas possuem funções diferentes: enquanto que a página principal é essencialmente uma página de exibição de destaques ou de conteúdos mais recentes, as páginas internas exibem o conteúdo propriamente dito. Abaixo você pode ver a estrutura de uma página interna convencional:

26 24 Figura 5: Estrutura principal de uma página secundária. Na empresa Vsoft, seguimos algumas regras (além dos padrões estabelecidos pela W3C) para facilitar a edição posterior, tanto por aqueles que desenvolveram a página, quanto outras pessoas. Por exemplo, observe no exemplo de código acima que cada final de marcação está identificado através de um comentário. Estes comentários servem como guia e evitam confusão quando vários elementos DIV estão aninhados. Outra padronização que sempre tentamos seguir rigorosamente em nossas páginas é a forma de escrever o código dos blocos de conteúdo secundário. Ela foi desenvolvida com o objeto de aumentar a compatibilidade do Modelo de Caixa CSS. Este modelo será detalhado mais à frente, em um capítulo à parte. Salvo algumas excessões, todos os blocos seguem o seguinte padrão:

27 25 Figura 6: este código exemplifica o padrão utilizado para construir blocos de conteúdo. Cada atributo do elemento DIV tem uma razão de ser: o atributo id permite identificar unicamente aquele bloco na página. Isso é útil para permitir a manipulação daquele elemento usando javascript DOM (Document Object Model) ou aplicar um estilo em particular que foge do padrão estabelecido para aquela família de bloco. O atributo class possui dois valores, o primeiro ( bloco ) o define universalmente como um bloco, e permite aplicar folhas de estilos que estão presentes em todos os blocos do projeto. O segundo cria um subgrupo ou família de blocos. Por exemplo, supondo que existem várias enquetes em uma mesma página. todos estes blocos possuem a formatação definida para os blocos da página, mas também possuem formatação específica que os diferem dos demais blocos. Então neste caso seria aplicado o valor bloco-enquete a todos os blocos de enquete, permitindo assim aplicar este estilo diferenciado. Abaixo pode-se ver algumas aplicações do exemplo acima neste projeto: O menu principal do projeto:

28 26 Figura 7: código XHTML que ilustra o menu principal da página. O bloco tour virtual : Figura 8: bloco de código XHTML que estrutura o bloco "tour virtual". O bloco enquete :

29 27 Figura 9: bloco de código XHTML que estrutura uma enquete. 3.4 Formatação do documento através de CSS Este capítulo detalha a camada de apresentação do projeto, desenvolvida utilizando CSS, chamada também de folhas de estilos, a partir daqui. Ele irá se concentrar nos conceitos e técnicas utilizadas para compor as várias partes do layout, pois detalhar centenas de linhas de folhas de estilo seria maçante e repetitivo demais. De acordo o padrão de desenvolvimento seguido pela empresa, as folhas de estilo devem ser divididas para facilitar a pesquisa e manutenção posterior. Na época do desenvolvimento do projeto do Portal Paraíba Jovem, as folhas de estilo foram divididas de acordo com a área e também pela sua função. A divisão das folhas de estilo pela sua função permite que aquele bloco de código CSS e XHTML seja reaproveitado em outro projeto, com alterações mínimas, poupando tempo. Por exemplo, o arquivo colesq.css é responsável especificamente em aplicar formatação à coluna da esquerda, e todos os seus elementos filhos. Em uma página interna que tenha uma galeria de imagens, também estará incluso o arquivo GaleriaDeImagens.css, responsável por aplicar formatação àquele bloco de código XHTML. As folhas de estilo podem ser aplicadas a um elemento HTML de quatro formas, basicamente. São elas: Aplica-se o estilo diretamente na marcação, através do atributo HTML style.

30 28 Esta forma quase nunca é utilizada, pois retira completamente a flexibilidade das folhas de estilo; Aplica-se o estilo utilizando o valor do atributo HTML id. Esta forma é pouco recomendável, pois o valor do atributo id deve ser único por página, impossibilitando que aquela formatação seja reaproveitada na mesma página, a menos que você a duplique. A exceção ocorre quando se quer aplicar uma formatação única a um determinado elemento (em geral, posicionamento) ou quando tem-se certeza que só existirá um elemento que irá receber aquela formatação por página; Aplica-se o estilo através de uma classe, atribuída através do valor(es) do atributo HTML class. Esta é a forma mais indicada na maioria dos casos. Você pode ter mais de uma classe aplicada ao mesmo elemento; Também pode se definir uma formatação universal para todas as instâncias de determinado elemento (por exemplo, aplicar tamanho 12px em todos os parágrafos o elemento HTML <p></p> - de uma página do projeto). É muito utilizado para definir o padrão de formatação que será seguido Exemplificando o efeito de camadas Um dos conceitos que permitem a formatação avançada através de folhas de estilo é o efeito de camadas. Cada elemento HTML pode (e deve) ser tratado como uma camada (apesar de que, este efeito é mais visível em elementos de bloco). Vários elementos aninhados podem ser tratados como várias camadas sobrepondo uns aos outros. Elementos posicionados através de CSS podem ter seu nível alterado através da propriedade z-index: valores baixos ficam abaixo dos valores altos. A imagem abaixo ilustra graficamente o que foi explicado:

31 29 Figura 10: explicação gráfica do conceito de camadas O conceito de modelo de caixa ( box model ) CSS O bom entendimento do modelo de caixa CSS é essencial para a construção de layouts baseados em folhas de estilo. Este conceito se baseia no princípio de que qualquer elemento HTML pode ser uma caixa. Por exemplo, imagine um elemento HTML qualquer é formatado para possuir dimensões fixas de 150x150 pixels. Isso é feito sem problemas usando as propriedades width e height. Posteriormente esta caixa é incrementada, e é adicionado uma margem interna de 10 pixels (através do atributo padding) e uma borda tracejada superior e inferior (através dos atributos border-top e border-bottom, respectivamente), de 3 pixels de largura. Também é adicionada uma margem externa inferior (através do atributo margin-bottom) de 20 pixels ao

32 30 elemento. Fazer isso em folhas de estilos é trivial, mas ao visualizar o resultado em um navegador, percebe-se que as dimensões originais de 150x150 pixels foram alteradas. Medindo o elemento utilizando uma regra de pixels observa-se que as dimensões finais da caixa são de 170x196 pixels. Isto ocorreu porque os valores das propriedades margin, padding e border (e suas variações específicas para cada lado da caixa) adicionam valores à largura e altura finais da caixa. Para se obter as dimensões ideais da caixa é necessário subtrair os valores destas propriedades da largura e altura que se almeja aplicar. No caso do exemplo acima, o valor da propriedade width (largura) seria 130 pixels, e o valor da propriedade height (altura) seria de 104 pixels. Pode-se inclusive fazer uso de uma pequena equação do primeiro grau para se obter as dimensões ideais: LARGURA IDEAL = VD ((BD +BE)+(PD+PE)+(MD+ME)) Sendo que: VD é igual ao valor desejado da largura; BD e BE são respectivamente a largura da borda esquerda e direita; PD e PE são respectivamente o valor da margem interna esquerda e direita; e MD e ME são respectivamente os valores da margem externa direita e esquerda. A fórmula para a altura ideal é a mesma, apenas alterando os valores para as margens/bordas/margens externas inferiores e superiores. Praticamente todas as versões do navegador web Internet Explorer possuem defeitos na renderização de caixas CSS. A versão 6 deste navegador é o navegador mais utilizado do planeta. Versões mais antigas, inferiores à 6, possuem defeitos no box model muito mais graves, mas felizmente estas versões estão em quase completo desuso.

33 Centralizando os elementos principais do layout Observando o layout, percebe-se que, com exceção do tocador de músicas no topo, os demais elementos possuem uma dimensão fixa, e que os lados direito e esquerdos possuem margens eqüidistantes do canto do navegador. Se acessar o site com uma resolução de tela de 800x600 percebe-se ainda que a página vai ocupar quase todo o espaço disponível, praticamente ocultando o fundo. Para se realizar este efeito, é necessário que aja um elemento HTML (que é geralmente uma DIV) englobando todos os elementos que se quer centralizar. Isso geralmente é feito utilizando uma DIV chamada de container (e convenientemente identificada como container através do atributo id) que é filha direta do elemento body e engloba todos os demais elementos do site (salvo algumas raras excessões, como é o caso deste projeto; aqui o bloco que delimita o tocador de músicas escapou do abraço da DIV container ). Em seguida, aplica-se a seguinte folha de estilo: Figura 11: código CSS aplicado à DIV identificada por "container", centralizando os elementos contidos. Explicando o código acima: o primeiro atributo, width, refere-se à largura. Em geral usa-se 768 pixels de largura ou menos, para evitar que os visitantes com resolução de tela de 800x600 não vejam barra de rolagem horizontal. O segundo atributo, position, torna aquele elemento posicionado de forma relativa. Mais à frente o posicionamento através de CSS será detalhado em um capítulo à parte. O atributo left com valor igual a 50% faz com que o eixo x (o eixo horizontal) tenha início exatamente no centro do espaço disponível na área do navegador. O layout, contudo, não está centralizado. Para que isso ocorra, é necessário alinhar o centro do elemento com o centro do navegador. Para achar o centro do elemento e alinhá-lo, basta dividir a largura (que no caso é 764px) por 2, e aplicar o valor obtido com sinal negativo à margem esquerda

34 32 (controlada pelo atributo margin-left). Feito isso, o layout estará centralizado Posicionando as colunas do layout A página inicial do layout é divididas em três colunas, sendo duas auxiliares (exibem a navegação e também banners) enquanto que a coluna central exibe o conteúdo mais relevante. As páginas internas possuem apenas duas colunas, sendo uma auxiliar, e uma coluna mais larga, exibindo o conteúdo relevante. Através das folhas de estilo é possível ter o total controle de qualquer elemento HTML, seja em suas cores, dimensões, posicionamento, e comportamento. Neste caso, as folhas de estilo serão utilizadas para posicionar elementos HTML DIV da página em colunas paralelas, quando normalmente deveriam seguir o fluxo normal do documento. Na página principal temos o seguinte código estrutural: Figura 12: código HTML que permite a estruturação de três colunas em uma página web. A formatação destes elementos em colunas é muito simples, e é feita através dos seletores de identificação (o valor da propriedade HTML id ). O primeiro passo é definir a largura das colunas laterais (através da propriedade width). No caso deste layout, ambas as colunas 180 pixels de largura. Em seguida, define-se a largura da coluna principal central. Ao contrário das demais colunas, sua largura é definida aplicando-se uma margem esquerda e direita, com valores iguais à largura das colunas esquerda e direita, respectivamente. Usualmente, utiliza-se valores de margem esquerda e direita um pouco maiores que as larguras das colunas, por razões estéticas. No caso deste projeto, o valor das margens é de 184 pixels.

35 33 Para finalizar, determina-se que as colunas esquerda e direita devam flutuar à esquerda e direita respectivamente da coluna central. Isso é feito utilizando a propriedade CSS float, com valor igual a left (no caso da coluna da esquerda) ou right (para a coluna da direita). A propriedade float define um determinado elemento HTML como sendo um elemento flutuante que deve-se posicionar à esquerda ou a direita dos demais elementos da página, deslocando elementos inline para a esquerda ou direita e sobrepondo elementos de bloco. Por isso foi aplicada margens à coluna central, para evitar que esta fosse sobreposta pelas duas colunas secundárias. Figura 13: folhas de estilo que formatam o código HTML apresentado acima em três colunas paralelas. Em relação às páginas internas com apenas duas colunas, uma coluna esquerda e uma coluna principal com o conteúdo relevante, é necessário apenas realizar um pequeno ajuste, utilizando para isso o arquivo CSS pag-internas.css. Este arquivo é incluído apenas nas páginas internas, depois da inclusão dos arquivos CSS que formatam as colunas.

36 34 Figura 14: arquivos CSS incluídos na página interna. Graças ao efeito cascata, pode-se alterar o valor da margem direita da coluna conteudo, aplicando a propriedade CSS margin-right com valor igual a zero. Isso faz com que a margem direita que daria espaço para a coluna desapareça, transformando o layout de três para duas colunas Colocando o rodapé no local certo No capítulo anterior relatou-se que um elemento HTML definido através de CSS como flutuante (a propriedade float com valores iguais a left ou right) irá deslocar elementos inline (normalmente textos e marcações HTML de formatação de texto) e sobrepor elementos de bloco ou com comportamento de bloco (como parágrafos, títulos e elementos DIV). Definindo as colunas laterais como elementos flutuantes, pode-se gerar um problema com o rodapé do site, caso estas colunas forem maiores em termos de altura que a coluna principal (e freqüentemente são).

37 35 Figura 15: Código HTML que compõe o rodapé. Para evitar que as colunas interfiram no rodapé, aplica-se ao mesmo a propriedade CSS clear com valor igual a both. Esta propriedade impede que um elemento flutuante se posicione sobre/ao lado de um outro elemento. Aplicando clear: both impede-se que elementos flutuantes se posicionem à direita ou a esquerda do rodapé. Outros valores possíveis são left (impede que elementos flutuantes se posicionem à esquerda do elemento), right (impede que elementos flutuantes se posicionem à direita do elemento) e none (nenhum impedimento; é valor padrão) A técnica de image replacement As recomendações W3C para folhas de estilo estabelecem que qualquer imagem que tenha caráter meramente decorativo devem ser inseridas através de CSS. Isso inclui literalmente todas as imagens que compõe o layout, restando as imagens informativas (que transmitem ou complementam alguma informação na página) para serem inseridas através da marcação HTML <img />. A técnica de image replacement ou recolocação de imagem via folhas de estilo permite exibir uma imagem utilizando CSS, utilizando para isso uma marcação HTML e com a vantagem de que o elemento não perde seu valor textual. Adicionar e manter um valor textual é importante, mesmo se tratando de imagens, para que a informação contida na página continue relevante para os usuários que não podem acessar aquela informação através de meios visuais (por exemplo, usuários com problemas de

38 36 visão utilizam navegadores que lêem as informações textuais e ignoram completamente o layout). Além disso, elementos textuais são mais relevantes para mecanismos de busca (outro exemplo de um usuário cego, só que este não é humano), e estes são responsáveis por uma grande quantidade de tráfego. Existem muitas maneiras diferentes de executar este truque. A descrita aqui é a adotada pela equipe de desenvolvimento web como sendo a mais simples e funcional. Um elemento de página em que a técnica está sempre presente, independente do projeto, é o logotipo do site ou empresa que possui o site. Por questões semânticas, toda página de um projeto possui um título HTML <h1></h1> presente no início da página, e por questões de acessibilidade, há um link (definido pela marcação <a></a>) neste título apontando para a página principal do projeto. Figura 16: código HTML que estrutura o topo. Através da técnica de image replacement, a marcação <a></a> será substituída pela imagem logo.jpg, de dimensões 206x134 pixels. Tal feito é realizado pelo bloco de código de folhas de estilo a seguir: Figura 17: Código CSS que transforma um elemento textual em uma imagem. A melhor forma de compreender o código acima é compreender o conceito por trás dele. Primeiro, elimina-se as margens padrão do título <h1></h1> para evitar qualquer tipo

39 37 de interferência. Depois, é necessário mudar a forma de como a marcação <a></a> se comporta. Por padrão, este elemento é do tipo inline, ou seja é aplicado a um texto e segue o fluxo normal do mesmo. Ao contrário dos elementos de bloco, que quebram o fluxo normal do texto, isolando-o. Um exemplo clássico são as marcações de parágrafo (<p></p>) e as próprias marcações <DIV></DIV>, que criam blocos isolados de informação. Marcações inline não permite aplicar propriedades CSS de controle de dimensões sobre elas, mas marcações do tipo block, sim. A alteração de tipo de comportamento é feita aplicando o valor block ao atributo CSS display. Exibir uma imagem em um elemento que contém texto é muito simples, basta fazer uso da propriedade de folha de estilo background-image (ou sua forma abreviada, background) e aplicar a imagem como um fundo. Quando se fizer uso desta técnica, é essencial que a imagem de fundo não se repita, e isso é feito aplicando o valor no-repeat à propriedade background ou background-position. As dimensões do elemento que contém a imagem devem ser iguais à da imagem que se quer inserir, que neste caso, possui 206x134 pixels de dimensões. O problema é se livrar do texto contido no elemento, que ficará sobrepondo a imagem inserida. Quando um elemento qualquer possui dimensões fixas e por acaso o texto ou conteúdo contido nele ultrapassa suas dimensões, este conteúdo naturalmente vaza para fora do elemento. É possível controlar a forma como os elementos HTML tratam este conteúdo estravazado através da propriedade de folhas de estilo overflow. É possível por exemplo, adicionar uma barra de rolagem caso o conteúdo estravaze as dimensões do seu contêiner (overflow com valor igual à auto), ou adicionar uma barra de rolagem sempre, independente da quantidade de conteúdo ou não (overflow com valor igual à scroll). Mas o valor de overflow que importa para a técnica é hidden, que faz com que elementos estravazados sejam parcialmente ou não sejam exibidos. Compreendido isso, é necessário descobrir uma forma de empurrar o elemento textual para fora das dimensões do elemento sem que suas dimensões finais se alterem. Isso

40 38 será feito aplicando os conceitos de modelo de caixa CSS. As dimensões finais desejadas para o elemento formatado são iguais às dimensões da imagem, ou seja, 206x134 pixels. A largura é irrelevante, e não será alterada (o valor de width será 206px). Mas a altura, será igual a zero (ou seja, height: 0). Em seguida aplica-se uma borda interna superior de valor igual à altura da imagem (padding-top: 134px). De acordo com o modelo de caixa, a altura final é a soma da altura mais os valores das propriedades margin, padding e border-width. No exemplo em questão, é 134+0=134px, exatamente o valor da altura da imagem. Ao mesmo tempo, a margem interna superior empurra a informação textual contida no elemento para fora de sua altura (que é zero). O resultado final é uma imagem inserida no layout via folhas de estilo, aplicado à uma marcação <a></a>, sem que esta perdesse sua funcionalidade de hyperlink Posicionando elementos através da propriedade CSS position O posicionamento de elementos através de folhas de estilo é um tema complexo que causa muita confusão em desenvolvedores pouco experientes, além de que sua má implementação é responsável por causar redundância e complexidade desnecessária do CSS. Entenda-se como um elemento posicionado qualquer marcação HTML com a propriedade position declarada com qualquer valor diferente de static. O posicionamento de um elemento é formatado através da propriedade position e um dos seus quatro valores. Mas antes de explanar estes valores, é importante ter em mente as regras pelas quais funcionam o posicionamento: 1. Qualquer elemento HTML possui por padrão o valor static para a propriedade position, mesmo que esta propriedade não esteja declarada. 2. Um elemento é posicionado em qualquer local da área disponível no navegador em relação às margens da área do navegador ou em relação às margens do elemento pai que também for posicionado. A exceção desta regra é o valor relative, que é posicionado a partir do local original do elemento.

41 39 3. As propriedades de posicionamento left, right, top, left e z-index não se aplicam ao valor static. Right e bottom não se aplicam ao valor relative. Tendo em mente as regras acima, os valores possíveis para a propriedade position são: static: é o valor padrão, aplicado a um elemento HTML mesmo que a propriedade não esteja declarada. Uma marcação formatada por este valor não é afetada por nenhuma outra propriedade de posicionamento (left, right, top, left ou zindex). relative: um elemento formatado com este valor pode ser posicionado através das propriedades left, top e z-index, tomando como ponto inicial o local onde o elemento estava posicionado inicialmente. Uma marcação com esta formatação ainda precisa seguir o fluxo normal do documento, e terá sua área ocupando espaço na página. absolute: um elemento formatado com este valor pode ser posicionado livremente através das propriedades left, right, top, left e z-index e é removido completamente do fluxo do documento, passando a ser um elemento flutuante (ou uma camada, se preferir) que sempre estará sobre os elementos sem posicionamento e também sobre elementos posicionados com a propriedade z-index com valor inferior ao seu próprio valor desta propriedade. fixed: tudo que foi dito sobre o valor absolute é verdade também para este valor. Mas uma marcação HTML com esta propriedade possui a característica de permanecer parada, parada na página, enquanto que os demais elementos fluem de acordo com a rolagem. Este recurso interessante mal é utilizado porque ele é completamente mal interpretado pelo navegador que possui a maior parte do mercado. No projeto descrito aqui, foram utilizados basicamente a propriedade position com os valores relative e absolute. O valor absolute foi utilizado quem desejava-se posicionar um elemento sem que ele interferisse na posição de qualquer outro elemento da página. Um exemplo de elemento com este tipo de posicionamento é o logotipo do site, delimitado pelas marcações <h1></h1> e <a></a>.

42 40 O valor relative foi utilizado no projeto para facilitar e guiar o posicionamento de outros elementos posicionados. Um exemplo de elemento formatado com este valor é o rodapé, que contém outros elementos posicionados com o valor absolute. 3.5 Ajuste de incompatibilidades entre navegadores As folhas de estilo em cascata são um recurso clientside, ou seja, sua interpretação correta depende do navegador utilizado pelo usuário. Atualmente o mercado conta com quatro navegadores que juntos representam praticamente 100% dos usuários de internet: Internet Explorer, Mozilla Firefox, Safari Browser e Opera. Cada um deles possuí seu próprio nível de suporte à CSS e seus próprios defeitos (conhecidos pelo termo técnico bug). Felizmente a maior parte dos navegadores estão em um nível muito bom e próximo um dos outros em termos de renderização de CSS, fazendo com que não exista a necessidade de testar o projeto em todos os navegadores. A exceção é o Internet Explorer (ou simplesmente IE), um navegador para plataforma Windows e Mac que além de possuir o pior suporte, é o que infelizmente possui a maior parcela do mercado mundial de navegadores, com cerca de 70% dos usuários de internet. Atualmente existem duas versões do IE dividindo o mercado: a versão 6, e em proporção bem menor, a versão 7, com melhorias no suporte aos Padrões Web (mais ainda longe do ideal). Devido ao seu mal suporte aos padrões e recomendações da W3C, algumas páginas podem possuir diferenças na renderização entre o IE e os demais navegadores, e algumas vezes é essa diferença é crítica. No início os desenvolvedores e projetistas de interface resolviam este problema através de técnicas chamadas CSS Hacks. Com pequenos truques e explorando falhas dos navegadores, era possível aplicar regras de folhas de estilo apenas para um navegador específico. Esta prática gerava arquivos de folhas de estilo grandes e complexas, com grande quantidade de código redundante. Felizmente esta prática pouco elegante foi posta de lado em favor do uso de

43 41 conditional comments (comentários condicionais). Este recurso é suportado unicamente pelo Internet Explorer a partir da versão 5, e permite inserir um código HTML em uma página apenas se a condição definida for verdadeira. Os desenvolvedores então utilizam este recurso para inserir folhas de estilo para versões específicas do Internet Explorer, contendo instruções que irão contornar ou pelo menos atenuar os problemas visuais da má renderização. Figura 18: dois comentários condicionais inseridos na página. Um para cada arquivo CSS diferente. Os comentários condicionais contendo arquivos de folha de estilo são sempre os últimos arquivos a serem incluídos no cabeçalho da página, para aproveitar o Efeito Cascata. Foram inseridos no projeto dois comentários condicionais, que podem ser vistos na figura 18. O primeiro afeta o Internet Explorer 6 ou versões inferiores, e o segundo afeta unicamente a versão 7 do Internet Explorer. 3.6 Criação do destaque em Flash na página principal Uma das requisições do cliente era que houvesse uma área na página principal, semelhante a um banner rotativo onde fossem exibido chamadas para notícias em destaque, dando prioridade à imagens que ao texto. Tal recurso está presente na maioria dos portais de conteúdo. Depois de analisar o pedido do cliente, chegou-se a conclusão que a solução mais indicada seria desenvolver uma solução em Flash que recebesse as informações que compõe cada destaque (estas informações seriam: a imagem, um título, um texto de duas linhas, e uma URL que redicionaria o usuário caso ele clicasse no destaque específico) de um arquivo XML (extensible Markup Language) externo à aplicação Flash. Esse arquivo XML seria atualizado dinamicamente a partir de um banco de dados, utilizando as informações fornecidas pelo próprio cliente, utilizando a interface administrativa do Portal.

44 42 Figura 19: o arquivo Flash utilizado como base, antes de ser personalizado. Para criar este destaque dinâmico em Flash foi utilizado como base um arquivo disponibilizado gratuitamente para download para fins didáticos, que teve que ser alterado em diversos níveis para atender as necessidades do projeto. Para editar o arquivo base, foi utilizado o Macromedia Flash 8 (na versão 8 o software ainda não pertencia à Adobe). A alteração realizada no arquivo resume-se à modificações visuais na forma como os elementos são exibidos. Também foi feita algumas alterações na camada lógica, que se resumiu a comentar áreas de código que não seriam utilizados, e na camada de armazenamento de dados (o arquivo XML), apagando marcações que não seriam utilizados.

45 43 Figura 20: área de trabalho do Flash 8, com o arquivo carregado e pronto para edição. Figura 21: O arquivo Flash depois de modificado para se adaptar ao formato requisitado pelo projeto.

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com.

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com. IntroduçãoàTecnologiaWeb FerramentaseTecnologiasde DesenvolvimentoWeb ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br FerramentaseTecnologiasde DesenvolvimentoWeb

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

XHTML 1.0 DTDs e Validação

XHTML 1.0 DTDs e Validação XHTML 1.0 DTDs e Validação PRnet/2012 Ferramentas para Web Design 1 HTML 4.0 X XHTML 1.0 Quais são os três principais componentes ou instrumentos mais utilizados na internet? PRnet/2012 Ferramentas para

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Professor: Marcelo Ricardo Minholi CH: 32 horas anuais (4 dias de 8 horas) Umuarama - 2012 Fundamentação Teórica: HTML (acrônimo para a expressão inglesa

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

LABORATÓRIO WEB 2009-2010 / 4º SEMESTRE

LABORATÓRIO WEB 2009-2010 / 4º SEMESTRE LABORATÓRIO WEB 2009-2010 / 4º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA AUDIOVISUAL E MULTIMÉDIA AULA 17 A. CSS: LAYOUT DAS PÁGINAS - POSICIONAMENTO

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Plano de Trabalho Docente 2014. Ensino Técnico

Plano de Trabalho Docente 2014. Ensino Técnico Plano de Trabalho Docente 2014 Ensino Técnico ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional: TÉCNICA DE NÍVEL MÉDIO DE TÉCNICO

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Navegador ou browser, é um programa de computador que permite a seus usuários a interagirem com documentos virtuais da Internet.

Navegador ou browser, é um programa de computador que permite a seus usuários a interagirem com documentos virtuais da Internet. TERMINOLOGIA Navegador ou Browser Navegador ou browser, é um programa de computador que permite a seus usuários a interagirem com documentos virtuais da Internet. Os Browsers se comunicam com servidores

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes

Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes Em Abril de 2005, as duas maiores gigantes em desenvolvimento de software de web, gráfico e multimídia design se juntaram: a Adobe

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 Alex de Andrade Catini¹, Tiago Piperno Bonetti¹ ¹Universidade Paranaense (Unipar) Paranavaí PR Brasil Alex.catini@gmail.com, bonetti@unipar.br Resumo:

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4

Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4 Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4 Guilherme Miranda Martins 1, Késsia Rita da Costa Marchi 1 1 Universidade paranaense (Unipar) Paranavaí PR Brasil

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo EstruturadaPágina ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo EstruturadaPágina

Leia mais

M a n u a l d o R e c u r s o Q m o n i t o r

M a n u a l d o R e c u r s o Q m o n i t o r M a n u a l d o R e c u r s o Q m o n i t o r i t i l advanced Todos os direitos reservados à Constat. Uso autorizado mediante licenciamento Qualitor Porto Alegre RS Av. Ceará, 1652 São João 90240-512

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

História e Evolução da Web. Aécio Costa

História e Evolução da Web. Aécio Costa Aécio Costa A História da Web O que estamos estudando? Período em anos que a tecnologia demorou para atingir 50 milhões de usuários 3 As dez tecnologias mais promissoras 4 A evolução da Web Web 1.0- Passado

Leia mais

PRnet/2013. Linguagem de Programação Web

PRnet/2013. Linguagem de Programação Web Linguagem de Programação Web Linguagem de Programação Web Prnet/2013 Linguagem de Programação Web» Programas navegadores» Tipos de URL» Protocolos: HTTP, TCP/IP» Hipertextos (páginas WEB)» HTML, XHTML»

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente

Leia mais

Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente.

Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente. 1 HTML5 e 3 Descrição Aprenda no curso de HTML os conceitos essenciais para a criação de páginas web, junto com os novos recursos e possibilidades que o HTML5 e 3 oferecem para a criação de sites com códigos

Leia mais

A WEB COMO PLATAFORMA Revolução do HTML5

A WEB COMO PLATAFORMA Revolução do HTML5 A WEB COMO PLATAFORMA Revolução do HTML5 Juliano Flores Prof. Lucas Plautz Prestes Centro Universitário Leonardo da Vinci - UNIASSELVI Gestão de TI (GTI034) 06/11/2012 RESUMO Escrever programas de computador,

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

Plano de Trabalho Docente 2014. Ensino Técnico

Plano de Trabalho Docente 2014. Ensino Técnico Plano de Trabalho Docente 2014 Ensino Técnico Etec Etec: Dr. José Luiz Viana Coutinho Código: 073 Município: Jales Eixo Tecnológico: Informação e Comunicação Habilitação Profissional: Habilitação Profissional

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Guia de Introdução ao Windows SharePoint Services

Guia de Introdução ao Windows SharePoint Services Guia de Introdução ao Windows SharePoint Services - Windows SharePoint Services... Page 1 of 11 Windows SharePoint Services Guia de Introdução ao Windows SharePoint Services Ocultar tudo O Microsoft Windows

Leia mais

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br Guia de Consulta Rápida XHTML Juliano Niederauer Novatec Editora www.novateceditora.com.br Guia de Consulta Rápida XHTML de Juliano Niederauer Copyright 2002 da Novatec Editora Ltda. Todos os direitos

Leia mais

HTML5 E SUAS NOVIDADES

HTML5 E SUAS NOVIDADES HTML5 E SUAS NOVIDADES Gabrie Dalla Porta 1, Julio César Pereira 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil gabrieldallap@gmail.com, juliocesarp@gmail.com Resumo: Este artigo apresenta uma

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN

DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN José Agostinho Petry Filho 1 ; Rodrigo de Moraes 2 ; Silvio Regis da Silva Junior 3 ; Yuri Jean Fabris 4 ; Fernando Augusto

Leia mais

Desenvolvendo para WEB

Desenvolvendo para WEB Nível - Básico Desenvolvendo para WEB Por: Evandro Silva Neste nosso primeiro artigo vamos revisar alguns conceitos que envolvem a programação de aplicativos WEB. A ideia aqui é explicarmos a arquitetura

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Linguagem de Estruturação e Apresentação de Conteúdos

Linguagem de Estruturação e Apresentação de Conteúdos UNIVERSIDADE TECNOLOGICA FEDERAL DO PARANA MINISTERIO DA EDUCAÇÃO Câmpus Santa Helena Curso de Bacharelado em Ciência da Computação Linguagem de Estruturação e Apresentação de Conteúdos Prof. Me. Arlete

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Histórico e Características Índice 1 JAVASCRIPT... 2 1.1 Histórico... 2 1.2 Aplicações de JavaScript... 2 a) Interatividade... 2 b) Validação de formulários... 2

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

GUIA DE DESENHO GRÁFICO ABCD-SITE

GUIA DE DESENHO GRÁFICO ABCD-SITE Versão 4.0.2 Sumário Introdução...2 Arquitetura do ABCD-site...2 Web Standards...3 Acessibilidade da interface...4 Tipo I ou Portal ABCD...4 Tipo II ou Portal de Coleção ou Galeria...5 Tipo III ou Página

Leia mais

Facilidade e flexibilidade na web

Facilidade e flexibilidade na web Facilidade e flexibilidade na web palavras-chave: acessibilidade, usabilidade, web 2.0 Tersis Zonato www.tersis.com.br Web 2.0 o termo de marketing x a nova forma de conhecimento Web 2.0 O conceito começou

Leia mais

Helder da Rocha. Criação de. Web Sites I. Web e Internet Web design Tecnologias de apresentação. Rev.: CWS1-03-2000/01 A4

Helder da Rocha. Criação de. Web Sites I. Web e Internet Web design Tecnologias de apresentação. Rev.: CWS1-03-2000/01 A4 Helder da Rocha Criação de Web Sites I Web e Internet Web design Tecnologias de apresentação Rev.: CWS1-03-2000/01 A4 Copyright 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos

Leia mais

Aula: BrOffice Impress primeira parte

Aula: BrOffice Impress primeira parte Aula: BrOffice Impress primeira parte Objetivos Conhecer as características de um software de apresentação; Saber criar uma apresentação rápida com os recursos de imagem e texto; Saber salvar a apresentação;

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres Tópicos de Ambiente Web Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres Roteiro Motivação Desenvolvimento de um site Etapas no desenvolvimento de software (software:site) Analise

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Internet Internet é o conjunto de diversas redes de computadores que se comunicam entre si Internet não é sinônimo de WWW (World Wide

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Apostila da Ferramenta AdminWEB

Apostila da Ferramenta AdminWEB Apostila da Ferramenta AdminWEB Apostila AdminWEB SUMÁRIO OBJETIVO DO CURSO... 3 CONTEÚDO DO CURSO... 4 COMO ACESSAR O SISTEMA... 5 CONHEÇA OS COMPONENTES DA PÁGINA... 6 COMO EFETUAR O LOGIN... 9 MANTER

Leia mais

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais

Plano de Trabalho Docente 2013. Ensino Técnico

Plano de Trabalho Docente 2013. Ensino Técnico Plano de Trabalho Docente 2013 Ensino Técnico ETEC Paulino Botelho Código: 091 Município: São Carlos Eixo Tecnológico: Informação e Comunicação Habilitação Profissional: Técnico em Informática Qualificação:

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C Roteiro Oficina de Aula 10 s Selos de conformidade Prof. Vinícius Costa de Souza www.inf inf.unisinos..unisinos.br/~vinicius outubro de 2006 W3C São um conjunto de normas, diretrizes, recomendações, notas

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

Análise da Nova Linguagem HTML5 para o Desenvolvimento Web

Análise da Nova Linguagem HTML5 para o Desenvolvimento Web Análise da Nova Linguagem HTML5 para o Desenvolvimento Web Sergio N. Ikeno¹, Késsia Rita da Costa Marchi¹ ¹Universidade Paranaense (Unipar) Paranavaí PR Brasil sergioikn@gmail.com, kessia@unipar.br Resumo.

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza GERÊNCIA DE DADOS SEMIESTRUTURADOS -XML Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza O QUE É XML? Tecnologia desenvolvida pelo W3C http://www.w3c.org W3C: World Wide Web Consortium consórcio

Leia mais

Ferramentas desenvolvidas internamente não atendem às necessidades de crescimento, pois precisam estar sendo permanentemente aperfeiçoadas;

Ferramentas desenvolvidas internamente não atendem às necessidades de crescimento, pois precisam estar sendo permanentemente aperfeiçoadas; APRESENTAÇÃO O Myself é um sistema de gerenciamento de conteúdo para websites desenvolvido pela Genial Box Propaganda. Seu grande diferencial é permitir que o conteúdo de seu website possa ser modificado

Leia mais

Conheça o Projeto. Apresentação. Finalidade. Objetivo

Conheça o Projeto. Apresentação. Finalidade. Objetivo Manual do Usuário Índice Conheça o Projeto...3 Apresentação...3 Finalidade...3 Objetivo...3 Histórico...4 Usando o Portal...5 Efetuando o cadastro na biblioteca digital...5 Logando na Biblioteca Digital...6

Leia mais

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Capítulo 2 Introdução à ferramenta Flash

Capítulo 2 Introdução à ferramenta Flash Capítulo 2 Introdução à ferramenta Flash Índice 1. O uso da ferramenta Flash no projeto RIVED.... 1 2. História do Flash... 4 1. O uso da ferramenta Flash no projeto RIVED. É importante, antes de iniciarmos

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Autoria Web Apresentação e Visão Geral sobre a Web

Autoria Web Apresentação e Visão Geral sobre a Web Apresentação e Visão Geral sobre a Web Apresentação Thiago Miranda Email: mirandathiago@gmail.com Site: www.thiagomiranda.net Objetivos da Disciplina Conhecer os limites de atuação profissional em Web

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

XML. 1. XML: Conceitos Básicos. 2. Aplicação XML: XHTML 3. Folhas de Estilo em Cascata XML

XML. 1. XML: Conceitos Básicos. 2. Aplicação XML: XHTML 3. Folhas de Estilo em Cascata XML 1 1. : Conceitos Básicos 2. Aplicação : XHTML 3. Folhas de Estilo em Cascata 2 é um acrônimo para EXtensible Markup Language é uma linguagem de marcação muito parecida com HTML foi designada para descrever

Leia mais

Customização de Interface - Página Inicial

Customização de Interface - Página Inicial Customização de Interface - Página Inicial Sumário 1. Logo... 4 1.1. Edição... 4 2. Inputs - formulários... 4 2.1. Busca... 4 2.2. Novidades... 4 3. Fontes... 5 3.1. Cores (color)... 5 3.2. Tamanho (font-size)...

Leia mais

Introdução à Tecnologia Web. Tipos de Sites. Profª MSc. Elizabete Munzlinger www.elizabete.com.br

Introdução à Tecnologia Web. Tipos de Sites. Profª MSc. Elizabete Munzlinger www.elizabete.com.br IntroduçãoàTecnologiaWeb TiposdeSites ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br TiposdeSites Índice 1 Sites... 2 2 Tipos de Sites... 2 a) Site

Leia mais

CRIAÇÃO DE SITES (AULA 4)

CRIAÇÃO DE SITES (AULA 4) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 4) O que eu preciso para construir um link? Para construir um link você usa o que

Leia mais