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

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

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

Transcrição

1 Melhores práticas na utilização de media queries para sites responsivos Andre Sandes Farias Resumo: Esse artigo tem como objetivo mostrar dentro do ambiente de desenvolvimento de websites responsivos, refletir acerca das melhores práticas na utilização dos Media Queries. Será realizada uma pesquisa bibliográfica para identificar as características das especificações sobre Media Queries considerando conceitos como: experiência do usuário na utilização de dispositivos movéis; Definição básica do termo Responsive Web Design; Definições técnicas e práticas dos Media Queries, falando de sua origem nos Media Types, seus atributos, operadores, breakpoints. Palavras-chave: Sites Responsivos. Media Queries. Experiência Mobile. Responsive Web Design. Media Type. Breakpoints. 1. Introdução A cada ano que passa pode-se ver que a tecnologia cresce de forma exponencial, principalmente, quando o foco é a internet, basta observar na evolução e no surgimento de novas tecnologias, linguagens de programação, hardwares, tablets, smartphones, além adaptação de produtos existentes para ter acesso a internet ( TVs, relógios, geladeiras ). Com isso, fazendo que o acesso à internet não esteja mais restrito apenas ao computador desktop. Outro marco importante foi o crescimento da utilização da internet mobile, tendo uma grande ajuda devido ao lançamento do iphone. Pois, com a grande popularidade, fez com que toda empresa quisesse que o seu site aparecesse corretamente nele. Hoje, não temos só o iphone, mas sim uma gama de aparelhos com resoluções, tamanhos e recursos diferentes. Por conta disso, existe cada vez mais a preocupação em adequar o layout do um site, para ter uma melhor experiência quando acessado via um desses dispositivos. Pode-se ver esse aumento através de dados do estudo divulgado no dia 26 de Junho de 2014, pelo Centro Regional de Estudos para o Desenvolvimento da Sociedade da Informação, que mostram que em dois anos dobrou o número de brasileiros que acessam a internet por meio de celulares, comparado ao mesmo estudo feito nos anos 128

2 anteriores. Sendo 4% em 2010, 15% em 2011, 20% em 2012 e chegando a 31% em 2013 (CETIC, 2013). Considerando questões como as apresentadas, este artigo tem como objetivo mostrar dentro do ambiente de desenvolvimento de websites responsivos, as melhores práticas na utilização dos Media Queries. Para tanto, será realizada uma pesquisa bibliográfica para identificar as características das especificações sobre Media Queries. Nesse sentido, também serão discutidos os seguintes conceitos: A experiência do usuário na utilização de dispositivos móveis; Definição básica do termo Responsive Web Design; Definições técnicas e práticas dos Media Queries, falando de sua origem nos Media Types, seus atributos, operadores, breakpoints, entre outras coisas mais. 2. Experiência mobile A questão está em contemplar a quantidade de informação apresentada em um site acessado via um computador desktop em um aparelho que além de ter um hardware inferior, também tem uma tela de médio ou pequeno porte. Isto porque o usuário móvel tem menor capacidade de processar e absorver conteúdo que um usuário que está sentado em frente a um computador de mesa (RISCHPATER, 2000, p.33, apud CYBIS, 2010, p.257) Segundo Hiltunen (2000), a experiência do usuário móvel é definida como uma composição de cinco fatores. Utilidade, Usabilidade, Disponibilidade do sistema, Estética e Processo off-line. Estes fatores são apresentados na figura 1. Figura 1- Experiência de usuários com dispositivos móveis Fatores Utilidade Usabilidade Disponibilidade do sistema Estética Descrição Refere-se à percepção do usuário móvel em relação ao fato de o serviço lhe agregar algum valor dentro de seu contexto, ou seja, quão vantajosa é a opção de utilizá-lo em relação a outras opções. Segundo a norma ISO 9241:11 é definida como à eficácia, eficiência e satisfação do usuário na realização de seus objetivos com o sistema interativo. É o fator mais importante para o usuário móvel. O serviço deve estar sempre on-line e funcionando perfeitamente. Longos períodos de espera na transmissão das informações, ausência de sinal, interrupções ou quedas de conexão são extremamente frustrantes. Refere-se ao apelo visual da aplicação, à sua atratividade para o usuário. As limitações físicas das telas podem restringir as opções do designer em relação à quantidade e a qualidade gráfica da informação que está disponível. 129

3 Processo off-line Complementa a experiência do usuário. Assim como para os serviços fornecidos pela web, há diversos elementos que contribuem para a experiência do usuário, mas que não estão relacionados ao projeto da interação, por exemplo, a confiança no nome da empresa que ofereçe o serviço, a segurança dos dados, além de todo o processo de retaguarda, como o suporte ao usuário ou a rapidez e a qualidade na entrega de uma mercadoria. Fonte: Adaptado de Hiltunen (2000) A partir desses fatores, vimos que não é somente uma questão de melhorar a usabilidade do website, e sim, deve-se ter uma preocupação com toda a experiência com o dispositivo. Pois, segundo Norman (2004), nós não usamos simplesmente o produto, mas nos tornamos emocionalmente envolvidos por ele, sendo que no caso de computadores de mão é muito mais intenso. 3. Responsive web design Com o surgimento cada vez mais rápido de diferentes tipos de aparelhos e resoluções, fez com que se torne uma prática inviável para os designers e desenvolvedores criarem versões dos websites específica para cada modelo de dispositivo. Na busca de uma solução que ajudasse no desenvolvimento para essas diferentes versões de um website, surgiu o Responsive Web Design (MARCOTTE, 2011). Responsive Web Design é a abordagem que tem como base não criar projetos desconectados, como uma versão adaptada para cada tipo, dispositivo ou navegador, e sim devemos tratá-los como versões de uma mesma experiência. A concepção e o desenvolvimento deve responder ao comportamento do usuário e também as características do meio ambiente aonde esta sendo acessado, como o tamanho da tela, plataforma e orientação (MARCOTTE, 2011). Segundo Ethan (2011), na prática pode-se dividir o conceito de Responsive Web Design em três principais itens, Grid Flexível (Layout fluído), imagens e mídias flexíveis e o uso inteligente dos Media Queries CSS. Pois, quando o usuário muda de seu notebook para o seu smartphone, o site deve mudar, automaticamente, ajustando os elementos a nova resolução. Em outras palavras, o site deve ter a tecnologia para identificar, automaticamente, essa mudança. Eliminando a necessidade de uma concepção diferente e o desenvolvimento para cada novo aparelho no mercado. 130

4 4 Media Queries CSS Seguindo o conceito sugerido por Ethan (2011), os 2 primeiros itens, Grid Flexível e Imagens/Mídias flexíveis, fazem com que os componentes do seu website tenham valores de largura flexíveis e trabalhem de forma a se ajustar de acordo com a resolução do dispositivo que está sendo acessado, com isso, faz com que o terceiro item seja um ponto chave dentro do processo de desenvolvimento, pois através do uso do Media Queries, o desenvolvedor tem o controle de como cada componente do seu website vai aparecer em cada tamanho de resolução. O Media Queries é uma recomendação da W3C que foi incluída na nova versão do CSS (CSS3). Mas, antes de aprofundar mais sobre o Media Queries, é interessante falar um pouco sobre os Media Types. (RIVOAL,et al 2012) 4.1 Media type O Media Types também é uma recomendação da W3C, que já existe desde a versão 2 do CSS. Com Media Types, é possível apresentar o site de maneira diferente, dependendo da media aonde ele é acessado. Segue a tabela com as propriedades que a função de Media Types disponibiliza: Figura 2 - Definição dos tipos de Media Types Tipo All Braille Embossed Handheld Print Projection Screen Speech Descrição A folha de estilo serve para todos os dispositivos. Para dar feedback quando se usa algum dispositivo tátil. Impressoras em braille paginadas. Dispositivos móveis (comumente com tela pequena e largura de banda limitada). Para material paginado e para documentos visualizados na tela no modo Visualização de Impressão. Destinado a apresentações projetadas como, por exemplo, projetores. Destinado, principalmente, para telas coloridas de computador. Para sintetizadores de voz TTY Dipositivos de grade fixa para exibição de caracteres, com o teletypes, terminais e alguns outros. TV Aparelho tipo TV (baixa resolução, cores, scroll limitado, som). 131

5 Fonte: Adaptado de site W3C Através desse recurso o desenvolvedor tem a possibilidade de fazer com que o site utilize o CSS específico de acordo com o dispositivo que o mesmo está sendo acessado, como por exemplo: <link rel="stylesheet" type="text/css" media="print" href="print_style.css" /> No exemplo o atributo de Media Type está especificando como print, assim somente quando alguém quiser imprimir o documento que levam esta tag é que o arquivo CSS print_style.css entrará em ação, sendo que para os demais tipos de media ele não é ativado. 4.2 Definição Com o surgimento de novos tipos de dispositivos, sendo que muitos deles podem se encaixar em duas ou mais tipos de Media Types, a utilização de tipo de recurso começou a não atender mais as necessidades atuais dos websites. Um exemplo bem conhecido é o iphone, que tem características tanto de handheld, quanto de desktop. Analisando essa situação a W3C trouxe no CSS3 as especificações do Media Queries, que consiste na escolha do tipo de mídia, seguindo a base do Media Type, e pode conter zero ou mais expressões que verificam as condições de um determinado recurso de mídia. Para a criação dessas condições é possível utilizar "largura", "altura", "cor", entre outros. Assim, o conteúdo vai se adaptar de acordo com expressões feitas (RIVOAL, et al 2012). Figura 3 - Definição dos tipos de Media Queries e exemplos Condição Descrição Exemplo Width Largura do viewport (janela do browser incluindo a barra de rolagem). Valor: medidas de comprimento. <link rel="stylesheet" media="print and (min-width: 25cm)" href="http:// " /> Height Altura do viewport (janela do browser screen and (max-width: 132

6 a barra de rolagem). Valor: medidas de comprimento. 995px), screen and (max-height: 700px) { } Device-width Device-height Orientation Aspect-ratio Device-aspectratio Color Color-index Monochrome Resolution Scan Grid Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha. Valor: medidas de comprimento. Altura da mídia. Valor: medidas de comprimento. Orientação da mídia. Valor: portrait (retrato) ou landscape (paisagem) Aceita prefixo min/max: Não. Proporção. Razão entre os valores do width e height. Apenas aplicável a mídias do tipo bitmap. Aceita prefixo min/max: Não. Proporção da tela do dispositivo. Aceita prefixo min/max: Não. Número de bits por cor. Se o valor for zero o dispositivo é monocromático. Valor: numérico Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero. Valor: numérico Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0. Valor: numérico Resolução do dispositivo (densidade por pixel). Apenas aplicável a mídias do tipo bitmap. Valor: número em DPI ou DCM Tipo de formação de imagens especifico para televisores. Valor: progressive (progressivo) ou interlace (entrelaçado) Aceita prefixo min/max: Não. Determina se o dispositivo é baseado em bitmap ou em um grid (exemplo: um screen and (device-width: 800px) { } <link rel="stylesheet" media="screen and (device-height: 600px)" all and (orientation:portrait) { all and (orientation:landscape) { screen and (min-aspectratio: 1/1) {... screen and (device-aspectratio: 16/9) { all and (color) { all and (min-color: 1) { all and (color-index) { all and (min-color-index: 1) { all and (monochrome) { all and (minmonochrome: 1) { print and (min-resolution: 300dpi) { tv and (scan: progressive) { handheld and (grid) and (max-width: 15em) { } 133

7 tty ou um telefone com apenas uma fonte fixa). Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Aceita prefixo min/max: Não. Fonte: Adaptado de site handheld and (grid) and (device-max-height: 7em) { } 4.3 OPERADORES LÓGICOS Com a utilização desses operadores, os desenvolvedores vão ter maior controle sobre as expressões para a criação do layout. Quais são esses operadores: Figura 4 - Tipos de operadores lógicos Operadores Descrição Exemplo and e or not only Várias Media Queries podem ser combinadas em uma lista (separada por vírgulas) de consultas. Se uma ou mais das consultas são verdadeiras, toda a lista é verdadeira; do contrário, é falsa. Na sintaxe de media queries, a palavra and expressa o operador lógico AND e a vírgula expressa o operador lógico OR. O operador lógico NOT é indicado pela palavra not. A presença da palavra not no início da consulta nega o resultado, ou seja, se a consulta de mídia for verdadeira, sem o not ela se torna falsa (e vice-versa). Os navegadores que suportam somente Media Types não irão reconhecer a palavra-chave not e a folha de estilo associada, portanto, não será aplicada. A palavra-chave only pode ser usada para esconder as folhas de estilo de agentes de usuáriomais antigos. Os agentes devem começar a processar as consultas de mídia com only como se a palavra-chave only não estivesse screen and (color), print and (color) {... } <link rel="stylesheet" media="not screen and (color)" href="style.css"> <link rel="stylesheet" media="only screen and (color)" href="example.css"> 4.4 BREAKPOINTS Fonte: Adaptado de site W3C Apesar da grande quantidade de parâmetros para criação das condicionais do Media Queries, para a necessidades dos sites atuais, pouco deles são realmente utilizados, sendo a largura e altura do display e a orientação do dispositivo. Através deles podemos declarar regras de CCS especificas de acordo com o tamanho do dispositivo ou do navegador (ZEMEL, 2012). A configuração desses pontos de interrupção, também chamados de breakpoints, é um fator muito importante para o desenvolvimento de um website layout responsive, 134

8 pois com a definição deles o desenvolvedor vai fazer com que o layout se adapte melhor a cada tamanho de tela. Como é feita a definição desses breakpoints? No início dos estudos sobre Responsive Web Design, alguns desenvolvedores escolheram seguir os tamanhos dos dispositivos existentes (ZEMEL, 2012), por exemplos: Smartphones only screen and (min-device-width : 320px) and (maxdevice-width : 480px) Notebooks e Desktops only screen and (min-width : 1224px) Mas, em pouco tempo foi constatado que esse método não era uma boa solução, pois, o lançamento de novos dispositivos era cada vez mais rápido e com diversos tamanhos de telas, assim fazer um breakpoint para cada tamanho seria inviável. Ainda hoje não existe um consenso geral sobre qual o melhor ou mais eficiente modelo de utilização dos breakpoints (ZEMEL, 2012). Com o fato de não ser possível especificar um conjunto de breakpoints que sejam os melhores, pois cada projeto web tem suas próprias peculiaridades e pede uma implementação diferenciada dos demais. Mas, é possível chegar em uma estrutura base, aonde o desenvolvedor pode ir apenas ajustando os itens principais do projeto. Segue abaixo alguns dos principais frameworks usados no mercado (ZEMEL, 2012). Figura 5 - Exemplos de frameworks Framework Estrutura 320 and print { only screen and (min-width: 480px) {... only screen and (min-width: 600px) {... only screen and (min-width: 768px) {... only screen and (min-width: 992px) {... only screen and (min-width: 1382px) {... only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {... } Less Framework /* Tablet Layout only screen and (min-width: 768px) and (max-width: 991px) {... } /* Mobile Layout only screen and (max-width: 767px) {... } /* Layout largo de mobile only screen and (min-width: 480px) and (max-width: 767px) {... } /* Retina display only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min- 135

9 device-pixel-ratio: 2) {... } Skeleton /* Menor que 960 only screen and (max-width: 959px) {... } /* Tablet Portrait ao padrão 960 only screen and (min-width: 768px) and (max-width: 959px) {... } /* Todos tamanhos de mobile only screen and (max-width: 767px) {... } /* Mobile em landscape a tablet Portrait only screen and (min-width: 480px) and (max-width: 767px) {... } /* Mobile em portrait a mobile em landscape only screen and (max-width: 479px) {... } Twitter Bootstrap /* Telefones em landscape e abaixo (max-width: 480px) {... } /* Telefone em landscape a tablet em portrait (max-width: 767px) {... } /* tablet em portrait a landscape e desktop (min-width: 768px) and (max-width: 979px) {... } /* Desktop grande (min-width: 1200px) {... } Fonte: Adaptado de Zemel (2012) A partir dos exemplos citados acima é possível verificar que apesar de alguns breakpoints em comum, existem várias diferenças entres a estrutura de cada um deles. Assim, dependendo das especificações do projeto, o desenvolvedor pode criar seus próprios breakpoints ou escolher um framework que se encaixe melhor na estrutura definida a ser desenvolvida (ZEMEL, 2012). 5 Melhores práticas para utilização dos Media Queries Conhecendo a estrutura e o funcionamento dos Media Queries, o desenvolvedor já pode começar a montar o CSS e sair criando vários breakpoints? Antes disso é preciso levar em consideração algumas questões de organização muito importantes sobre seu uso. 5.1 Criar arquivos separados ou em um arquivo único É possível fazer a chamada do Media Queries seguindo os padrões do CSS, assim pode-se incluir todo o conteúdo em um único arquivo ou em vários de acordo com os parâmetros de breakpoints definidos. 136

10 <link rel="stylesheet" type="text/css" media="screen and (min-width:480px)" href="480.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width:768px)" only screen and (min-width: 480px) {... only screen and (min-width: 768px) {... } Cada uma das opções mostradas acima têm suas vantagens e desvantagens, abaixo alguns fatores importantes a serem considerados: Figura 6 - Prós e Contras Único arquivo Prós Somente 1 requisição HTTP Mais difícil de esquecer de atualizar Contras Tamanho do arquivo fi ca maior A medida que o projeto cresce, a manutenção fi ca mais difícil Uso de soluções JavaScript para funcionar em IE pra baixo Vários arquivos Para browsers que não suportam, o arquivo padrão é menor Melhor organização Fonte: Adaptado de Zemel (2012) Várias requisições HTTP Mais fácil de esquecer de atualizar algo Então, como definir qual usar? Sabendo que cada situação pode ter as suas peculiaridades, de uma forma geral várias requisições HTTP acabam sendo mais lentas que somente um arquivo de tamanho maior, a recomendação é que seja usada somente uma folha de estilos (ZEMEL, 2012). 5.2 Sobrepor ou empilhar Segundo as características que o CSS funciona, sobre a questão de aplicar o estilo em cascata. Com a utilização do Media Queries o desenvolvedor tem duas opções para trabalhar, que seriam, sobrepor ou empilhar os valores de acordo com as condições definidas, mostrados na figura 7. Figura 7 Exemplos de sobreposição ou empilhamento Sobreposição Empilhamento 137

11 @media all and (min-width:500px) { body { background: blue; font-family: serif; } all and (min-width:700px) { body { background: red; color: white; } all and (min-width:500px) and (maxwidth:699px) { body { background: blue; font-family: serif; } all and (min-width:700px) { body { background: red; color: white; font-family: serif; } } Fonte: Adaptado de Zemel (2012) Analisando a figura acima, vemos que no caso da sobreposição, quando a tela for do tamanho de 800px, as duas opções estarão ativas, então o background será vermelho. Pois, como vem depois, ele vai se sobrepor ao azul, já na opção do empilhamento as condições não ficam ativas ao mesmo tempo, porque uma começa aos 500px e termina no 699px e a outra começa em 700px. A principal questão é que o desenvolvedor tenha que repetir algumas propriedades, como no exemplo contem o font-family (ZEMEL, 2012). Figura 8 - Prós e Contras Prós Sobreposição Tamanho de arquivo menor (não é preciso repetir regras) Fácil de atualizar regras compartilhada (já que são declaras só uma vez) Contras Tamanhos de arquivos maiores Imagens substituídas/escondidas em partes posteriores do código continuam sendo baixadas por navegadores baseados em WebKit Empilhamento Browsers somente baixam imagens condizentes ao breakpoint atual Fonte: Adaptado de Zemel (2012) Arquivos maiores, já que algumas regras são repetidas em vários breakpoints Em atualizações, é mais fácil de esquecer de atualizar regras repetidas em alguns breakpoints Sobrepor estilos pode deixar o código mais enxuto, porém, com a manutenção do código, mais complexos. Já empilhar deixa o código maior, só que mais fácil de se entender. Então, quando os estilos entre os breakpoints são bastante diferentes é aconselhado o empilhamento, em outras situações a sugestão seria a sobreposição. 5.3 Versões antigas do Internet Explorer 138

12 Em versões antigas de alguns navegadores não há suporte para Media Queries, aonde temos como principal problema as versões do Internet Explorer anteriores a 9. Porém, como uma solução alternativa é possível usar Comentários Condicionais ou soluções em JavaScript. Sobre os comentários condicionais, a Microsoft disponibiliza o método de utilização em seu blog oficial. Um exemplo seria: <link rel="stylesheet" media="all" href="global.css"> <link rel="stylesheet" media="all and (max-width: 700px)" href="mobile.css"> <!--[if IEMobile 7]> <link rel="stylesheet" media="all" href="mobile.css"> <![endif]--> Em relação às soluções em JavaScript, existem uma grande variedade de opções, abaixo alguns exemplos mais conhecidos (ZEMEL, 2012): Respond - Suporte somente os parâmetros min-width and max-width, mas é bastante eficiente no que se propõe. css3-mediaqueries.js - É mais pesado e mais lento que o Respond, suporta mais parâmetros de Media Queries. Figura 9 - Prós e Contras Comentários Condicionais Prós Funciona sem JavaScript Todos os prós de Media Queries em vários arquivos Contras Usa somente um estilo para IEs antigos Todos os contras de usar Media Queries em vários arquivos JavaScript Vários breakpoints para IE (inclusive mudando em tempo real) Todos os prós em se usar um só arquivo para Media Queries Fonte: Adaptado de Zemel (2012) Não funciona quando o JavaScript está desabilitado Todos os contras em se usar 1 só arquivo para Media Queries É visto que a cada ano o uso dessas versões antigas dos navegadores esteja diminuindo, ainda deve demorar alguns anos para esse tipo de validação não ser mais utilizada. A forma mais comum é um misto dessas duas opções, aonde é utilizado as 139

13 soluções em JavaScript para o problema de não-suporte a Media Queries em IEs, mas, ela é aplicada dentro de um comentário condicional, para não ser carregada nos navegadores que já tem o suporte. 6 Considerações finais Como mostrado nas pesquisas na parte de introdução do artigo, tanto a quantidade de dispositivos e de acessos tende a crescer de forma exponencial. Com isso, a questão do desempenho no carregamento das informações, principalmente nos websites que tem um volume muito grande acessos. Na figura abaixo segue alguns exemplos. Amazon Yahoo! Mozilla Google Microsoft Shopzilla Experiência mobile Figura 10 Exemplos de desempenho 1s a mais no carregamento da página custa 1,6 bilhão de dólares por ano O tráfego do aumentou 9% a cada 400ms de melhora na velocidade; Ao cortar 2,2s da landing page do Firefox, o número de downloads aumentou em 15%; Na aplicação de um experimento, fez com que o carregamento da página tivesse um aumento de 0,4s para 0,9s. O que acarretou uma queda de 20% no tráfego de buscas; Desde 2010, a velocidade de carregamento dos sites é um dos fatores no ranking de buscas. A empresa mostrou que 2s a mais de latência no Bing diminuíam o faturamento em 4,3%; Uma diminuição no tempo de carregamento de 6s para 1,2s na página, proporcionou um aumentou nas vendas em 12%; 50% dos usuários mobile abandonam um site se ele não abre em até 10s. E 3 em cada 5 não voltam mais; Fonte: Adaptado de Lopes (apud ZEMEL, 2012, p.144) Mas só o conhecimento técnico mostrado não é suficiente para conseguir esse tipo de melhoria no desempenho. Segundo Zemel (2012) o desafio maior não é dominar a parte técnica do web design responsivo; o maior desafio é saber como, quando, se, onde e saber explicar todos os porquês de usar uma ou outra técnica responsiva.. Para conseguir essas respostas é preciso um bom planejamento e uma excelente análise para o desenvolvimento do website. Referências CYBIS, Walter. Ergonomia e Usabilidade: Conhecimentos, métodos e aplicações. São Paulo: Novatec Editora, ICT. Pesquisa sobre o uso das tecnologias de informação e comunicação no Brasil: TIC Domicílios e Empresas [coordenação executiva e editorial / Alexandre F. 140

14 Barbosa ; tradução/translation DB Comunicação(org.)]. São Paulo: Comitê Gestor da Internet no Brasil, Disponível em: < Acesso em: 8 out MARCOTTE, Ethan. Responsive Web Design. New York: A Book Apart, RIBEIRO, Paulo. Análise socioeconômica. Revista São Paulo, ano 5, n.20, set Disponível em: <www.social.net.br/analise>. Acesso em: 5 set ZEMEL, Tárcio. Web Design Responsivo: páginas Adaptáveis para todos os dispositivos. São Paulo: Casa do Código,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo 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

Leia mais

@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

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

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

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

Por mais que falemos sobre Design Responsivo ou Mobile First, é preciso entender o que aconteceu até aqui e principalmente, essencialmente, o que impulsionou tamanha revolução para chegarmos à maneira

Leia mais

DIFERENCIAIS SERVIÇOS. 1. Desenvolvimento De Sites Personalizados

DIFERENCIAIS SERVIÇOS. 1. Desenvolvimento De Sites Personalizados DIFERENCIAIS Acredito que o desenvolvimento de soluções para Internet não é um trabalho qualquer, deve-se ter certa experiência e conhecimento na área para projetar sistemas que diferenciem você de seu

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

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

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

Computer on the Beach 2014:: Usabilidade na Web :: Isabela Gasparini USABILIDADE NA WEB DO DESKTOP AOS DISPOSITIVOS MÓVEIS

Computer on the Beach 2014:: Usabilidade na Web :: Isabela Gasparini USABILIDADE NA WEB DO DESKTOP AOS DISPOSITIVOS MÓVEIS USABILIDADE NA WEB DO DESKTOP AOS DISPOSITIVOS MÓVEIS Isabela Gasparini isabela.gasparini @ udesc.br 2014 Roteiro IHC Conceito e áreas de atuação Qualidade de Uso Critérios para Qualidade de Uso Usabilidade

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

Desenvolvendo para WEB

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

Leia mais

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

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

Website para dispositivos Móveis. O futuro na palma de sua mão!

Website para dispositivos Móveis. O futuro na palma de sua mão! Website para dispositivos Móveis O futuro na palma de sua mão! Sites Mobile A Internet está sendo cada vez mais acessada através de telefones móveis e, como resultado, sites estão recebendo uma boa quantidade

Leia mais

ebook Aprenda como aumentar o poder de captação do seu site. por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação

ebook Aprenda como aumentar o poder de captação do seu site. por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação Sobre o Autor: Sempre fui comprometido com um objetivo de vida: TER MINHA PRÓPRIA EMPRESA. Mas assim como você, eu também ralei bastante

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

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

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

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

Desenvolvendo e Integrando Serviços Multiplataforma de TV Digital Interativa

Desenvolvendo e Integrando Serviços Multiplataforma de TV Digital Interativa Desenvolvendo e Integrando Serviços Multiplataforma de TV Digital Interativa Agenda Introdução Aplicações interativas de TV Digital Desafios de layout e usabilidade Laboratório de usabilidade Desafios

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

Manual do Usuário Android Neocontrol

Manual do Usuário Android Neocontrol Manual do Usuário Android Neocontrol Sumário 1.Licença e Direitos Autorais...3 2.Sobre o produto...4 3. Instalando, Atualizando e executando o Android Neocontrol em seu aparelho...5 3.1. Instalando o aplicativo...5

Leia mais

6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla

6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla 6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla O mercado brasileiro de dispositivos móveis em breve ganhará mais uma grande plataforma. Anunciado oficialmente

Leia mais

Qlik Sense Desktop. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados.

Qlik Sense Desktop. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik Sense Desktop Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik, QlikTech,

Leia mais

Melhores práticas para tratar dilemas de qualidade no desenvolvimento de aplicativos móveis

Melhores práticas para tratar dilemas de qualidade no desenvolvimento de aplicativos móveis CBSoft 2013 Trilha Indústria Melhores práticas para tratar dilemas de qualidade no desenvolvimento de aplicativos móveis Andreia Matos dos Santos Igor de Borborema Correia 21 de outubro de 2012 Palestrantes

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

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

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

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

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

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS APLICATIVOS HÍBRIDOS. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS APLICATIVOS HÍBRIDOS. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS APLICATIVOS HÍBRIDOS Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução PhoneGap PhoneGap Build GitHub INTRODUÇÃO Aplicativos nativos É

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

Proposta. Site em Flash (Ramo de Cosméticos) Versão: 01 Data: 09/08/2007 Validade: 30 dias. Para

Proposta. Site em Flash (Ramo de Cosméticos) Versão: 01 Data: 09/08/2007 Validade: 30 dias. Para Proposta Projeto: Site em Flash (Ramo de Cosméticos) Versão: 01 Data: 09/08/2007 Validade: 30 dias Para Contato: e-mail: enviapara@gmail.com Telefone: (21) 9657-2174 Escrita por Empresa: Swiss Web Ltda.

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

COMO ESTÁ SUA EMPRESA NA INTERNET?

COMO ESTÁ SUA EMPRESA NA INTERNET? COMO ESTÁ SUA EMPRESA NA INTERNET? NOSSA MISSÃO É ACELERAR SEU NEGÓCIO Para atender com excelência às demandas do constante crescimento do universo digital, trabalhamos muito além da criação de sites.

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

OneDrive: saiba como usar a nuvem da Microsoft

OneDrive: saiba como usar a nuvem da Microsoft OneDrive: saiba como usar a nuvem da Microsoft O OneDrive é um serviço de armazenamento na nuvem da Microsoft que oferece a opção de guardar até 7 GB de arquivos grátis na rede. Ou seja, o usuário pode

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

Especificação Suplementar

Especificação Suplementar Especificação Suplementar Versão Histórico de Revisões Data Versão Descrição Autor 29/10/2014 2.0 2.1 funcionalidade e segurança de M. Vinícius acesso 30/10/2014

Leia mais

OPINIÃO. O futuro. do Flash

OPINIÃO. O futuro. do Flash O futuro do Flash Testes realizados por sites de grande audiência, como YouTube (http://www.youtube.com/ html5) e Vimeo (http://vimeo.com/blog:268), no uso de players em HTML 5 trouxeram à tona as discussões

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS - APLICATIVOS HÍBRIDOS. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS - APLICATIVOS HÍBRIDOS. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS - APLICATIVOS HÍBRIDOS Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução PhoneGap PhoneGap Build GitHub INTRODUÇÃO Aplicativos nativos

Leia mais

DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS

DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS Leandro Guilherme Gouvea 1, João Paulo Rodrigues 1, Wyllian Fressatti 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil leandrog.gouvea@gmail.com,

Leia mais

Serviço técnico de Biblioteca e documentação BIBLIOTECA PROF. PAULO DE CARVALHO MATTOS P@RTHENON

Serviço técnico de Biblioteca e documentação BIBLIOTECA PROF. PAULO DE CARVALHO MATTOS P@RTHENON Serviço técnico de Biblioteca e documentação BIBLIOTECA PROF. PAULO DE CARVALHO MATTOS P@RTHENON Botucatu 2013 NOVA FERRAMENTA DE BUSCA INTEGRADA: P@RTHENON 1. Para acessar o P@rthenon: Há três possibilidades

Leia mais

Universal Mobile Ad Package UMAP- v.2.0. Dezembro 2011

Universal Mobile Ad Package UMAP- v.2.0. Dezembro 2011 Universal Mobile Ad Package UMAP- v.2.0 Dezembro 2011 Emitida pela MMA North América Board of Directors SWAT Team e o Comitê Global MMA de Mobile Advertising. Proposta Este conjunto atualizado de diretrizes

Leia mais

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

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

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

Rastreamento Mobile. Manual de uso

Rastreamento Mobile. Manual de uso atualizado em 10/06/2014 Rastreamento Mobile Manual de uso Agora você pode utilizar seu aparelho móvel para acessar o seu sistema de rastreamento! O rastreamento Mobile é um website preparado para apresentar

Leia mais

COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR

COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR CONTEÚDO 1 2 3 4 5 6 Por que as empresas precisam estar conectadas ao mundo mobile Como os aplicativos mobile podem atrair mais clientes. Como os aplicativos

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

Comunicação por meio de dispositivos móveis ainda tem muito para crescer no país

Comunicação por meio de dispositivos móveis ainda tem muito para crescer no país Comunicação por meio de dispositivos móveis ainda tem muito para crescer no país Atualmente, não dá para falar em mídias digitais sem considerar o mobile. Se por um lado os acessos móveis ganham força,

Leia mais

Capítulo 2 Web 2.0 22

Capítulo 2 Web 2.0 22 2 Web 2.0 Uma vez que o presente trabalho está intensamente relacionado à Web 2.0 (muitas tecnologias da mesma são utilizadas pela equipe estudada, que precisam de melhorias), torna-se necessário entender

Leia mais

Fundamentos da Computação Móvel

Fundamentos da Computação Móvel Fundamentos da Computação Móvel (O Mercado Mobile no Brasil) Programação de Dispositivos Móveis Mauro Lopes Carvalho Silva Professor EBTT DAI Departamento de Informática Campus Monte Castelo Instituto

Leia mais

Apresenta. SofStore o mais novo aliado no gerenciamento do seu negócio

Apresenta. SofStore o mais novo aliado no gerenciamento do seu negócio Apresenta SofStore o mais novo aliado no gerenciamento do seu negócio SofStore Um Novo Sistema Para Sua Empresa SofStore Apresentação Experiência no Varejo A ID Brasil Sistemas atua no segmento de varejo

Leia mais

Mozilla Firefox 2.0 Janeiro/ 2007

Mozilla Firefox 2.0 Janeiro/ 2007 Mozilla Firefox 2.0 Janeiro/ 2007 ESTE MATERIAL FOI DESENVOLVIDO EM PARCEIRA ENTRE A COMPANHIA DO METROPOLITANO DE SÃO PAULO METRÔ E A BARROS MARTINS CONSULTORIA E TREINAMENTO EM INFORMÁTICA LTDA E ESTÁ

Leia mais

RHOELEMENTS MOTOROLA DESENVOLVA MENOS. FAÇA MAIS.

RHOELEMENTS MOTOROLA DESENVOLVA MENOS. FAÇA MAIS. RHOELEMENTS MOTOROLA DESENVOLVA MENOS. FAÇA MAIS. RHOELEMENTS MOTOROLA FOLHETO COM TANTOS EQUIPAMENTOS MÓVEIS... VOCÊ, DEFINITIVAMENTE, QUER CRIAR UM APLICATIVO COMPATÍVEL COM TODOS ELES. COM RHOELEMENTS,

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

Artur Petean Bove Júnior Tecnologia SJC

Artur Petean Bove Júnior Tecnologia SJC Artur Petean Bove Júnior Tecnologia SJC Objetivo O objetivo do projeto é especificar o desenvolvimento de um software livre com a finalidade de automatizar a criação de WEBSITES através do armazenamento

Leia mais

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

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

Leia mais

Qlik Sense Desktop. Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados.

Qlik Sense Desktop. Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik Sense Desktop Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik, QlikTech,

Leia mais

Digitalização de Documentos

Digitalização de Documentos Digitalização de Documentos Fluxo de Tarefas: A Disal Tecnologia reconhece que no mercado existem certas tarefas que requerem o manuseio de um grande número de documentos em papel. Dentre elas, a compra

Leia mais

Desenvolvimento de aplicativo móvel multiplataforma integrado ao sistema de alerta de cheias da bacia do Itajaí

Desenvolvimento de aplicativo móvel multiplataforma integrado ao sistema de alerta de cheias da bacia do Itajaí Desenvolvimento de aplicativo móvel multiplataforma integrado ao sistema de alerta de cheias da bacia do Itajaí Acadêmico: Carlos Eduardo de Souza Orientador: M.Sc. Dalton Solano dos Reis FURB Universidade

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

navegação em miniatura

navegação em miniatura 50 :: Webdesign iphone: navegação em miniatura Se antes as ciganas pediam para ler a palma da sua mão, nos dias atuais é bem capaz desse exercício de previsão ser feito pela leitura de seu dispositivo

Leia mais

Teste de Qualidade Web based para Banda Larga FAQs

Teste de Qualidade Web based para Banda Larga FAQs Teste de Qualidade Web based para Banda Larga FAQs Pergunta O que é o teste de velocidade? Quem é o público alvo? O que oferece? Como funciona? Por onde é o acesso? Resposta Um teste de qualidade de banda

Leia mais

Número de pessoas com acesso à internet passa de 120 milhões

Número de pessoas com acesso à internet passa de 120 milhões MÍDIA KIT INTERNET Número de pessoas com acesso à internet passa de 120 milhões Segundo pesquisa da Nielsen IBOPE, até o 1º trimestre/2014 número 18% maior que o mesmo período de 2013. É a demonstração

Leia mais

FUNDAMENTOS SOBRE IMAGENS PARA A WEB

FUNDAMENTOS SOBRE IMAGENS PARA A WEB FUNDAMENTOS SOBRE IMAGENS PARA A WEB Bons web sites necessitam de uma correta integração entre textos e imagens. Este artigo contém o mínimo que você precisa saber sobre imagens para a web. Introdução

Leia mais

ANIMAÇÕES WEB AULA 2. conhecendo a interface do Adobe Flash. professor Luciano Roberto Rocha. www.lrocha.com

ANIMAÇÕES WEB AULA 2. conhecendo a interface do Adobe Flash. professor Luciano Roberto Rocha. www.lrocha.com ANIMAÇÕES WEB AULA 2 conhecendo a interface do Adobe Flash professor Luciano Roberto Rocha www.lrocha.com O layout do programa A barra de ferramentas (tools) Contém as ferramentas necessárias para desenhar,

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

ANDRÉ ALENCAR 1 INFORMÁTICA INTERNET EXPLORER 9

ANDRÉ ALENCAR 1 INFORMÁTICA INTERNET EXPLORER 9 ANDRÉ ALENCAR 1 INFORMÁTICA INTERNET EXPLORER 9 1. JANELA PADRÃO Importante: O Internet Explorer não pode ser instalado no Windows XP. 2. INTERFACE MINIMALISTA Seguindo uma tendência já adotada por outros

Leia mais

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET Como Começar? Criação Páginas Apresentação Etapas Como começar Para que um site tenha sucesso é necessário um correcto planeamento do mesmo. Todos os aspectos de desenho de um site devem ser pensados de

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

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

Google Apps para o Office 365 para empresas

Google Apps para o Office 365 para empresas Google Apps para o Office 365 para empresas Faça a migração O Office 365 para empresas tem uma aparência diferente do Google Apps, de modo que, ao entrar, você poderá obter esta exibição para começar.

Leia mais

Arquitetura de Informação

Arquitetura de Informação Arquitetura de Informação Ferramentas para Web Design Prof. Ricardo Ferramentas para Web Design 1 Arquitetura de Informação? Ferramentas para Web Design 2 Arquitetura de Informação (AI): É a arte de expressar

Leia mais

Sphinx iq2 Utilização da ferramenta SphinxMobile

Sphinx iq2 Utilização da ferramenta SphinxMobile Sphinx iq2 Utilização da ferramenta SphinxMobile Pré-requisitos: Lista de variáveis Hospedagem ativa em um Servidor da SPHINX Brasil Módulo Mobile Offline ativo na conta Aplicativo SphinxMobile instalado

Leia mais

FERRAMENTAS PARA DESENVOLVIMENTO EM C#

FERRAMENTAS PARA DESENVOLVIMENTO EM C# FERRAMENTAS PARA DESENVOLVIMENTO EM C# Camila Sanches Navarro 1,2, Wyllian Fressatti 2 ¹Universidade paranaense (Unipar) Paranavaí PR Brasil sanchesnavarro@gmail.com wyllian@unipar.br Resumo. Este artigo

Leia mais

GUIA. Agências & Designers

GUIA. Agências & Designers GUIA Agências & Designers O Processo Melhores Práticas Dúvidas Frequentes e Dicas Pagamentos, Contratos e Afins O SERVIÇO FORNECER SERVIÇOS DE TECNOLOGIA, BRANDING E MARKETING PARA AGÊNCIAS OU DESIGNERS

Leia mais

UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS

UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS Trabalho final da disciplina Computadores, Redes, IP e Internet Professor: Walter Freire Aluno:

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

Manual de Conversão para PDF Envio de Arquivos ao Diário Oficial

Manual de Conversão para PDF Envio de Arquivos ao Diário Oficial Manual de Conversão para PDF Manual de Conversão para PDF 3 Conversão para PDF Microsoft Office 2003 Instalação da impressora PDF O pacote de aplicativo Office 2003 não possui nativamente o recurso de

Leia mais

FUTURA SISTEMAS. Futura Mobile. www.futurasistemas.com.br

FUTURA SISTEMAS. Futura Mobile. www.futurasistemas.com.br FUTURA SISTEMAS Futura Mobile APRESENTAÇÃO O Futura Mobile é o sistema denominado como Força de Vendas onde o usuário executará as vendas a partir de Tablets e Smartphones. Foi desenvolvido para a plataforma

Leia mais

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

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

Leia mais

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

Introdução. Introdução

Introdução. Introdução Introdução 1. Conheça a sua taxa de conversão 2. Usabilidade e navegabilidade 3. Pense mobile 4. Seja relevante 5. Tenha CTAs atraentes 6. O teste AB é fundamental Conclusão Introdução Conhecer os números

Leia mais