Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo

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

Download "Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo"

Transcrição

1 Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo Márcio Koch 1, Isabela Gasparini 2 1 Centro de Ciências Tecnológicas Universidade do Estado de Santa Catarina (UDESC) Joinville SC Brasil 2 Centro de Ciências Tecnológicas Universidade do Estado de Santa Catarina (UDESC) Joinville SC Brasil Abstract. This research work discusses the key concepts of responsive web design and technologies as media queries to develop web applications so that its layout adapts to any device and offer a good level of accessibility to the needs of users. This is possible using the HTML5 resources, CSS3 and JavaScript. We present techniques such as mobile first and also some frameworks that assist in this work as PhoneGap and jquery Mobile. Resumo. Esse trabalho de pesquisa aborda os principais conceitos de web design responsivo e tecnologias como media queries para desenvolver aplicativos web de forma que seu leiaute se adapte a qualquer dispositivo e ofereça um bom nível de acessibilidade às necessidades dos usuários. Isso é possível utilizando os recursos do HTML5, das CSS3 e JavaScript. Apresentamos técnicas como o mobile first e também algumas frameworks que auxiliam nesse trabalho como o PhoneGap e o jquery Mobile. 1. Introdução Devido à evolução tecnológica dos dispositivos de comunicação e entretenimento, qualquer pessoa pode navegar na web facilmente usando um computador pessoal, laptop, smartphone, tablet, smart tv ou console de jogo [Subić et al. 2014]. [Klein e Gubic 2014] destacam que com a popularização das tecnologias 3G e Wi-Fi o desempenho e tamanho dos dispositivos móveis melhoraram muito ficando mais parecidas com as dos desktops e laptops, bem como houve melhoria dos navegadores para mobile. Porém todos estes dispositivos possuem dimensões, resolução de tela, capacidade de armazenamento e processamento diferentes. Uns mais e outros menos, dependendo da marca e modelo. Essas características diferentes dos dispositivos tornaram-se um verdadeiro desafio para web designers construírem aplicações web que se adaptem a todos eles de maneira a oferecer um nível de usabilidade admissível aos usuários que estão cada vez mais exigentes.

2 [Lestari et al. 2014] afirmam que muitas empresas criam versões diferentes do seu web site para dispositivos móveis com resoluções diferentes. Porém isso baixa a produtividade das equipes e exige um aumento no orçamento da empresa. [Kimura et al. 2012] também advertem que construir outra versão do site para atender dispositivos móveis exige a necessidade de manutenção em dois sites diferentes para um mesmo sistema. A fim de solucionar as situações descritas anteriormente pode-se aplicar a abordagem para desenvolvimento de aplicações web denominada web design responsivo. Essa abordagem é baseada principalmente nas tecnologias Hypertext Markup Language versão 5 - HTML5, Cascading Style Sheets versão 3 - CSS3 e JavaScript. O órgão que regulamenta a evolução dessas tecnologias e recomendações é a W3C (World Wide Web Consortium). 1.2 Web Design Responsivo [Silva 2014] que o termo Web Design Responsivo surgiu em 2010 com o post no blog A List Apart, onde Ethan Marcotte retrata a mudança de comportamento e crescimento dos usuários mobile, e que, várias empresas já estavam sendo afetadas por desejar disponibilizar seus sites de forma aderente a esses novos dispositivos. Deve-se utilizar um modelo responsivo para criar uma interface sensível às características do dispositivo, ao tamanho e a orientação da tela, à capacidade de cores a luminosidade do ambiente, aos leitores de tela e a muitas outras variáveis da relação homem-interface. Um projeto responsivo deveria ser em sua concepção natural, independente do navegador, atuar com fluidez, trabalhar com porcentagem e se adequar com qualquer resolução permanentemente. 1.3 Princípios do Design Responsivo O design responsivo ou leiaute responsivo expande-se e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é visualizado, seja um smartphone, um tablet, um desktop ou um leitor de tela. [Silva 2014] e [Kimura et al. 2012] expõem que as três principais tecnologias para o desenvolvimento de um leiaute responsivo são: a) grid fluído: técnica onde as medidas CSS são definidas em unidades relativas, tais como porcentagem e ems, e não em medias absolutas como o pixel e mm; b) imagens e mídias flexíveis: são aquelas capazes de contrair ou expandir suas dimensões ou ter suas dimensões alteradas por scripts dependendo do contexto onde são renderizadas; c) media queries: é uma tecnologia CSS que permite ao autor servir folhas de estilos baseadas em determinadas características do dispositivo ao qual o leiaute será servido. Trabalhos recentes abordam os princípios de web design responsivo como [Lestari et al. 2014] que avaliam a experiência do usuário em cenários de web design responsivo em dispositivos móveis e em desktop e design não responsivo em dispositivos móveis. Concluíram que web design responsivo mantém a qualidade da informação, legibilidade, gosto de uso e reduz em mais de 74% a utilização de rolagem. Porém web design não responsivo melhorou em 26% a rolagem e 55% o total de cliques

3 na exploração da arquitetura dos sites. Já [Klein and Gubic 2014] reestruturaram o site de uma instituição de ensino superior para leiaute responsivo a fim de aumentar o interesse de uso pelos alunos e professores. Concluem que houve aumento considerável de uso devido as novas possibilidades disponíveis através de dispositivos móveis. A analise de 470 sites é realizada por [Subić et al. 2014]. O trabalho deles conclui que a grande maioria dos sites são semi-responsivos, não responsivos e o menor percentual são os responsivos. E em [Sindh 2012] os autores avaliam a qualidade e o custo de aplicações web para smartphones. O custo é comparado entre um aplicativo desenvolvido com HTML5, CSS3 e JavaScript e um desenvolvido de forma nativa ao dispositivo. Os autores concluem que o desenvolvimento usando HTML5 atende aos padrões de qualidade de forma satisfatória e o custo efetivo fica em torno de 67%. 2. HTML5 O uso do HTML5 no desenvolvimento web proporciona um código semântico, mais bem estruturado, facilitando sua manutenção e leitura. O HTML5 devido a possuir uma semântica bem estruturada com elementos apropriados para marcar um conteúdo, melhora a performance dos navegadores, scripts de execução e leitores de tela. Uma página HTML5 inicia com o elemento doctype html conforme pode ser visto no Quadro 1. <!doctype html> <html lang="pt-br"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>leiaute mínimo para design responsivo</title> </head> <body> </body> </html> Quadro 1 Leiaute para design responsivo Outra metatag essencial para desenvolver um leiaute responsivo é a viewport conforme apresentado no Quadro 1. Ela provê ao navegador informações que permitem que ele escale de modo apropriado o conteúdo em telas de viewport variadas. A Tabela 1 contém alguns atributos essenciais para um leiaute responsivo. Tabela 1. Alguns atributos importantes da metatag viewport Atributo Valores possíveis Descrição width height 1 a pixels ou device-width 1 a pixels ou device-height Define a largura da viewport em pixels. O valor device-width especifica que a largura da viewport deverá ser igual à largura da tela do dispositivo. Define a altura da viewport em pixels. O valor device-height especifica que a altura da viewport deverá ser igual à altura da tela do dispositivo. initial-scale 0.1 a 10 A escala inicial ou o fator de zoom usado quando a página for visualizada pela primeira vez. Valores mais altos causam aumento do zoom e mais baixos diminuem o zoom.

4 2.1. CSS Reset Caso uma página web não possua um CSS associado, o próprio navegador possui um arquivo CSS interno com configurações de inicialização. Porém os navegadores não seguem um padrão entre si, o que pode ser um problema para um leiaute responsivo. [Mayer 2015] desenvolveu uma folha de estilo contendo os valores iniciais para vários elementos de marcação HTML a qual chamou de CSS Reset. Ele foi radical e zerou a maioria desses valores, deixando a cargo do desenvolvedor ajustá-los conforme a necessidade de cada projeto. Posteriormente [Gallagher and Neal 2015] criaram uma folha de estilo alternativa a de Meyer a qual denominaram de normalize.css. Essa folha de estilos tem como diferencial preservar os estilos nativos considerados úteis em lugar de simplesmente zerá-los, como faz o CSS Reset. A folha de estilo normalize é amplamente usada por muitos frameworks de desenvolvimento, como [Bootstrap 2015] e templates para desenvolvimento responsivo Elementos do HTML Os principais elementos do HTML5 empregados no design responsivo para a construção de leiaute são: a) article: destina-se a marcar um conteúdo completo e independente, como por exemplo, um post em um fórum; b) section: serve para marcar um conteúdo genérico em um documento, como por exemplo, os capítulos de uma matéria; c) header: empregado a marcar conteúdos introdutórios ao conteúdo do seu elemento ancestral mais próximo, normalmente possui um ou mais elementos de cabeçalho (h1-h6); d) footer: usado para marcar conteúdo com informações sobre o seu elemento ancestral mais próximo como: article, section, aside e nav. Normalmente é posicionado no final da seção; e) aside: destina-se a marcar conteúdos que sejam relacionados e separados do conteúdo posicionado junto ou envolta dele mesmo; f) nav: usado para marcar seções de navegação como listas de links; g) figure e figcaption: marca uma unidade de conteúdo, opcionalmente contendo um rótulo ou uma legenda marcados com o elemento figcaption; h) main: marca o conteúdo principal de uma página, usado para fins de acessibilidade. Deve ter apenas um elemento main na página. 3. CSS Segundo [Silva 2014] folhas de estilo em cascata é um mecanismo simples para adicionar estilos, por exemplo: fontes, cores, espaçamentos, etc. aos documentos web. Uma estrutura CSS pode ser vista na Figura 1.

5 Figura 1. Estrutura da regra CSS Uma regra CSS é composta de duas partes: um seletor e uma declaração. A declaração CSS é composta de uma propriedade seguida por um valor e separado dele por dois-pontos :. Uma regra CSS pode conter mais de uma declaração CSS as quais devem ser separadas por ponto e vírgula ; conforme exibo no Quadro 2. p{ color: red; font-family: sans-serif; width: 50%; } 3.1. Medidas CSS Quadro 2. Regra CSS para um elemento HTML de parágrafo <p> [Silva 2014] descreve que a maioria dos sites até pouco tempo atrás usavam largura fixa com o uso da unidade de media pixel, o que é inviável para construção de leiautes responsivos. Atualmente com os leiautes fluídos passou-se a usar as medidas CSS relativas, porcentagem e em. A unidade de medida porcentagem define a dimensão de um elemento como uma porcentagem da dimensão do seu elemento pai. Um box tem sua largura inicial (width) definida com o valor auto, que por padrão é a largura da viewport. Quando a janela de um navegador é redimensionada, a largura da viewport também é, e em consequência a largura auto do box é igual a da viewport. Assim um box com width: 50% que seja filho de um container com width: 200px tem sua largura igual a 50% de 200px = 100px. A unidade de medida CSS relativa em, se baseia no tamanho da fonte (fontsize) do elemento onde estiver sendo declarado. A declaração do Quadro 3 mostra a aplicação de uma media em pixel para a fonte de um elemento div com a classe pai e em seguida a aplicação da unidade de medida CSS em para uma classe chamada filho. div.pai{ font-size: 10px; }.filho{ font-size: 3em; } Quadro 3. Regras CSS com uso da medida em O Quadro 4 exibe código HTML usando as regras CSS acima. A linha destacada em amarelo usa a classe filho que está definida como 3em, ou seja, três vezes maior do que a fonte de seu elemento ancestral (div com a classe pai) que está definido com 10 pixels. Isso significa que 1em = 10px nesse exemplo. <div class="pai"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> <span class="exemplo">quisque imperdiet rutrum ipsum.</span><br> </div> Quadro 4. Código HTML usando a classe pai e filho com a unidade de medida CSS em

6 Conforme a [W3C 2015a] a propriedade CSS font-size é transmitida por herança e os elementos de uma página são descendentes do elemento body. Caso um elemento não tenha essa propriedade definida ou não esteja definida em um de seus elementos ancestrais, herdará o valor do elemento body. Embora não esteja na especificação, os navegadores foram unanimes em adotar 16 pixels para a propriedade font-size o que corresponde a 1em = 16px. Isso deve ser considerado no desenvolvimento de um leiaute responsivo para evitar problemas com o tamanho da fonte. 4. Media Queries Com as CSS3 foi estendido o mecanismo destinado a servir folhas de estilos dependentes de mídia e criaram um conceito totalmente novo para essa funcionalidade, denominado media queries. O mecanismo de media query consulta à mídia onde vai ser aplicada e identificada as suas características, como o tipo da tela e tamanho. A especificação da [W3C 2015b] define media query como sendo uma sentença formada por um tipo de mídia e zero ou mais expressões destinadas a verificar as condições de ocorrência de uma determinada característica naquele tipo de mídia. Uma media query é uma expressão lógica que retorna os valores true ou false se a característica ou as características de mídia expressas em uma media query forem características da mídia na qual a aplicação está rodando, ou seja, se todas as condições da media query forem verdadeiras, então a media query retornará true e a folha de estilo específica será aplicada ao documento. No Quadro 5, a media query retornará true e será aplicada (fundo do documento vermelho) caso o documento tiver uma tela com largura mínima de 480 screen and (min-width: 480px){ body{ background: red; }} Operador and only not Quadro 5. Exemplo de uso de media query A Tabela 2 mostra os operadores media queries especificados. Tabela 2. Operadores media query Descrição Operador de concatenação retorna true se as condições à esquerda e à direita do operador forem ambas verdadeiras. Palavra-chave usada para esconder folhas de estilos de navegadores antigos que não suportam media query. Operador de negação. Retorna true se a condição não for satisfeita. Na sintaxe para media query é obrigatório definir a media, enquanto o operador e a expressão são facultativos, e quando usados podem ser declarados em cadeia (dois ou mais), conforme exemplos do Quadro screen and (min-width: 400px) and (max-width: only print and (min-width: 25cm) and (color){...} Quadro 6. Exemplos de media query

7 4.1. Mobile First O termo mobile first surgiu a partir de um artigo publicado por [Wroblewski 2009] com o título Mobile First. Neste artigo o autor defende a necessidade de começar o leiaute de um projeto web a partir de sua apresentação em dispositivos móveis e a partir daí o leiaute para desktop. Ao iniciar primeiro pela versão mobile, é dada maior importância no que realmente é indispensável para os usuários. Assim é evitada a remoção de itens necessários e a inclusão de elementos supérfluos. A aplicação dessa técnica não só melhora a qualidade dos sites acessados por dispositivos móveis, como quando acessado pelo desktop. Porque se a equipe mantiver o mesmo foco e as mesmas prioridades, o resultado será uma solução desktop mais simples e com objetivos claros Breakpoints [Klein and Gubic 2014] descreve que criar um breakpoint em design responsivo significa estabelecer um tratamento para um ponto de quebra no leiaute de uma página de forma que ela se readapte a uma nova media da janela, ou seja, uma nova medida da viewport. Para exemplificar, digamos que para larguras da janela do navegador até 300px, a cor de fundo de uma página deva ser vermelha (red), entre 300px e 900px, a cor deverá ser verde (green), e acima de 900px, azul (blue). Para solucionar o problema servimos uma folha de estilo inicial para dispositivos móveis (mobile first) e media queries para navegadores de dispositivos maiores. O Quadro 7 demonstra o CSS para solucionar esse exemplo. body{ background: red; } /* mobile first screen and (min-width: 300px){ /* viewport com largura maior que 300px*/ body{ background: green; } screen and (min-width: 900px){ /* viewport com largura maior que 900px*/ body{ background: blue; } } Quadro 7. Exemplo prático do uso de media query É possível notar que para dispositivos de viewport com largura maior do que 900px as duas regras de media query do Quadro 7 se aplicam, pois viewpor maior que 900px também é maior que 300px. Assim as duas regras entram em conflito e vence a que for mais especifica, e em caso de empate, o conflito será resolvido pelo efeito cascata, ou seja, vence a regra declarada por último. 5. Imagens flexíveis Conforme explica [Silva 2014], é muito fácil criar uma imagem flexível para um projeto de design responsivo, basta usar um código CSS conforme exibido no Quadro 8 que ela se ajustará de forma adequada ao dispositivo em que for visualizada. Porém apenas isso está longe de ser a solução ideal. img{ max-width: 100%; } Quadro 8. Exemplo de uma definição para imagem flexível

8 Uma página com uma imagem de 1 megabyte apresentada em um desktop, não deveria ser apresentada com o mesmo peso para um dispositivo móvel. Imagens flexíveis não significa apenas ajustar as dimensões das imagens de forma que se adaptem adequadamente aos diferentes dispositivos, mas elas devem ser oferecidas mais leves para os dispositivos móveis a fim de serem carregadas mais rápidas e consumirem menos banda de internet nestes dispositivos. Uma opção para diminuir o peso das imagens é reduzir a sua resolução ou a quantidade de pixels em uma determinada área da imagem, normalmente é adotado pixels por polegada. Outra técnica conhecida como art direction (direção de arte) consiste em servir diferentes versões de uma mesma imagem. A imagem é cortada permanecendo a porção da imagem que melhor transmite a informação que se quer mostrar em diferentes dimensões de acordo com as características do dispositivo do usuário. Assim em um desktop serve-se a imagem de maior peso e para smartphone a de menor peso de carregamento. O HTML5 possui um novo atributo para o elemento img denominado srcset que permite oferecer um conjunto de imagens em vez de apenas uma. O navegador escolherá apenas a imagem que for mais apropriada para ser exibida na largura da viewport ou a densidade em pixels da tela do dispositivo do usuário, otimizando dessa forma o carregamento da imagem e sua exibição. Conforme especificação da [W3C 2015c] o valor do atributo srcset deve ser uma lista de image candidate strings separadas por vírgula declaradas na seguinte ordem: a) URL apontando para uma imagem; b) número inteiro não negativo descrevendo a largura em pixel seguido da letra w; c) número de ponto flutuante maior do que zero descrevendo a largura em pixel seguido da letra x. O Quadro 9 apresenta um exemplo do uso do atributo srcset.. <img alt="descrição da imagem" src="imagem.jpeg" srcset="imagem-hd.jpeg 2x, imagem-phone.jpeg 100w, imagem-phone-hd.jpeg 100w 2x"> Quadro 9. Exemplo do uso do atributo srcset O novo elemento picture do HTML5 também é um método de controle para servir imagens responsivas, sendo baseado em media query e suporte para um formato particular de imagem. O elemento picture possui como finalidade completar as funcionalidades do atributo srcset. O Quadro 10 mostra um exemplo do uso. <picture> <source media="(min-width: 45em)" srcset="large1.jpeg, large2.jpeg 2x"> <source srcset="small1.jpeg, small2.jpeg 2x"> </picture> Quadro 10. Exemplo de uso do elemento picture juntamente com os atributos media e srcset.

9 6. Mídias flexíveis Um dos tipos de mídia mais utilizadas na web são os vídeos. Uma das técnicas para adicionar um vídeo de forma responsiva consiste em criar um container para o vídeo cujas dimensões mantenham a mesma razão de aspecto (proporção da largura dividido pela altura) do vídeo, que normalmente é 16:9. Para criar um container responsivo sua largura e altura, propriedades CSS width e height respectivamente, devem ser declaradas em unidade de medida relativa, e para que se expanda e contraia com o redimensionamento da janela do navegador, devem ser declaradas em porcentagem. Ao declarar a propriedade CSS height em porcentagem, ela é calculada em relação à altura do elemento ancestral mais próximo que tenha altura declarada, porém esse comportamento é indesejado para tornar o vídeo responsivo. De acordo com o box model CSS, a propriedade padding de um container é computada como integrante das dimensões do box. Quando declarada em porcentagem, seu valor é calculado em relação à largura do próprio container, inclusive os valores definidos para padding-top e padding-bottom (dimensões verticais). Assim em vez de declarar uma altura para o container, se declara o padding-bottom em porcentagem e a altura do container será flexível. Considerando um vídeo com proporção de largura pela altura igual a 16:9. Dividindo 9 por 16 se obtêm a porcentagem da altura em relação à largura igual a 0,5625 que equivale a 56,25%. Esse é o valor a ser declarado para padding-bottom de um container responsivo para fazê-lo expandir e contrair mantendo constante a sua razão de aspecto em 16:9. Outra técnica é o uso do elemento video disponível no HTML5. A utilização desse elemento é muito mais simples do que a abordagem anterior, porém muitos fornecedores de vídeos esternos, como o YouTube por exemplo, exigem que a primeira técnica seja aplicada para tornar o leiaute responsivo. A simples declaração de 100% para a largura do elemento vídeo o torna responsivo, semelhante como para as imagens. 7. Acessibilidade na web com design responsivo Acessibilidade na web possibilita que pessoas com certas difiências, como a falta de visão, consigam acessar o conteúdo de uma página com a ajuda de um software leitor de tela. Porém uma página com boa acessibilidade beneficia também idosos, pessoas com deficiências temporárias ou com pouca habilidade com o computador e os usuários de dispositivos móveis. A [W3C 2015d] publica através da Web Accessibility Initiative (WAI) diretrizes de acessibilidade que informam como tornar o site mais acessível para pessoas com deficiências. Essas diretrizes de acessibilidade são recomendações da W3C para tornar a web mais acessível, inclusive para dispositivos móveis. Pois considera o princípio de uma web acessível em qualquer dispositivo. Abaixo são listadas algumas das principais recomendações para desenvolver conteúdo acessível:

10 a) não utilizar somente cores para transmitir informações: utilizar um rótulo informativo junto com a cor indicativa; b) tornar as imagens acessíveis: preencher o atributo alt com um texto adequado; c) definir campos input com tipo adequado para formulários e associar a cada um deles um elemento label; d) não disponibilizar atividades que só funcionem com o uso do mouse, pois ele pode não estar presente; e) identificar cada página web informando o título da página de forma adequada através do elemento title; f) Declarar o idioma da página no elemento html e em qualquer elemento que possua conteúdo em outro idioma utilizando o atributo lang; g) Para links que abrem uma página em uma nova janela, deve ter algum indicativo que avise isso ao usuário; h) Deve ser evitado o recarregamento automático da página; i) Respeitar a semântica do HTML. O HTML5 trouxe vários novos elementos para melhorar a semântica de uma página como header, footer, section, nav, article, aside, etc; j) Utilizar landmarks como o atributo role para marcar regiões de acesso rápido; k) Simplificar as tabelas apenas com dados tabulares; l) Submeter as páginas para validadores HTML da W3C; m) Testar o site com alguns softwares de tecnologias assistivas como softwares de leitores de tela. 8. PhoneGap Conforme [PhoneGap 2015], o PhoneGap é uma tecnologia de código fonte aberto e grátis, desenvolvida a partir do projeto Apache Cordova, que permite desenvolver aplicativos web que rodam na maioria dos dispositivos móveis, como iphone e Androide. Esses aplicativos podem rodar tanto on-line como off-line e acessar certos recursos do dispositivo em que for executado. Para ser compatível com a plataforma de cada dispositivo móvel, as aplicações são desenvolvidas utilizando HTML5, CSS3 e JavaScript. A interface é baseada em telas HTML e CSS, e sua lógica de programação e acesso a recursos do dispositivo é através do JavaScript. Isso significa que a aplicação não é verdadeiramente nativa para o dispositivo, porque é renderizada em visões web em vez dos componentes de interface de usuário nativos do framework do dispositivo e também não é uma aplicação puramente web, porque é empacotada como aplicação para distribuição e possui acesso a framework nativa do dispositivo. Para problemas de compatibilidade com dispositivos móveis que possuem navegadores web mais antigos, o PhoneGap embarca uma versão de HTML5 e uma WebView (janela especial de navegação). Também possui suporte a extensibilidade, ou

11 seja, suporta plug-ins para oferecer mais funcionalidades de acesso nativo aos recursos dos dispositivos aos desenvolvedores de aplicativos. 9. jquery Mobile Conforme [JQurey Mobile 2015] a framework jquery Mobile é baseada no jquery (framework amplamente utilizada para simplificar a programação JavaScript) para desenvolver interface de usuário sensível ao toque que roda nos mais populares smartphones, tablets, e-readers e desktop. Foi desenvolvida com acessibilidade e acesso universal em mente. Segue os princípios de otimização progressiva e web design responsivo. Desde seu início, o jquery Mobile foi desenhado para trabalhar dentro de um contexto de web design responsivo. Seus documentos e formulários tem uma série de elementos responsivos. Todos os seus widgets são construídos para serem 100% flexíveis em largura para caberem facilmente dentro de qualquer sistema de leiaute responsivo que se queira construir. 10. Conclusão Desenvolver um site ou uma aplicação web utilizando a abordagem de web design responsivo, traz inúmeros benefícios tanto para acessibilidade quanto para a organização do próprio projeto e dos conteúdos das páginas. Fica evidente que informações importantes não podem ser removidas como tampouco informações desnecessárias devam ser mantidas. Inúmeras tecnologias e frameworks estão disponíveis para auxiliar na construção do leiaute responsivo, como o PhoneGap e o jquery Mobile. Porém os componentes principais continuam sendo o HTML5 o CSS3 e o JavaScript. Não existe uma formulação específica para desenvolver um projeto responsivo, além de várias recomendações, como as da W3C de acessibilidade. Iniciar utilizando a abordagem mobile first e depois seguir para o desktop parece ser uma boa estratégia. Também temos que convir que com a explosão dos dispositivos mobiles, não é mais conveniente desenvolver uma aplicação web sem aplicar a abordagem de design responsivo. Conforme anunciado por [Makino et al. 2015], o Google a partir do dia 21 de abril de 2015 ajusta seus mecanismos de busca para favorecer nos resultados os sites que estiverem otimizados para o dispositivo que o usuário estiver usando, isso impactará consideravelmente os resultados do Google e ajudará os usuários a ter uma melhor experiência de uso dos sites resultantes. Isso praticamente obriga os sites que ainda não se adequaram a abordagem responsiva, que o façam o quanto antes, caso queiram manter-se competitivos e acessados pelos usuários que utilizam dispositivos móveis. Referências Bootstrap (2015). CSS Bootstrap. Disponível em: <http://getbootstrap.com/css>. Acesso em: 27 jun Gallagher, N. and Neal, J. (2015). Normalize.css: Make browsers render all elements more consistently. Disponível em: <http://necolas.github.io/normalize.css>. Acesso em: 27 jun

12 JQurey Mobile (2015). jquery Mobile. Disponível em: <https://jquerymobile.com>. Acesso em: 27 jun Kimura, M. H., Kemczinski, A., Gasparini, I., et al. (2012). Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign. Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign, v. 7, n. 4, p Klein, D. and Gubic, A. (2014). Responsive website design for higher education utilizing mobile centric features. v. 2, n. 1, p Lestari, D. M., Hardianto, D. and Hidayanto, A. N. (2014). Analysis of user experience quality on responsive web design from its informative perspective. Interntional Journal of Software Engineering and its Applications. Science and Engineering Research Support Society, v. 8, n. 5, p Makino, T., Jung, C. and Phan, D. (2015). Official Google Webmaster Central Blog: Finding more mobile-friendly search results. Disponível em: <http://googlewebmastercentral.blogspot.com.br/2015/02/finding-more-mobilefriendly-search.html>. Acesso em: 27 jun Mayer, E. (2015). CSS Tools: Reset CSS. Disponível em: <http://meyerweb.com/eric/tools/css/reset>. Acesso em: 27 jun PhoneGap (2015). PhoneGap. Disponível em: <http://phonegap.com>. Acesso em: 27 jun Silva, M. S. (2014). Web Design Responsivo. Sindh, K. (2012). Smart Phones Application development using HTML5 and related technologies: A tradeoff between cost and quality. v. 9, n. 3, p Subić, N., Krunić, T. and Gemović, B. (2014). Responsive web design Are we ready for the new age? v. 2, n. 1, p W3C (2015a). CSS Fonts Module Level 3. Disponível em: <http://www.w3.org/tr/css3-fonts/#propdef-font-size>. Acesso em: 27 jun W3C (2015b). Media Queries Level 4. Disponível em: <http://www.w3.org/tr/mediaqueries-4>. Acesso em: 27 jun W3C (2015c). srcset attribute. Disponível em: <http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-srcset>. Acesso em: 27 jun W3C (2015d). Web Accessibility Initiative (WAI). Disponível em: <http://www.w3.org/wai>. Acesso em: 27 jun Wroblewski, L. (2009). Mobile First. Disponível em: <http://www.lukew.com/ff/entry.asp?933>. Acesso em: 27 jun

@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google {

@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google { .pauta{ Introdução; Web Design Responsivo; Princípios do Design Responsivo; Trabalhos Correlatos; HTML5, CSS3, JavaScript; Media Queries; Mobile First; Imagens e Mídias Flexíveis; Mídias Flexíveis; Acessibilidade

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

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

Responsive Web Design

Responsive Web Design Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos

Leia mais

Web Design Responsivo

Web Design Responsivo Capítulo 1 Web Design Responsivo Arlino Henrique Magalhães de Araújo Abstract The growing variety of devices where the websites are shown (laptops, tablets, netbooks, mobile phones, small screen desktops,

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

TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB

TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB Tiago Volpato 1, Claudete Werner 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil tiagovolpatobr@gmail.com,

Leia mais

Monday, January 23, 12. Introdução sobre Acessibilidade na web

Monday, January 23, 12. Introdução sobre Acessibilidade na web Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.

Leia mais

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

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE 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 Jonas Pinto Esteves CRIANDO APLICAÇÕES

Leia mais

SETIS- III Seminário de Tecnologia Inovação e Sustentabilidade 4 e 5 de novembro de 2014.

SETIS- III Seminário de Tecnologia Inovação e Sustentabilidade 4 e 5 de novembro de 2014. Melhores práticas na utilização de media queries para sites responsivos Andre Sandes Farias andre.sandes@gmail.com Resumo: Esse artigo tem como objetivo mostrar dentro do ambiente de desenvolvimento de

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

USANDO RESPONSIVE WEB DESIGN PARA DESENVOLVIMENTO DE SISTEMAS WEB. Rodrigo Eduardo Boni orientado por Prof. Jhony Alceu Pereira Orientador - FURB

USANDO RESPONSIVE WEB DESIGN PARA DESENVOLVIMENTO DE SISTEMAS WEB. Rodrigo Eduardo Boni orientado por Prof. Jhony Alceu Pereira Orientador - FURB USANDO RESPONSIVE WEB DESIGN PARA DESENVOLVIMENTO DE SISTEMAS WEB Rodrigo Eduardo Boni orientado por Prof. Jhony Alceu Pereira Orientador - FURB ROTEIRO Introdução Objetivos Fundamentação teórica Especificação

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

MAKE IT RESPONSIVE! The Responsive approach on Mobile, Tablet and Desktop Web Development.

MAKE IT RESPONSIVE! The Responsive approach on Mobile, Tablet and Desktop Web Development. MAKE IT RESPONSIVE! The Responsive approach on Mobile, Tablet and Desktop Web Development. Carlos Martins Junho, 27 2012 Quem sou eu? AGENDA The WWW Web World War III O que é o RWD? Mãos ao trabalho Principais

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

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

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

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

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

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

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

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

WEB DESIGN RESPONSIVO: CAMINHOS PARA UM SITE ADAPTÁVEL

WEB DESIGN RESPONSIVO: CAMINHOS PARA UM SITE ADAPTÁVEL EXATAS E TECNOLÓGICAS ISSN IMPRESSO - 2359-4934 ISSN ELETRÔNICO - 2359-4942 DOI - 10.17564/2359-4934.2015v1n2p75-84 WEB DESIGN RESPONSIVO: CAMINHOS PARA UM SITE ADAPTÁVEL Fabiano dos Santos França 1 RESUMO

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

TAW Tópicos de Ambiente Web

TAW Tópicos de Ambiente Web TAW Tópicos de Ambiente Web Teste rveras@unip.br Aula 11 Agenda Usabilidade Compatibilidade Validação Resolução de tela Velocidade de carregação Acessibilidade Testes Nesta etapa do projeto do web site

Leia mais

Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena!

Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena! Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena! É engraçado como temos receio do novo. Me acostumei a desenvolver sites do zero, desde a primeira linha de código. Achava estranho

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Copyright 2014 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer

Leia mais

HTML5 - POR QUE USÁ-LO?

HTML5 - POR QUE USÁ-LO? HTML5 - POR QUE USÁ-LO? Ícaro Carlos Andrade Costa (icarocarlosandrade@gmail.com) Igor Antônio Santos Andrade (igorantonioandrade@gmail.com) RESUMO A linguagem HTML surgiu a mais de duas décadas como um

Leia mais

BURIPACK - DESIGN E INTERFACES WEB

BURIPACK - DESIGN E INTERFACES WEB 1 de 5 BURIPACK - DESIGN E INTERFACES WEB BC 41 LÓGICA DE PROGRAMAÇÃO COM JAVASCRIPT E HTML (32h) Ajudar aos alunos no desenvolvimento do raciocínio lógico, a partir da prática em lógica de programação,

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

ARTHUR DE ALMEIDA PEREIRA DA SILVA

ARTHUR DE ALMEIDA PEREIRA DA SILVA UNIVERSIDADE FEDERAL DO ESTADO DO RIO DE JANEIRO CENTRO DE CIÊNCIAS EXATAS E TECNOLOGIA ESCOLA DE INFORMÁTICA APLICADA DESIGN RESPONSIVO: TÉCNICAS, FRAMEWORKS E FERRAMENTAS ARTHUR DE ALMEIDA PEREIRA DA

Leia mais

Grupo B - Sistemas com suporte pleno, exceto às funcionalidades AJAX para navegação.

Grupo B - Sistemas com suporte pleno, exceto às funcionalidades AJAX para navegação. jquery mobile I- Definição: jquery mobile é um framework para desenvolvimento web, explorando a interatividade através de toque, destinado à criação de aplicações para smartphones e tablets e visando fornecer

Leia mais

O W3C Futuro da Web HTML5. Março/2011 Web Expo Fórum

O W3C Futuro da Web HTML5. Março/2011 Web Expo Fórum O W3C Futuro da Web HTML5 Março/2011 Web Expo Fórum Web e W3C Tim Berners-Lee criou / propôs 2 a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP + HTML) Web e W3C 3 Tim

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

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

#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

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

DOMINGOS DE CARVALHO VILLELA JÚNIOR

DOMINGOS DE CARVALHO VILLELA JÚNIOR I DOMINGOS DE CARVALHO VILLELA JÚNIOR WEB DESIGN RESPONSIVO: One Web com usabilidade adaptativa aos dispositivos Projeto Agente Local de Inovação ASSIS 2013 II INOVA PAULA SOUZA NÚCLEO DE INOVAÇÃO TECNOLÓGICA

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

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

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

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

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

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

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

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

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

Acessibilidade na Web para Deficientes Auditivos: Um Estudo de Caso do Site do Vestibular da UFG

Acessibilidade na Web para Deficientes Auditivos: Um Estudo de Caso do Site do Vestibular da UFG Acessibilidade na Web para Deficientes Auditivos: Um Estudo de Caso do Site do Vestibular da UFG Adoniran Dias Ribeiro Andrade, Renato de Freitas Bulcão Neto Instituto de Informática Universidade Federal

Leia mais

5 Detalhes da Implementação

5 Detalhes da Implementação Detalhes da Implementação 101 5 Detalhes da Implementação Neste capítulo descreveremos detalhes da implementação do Explorator que foi desenvolvido usando o paradigma MVC 45 e o paradigma de CoC 46 (Convention

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

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

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

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

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

ANEXO 11. Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação.

ANEXO 11. Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação. ANEXO 11 O MATRIZ Para o desenvolvimento de sites, objeto deste edital, a empresa contratada obrigatoriamente utilizará o framework MATRIZ desenvolvido pela PROCERGS e disponibilizado no início do trabalho.

Leia mais

Plone na Plataforma Mobile. Fabiano Weimar dos Santos e Giuseppe Romagnoli

Plone na Plataforma Mobile. Fabiano Weimar dos Santos e Giuseppe Romagnoli Plone na Plataforma Mobile Plone na Plataforma Mobile Plone na Plataforma Mobile Fabiano FabianoWeimar Weimardos dossantos Santos Os amigos me chamam de Os amigos me chamam dexiru Xiru Mestre em Inteligência

Leia mais

ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC

ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC Plano do Curso. Curso One. Os Cursos desenvolvidos pela One To One, são reflexo da experiência profissional no âmbito da Formação, do Design

Leia mais

18/2013- REITORIA/IFRN

18/2013- REITORIA/IFRN P 27 Caderno de Provas WEB DESIGN Edital nº 18/2013- REITORIA/IFRN 26 de janeiro de 2014 INSTRUÇÕES GERAIS PARA A REALIZAÇÃO DA PROVA Use apenas caneta esferográfica azul ou preta. Escreva o seu nome completo

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

Adaptando o Plone para Plataformas Móveis. Fabiano Weimar dos Santos e Giuseppe Romagnoli

Adaptando o Plone para Plataformas Móveis. Fabiano Weimar dos Santos e Giuseppe Romagnoli Adaptando o Plone para Plataformas Móveis Adaptando o Plone para plataformas móveis Adaptando o Plone para plataformas móveis Fabiano FabianoWeimar Weimardos dossantos Santos Os amigos me chamam de Os

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

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

Usabilidade e Adaptabilidade Web: Uma proposta de Inovação de um Sistema de Apoio à Gestão Escolar

Usabilidade e Adaptabilidade Web: Uma proposta de Inovação de um Sistema de Apoio à Gestão Escolar Usabilidade e Adaptabilidade Web: Uma proposta de Inovação de um Sistema de Apoio à Gestão Escolar Sandro Marques de Carvalho 1, Eudis Oliveira Teixeira 2 1 Faculdade de Ciências Aplicadas e Sociais de

Leia mais

INDE X AÇÃO DE DISPOSITIVOS MÓVEIS EM 2015 PEL A SIZMEK. Análises de formatos, adoção e desperdício em dispositivos móveis.

INDE X AÇÃO DE DISPOSITIVOS MÓVEIS EM 2015 PEL A SIZMEK. Análises de formatos, adoção e desperdício em dispositivos móveis. INDE X AÇÃO DE DISPOSITIVOS MÓVEIS EM 2015 PEL A SIZMEK Análises de formatos, adoção e desperdício em dispositivos móveis. CO N T EÚ D O S O RESUMO GERAL DO MARKETING PARA MÓVEIS Inventário Móvel CH A

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

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

Inicialização Rápida do Novell Vibe Mobile

Inicialização Rápida do Novell Vibe Mobile Inicialização Rápida do Novell Vibe Mobile Março de 2015 Introdução O acesso móvel ao site do Novell Vibe pode ser desativado por seu administrador do Vibe. Se não conseguir acessar a interface móvel do

Leia mais

Casa do Código Livros para o programador Rua Vergueiro, 3185-8º andar 04101-300 Vila Mariana São Paulo SP Brasil

Casa do Código Livros para o programador Rua Vergueiro, 3185-8º andar 04101-300 Vila Mariana São Paulo SP Brasil 2012, Casa do Código Todos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998. Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem autorização prévia por escrito da

Leia mais

O W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011

O W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011 O W3C HTML5 Web Semântica Março/2011 SENAC Ribeirão Preto Road Show TI 2011 Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP

Leia mais

TECNOLOGIAS E FRAMEWORKS PARA O DESENVOLMENTO DE INTERFACES WEB

TECNOLOGIAS E FRAMEWORKS PARA O DESENVOLMENTO DE INTERFACES WEB TECNOLOGIAS E FRAMEWORKS PARA O DESENVOLMENTO DE INTERFACES WEB Marcelo Rodrigo da Silva Ribeiro 1, Ricardo Ribeiro Rufino 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil marcelo.rodrigo@live.com,

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

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

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

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

Responsive Web Design e User Experience na adequação funcional de sites empresariais para dispositivos móveis

Responsive Web Design e User Experience na adequação funcional de sites empresariais para dispositivos móveis Faculdade de Tecnologia Responsive Web Design e User Experience na adequação funcional de sites empresariais para dispositivos móveis Coordenador do Projeto: Prof. Dr. Edécio Fernando Iepsen Pesquisador

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

jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI 2a Edição Maurício Samy Silva Novatec

jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI 2a Edição Maurício Samy Silva Novatec jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI 2a Edição Maurício Samy Silva Novatec Copyright 2012, 2013 da Novatec Editora Ltda. Todos os direitos

Leia mais

PADRÕES PARA O DESENVOLVIMENTO NA WEB

PADRÕES PARA O DESENVOLVIMENTO NA WEB PADRÕES PARA O DESENVOLVIMENTO NA WEB Ederson dos Santos Cordeiro de Oliveira 1,Tiago Bonetti Piperno 1, Ricardo Germano 1 1 Universidade Paranaense (UNIPAR) Paranavaí PR- Brasil edersonlikers@gmail.com,

Leia mais

jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI Maurício Samy Silva Novatec

jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI Maurício Samy Silva Novatec jquery Mobile Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jquery e jquery UI Maurício Samy Silva Novatec Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar os principais problemas de acessibilidade na Internet. Apresentar as principais deficiências e as tecnologias de apoio.

Leia mais

Frameworks para criação de Web Apps para o Ensino Mobile

Frameworks para criação de Web Apps para o Ensino Mobile 393 Frameworks para criação de Web Apps para o Ensino Mobile Lucas Zamim 1 Roberto Franciscatto 1 Evandro Preuss 1 1 Colégio Agrícola de Frederico Westphalen (CAFW) Universidade Federal de Santa Maria

Leia mais

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando

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

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

ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC

ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC ONE TOONE CURSOS PARTICULARES HTML5 + CSS3 + ADOBE DREAMWEAVER CC Plano do Curso. Curso One. Os Cursos desenvolvidos pela One To One, são reflexo da experiência profissional no âmbito da Formação, do Design

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

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

MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES. MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com. URL: http://esganarel.home.sapo.

MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES. MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com. URL: http://esganarel.home.sapo. MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com URL: http://esganarel.home.sapo.pt GABINETE: 1G1 - A HORA DE ATENDIMENTO: SEG. E QUA. DAS 11H / 12H30 (MARCAÇÃO

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

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

Leia mais

Pré-requisito Conhecimento básico do sistema operacional Windows ou Mac OS.

Pré-requisito Conhecimento básico do sistema operacional Windows ou Mac OS. 1 e Descrição Este treinamento abortará conceitos essenciais de HTML e CSS para a construção de páginas web através do uso do Adobe, com a mínima necessidade de intervir ou escrever códigos, utilizando

Leia mais

A importância dos padrões para a WEB e o ASA. Palestrante: Heitor de Souza Ganzeli

A importância dos padrões para a WEB e o ASA. Palestrante: Heitor de Souza Ganzeli A importância dos padrões para a WEB e o ASA Palestrante: Heitor de Souza Ganzeli Agenda INTRODUÇÃO FUNCIONAMENTO MOTIVAÇÃO SISTEMA Siga os padrões Internet e Dê ASAs a seu site Castro no site: http://asa.nic.br

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

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