FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE

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

Download "FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE"

Transcrição

1 FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Juazeiro do Norte CE 2012

2 Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Projeto de Pesquisa apresentado ao Curso de Sistemas de Informação, da Faculdade Paraíso do Ceará FAP, para a obtenção de nota na disciplina de Estágio Supervisionado I. Orientador: Prof. César Augusto Cusin Juazeiro do Norte CE

3 Sumário 1. Introdução Um breve histórico do HTML Estrutura básica do HTML Design Responsivo Principais Ferramentas Construindo uma aplicação O elemento META O elemento LINK O Elemento TITLE O Elemento BODY O Elemento HEADER O Elemento ARTICLE O Elemento HGROUP Os Elementos IMG e VIDEO O Elemento NAV O Elemento ASIDE O Elemento SECTION O Elemento FOOTER As demais páginas CSS Criando a folha de estilos A Aplicação em Android Conclusão Referências

4 1. Introdução Este projeto tem o objetivo de levar ao leitor o conhecimento básico de como criar aplicações web responsivas em quaisquer dispositivos das mais variadas resoluções, em linguagem HTML5. Para entender bem, é necessário que o leitor tenha conhecimento básico em linguagem HTML e programação. 2. Um breve histórico do HTML Segundo Flatschart (2012), HTML é uma abreviação da expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. É a linguagem mais usada na web e permite a criação de documentos estruturados. HTML5 tem o objetivo de levar informação e interatividade aos usuários. Começou a surgir por volta de 1980, quando Tim Berners-Lee fazia pesquisas na CERN (Organização Europeia para Pesquisa Nuclear). Em 1990 foi criado o primeiro navegador para distribuir conteúdo de Hipertexto na rede, alimentado pelo HTML. Em 1994 foi fundado o W3C (World Wide Web Consortium), uma organização de desenvolvimento de padrões abertos para a web. Entre os anos de 1990 e 1999 o HTML foi ganhando novas versões, até ser publicada sua versão 4.01, em dezembro de 1999, utilizada até os dias de hoje. Em 2008 é publicado o projeto de trabalho HTML5, que vem se aprimorando até hoje e já adotado em muitos desenvolvedores, mesmo ainda não tendo sido reconhecido oficialmente pela W3C. 4

5 3. Estrutura básica do HTML O documento HTML é organizado em tags (por exemplo: <html>) e é estruturado conforme a figura 1: Figura 1: Estrutura básica do HTML5 Onde: Na linha 1, a utilização de <!DOCTYPE html> está indicando a utilização da linguagem HTML na versão 5, possibilitando o emprego das novas tags, como <section>, <nav>, <aside>, dentre outras. Nas linhas 2 e 11, estamos iniciando e finalizando, respectivamente, o documento. Todas as informações da página deverão estar inseridas neste intervalo. Na linha 3 observa-se a tag <head>. Dentro dela encontram-se informações não visíveis ao usuário web, com exceção do conteúdo dentro da tag <title>, que é o título da página, visível na aba do navegador, conforme a figura 2. As demais informações serão utilizadas pelo navegador e pelos buscadores. 5

6 Figura 2: Título da página Na linha 4, o elemento meta representa os metadados do documento. O parâmetro charset= utf-8 indica a codificação de caracteres utilizada no documento. Na linha 7 pode-se observar o elemento <body>, que representa o corpo do documento e contém todas as informações da página. A nova linguagem HTML5 foi criada no propósito de aumentar o nível de representação e semântica do código. Novos elementos criados garantem um melhor grau de entendimento e interpretação do site, tanto para os usuários e desenvolvedores, como para os mecanismos de busca. A figura 3 representa apenas um exemplo de como pode ser organizado um site em HTML5. Pode-se observar nela o uso de diversos elementos divididos em várias seções. 6

7 Figura 3: Exemplo de como pode ser organizado um site em HTML5. Fonte: Imasters São eles: Header: cabeçalho do site; normalmente composto pela logomarca da empresa ou informações fixas. Article: na maioria das vezes usado como o artigo principal da página. Section: um elemento genérico dentro do documento que pode conter qualquer tipo de conteúdo, inclusive os elementos header, article e footer. Nav: contém os itens do menu de navegação. Aside: elemento que contém informações complementares ao artigo principal da página. Footer: rodapé da página. Também pode estar relacionado a um conteúdo de seção. 7

8 4. Design Responsivo Após conhecer a estrutura básica de um site em HTML, será falado rapidamente de Design Responsivo. Design Responsivo é a adaptação do site ao browser do usuário em diferentes tipos de resolução, utilizando uma técnica de HTML e CSS, sem a necessidade de criar uma folha de estilo para cada tamanho de resolução. A figura 4 apresenta o mesmo site em 3 resoluções diferentes. Figura 4: Exemplo de site em design responsivo visualizado em 3 resoluções diferentes 5. Principais Ferramentas Existem algumas ferramentas que auxiliam o desenvolvedor a criar sites. Uma das mais utilizadas é o Dreamweaver por possuir recursos exclusivos que facilitam muito o trabalho do desenvolvedor. Outras ferramentas gratuitas como Netbeans 7.3 e o Notepad++ facilitam o entendimento do código. Porém, uma página HTML pode 8

9 ser desenvolvida até mesmo no Bloco de Notas do Windows, desde que, em todos os casos, o arquivo seja salvo com a extensão *.html 6. Construindo uma aplicação Tendo em mente os conceitos já citados, pode-se dar início à construção de uma aplicação em HTML5. As figuras 5 e 6 a seguir serão utilizadas como o exemplo principal da construção da aplicação web deste artigo. Na figura 5, as imagens 1 e 2 e as imagens 3 e 4 representam o mesmo site, com uma visualização em design responsivo, porém, com resolução diferente. 9

10 Figura 5: Modelo de aplicação em HTML5 Os códigos das figuras 1 e 2 são iguais, conforme pode-se observar a seguir: 10

11 Figura 6: Código fonte do exemplo principal deste artigo 11

12 Conforme visto na figura 6, o código possui todos os elementos citados no tópico 3 deste artigo. A seguir serão detalhados e explicados cada um deles. 6.1 O elemento META O elemento meta pode aparecer diversas vezes dentro de head. Seus principais atributos são http-equiv, name e content, que identificam uma série de metadados do documento web. Neste caso, observa-se: Linha 4: o conjunto de caracteres utilizado. Linha 5: a descrição do conteúdo. Linha 6: o atributo viewport indica a maneira como o conteúdo do site será visualizado. Em outras palavras, o conteúdo deste site será visualizado de acordo com o tamanho do dispositivo, em sua escala inicial padrão, de 1.0. O atributo viewport, neste caso, é importante, pois a aplicação web em questão será visualizada em design responsivo, ou seja, qualquer dispositivo mobile que possua um navegador web poderá apresentar ao usuário uma interface nítida, com a largura adaptada à margem do seu visor, sem a necessidade da utilização de zoom. 6.2 O elemento LINK O elemento link disposto na linha 7 da figura 6 é interpretado pelo navegador. Seu atributo rel, neste caso, indica que a página web possui uma folha de estilos 1, do tipo CSS, que está localizada na pasta estilos do documento. Há ainda a possibilidade de acrescentar o atributo media ao elemento link. Este atributo indica qual dispositivo poderá aplicar o estilo em questão. Por exemplo, este 1 Folha de Estilos é um arquivo CSS (Cascading Style Sheet) que garante a formatação homogênea e uniforme de todas as páginas HTML. Este assunto será visto mais adiante. Fonte: UFPA 12

13 documento web poderia ser aplicável a dispositivos de baixa resolução, utilizando o atributo media= handheld, mas a não disponibilização deste atributo no elemento link indica, por padrão, que o atributo media terá o parâmetro all, ou seja, aplicável à todos os dispositivos. 6.3 O Elemento TITLE O elemento title, visto na linha 8, é de uso obrigatório no documento web. Ele define o título da página web e é importante para que os mecanismos de busca da internet possam indexar e disponibilizar corretamente o conteúdo do site. Conforme dito anteriormente, é o único elemento com informações disponíveis para visualização do usuário (ver Figura 2). 6.4 O Elemento BODY Na linha 10 aparece o elemento body. Como dito anteriormente, ele contém todo o corpo do documento. É dentro dele que virão todos os demais elementos que montarão a página web e que serão visíveis ao usuário. 6.5 O Elemento HEADER O elemento header contém o conteúdo introdutório da página. Normalmente, dentro deste elemento, são colocados a logomarca, informações fixas, elementos hgroup ou elementos de navegação. 13

14 6.6 O Elemento ARTICLE Segundo Flatschart (2012), o article é o elemento que contém um conteúdo independente e altamente relevante. Nele estará contido um artigo, bloco de texto ou publicação, que pode ser o conteúdo principal da página. Não está presente no código da figura 6, mas poderá ser observado mais adiante. 6.7 O Elemento HGROUP O elemento hgroup agrupa diversos títulos. Estes títulos podem ir de h1 a h6 e podem fazer parte de uma hierarquia, onde h1 tem maior valor sobre h2, e assim sucessivamente, conforme a figura 7. Na figura 8 observa-se o resultado do código da figura 7. Pode ser visto que a fonte do título principal é maior que a do subtítulo. Figura 7: Exemplo de valor hierárquico 14

15 Figura 8: Visualização do código da figura 7 Os títulos, normalmente são utilizados com letras. No caso do exemplo da figura 6, pode-se observar na linha 13 que existe a chamada de uma imagem ao documento web, onde h1 está atribuindo maior valor semântico a esta chamada. 6.8 Os Elementos IMG e VIDEO Os elementos img e vídeo trazem ao documento a possibilidade de exibir, respectivamente, uma imagem e um vídeo. Na figura 5, pode-se observar a logo do NexTI. Na sua chamada tem o seguinte código: <img class="logo" alt="nexti Desenvolvendo e Aprendendo" src="imagens/nextibaixo_pequeno.png" /> O atributo class= logo é utilizado como identificador no código CSS. O atributo alt contém uma descrição da imagem, caso ela, por um motivo qualquer, não possa ser visualizada no documento, será exibido o parâmetro contido no alt. O parâmetro do atributo src indica o endereço da imagem na pasta raiz do site em 15

16 questão. Em outras palavras, a imagem se encontra dentro da pasta imagens e se chama nextibaixo_pequeno.png. Para o elemento vídeo utiliza-se o mesmo conceito. Se, ao invés de uma imagem, fosse colocado um vídeo, seria utilizado o seguinte código da figura 9: Figura 9: Exemplo de inserção de vídeo Onde: Na linha 8 observa-se o src, que é o endereço do vídeo. Pode ser visto também os atributos height e width, que são, respectivamente, a altura e a largura da visualização do vídeo na aplicação. O atributo controls indica que os controles do vídeo, como play, pause ou volume devem aparecer para que o usuário possa controlar a visualização do vídeo. O atributo preload indica que o vídeo deve ser pré-carregado no momento em que a página for aberta. Na linha 9 o elemento a é um link interno que dá ao usuário a possibilidade de fazer o download do vídeo, caso seu navegador não seja compatível com exibições de vídeo. Muitos navegadores de dispositivos móveis hoje em dia já são compatíveis com a visualização de vídeo. No caso do Android, os navegadores que não são compatíveis, geralmente, ao invés de exibir o vídeo no navegador, executam o vídeo através do seu próprio aplicativo do youtube, caso o mesmo esteja linkado para seus servidores. 16

17 6.9 O Elemento NAV Conforme dito anteriormente, o elemento header pode conter o menu de navegação do site. Ainda na figura 6, pode-se observar na linha 15 o elemento nav dentro do elemento header, contendo o menu de navegação do site. Este menu possui 3 links dispostos em uma lista não ordenada <ul>: Projetos, Depoimentos e Sobre. Cada link está em uma linha <li>, conforme observado na figura 10 a seguir. Figura 10: Links do menu 6.10 O Elemento ASIDE O elemento aside, visto na linha 23 da figura 6, é um bloco de conteúdos que normalmente é referente ao conteúdo geral da página. Também pode conter informações publicitárias, blocos de navegação secundária, assuntos relacionados, etc. Pode ser usado dentro do elemento article, porém, neste caso, é obrigatório que seu conteúdo seja relacionado ao conteúdo do article. 17

18 Neste caso, o exemplo da figura 6 não possui elemento article. O elemento aside contém links referentes ao conteúdo global da aplicação. São 4 links que direcionam para as redes sociais do NexTI e para os validadores do código HTML5 e CSS3 do W3C 2, conforme pode ser visto na figura O Elemento SECTION O elemento section, presente na linha 26 da figura 6, é o que possui menor valor semântico. Genericamente, ele é usado para criar seções ou blocos dentro do documento com conteúdos de características relevantes únicas. O section é como uma nova semântica para o elemento div, que ainda é usado, mas tem valor semântico ainda menor que section. Neste caso, o elemento section está dividindo o elemento aside em duas partes: uma contendo links para as redes sociais e outra contendo os links para os validadores do W3C. O atributo id presente em section é o identificador do elemento. Ele será usado como referência posteriormente no arquivo CSS O Elemento FOOTER O Elemento footer, visto na linha 36 da figura 6, é o rodapé da página. Nele podem estar contidas informações referentes ao autor, direitos autorais, links relacionados, mapa do site, fale conosco, entre outros. Também pode estar presente dentro de seções, porém, neste caso, seu conteúdo deve estar diretamente relacionado à seção. A figura 11 mostra o footer da página: 2 World Wide Web Consortium (W3C) é um consórcio internacional com cerca de 300 membros, que agrega empresas, órgãos governamentais e organizações independentes, e que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web. Fonte: wikipedia 18

19 Figura 11: Rodapé do exemplo O exemplo acima contém um link para o twitter do autor. A chamada deste link também pode ser visualizada na linha 37 do código As demais páginas As demais páginas da aplicação utilizada como exemplo deste artigo seguem o mesmo código padrão. Utilizam todos os elementos citados no título 5 deste artigo. A figura 12 representa o link Sobre da página principal e a figura 13, o seu respectivo código. Nele está presente o uso do elemento article. Figura 12: página "Sobre" do exemplo principal 19

20 A disposição dos elementos e das partes visíveis ao usuário serão explicadas mais adiante, no título 6 deste artigo. Figura 13: Trecho do código da página "Sobre" 20

21 Também estão presentes no elemento aside dois selos da W3C. Estes selos direcionam para um validador de códigos HTML5 e CSS3, indicando que todo o código fonte do site está dentro dos padrões W3C. 7. CSS CSS é a abreviação do termo Cascading Style Sheet, que significa folha de estilos em cascata. Segundo o W3C, Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.. Embora seja permitida a utilização do elemento <style> para a personalização de um site em HTML5 seguindo os padrões de um documento CSS, o HTML foi criado para ser uma linguagem de marcação de conteúdos, ou seja, não é função da linguagem HTML fornecer informações sobre a apresentação de documentos. Além disso, desta maneira, o programador teria que repetir todo o código de estilos para cada página do site, fazendo cada página ter muito mais linhas de código do que o necessário. Se o programador desejasse mudar a cor de fundo (background) das páginas do site, ele precisaria mudar o código de todas as páginas, uma por uma. Por exemplo, se o site tivesse 50 páginas diferentes, ele precisaria fazer 50 alterações para mudar o background de todo o site. A mudança de estilos, fontes, cores ou eventos é feita toda através das CSS, pois esta é a sua principal função. Na figura 6 deste artigo pode-se observar na linha 7 que o elemento link indica que o documento web possui uma folha de estilos do tipo CSS. As figuras 14 e 15 mostram como ficariam algumas páginas do site, com e sem o uso de folhas de estilo. Conforme pode ser observado, a não utilização de CSS deixa o site totalmente sem personalização. 21

22 Figura 14: Página inicial do site com o uso de folha de estilo à direita e sem o uso de folha de estilo à esquerda Figura 15: Página "Projetos" do site com uso de folha de estilos à direita e sem o uso de folha de estilos à esquerda 22

23 7.1 Criando a folha de estilos O CSS pode ser criado a partir de um documento de texto. Abre-se um bloco de notas no local desejado e salva-se com o formato *.css. Conforme dito anteriormente, o documento web precisa saber que possui uma folha de estilos para a formatação da sua aparência visual. Para linkar corretamente o HTML ao seu respectivo CSS, pode-se utilizar a maneira descrita na linha 7 da figura 6. Feito isso, é hora de modificar a folha de estilos. Para organizar semanticamente um documento CSS é necessário seguir os seguintes passos: 1. Definem-se regras para os elementos principais do HTML (body, header, nav, etc). 2. Definem-se regras para os identificadores (exemplo: <section id= redes >). Identificadores são elementos únicos dentro do código HTML. 3. Definem-se regras para as classes (exemplo: <img class= logo >). Classes são como identificadores, porém, pode ser usada mais de uma vez no código. 4. Todos os estilos são ordenados conforme são dispostos no documento HTML, levando em consideração as regras 1, 2 e 3 acima. 5. Os atributos de cada estilo são ordenados em ordem alfabética. 6. Caso haja estilo global (iniciado com *), este deverá ser o primeiro a aparecer. Para um conhecimento mais amplo dos atributos utilizados a seguir, é recomendável o acompanhamento do Guia de Referência do CSS 2.1, disponível em: Na figura 14 foi possível observar como ficaria a página inicial do site sem folha de estilos. O código abaixo sugere uma definição para bordas, margem e espaçamento de todos os elementos do HTML com valor 0. Em seguida, são definidos alguns atributos para o corpo (body) do documento. A figura 16 mostra como o documento já pode ser visualizado. 23

24 * { border: 0; margin: 0; padding: 0; body { background: #1a6194; color: #fff; font-family: verdana; font-size: 14px; text-shadow: 3px 5px 5px rgba(0,0,0,0.5); Figura 16: Visualização do documento após as modificações do CSS A regra global ( * ) adiciona à página valor 0 para bordas, margens e espaçamento, ou seja, todo o conteúdo do documento é alinhado nas bordas do browser. A regra para o elemento body define no atributo background uma cor de fundo em RGB 3 para a página. A cor visualizada na figura 16 equivale ao código RGB #1a6194. O atributo color, como se encontra dentro da regra body, está definindo uma cor global para a fonte da página. Observa-se que algumas letras não 3 O site do Maujor explica como definir cores em regras CSS. 24

25 estão na cor global. Isso acontece porque, conforme pode ser observado na figura 6, estas palavras são, na realidade, links para outras páginas. Também é possível definir outras características para a fonte, como estilo, tamanho e sombras. Conforme a regra para body, estão definidos a fonte verdana, tamanho 13, com sombras, que dá uma aparência diferente ao texto. Ao adicionar a regra header{ text-align: center; ao CSS, todo o conteúdo presente dentro do elemento header do HTML será alinhado ao centro da página, conforme a figura 17. Figura 17: Uso da regra para o elemento HEADER Pode-se definir uma série de atributos à regra para o elemento nav, de forma que se personalize e faça as letras tomarem aparência de botões. nav a{ background: #f69401; /*cor de fundo dos links*/ border: 0.1em solid #57abb8; border-radius: 4px; display: block; font-family: verdana; font-size: 22px; padding: 1px; text-align: center; 25

26 A primeira linha do código acima (nav a) indica que todos os atributos presentes entre chaves { serão referentes aos links <a> do elemento <nav>, ou seja, Projetos, Depoimentos, e Sobre. Cada um dos 3 links terá suas próprias características, não sendo uma característica global do elemento nav. Por exemplo: a cor do atributo background será apenas para o fundo de cada um dos links, individualmente, conforme figura 18. Figura 18: Cores nos links do elemento NAV Além do background, estão sendo definidas as bordas e seus o arredondamentos nos cantos e o display, que é como os links ficarão dispostos para visualização do usuário, ou seja, em blocos. Também estão definidos para nav características para as fontes, espaçamento entre os links e alinhamento dos textos. O código a seguir indica características visuais que os links de nav devem apresentar ao passar o cursor do mouse sobre eles. Pode-se observar o resultado na figura 19. nav a:hover { background: #212121; border: 0.1em dashed #f60; border-radius: 0 8px 0 8px; color: #f69401; 26

27 -ms-transition: all 0.3s ease-out; /*IE*/ -moz-transition: all 0.3s ease-out; /*firefox*/ -o-transition: all 0.3s ease-out; /*opera*/ -webkit-transition: all 0.3s ease-out; /*chrome*/ transition: all 0.3s ease-out; /*geral*/ Figura 19: Como o link se comporta ao passar o cursor As últimas 4 linhas do código acima indicam, para cada navegador, um intervalo de tempo de 0,3s para a mudança de efeitos. São adicionadas as seguintes definições para o rodapé da página: footer { background: #f69401; border-radius: 4px; font-size: 10px; margin: 0 auto; padding: 0.75em 0; text-align: center; width: 100%; footer a:hover{ color: #1e6381; 27

28 A primeira regra estabelece um background para todo o rodapé, bordas, tamanho da fonte, sua margem e o alinhamento de texto. É possível notar que a largura definida em width: 100% é dada em porcentagem. Isto significa que a largura será exibida de acordo com o tamanho da janela do browser. Assim, não haverá barra de rolagem. A segunda regra (footer a:hover) estabelece a cor que os links dentro do rodapé devem ficar ao passar o cursor do mouse sobre eles. Também é possível modificar as fontes de todos os links da página. As próximas duas regras indicam uma cor pra o link e qual cor ele deve ficar ao passar o cursor sobre ele. a { color: #FFF; /*#57abb8;*/ font-weight: bold; text-decoration: none; a:hover { color: #f60; Por fim, definindo novas regras para o aside do HTML, pode-se observar novas mudanças na aplicação, conforme a figura 20. aside #redes { background: #fff; border-radius: 8px; color: #1e6381; display: block; margin: 5px auto; max-width: 40%; padding: 4px; text-align: center; vertical-align: top; aside #w3c { padding-top: 20px; text-align: center; Aparentemente, no elemento aside do HTML foram modificados somente a cor de background, bordas arredondadas e cor da fonte. Porém, cada linha do 28

29 código acima refere-se a algum detalhe do aside. Por exemplo: a largura máxima permitida para o aside é de 40% (max-width: 40%). Assim como a largura do elemento footer, esta porcentagem indica que a largura do aside é referente ao tamanho da tela do navegador, ou seja, a largura do elemento aside não pode ultrapassar os 40% da largura total da janela do browser; não haverá barra de rolagem horizontal. Figura 20: Modificação de atributos para o elemento ASIDE A estrutura completa do CSS vista no item 7 deste artigo, juntamente com alguns ajustes de detalhes, pode ser observada a seguir: * { border: 0; margin: 0; padding: 0; body { background: #1a6194; color: #fff; font-family: verdana; 29

30 font-size: 14px; text-shadow: 3px 5px 5px rgba(0,0,0,0.5); header{ text-align: center; h1, nav { background: #1a6194; display: block; max-width: 100%; vertical-align: central; nav { background: #1a6194; display: block; max-height: 100%; max-width: 100%; vertical-align: middle; nav ul { list-style: none; nav li { display: block; /*alinhar os itens do menu*/ padding: 2px; /*distancia entre o itens do menu*/ vertical-align: top; nav a{ background: #f69401; /*cor de fundo dos links*/ border: 0.1em solid #57abb8; border-radius: 4px; display: block; font-family: chiller, verdana; font-size: 22px; padding: 1px; text-align: center; -ms-transition: all 0.3s ease-in; /*para IE*/ -moz-transition: all 0.3s ease-in; /*firefox*/ -o-transition: all 0.3s ease-in; /*opera*/ -webkit-transition: all 0.3s ease-in; /*chrome*/ transition: all 0.3s ease-in; /*geral*/ nav a:hover { background: #212121; 30

31 border: 0.1em dashed #f60; border-radius: 0 8px 0 8px; color: #f69401; -ms-transition: all 0.3s ease-out; /*para IE*/ -moz-transition: all 0.3s ease-out; /*firefox*/ -o-transition: all 0.3s ease-out; /*opera*/ -webkit-transition: all 0.3s ease-out; /*chrome*/ transition: all 0.3s ease-out; /*geral*/ footer { background: #f69401; border-radius: 4px; font-size: 10px; margin: 0 auto; padding: 0.75em 0; text-align: center; width: 100%; footer a:hover{ color: #1e6381; a { /*mudar a fonte dos links*/ color: #FFF; font-weight: bold; text-decoration: none; a:hover { color: #f60; aside #redes { background: #fff; border-radius: 8px; color: #1e6381; display: block; margin: 5px auto; max-width: 40%; padding: 4px; text-align: center; vertical-align: top; aside #w3c { padding-top: 20px; text-align: center; 31

32 Conforme observado, o CSS tem o poder de mudar completamente o design da aplicação. Ao aumentar e diminuir o tamanho da janela nota-se a responsividade da página, que se adequa perfeitamente ao tamanho da janela do browser. A página aqui criada pode ser visualizada em qualquer navegador Web, porém sua disposição é mais agradável em dispositivos móveis, pois foi desenvolvida especialmente para eles. 8. A Aplicação em Android Apesar de ser possível visualizar em qualquer browser de dispositivos móveis, a aplicação criada neste artigo também pode funcionar perfeitamente como um App nativo. No caso do exemplo da figura 21 abaixo, foi criado no Android um aplicativo contendo somente uma barra de títulos e uma webview. Esta webview é nada mais, nada menos que um browser, que contém um endereço pré-inserido da aplicação na web, acessando somente o próprio endereço do site, não sendo possível visitar outras páginas web. Na figura 22 pode-se observar o funcionamento da aplicação e seu atalho criado na lista de aplicativos. Figura 21: Template da aplicação para Android 32

33 Figura 22: Funcionamento do App nativo 9. Conclusão Após o desenvolvimento deste artigo, pode-se concluir que atualmente é possível desenvolver qualquer aplicação nativa com interface totalmente HTML5. A principal vantagem desta prática é a facilidade que o desenvolvedor terá em criar uma aplicação, não sendo necessário conhecer a fundo a linguagem de programação específica para cada dispositivo. Além disso, caso o dispositivo não possua o app, ainda é possível visualizar a aplicação através do browser. 33

34 10. Referências FLATSCHART, Fábio. HTML5: Embarque imediato. 2ª Tiragem. Rio de Janeiro: Brasport, SAMY Silva, Maurício. CSS3: Desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3. 1ª Edição. São Paulo: Novatec, Biblioteca on-line. Disponível em: <http://imasters.com.br/artigo/16598/webstandards/html5-semantica-seo-e-organizacao> Acesso em: 15 out Biblioteca on-line. Disponível em: <http://www.w3c.br/divulgacao/guiasreferencia/css2/> Acesso em: 01 nov

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

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

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

HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO

HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO Djalma Gonçalves Costa Junior¹, Willian Barbosa Magalhães¹ ¹Universidade Paranaense (Unipar) Paranavaí - PR - Brasil djalma.g.costajr@gmail.com wmagalhaes@unipar.br

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

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 à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

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

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

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

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

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

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

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

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Principais características Página dentro de página Transições

Leia mais

Web Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer

Web Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer Web Design: Responsivo e Adaptativo Lara Popov Zambiasi Bazzi Oberderfer 1 # Construindo Layouts Tableless Layouts tableless são layouts ou páginas web construídas e estruturadas sem o uso das antigas

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

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

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

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

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

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

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

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

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

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

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

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

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

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 4 Técnico Prof. Cesar 2014 Conteúdo 1. ESTRUTURA DE UM DOCUMENTOHTML... 2 2. ELEMENTOS DA ESTRUTURA... 3 3. FORMULÁRIOS...Erro!

Leia mais

Aprenda a construir com menos tempo e esforco layouts para web

Aprenda a construir com menos tempo e esforco layouts para web Aprenda a construir com menos tempo e esforco layouts para web Sumário Apresentação 10 Capítulo #1 - Ferramentas necessárias para o desenvolvimento 22 Capítulo #2 - Afinal, o que é HTML? 26 A evolução

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

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

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

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

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

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

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

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

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

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

28 de dezembro de 2003

28 de dezembro de 2003 Padrões Web e Tableless Marcelo Toledo 28 de dezembro de 2003 O HTML, HyperText Markup Language ou Linguagem de Marcação HiperTexto, foi criado para marcar um texto através

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

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

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

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

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

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

S E O PA R A I N I C I A N T E S

S E O PA R A I N I C I A N T E S SEO PARA INICIANTES QUEM SOU EU? WEB DESIGNER COM FOCO NO SEO DE QUALIDADE IDEALIZADOR DO COMSEO CEO DA MOSKO WEB DESIGNER O QUE É SEO? É O CONJUNTO DE ESTRATÉGIAS COM O OBJETIVO DE POTENCIALIZAR E MELHORAR

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

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente

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

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

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

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

Desenvolvimento em Ambiente Web. HTML - Introdução

Desenvolvimento em Ambiente Web. HTML - Introdução Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,

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

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Minicurso introdutório de desenvolvimento para web em HTML5. Cristiano Costa

Minicurso introdutório de desenvolvimento para web em HTML5. Cristiano Costa Minicurso introdutório de desenvolvimento para web em HTML5 Cristiano Costa Sobre mim Graduando em Engenharia Eletrônica - UNIFEI Trabalhou em desenvolvimento de sistemas empresariais (Base em servidores

Leia mais

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar

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

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

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

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

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

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

Efeitos 101: Trabalhando com animações e transições

Efeitos 101: Trabalhando com animações e transições Capítulo 8 Efeitos 101: Trabalhando com animações e transições UmadasminhaspartesfavoritasdoCSS3sãoaquantidadedeefeitosqueconseguimos criar apenas com CSS nas nossas páginas combinando algumas propriedades

Leia mais

1) Criar o código HTML para construir a página representada pela imagem abaixo.

1) Criar o código HTML para construir a página representada pela imagem abaixo. 1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 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

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

Design responsivo para WEB com Bootstrap. Fernando Freitas Costa dovernando@gmail.com Especialista em Gestão e Docência Universitária/UNIFIMES

Design responsivo para WEB com Bootstrap. Fernando Freitas Costa dovernando@gmail.com Especialista em Gestão e Docência Universitária/UNIFIMES Design responsivo para WEB com Bootstrap Fernando Freitas Costa dovernando@gmail.com Especialista em Gestão e Docência Universitária/UNIFIMES Assunto de hoje... Um pouco de História... Por que me preocupar

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

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

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

Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 7 LISTAS E TABELAS Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Listas Prover mecanismos para listar informações Devem conter um ou mais itens Elementos

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

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 Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

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

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais