O documento discute aplicações responsivas e webdesign responsivo. Resume três principais técnicas de webdesign responsivo: layout fluído com valores percentuais, imagens flexíveis e consultas a mídias. Também discute performance como aspecto crucial para aplicações móveis.
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
O documento discute o desenvolvimento de interfaces responsivas usando Bootstrap. Apresenta conceitos como grids, media queries e responsive web design. Explica como Bootstrap pode ser usado para criar sites adaptáveis a diferentes telas de forma fácil e rápida.
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
O documento discute o framework Bootstrap e design responsivo para aplicações web. Aborda conceitos como grids, media queries, prototipação e ferramentas como Bootstrap, jQuery e outras bibliotecas front-end. Explica a importância do design responsivo e mobile first para se adaptar a diferentes dispositivos.
O documento discute o framework Bootstrap, explicando seu conceito de grid responsiva de 12 colunas para layouts adaptáveis a diferentes telas. Apresenta como o Bootstrap utiliza classes pré-definidas e media queries para ajustar automaticamente o layout em diferentes dispositivos.
A utilização do Bootstrap Para a Otimização de PáginasRamon Sousa
O documento apresenta o framework Bootstrap, descrevendo sua história, conceito, estrutura, grids, layouts fixo e fluido, viewport, ícones e informações sobre o crescente acesso a sites via dispositivos móveis. O Bootstrap foi desenvolvido para facilitar a criação de sites e aplicativos web, utilizando classes CSS e funções JavaScript. Foi criado por desenvolvedores do Twitter para padronizar o design interno e compartilhá-lo.
O documento apresenta uma introdução ao framework Bootstrap, descrevendo sua origem no Twitter e evolução. Explica como o Bootstrap facilita o desenvolvimento web, tornando os sites responsivos e compatíveis entre navegadores através de um conjunto de ferramentas e padrões. Finalmente, demonstra algumas funcionalidades do Bootstrap de forma prática.
Criação Web com Bootstrap e Material DesignDaniel Brandão
O documento apresenta Daniel Brandão, professor de desenvolvimento web, e discute a evolução da web, frameworks como Bootstrap e Material Design. Explica como o Material Design for Bootstrap une os dois frameworks permitindo aproveitar os benefícios de ambos, como grids responsivos, menus, rodapés e formulários prontos, agilizando o desenvolvimento.
Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.
Carlos Eduardo é um desenvolvedor da Vítrio especializado em design responsivo. Seus interesses incluem HTML, CSS, JavaScript, otimização de sites e experiência do usuário. Ele pode ser contatado por e-mail ou nas redes sociais onde também mantém um blog sobre design responsivo.
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
O documento discute o desenvolvimento de interfaces responsivas usando Bootstrap. Apresenta conceitos como grids, media queries e responsive web design. Explica como Bootstrap pode ser usado para criar sites adaptáveis a diferentes telas de forma fácil e rápida.
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
O documento discute o framework Bootstrap e design responsivo para aplicações web. Aborda conceitos como grids, media queries, prototipação e ferramentas como Bootstrap, jQuery e outras bibliotecas front-end. Explica a importância do design responsivo e mobile first para se adaptar a diferentes dispositivos.
O documento discute o framework Bootstrap, explicando seu conceito de grid responsiva de 12 colunas para layouts adaptáveis a diferentes telas. Apresenta como o Bootstrap utiliza classes pré-definidas e media queries para ajustar automaticamente o layout em diferentes dispositivos.
A utilização do Bootstrap Para a Otimização de PáginasRamon Sousa
O documento apresenta o framework Bootstrap, descrevendo sua história, conceito, estrutura, grids, layouts fixo e fluido, viewport, ícones e informações sobre o crescente acesso a sites via dispositivos móveis. O Bootstrap foi desenvolvido para facilitar a criação de sites e aplicativos web, utilizando classes CSS e funções JavaScript. Foi criado por desenvolvedores do Twitter para padronizar o design interno e compartilhá-lo.
O documento apresenta uma introdução ao framework Bootstrap, descrevendo sua origem no Twitter e evolução. Explica como o Bootstrap facilita o desenvolvimento web, tornando os sites responsivos e compatíveis entre navegadores através de um conjunto de ferramentas e padrões. Finalmente, demonstra algumas funcionalidades do Bootstrap de forma prática.
Criação Web com Bootstrap e Material DesignDaniel Brandão
O documento apresenta Daniel Brandão, professor de desenvolvimento web, e discute a evolução da web, frameworks como Bootstrap e Material Design. Explica como o Material Design for Bootstrap une os dois frameworks permitindo aproveitar os benefícios de ambos, como grids responsivos, menus, rodapés e formulários prontos, agilizando o desenvolvimento.
Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.
Carlos Eduardo é um desenvolvedor da Vítrio especializado em design responsivo. Seus interesses incluem HTML, CSS, JavaScript, otimização de sites e experiência do usuário. Ele pode ser contatado por e-mail ou nas redes sociais onde também mantém um blog sobre design responsivo.
O documento descreve o design responsivo, que permite que sites se adaptem ao tamanho da tela do usuário. Ele é composto por layouts fluidos com base em porcentagens, imagens flexíveis e media queries para especificar estilos CSS de acordo com a capacidade do dispositivo. O design responsivo surgiu para permitir uma melhor experiência no uso de sites em dispositivos móveis.
O documento introduz os conceitos e técnicas de design responsivo para desenvolvimento web. Apresenta a história do design responsivo, as resoluções de tela, técnicas como layout fluido, recursos flexíveis e media queries, além de ferramentas para teste e validação de sites responsivos.
Desenvolvimento Ágil com Twitter BootstrapFlavio Souza
O documento descreve o framework Bootstrap, incluindo sua história, funcionalidades e componentes. O Bootstrap foi desenvolvido pelo Twitter para padronizar e agilizar o desenvolvimento front-end e hoje é um framework open-source popular. Ele fornece elementos HTML e CSS pré-estilizados para criar rapidamente layouts responsivos e compatíveis entre navegadores.
Desenvolvido pela equipe do Twitter, o Bootstrap é um framework front-end de código aberto (opensource). Em palavras simples, é um conjunto de ferramentas criadas para facilitar o desenvolvimento de sites e sistemas web.
Compatível com HTML5 e CSS3, o framework possibilita a criação de layouts responsivos e o uso de gris, permitindo que seu conteúdo seja organizado em até 12 colunas e que comporte-se de maneira diferente para cada resolução.
Como qualquer outra ferramenta, possui suas vantagens e desvantagens. É importante conhecer e entender suas funcionalidades para saber os momentos certos de utilizá-lo.
Post completo: http://thiagonasc.com/geral/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
Como adaptar os sites a esta nova realidade na vida das pessoas e Como criar sites que se adaptem a infinidade de aparelhos nesta nova realidade de mercado? Através da produção desse artigo é possível entender o cenário da nova forma de acesso a Internet.
O documento discute a importância da acessibilidade na web, definindo-a como o consumo da informação por qualquer pessoa por qualquer meio de acesso. Explica que a web serve para compartilhar informação sob diversos formatos e que acessibilidade beneficia todos os usuários, não apenas pessoas com deficiência. Também aborda boas práticas de marcação, semântica, atributos e design responsivo para tornar conteúdo acessível a todos.
O documento discute o impacto dos dispositivos móveis no acesso à internet e apresenta o conceito de web design responsivo, que permite que sites se adaptem a diferentes telas de forma flexível. Ele explica como grids, imagens e mídia queries podem ser usados para criar sites responsivos e fornece exemplos de sites que utilizam essa abordagem.
Web design responsivo - Criando um site adaptávelGuto Xavier
O documento fornece instruções passo-a-passo para criar um site responsivo utilizando o framework Bootstrap, começando com a instalação do Bootstrap, adicionando HTML básico, CSS e JavaScript, e concluindo com a adição de elementos como barra de navegação, container, títulos, tabelas, formulários e imagens.
O documento discute layout responsivo, fornecendo definições, princípios e exemplos. Explica como criar interfaces flexíveis para diferentes dispositivos através de planejamento, uso de frameworks e media queries. Também lista vantagens como SEO, identidade visual e experiência do usuário.
O documento apresenta o framework Bootstrap, explicando como ele pode facilitar o desenvolvimento ágil de sites. Apresenta os principais recursos como grids, formulários e tabelas responsivas. Fornece instruções passo a passo de como configurar um projeto com Bootstrap, incluindo links para a documentação oficial.
O documento apresenta uma introdução ao design responsivo, discutindo princípios como grids fluidas, media queries e imagens flexíveis para adaptar sites a diferentes dispositivos. Também fornece exemplos de código e frameworks para ajudar a criar sites responsivos.
O que você precisa saber para se tornar um dev front-endDiego Eis
Este documento fornece uma lista de tópicos essenciais para se tornar um desenvolvedor front-end, incluindo HTML, CSS, JavaScript, pré-processadores como Sass, ferramentas como Git, desempenho, acessibilidade, frameworks como jQuery e WordPress ou outros sistemas de gerenciamento de conteúdo. O documento enfatiza a importância da teoria antes da prática e da compreensão do contexto maior do trabalho do front-end.
O documento discute os padrões web, incluindo que são recomendações do W3C para tornar a web acessível para todos e o papel do W3C na criação de padrões. Também lista os principais grupos de padrões web e fases e categorias de entregáveis de UX.
O documento discute a terceira área do design web e inclui seções sobre web design, gerações da web, agências digitais e projetos digitais. Em três frases ou menos:
O documento aborda conceitos-chave de web design, como a evolução histórica da web, características de gerações diferentes de usuários, o funcionamento de agências digitais e etapas típicas em projetos digitais.
O documento discute técnicas para otimizar o desempenho de aplicativos web para dar a impressão de rapidez ao usuário, mesmo que a conexão seja lenta. Essas técnicas incluem minificar arquivos, usar CDNs, carregar estilos e scripts separadamente e pré-carregar componentes para reduzir tempos de resposta aparentes. O documento também discute como as expectativas do usuário influenciam a percepção de desempenho e a importância de fornecer feedback imediato.
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
1) A aula introduz conceitos fundamentais de web design, como a história da internet, evolução da web, definição de web design e etapas de um projeto web.
2) É explicado o que é web design e quais conhecimentos são necessários, como UX design, layout, web standards e responsividade.
3) São apresentadas as principais etapas de um projeto web em uma agência, incluindo briefing, wireframes, desenvolvimento e validações.
Palestra dada no Conexão KingHost 2015 sobre responsividade, HTML5 e o universo multiplataforma de desenvolvimento mobile. Os assuntos abordados foram:
- Responsividade - feel faster - adaptação os diversos devices
- Sites responsivos, uma solução temporária para o crescimento mobile
- Adaptação
- Atomic Design
- Frameworks
- Bootstrap
- Mobile First
- Necessidade de repensar o design focado em Mobile
- Simplicidade
- Diferença na prática (pequeno trecho)
- Fluxo do desenvolvimento
- Fluidez
- Unidades relativas
- Explosão das App's
- App pra tudo
- One API to rule them all
- Web Mobile x App
- Presença de mercado
- Link Building
- Apps HTML5
- Integração maior com o Browser
- Integração simples como número de telefone
- API's
- Geolocation
- Image upload
- LocalStorage
- Battery Status
- WebSocket
- Além da responsividade
- Perfomance
- Acessibilidade
- Dispositivos “desconhecidos”
- Funções do aparelho
- Javascript - aprimorando o comportamento
- Exemplo prático de um Carrossel Touch
- Exemplos multiuso
- Trello
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.
Bootstrap: a bias minimization technique of an estimatorMichel Alves
In statistics, bootstrapping is a method for assigning measures of accuracy to sample estimates. This technique allows estimation of the sampling distribution of almost any statistic using only very simple methods. Generally, it falls in the broader class of resampling methods.
O documento fornece uma introdução ao PHP, incluindo sua história, como funciona e como trabalhar com ele. Resume que o PHP é uma linguagem de script do lado do servidor usada para desenvolvimento web, originalmente chamada de PHP/FI, e que passou por várias versões principais ao longo do tempo.
O documento descreve o design responsivo, que permite que sites se adaptem ao tamanho da tela do usuário. Ele é composto por layouts fluidos com base em porcentagens, imagens flexíveis e media queries para especificar estilos CSS de acordo com a capacidade do dispositivo. O design responsivo surgiu para permitir uma melhor experiência no uso de sites em dispositivos móveis.
O documento introduz os conceitos e técnicas de design responsivo para desenvolvimento web. Apresenta a história do design responsivo, as resoluções de tela, técnicas como layout fluido, recursos flexíveis e media queries, além de ferramentas para teste e validação de sites responsivos.
Desenvolvimento Ágil com Twitter BootstrapFlavio Souza
O documento descreve o framework Bootstrap, incluindo sua história, funcionalidades e componentes. O Bootstrap foi desenvolvido pelo Twitter para padronizar e agilizar o desenvolvimento front-end e hoje é um framework open-source popular. Ele fornece elementos HTML e CSS pré-estilizados para criar rapidamente layouts responsivos e compatíveis entre navegadores.
Desenvolvido pela equipe do Twitter, o Bootstrap é um framework front-end de código aberto (opensource). Em palavras simples, é um conjunto de ferramentas criadas para facilitar o desenvolvimento de sites e sistemas web.
Compatível com HTML5 e CSS3, o framework possibilita a criação de layouts responsivos e o uso de gris, permitindo que seu conteúdo seja organizado em até 12 colunas e que comporte-se de maneira diferente para cada resolução.
Como qualquer outra ferramenta, possui suas vantagens e desvantagens. É importante conhecer e entender suas funcionalidades para saber os momentos certos de utilizá-lo.
Post completo: http://thiagonasc.com/geral/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
Como adaptar os sites a esta nova realidade na vida das pessoas e Como criar sites que se adaptem a infinidade de aparelhos nesta nova realidade de mercado? Através da produção desse artigo é possível entender o cenário da nova forma de acesso a Internet.
O documento discute a importância da acessibilidade na web, definindo-a como o consumo da informação por qualquer pessoa por qualquer meio de acesso. Explica que a web serve para compartilhar informação sob diversos formatos e que acessibilidade beneficia todos os usuários, não apenas pessoas com deficiência. Também aborda boas práticas de marcação, semântica, atributos e design responsivo para tornar conteúdo acessível a todos.
O documento discute o impacto dos dispositivos móveis no acesso à internet e apresenta o conceito de web design responsivo, que permite que sites se adaptem a diferentes telas de forma flexível. Ele explica como grids, imagens e mídia queries podem ser usados para criar sites responsivos e fornece exemplos de sites que utilizam essa abordagem.
Web design responsivo - Criando um site adaptávelGuto Xavier
O documento fornece instruções passo-a-passo para criar um site responsivo utilizando o framework Bootstrap, começando com a instalação do Bootstrap, adicionando HTML básico, CSS e JavaScript, e concluindo com a adição de elementos como barra de navegação, container, títulos, tabelas, formulários e imagens.
O documento discute layout responsivo, fornecendo definições, princípios e exemplos. Explica como criar interfaces flexíveis para diferentes dispositivos através de planejamento, uso de frameworks e media queries. Também lista vantagens como SEO, identidade visual e experiência do usuário.
O documento apresenta o framework Bootstrap, explicando como ele pode facilitar o desenvolvimento ágil de sites. Apresenta os principais recursos como grids, formulários e tabelas responsivas. Fornece instruções passo a passo de como configurar um projeto com Bootstrap, incluindo links para a documentação oficial.
O documento apresenta uma introdução ao design responsivo, discutindo princípios como grids fluidas, media queries e imagens flexíveis para adaptar sites a diferentes dispositivos. Também fornece exemplos de código e frameworks para ajudar a criar sites responsivos.
O que você precisa saber para se tornar um dev front-endDiego Eis
Este documento fornece uma lista de tópicos essenciais para se tornar um desenvolvedor front-end, incluindo HTML, CSS, JavaScript, pré-processadores como Sass, ferramentas como Git, desempenho, acessibilidade, frameworks como jQuery e WordPress ou outros sistemas de gerenciamento de conteúdo. O documento enfatiza a importância da teoria antes da prática e da compreensão do contexto maior do trabalho do front-end.
O documento discute os padrões web, incluindo que são recomendações do W3C para tornar a web acessível para todos e o papel do W3C na criação de padrões. Também lista os principais grupos de padrões web e fases e categorias de entregáveis de UX.
O documento discute a terceira área do design web e inclui seções sobre web design, gerações da web, agências digitais e projetos digitais. Em três frases ou menos:
O documento aborda conceitos-chave de web design, como a evolução histórica da web, características de gerações diferentes de usuários, o funcionamento de agências digitais e etapas típicas em projetos digitais.
O documento discute técnicas para otimizar o desempenho de aplicativos web para dar a impressão de rapidez ao usuário, mesmo que a conexão seja lenta. Essas técnicas incluem minificar arquivos, usar CDNs, carregar estilos e scripts separadamente e pré-carregar componentes para reduzir tempos de resposta aparentes. O documento também discute como as expectativas do usuário influenciam a percepção de desempenho e a importância de fornecer feedback imediato.
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
1) A aula introduz conceitos fundamentais de web design, como a história da internet, evolução da web, definição de web design e etapas de um projeto web.
2) É explicado o que é web design e quais conhecimentos são necessários, como UX design, layout, web standards e responsividade.
3) São apresentadas as principais etapas de um projeto web em uma agência, incluindo briefing, wireframes, desenvolvimento e validações.
Palestra dada no Conexão KingHost 2015 sobre responsividade, HTML5 e o universo multiplataforma de desenvolvimento mobile. Os assuntos abordados foram:
- Responsividade - feel faster - adaptação os diversos devices
- Sites responsivos, uma solução temporária para o crescimento mobile
- Adaptação
- Atomic Design
- Frameworks
- Bootstrap
- Mobile First
- Necessidade de repensar o design focado em Mobile
- Simplicidade
- Diferença na prática (pequeno trecho)
- Fluxo do desenvolvimento
- Fluidez
- Unidades relativas
- Explosão das App's
- App pra tudo
- One API to rule them all
- Web Mobile x App
- Presença de mercado
- Link Building
- Apps HTML5
- Integração maior com o Browser
- Integração simples como número de telefone
- API's
- Geolocation
- Image upload
- LocalStorage
- Battery Status
- WebSocket
- Além da responsividade
- Perfomance
- Acessibilidade
- Dispositivos “desconhecidos”
- Funções do aparelho
- Javascript - aprimorando o comportamento
- Exemplo prático de um Carrossel Touch
- Exemplos multiuso
- Trello
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.
Bootstrap: a bias minimization technique of an estimatorMichel Alves
In statistics, bootstrapping is a method for assigning measures of accuracy to sample estimates. This technique allows estimation of the sampling distribution of almost any statistic using only very simple methods. Generally, it falls in the broader class of resampling methods.
O documento fornece uma introdução ao PHP, incluindo sua história, como funciona e como trabalhar com ele. Resume que o PHP é uma linguagem de script do lado do servidor usada para desenvolvimento web, originalmente chamada de PHP/FI, e que passou por várias versões principais ao longo do tempo.
Diego Sanches Modesto apresenta o framework front-end Twitter Bootstrap, que fornece arquivos CSS e JavaScript para criar layouts responsivos e mobile-first através de um sistema de grade flexível baseado em colunas. O documento explica como obter os arquivos do Bootstrap, seu sistema de grade e layout responsivo, além de discutir suporte em navegadores antigos.
A empresa de tecnologia anunciou um novo smartphone com câmera aprimorada, tela maior e bateria de longa duração por um preço acessível. O dispositivo tem como objetivo atrair mais consumidores em mercados emergentes com suas especificações equilibradas e preço baixo. Analistas esperam que as melhorias e o preço baixo impulsionem as vendas do novo aparelho.
O documento explica o que são protocolos, destacando o protocolo HTTP, e descreve a arquitetura cliente-servidor da web, incluindo o que é um servidor web Apache e como instalar e funciona o PHP em sistemas Windows e Linux.
Aprenda a criar um Carousel em Bootstrap do Zero.
Baixe este ebook e assista ao Vídeo Tutorial onde ensino um passo a passo para que você possa criar o seu. Vá até o meu Canal do Youtube e assita o vídeo clicando neste link: https://youtu.be/Anm_a4SQwdQ
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
O documento apresenta os principais tipos de estruturas condicionais em PHP como if, if/else, if/elseif/else e switch. Também explica como receber dados de formulários HTML usando as funções $_POST, $_GET e $_REQUEST e fornece quatro exercícios para praticar esses conceitos.
Php e mysql aplicacao completa a partir do zeroFred Ramos
Aprenda como construir sua própria aplicação PHP com banco de dados MYSQL a partir do nada.
- Explicações passo a passo totalmente ilustradas
- Indicado para iniciantes ou veteranos no PHP
- Construção do layout a partir do zero
- Códigos php de fácil compreensão
- Construção de uma aplicação web completa
- Conteúdo totalmente ilustrado com mais de 300 imagens
- Aprenda na prática! Aplicação testada pelo desenvolvedor
- 150 páginas
O documento discute técnicas e desafios de design responsivo para websites, incluindo layouts fluidos, imagens flexíveis, media queries, navegação, imagens, tabelas e conversão de sites antigos para design responsivo. Também aborda como vender o valor do design responsivo para clientes, principais problemas e como evitá-los.
O documento discute abordagens para design responsivo e desenvolvimento offline first, incluindo: (1) adaptar conteúdo de sites desktop para versões móveis mais estreitas; (2) armazenar dados localmente usando APIs como Web Storage; e (3) frameworks como ReactJS, AngularJS e ferramentas como Service Workers para aplicativos offline.
Este documento discute a abordagem "mobile first" para o desenvolvimento de sites e aplicativos. Ele explica que começar com o mobile em mente força o foco no conteúdo essencial e na funcionalidade básica, e que os aprimoramentos podem ser feitos progressivamente para telas maiores. O documento também ressalta a importância da performance em dispositivos móveis.
1) O documento discute as etapas de desenvolvimento de um site ou aplicação web, incluindo análise de usuários, criação de wireframes, design gráfico e programação front-end.
2) É explicado que a primeira etapa é realizada por especialistas em design de interação que criam wireframes com base na análise de usuários.
3) Na próxima etapa, designers gráficos adicionam visualização aos wireframes resultando nos layouts finais, que então são transformados em código por programadores para serem exibidos nos navegadores.
Edu Agni é um designer e criador do blog UX.BLOG que trabalha há nove anos com projetos de design de interfaces e usabilidade. O documento discute vários tópicos relacionados à experiência do usuário, como avaliação de produtos, design centrado no usuário, desenvolvimento front-end, semântica, acessibilidade e design responsivo.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
Dica fundao-sites-responsivos-140528101304-phpapp02Bruno da Silva
O documento discute o design responsivo, abordando conceitos como mobile first, dicas, exemplos e referências. O foco é planejar sites para dispositivos móveis primeiro e depois para desktops, removendo conteúdo desnecessário e melhorando a usabilidade e acessibilidade em diferentes telas. Wireframes, imagens apropriadas para cada resolução e formulários simplificados são algumas dicas apresentadas.
O documento discute o design responsivo, abordando sua definição, princípios como mobile first e dicas para sua implementação. É destacado que o foco é apresentar a informação de forma acessível em diferentes dispositivos e que é importante começar pelo mobile, melhorando progressivamente para outros formatos.
O documento descreve o conceito de design web responsivo, que defende que sites devem ser capazes de se adaptar a diferentes tamanhos de tela. Isso é feito usando grids flexíveis, imagens e mídia flexíveis e media queries do CSS3. Um design web responsivo garante uma experiência de usuário eficiente e agradável em diferentes dispositivos como desktops, tablets e smartphones.
Guia de Otimização de Performance de Sites (Page Speed)Gabriel Zavitoski
Documentação elaborada para o cliente Nestlé Brasil para auxiliar no compreendimento dos principais conceitos e possibilidades de otimização de performance de sites, a fim de garantir a melhor experiência e percepção de carregamento do consumidor para com os diversos sites da companhia. Este guia de pagespeed permitirá:
1. Compreender com mais profundidade os conceitos em torno de Web Performance;
2. Conhecer as diretrizes globais e as melhores práticas de otimização de performance;
3. Mensurar os diversos pontos de performance por meio das ferramentas disponíveis;
4. Contribuir na formação do conhecimento acerca desta disciplina para melhor direcionar nas tomadas de decisões.
O documento discute os principais aspectos de desenvolvimento de sites, incluindo escolha de ferramentas, linguagens de programação, bancos de dados, estrutura, padrões web, acessibilidade e testes.
This document discusses strategies for responsive user experience (UX) design. It covers topics like understanding UX versus interface, taking a content-first approach, using mobile-first design, best practices for responsive design like breakpoints and performance optimization, and selling responsive design proposals to clients. The overall goal is to provide guidance on creating responsive designs that adapt to different devices and deliver a quality user experience across all screens.
O documento discute ferramentas para desenvolvimento web como Yeoman, AngularJS, CouchDB e Cloudant. Ele também fornece resumos sobre cada ferramenta e discute como elas podem ser usadas para criar e hospedar aplicações.
O documento apresenta um curso básico de desenvolvimento para Android, incluindo informações sobre o instrutor, agenda do curso, introdução ao Android e SDK, criação de um projeto "Hello World" e execução em um emulador.
Web Components - Introdução a tecnologia que vem ganhando cada vez mais notoriedade e que visa auxiliar o desenvolvedor front-end na criação de componentes customizados.
[1] O documento discute estratégias de arquitetura para aplicativos Android, incluindo divisão de responsabilidades e padrões como MVC e MVP.
[2] É sugerido que atividades não devem ter muita lógica e responsabilidades, e sim serem "controladores" que chamam uma camada de controladores.
[3] Os controladores chamariam as regras de negócio e retornariam objetos de visualização para as atividades.
O documento discute a tecnologia FrontEnd, incluindo linguagens como HTML, CSS e JavaScript. Também cobre frameworks como Angular, Bootstrap e Sass, além das linguagens TypeScript e NativeScript para desenvolvimento de aplicativos móveis nativos usando JavaScript.
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxSENAC SC
O documento discute as funções de programador web, incluindo UX Designer, UI Designer, front-end e back-end. UX Designers são responsáveis pela experiência do usuário, enquanto UI Designers criam a interface visual. Front-end constrói as páginas web usando HTML, CSS e JavaScript. Back-end gerencia bancos de dados e processamento no servidor.
O documento discute a abordagem "mobile first" para projetar sites, sugerindo começar com as regras básicas para mobile e depois adicionar funcionalidades para desktop através de media queries. Também recomenda testar a performance mobile usando ferramentas como Mobitest IO para analisar recursos lentos e melhorar a experiência de navegação de forma progressiva.
PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...Jackson F. de A. Mafra
Vamos abordar primeiro a logística de manutenção de um projeto com alto débito técnico como o WordPress.
Em seguida, examinará o que isso significa para projetos que dependem do WordPress.
Finalmente, ele irá percorrer algumas maneiras potenciais de mudar para um processo mais equilibrado, com uma análise mais detalhada de como o
WordPress finalmente conseguiu escapar de seu requisito do PHP 5.2.
O GitLab é um gerenciador de repositórios baseado em Git. Suas ferramentas incluem um wiki, um gerenciador de tarefas e um pipeline de CI/CD, etc. O GitLab é similar ao GitHub, porém, por ser open source, pode ser armazenado em infraestrutura própria, além da versão em nuvem do mesmo, podendo ter repositórios públicos e privados.
GitLab Runner, o GitLab permite que você use o Runner, que é um projeto open source que é usado para executar os jobs e enviar os resultados de volta para o GitLab. Ou seja, ele nos permite buildar sem a necessidade de nenhuma instalação externa.
Veremos uma introdução de como tudo isso funciona.
1. O documento discute os tipos de chatbots, incluindo chatbots orientados para fluxo, chatbots que usam IA e chatbots híbridos. Também aborda os benefícios dos chatbots para empresas e clientes.
2. A popularidade dos chatbots vem crescendo no Brasil, com um aumento de 25% no volume mensal de mensagens e 83 empresas produzindo chatbots comercialmente.
3. Antes de implementar chatbots, empresas devem considerar suas limitações atuais e onde realmente podem agregar valor, em vez de substituir processos human
O documento fornece uma introdução sobre como usar o WordPress como um backend para aplicativos, discutindo APIs do WordPress como a REST API e HTTP API. Ele explica conceitos-chave como rotas, solicitações, respostas e esquemas e como eles se aplicam à REST API do WordPress.
Discutiremos a possibilidade de usar o WordPress como um servidor para alimentar conteúdo para aplicativos móveis e armazenar as informações geradas pelos usuários destes.
Para isso, ferramentas disponíveis no ecossistema serão analisadas, ambas oferecidas pelo CMS (API REST, autenticação, banco de dados ...) e geradas pela comunidade ou por nós mesmos (plugins).
Serão estudados quais pontos essenciais dos quais um MBaaS (Mobile Backend como Serviço) deve cobrir WordPress e serão ponderados as ocasiões em que usá-lo com relação a outras soluções do mercado mais comum.
O titulo é click bait mas a talk não. Todo mundo que se encanta pelo WordPress, e quer começar a desenvolver, principalmente se vem de outras linguagens, fica na dúvida; posso usar namespaces? Autoload? Usar WordPress Coding Standards ou PSRs?
Quando usar um Plugin e quando fazer meu código? O que é do tema e o que é do Plugin?
Precisamos de um barco maior introdução ao dimensionamento de aplicaçõesJackson F. de A. Mafra
Em um momento ou outro, todo desenvolvedor se depara com o mesmo problema - seu aplicativo começa a ficar mais lento, começa a cair e não está disponível.
Muitas vezes, isso se resume a muitos usuários, muitos dados armazenados - em outras palavras, um problema de escala.
Analisando uma gama de opções, desde escalonamento horizontal e vertical até cache, fragmentação e otimização, veremos abordagens de escalonamento que podem ser usadas em novas aplicações e também algumas que podem ser adaptadas retroativamente a aplicações existentes.
Hangout Tempo Real Eventos - ChatOps (ChatBots e DevOps) - Como bots podem ...Jackson F. de A. Mafra
Se formos resumir, podemos dizer que é “conversation-driven development”. Usando um bot com plugins e scripts, os times podem automatizar tarefas e colaborar, jogando fora os procedimentos repetitivos e economizando tempo.
Hangout Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...Jackson F. de A. Mafra
O documento discute os primeiros passos para se tornar um desenvolvedor Android bem-sucedido, incluindo: (1) entender a plataforma Android e sua popularidade, (2) aprender Java, (3) como criar aplicativos, (4) publicá-los na Google Play e (5) formas de ganhar dinheiro com aplicativos.
O documento discute os primeiros passos para se tornar um desenvolvedor front-end, incluindo:
1) O que faz um desenvolvedor front-end e a importância da área;
2) O mercado de trabalho está em alta demanda por profissionais qualificados;
3) Os diferentes níveis de conhecimento necessários, de básico a avançado.
O documento fornece uma introdução ao Node.js, cobrindo seus principais conceitos como:
1) Node.js é uma plataforma baseada no runtime do Chrome que permite desenvolvimento de aplicações escaláveis usando modelo não bloqueante de eventos;
2) Ele usa um único thread para tratar requisições de forma não bloqueante, evitando problemas de escalabilidade de modelos com múltiplas threads;
3) Node.js é ideal para aplicações com uso intensivo de dados ou em tempo real e roda em diversos sistemas operacionais incluindo Linux, OSX
O documento discute as principais funcionalidades e conceitos por trás do Dialogflow (antigo API.AI), incluindo agentes, intenções, entidades, treinamento e integrações. O autor também fornece referências sobre processamento de linguagem natural e ferramentas de conversação.
Chatops é a habilidade de interagir com a minha infraestrutura através de uma interface de texto. Mantendo um contexto linear com meus colegas de trabalho.
_ Chatops não é só executar comandos via chat, é sobre colaboração._
O documento discute como os chatbots podem aprimorar o processo de vendas ao filtrar e identificar leads, fornecer respostas automatizadas às perguntas frequentes dos clientes, coletar informações dos clientes e atualizar as ofertas de forma oportuna.
Aspect oriented programming (AOP) allows developers to separate cross-cutting concerns from the main application code. This helps keep code organized and focused on single responsibilities. AOP works by defining points in the program execution, called join points, where additional behavior can be inserted. This additional behavior is defined through advice that runs before, after, or around join points. Pointcuts are used to identify which join points specific advice should apply to. Aspects group advice and pointcuts to encapsulate a concern.
The document discusses APIs and provides examples of RESTful APIs. It describes how RESTful APIs are built upon a domain model to provide resources that can be navigated through requests. This allows clients to construct custom requests to get precisely the data needed, rather than requiring multiple calls or getting excess data. The domain model also provides a unified framework for request and response semantics.
O documento apresenta uma palestra sobre formação para desenvolvedores, abordando tópicos como HTML, lógica de programação, JavaScript, CSS, SQL, frameworks front-end e ferramentas como Node, Angular, jQuery, pré-processadores CSS e sistemas de automação de tarefas. A palestra também discute ambientes virtuais de aprendizagem e desafios do desenvolvimento responsivo.
This document discusses logging and summarization techniques. It begins with an overview of why logging is important for application development and maintenance. It then covers different types of logs, such as system logs, application logs, and database logs. The document discusses various logging options and frameworks, with a focus on Monolog and the ELK stack. It provides examples of setting up logging with Monolog and sending logs to Elasticsearch using Logstash and viewing them in Kibana. The key aspects covered are the need for logging, different log types, popular logging frameworks and real-time log analysis using ELK.
A linguagem C# aproveita conceitos de muitas outras linguagens,
mas especialmente de C++ e Java. Sua sintaxe é relativamente fácil, o que
diminui o tempo de aprendizado. Todos os programas desenvolvidos devem
ser compilados, gerando um arquivo com a extensão DLL ou EXE. Isso torna a
execução dos programas mais rápida se comparados com as linguagens de
script (VBScript , JavaScript) que atualmente utilizamos na internet
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
Em um mundo cada vez mais digital, a segurança da informação tornou-se essencial para proteger dados pessoais e empresariais contra ameaças cibernéticas. Nesta apresentação, abordaremos os principais conceitos e práticas de segurança digital, incluindo o reconhecimento de ameaças comuns, como malware e phishing, e a implementação de medidas de proteção e mitigação para vazamento de senhas.
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...Faga1939
Este artigo tem por objetivo apresentar como ocorreu a evolução do consumo e da produção de energia desde a pré-história até os tempos atuais, bem como propor o futuro da energia requerido para o mundo. Da pré-história até o século XVIII predominou o uso de fontes renováveis de energia como a madeira, o vento e a energia hidráulica. Do século XVIII até a era contemporânea, os combustíveis fósseis predominaram com o carvão e o petróleo, mas seu uso chegará ao fim provavelmente a partir do século XXI para evitar a mudança climática catastrófica global resultante de sua utilização ao emitir gases do efeito estufa responsáveis pelo aquecimento global. Com o fim da era dos combustíveis fósseis virá a era das fontes renováveis de energia quando prevalecerá a utilização da energia hidrelétrica, energia solar, energia eólica, energia das marés, energia das ondas, energia geotérmica, energia da biomassa e energia do hidrogênio. Não existem dúvidas de que as atividades humanas sobre a Terra provocam alterações no meio ambiente em que vivemos. Muitos destes impactos ambientais são provenientes da geração, manuseio e uso da energia com o uso de combustíveis fósseis. A principal razão para a existência desses impactos ambientais reside no fato de que o consumo mundial de energia primária proveniente de fontes não renováveis (petróleo, carvão, gás natural e nuclear) corresponde a aproximadamente 88% do total, cabendo apenas 12% às fontes renováveis. Independentemente das várias soluções que venham a ser adotadas para eliminar ou mitigar as causas do efeito estufa, a mais importante ação é, sem dúvidas, a adoção de medidas que contribuam para a eliminação ou redução do consumo de combustíveis fósseis na produção de energia, bem como para seu uso mais eficiente nos transportes, na indústria, na agropecuária e nas cidades (residências e comércio), haja vista que o uso e a produção de energia são responsáveis por 57% dos gases de estufa emitidos pela atividade humana. Neste sentido, é imprescindível a implantação de um sistema de energia sustentável no mundo. Em um sistema de energia sustentável, a matriz energética mundial só deveria contar com fontes de energia limpa e renováveis (hidroelétrica, solar, eólica, hidrogênio, geotérmica, das marés, das ondas e biomassa), não devendo contar, portanto, com o uso dos combustíveis fósseis (petróleo, carvão e gás natural).
2. Jackson F. de A. Mafra
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
@jacksonfdam
4. Arquitetura
Responsiva
O termo Arquitetura responsiva foi
dado pelo pesquisador Nicholas
Negroponte que inicialmente
concebeu nos anos 1960 durante o
design de espaços onde foram
explorados os conceito de
cibernética para a arquitetura.
http://en.wikipedia.org/wiki/File:NNe
goponte_USNA_20090415_.jpg
5. Arquitetura responsiva é aquela que as condições
do espaço e ambientes podem mudar e se
adaptar a condições pre-definidas ou desejáveis ,
por meio de sensores, alterando as características
de forma, cores, espaços e todos os elementos
que compõem o espaço arquitetônico de modo
responsivo. Para tal são utilizados sensores e
atuadores robóticos.
6. Webdesign
Responsivo
O termo utilizado para definir um web
desing responsivo foi criado por Ethan
Marcotte, em seu artigo no site A list apart.
Marcotte consolidou três principais
técnicas para este modelo: Layout fluído,
Imagens flexíveis, e Consultas a mídias
(Media queries) em uma abordagem
unificada, que o nomeou de web design
ágil.
http://www.flickr.com/photos/z
eldman/6495074887/
http://www.alistapart.com/artic
les/responsive-web-design/
7. Layout fluído
A técnica de layout fluído se baseia em usar
valores percentuais ao invés de absolutos para as
tags que delimitam as áreas do site (div), ou seja,
ao invés de declarar a largura do site com valores
absolutos em pixels (px), usamos valores
proporcionais em percentual (%). Desta forma o
site e suas subpartes ocuparão uma área relativa
ao tamanho da janela do navegador do usuário.
Larguras em "%". Textos
em "em".
8. Imagens flexíveis
Tão importante quanto um layout que responda
aos diversos tamanhos de tela. As imagens
também devem adaptar-se ao tamanho de tela
do device em que está sendo acessado, utilizando
valores proporcionais em percentual (%).
9. Media queries
São seletores em CSS3 que consulta as mídias do
navegador quando o seu site for acessado. Com
as Medias Queries configuradas, o navegador
exibe o layout de acordo com o dispositivo que
está acessando o site, ou seja, o navegador
interpreta o tamanho de tela que foi configurado
na media querie e exibe o layout que foi definido
no CSS.
13. Mobilize, don’t
miniaturize
Miniaturizing “treats the mobile environment and
technology as a
subset of the desktop environment.”
Miniaturizar "trata o ambiente mobile e a tecnologia como
um subconjunto do ambiente de desktop. "
Barbara Ballard UX Designer, 2007
14.
15. Prototipar
Papel e Lapis são ótimos e baratos.
01 A4 – Paisagem = Desktop
01 A4 dobrado ao meio / 02 A5 = 02 Telas de
iPad
01 A5 dobrado 03 vezes = 03 Telas de iPhone
25. Zoom
Um zoom de 200%, na prática, faz 1px
no CSS ser renderizado como 2px na
tela. No fim, se você estiver em um
notebook de 1280px de tela, a página
passaria a renderizar com um
viewport de 640px.
26. Zoom
Todos os navegadores suportam esse tipo de
recurso: Firefox, Chrome, Android, Opera, Internet
Explorer e Safari. Só há um bug no Webkit –
Chrome, Safari, Android – que faz a media query
ser aplicada apenas se o usuário der zoom e
depois um refresh na página; em todos os outros, a
media query é aplicada imediatamente de
acordo com o zoom.
27. Zoom
O zoom dos navegadores modernos aumenta a
página toda – texto, imagens, CSS etc. Nos
navegadores antigos – como IE6 ou IE7 –, não
existia isso e era comum o usuário aumentar o
tamanho da fonte. Era bem mais simples: só o
font-size base mudava e a página só aumentaria
se você usasse em nas medidas CSS.
Aliás, esse era um argumento forte a favor de
em na época, mas hoje em dia os browsers dão
zoom inclusive em medidas com px fixos.
28. Zoom
As telas pequenas dos smartphones ensinaram
algo simples para os usuários: se algo estiver
pequeno, apenas arraste os dedos (pinch) e dê
zoom! É um gesto básico de dispositivos touch e
conhecido por todo mundo. Mas, mesmo assim,
muitos sites bloqueiam o zoom nas páginas. Não
faça isso.
<meta name="viewport" content="width=device-
width, user-scalable=no”>
<meta name="viewport" content="width=device-
width, minimum-scale=1, maximum-scale=1">
30. Performance
Em mobile, é absolutamente essencial. E apesar
das limitações de hardware e rede dos
aparelhos, 71% dos usuários esperam que um site
abra tão rápido no celular quanto no Desktop.
Um site mobile não otimizado simplesmente não
será usado.
31. Performance
O Yahoo! descobriu que, para cada 400ms de
melhora na performance, seu tráfego aumenta
em 9% (fonte).
Ao cortar 2,2s da landing page do Firefox, a
Mozilla aumentou o número de downloads em
15%, totalizando um ganho de mais de 60
milhões de cópias por ano.
A Amazon concluiu que apenas 100ms de
melhora aumentam 1% seu faturamento.
32. Performance
A Microsoft mostrou que 2s a mais de latência no
Bing diminuíam o faturamento em 4,3%.
Em um de seus vários experimentos, o Google
aumentou o número de resultados por página
de 10 para 30. Isso aumentou o tempo de
carregamento de 0.4s para 0.9s, o que diminuiu
em 20% o tráfego das buscas.
http://blog.caelum.com.br/por-uma-
web-mais-rapida-26-tecnicas-de-
otimizacao-de-sites/
33. Performance
1 – Habilite GZIP
2 – Minifique JavaScript
3 – Minifique CSS
4 – Comprima o HTML
5 – Não redimensione imagens no HTML
6 – Otimize as imagens
7 – Pense no formato das imagens
8 – Diminua cookies e headers
9 – Junte arquivos JavaScript
10 – Juntar arquivos CSS
11 – Use Sprites
12 – Use Data URIs
13 – Configure os headers
14 – Tire firulas do design
15 – Especifique o tamanho das imagens
16 – Coloque o JavaScript no fim
17 – Coloque o CSS no topo
18/ 19 – Adie o carregamento do que puder e Abuse do
carregamento assíncrono
20 – Otimize o First-View e o Above the Fold Time
21 – Design performático
22 – Automatize
23 – Use ferramentas de diagnóstico
24 – Pré-carregue componentes
25 – Escreva código eficiente
26 – Dispare logo o onload
34. Performance
Passe longe do jQuery em sites mobile.
São 32 KB de dados gzipados para se transferir numa
rede potencialmente ruim como 3G. E quando os
dados chegam, ocupam 95 KB sem gzip (mesmo
minificado). E tudo isso tem que ser lido e parseado
antes mesmo de se pensar em executar seu código.
As estatísticas de carregamento do jQuery em
dispositivos móveis são assustadoras. Num iPad 2 topo
de linha, só o parsing e eval do jQuery demora 5x mais
que no Desktop. Um iPhone 3, que, apesar de antigo,
é melhor que a maioria dos celulares que as pessoas
têm em seu bolso, demora incríveis 850ms. E mesmo
um iPhone 4 gasta uma eternidade se comparado ao
Desktop – 320ms vs. 35ms.
35. Performance
O cache do iPhone, por exemplo, não guarda
nenhum componente acima de 15 KB, e isso sem
gzip (fonte). O Zepto.JS tem 24 KB na sua versão
atual já minificada (o jQuery tem 95 KB). Se der,
prefira JavaScript puro e talvez alguns
microframeworks pra complementar – o excelente
hammer.js, por exemplo, adiciona eventos touch
por apenas 5 KB (2KB gzipped).
36. Performance
Os widgets de redes sociais como Facebook,
Twitter e Google+ então são atrocidades mobile.
Já são lentos no Desktop e trazem problemas sérios
de indisponibilidade se não carregados
assincronamente. No celular? São suicídio. Mas o
legal é que a maioria da plataformas móveis já
vem com recurso de Compartilhar embutido.
Tanto no iOS quanto no Android você pode
compartilhar uma página no Facebook ou Twitter
direto do navegador sem nenhum widget.
37. Performance
Não use display: none pra esconder conteúdo
no celular. Ele será carregado mesmo assim.
(uma imagem, ou anúncio)
Uma ideia melhor é fazer carregamento
condicional de conteúdo via Ajax por exemplo.
Usando Mobile First, você pode fazer seu HTML
inicial apenas com o conteúdo usado por todos
os devices. E se houver mais conteúdo para telas
maiores, por exemplo, carregue via Ajax
posteriormente.
38. Recomendações de Follow
Sérgio Lopes - @sergio_caelum
Tárcio Zemel - @tarciozemel
Bernard de Luna – @bernarddeluna
Zeno Rocha - @zenorocha
Horácio Soares - @horaciosoares
39. Fontes
Sergio Lopes - http://sergiolopes.org/palestra-mobile-web/#slide-capa
Ethan Marcotte - http://www.abookapart.com/products/responsive-web-design
Luke Wroblewski - http://www.abookapart.com/products/mobile-first
Smashing Magazine - http://www.smashingmagazine.com/
Brad Frost - http://bradfrostweb.com/
Steve Souders - http://www.stevesouders.com/blog/
Brendan Eich – http://brendaneich.com
Paul Kinlan – http://paul.kinlan.me/
Arquitetura de Informacao - http://arquiteturadeinformacao.com/2012/07/22/5-coisas-que-
aprendi-em-um-projeto-mobile-first-responsive-design-para-o-google/
Mobile book - Smash Magazine - https://shop.smashingmagazine.com/the-mobile-book-deluxe-
bundle.html
Design Responsivo x AdaptativoUma versãoqueflui de acordo com o deviceUma versãoespecificaparacada device (desktop, tablet, smartphone)http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.phpCOMO O DESIGN RESPONSIVO É VISTO PELOS BUSCADORESO design responsivo já é defendida por muitos já faz algum tempo, mas só recentemente começou a ganhar destaque depois que o Google confirmou indiretamente que para a área de SEO (otimização para buscadores) o design responsivo é o mais indicado. É mais fácil para o Google perceber que o www.exemplodesite.com.br tem um layout que se adapta a qualquer tela do que entender que o www.outroexemplo.com.br, o m.outroexemplo.com.br e o tablet.outroexemplo.com.br são todos o mesmo sites e não estão apenas copiando conteúdo um do outro."Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivos, oferecendo o mesmo código HTML para todos os dispositivos e usando apenas media queries de CSS para decidir como a informação deve ser renderizada."
A List ApartUso das CSS Media Queries em 2010RWD – Responsive Web Design
Uso de Grids
Nãoadiantaredimensionar a imagem, se ela continua com mais de 5mb e o usuárioestana 3G/2G.Video – Responsivo.Uso do http://adaptive-images.com/Add .htaccess and adaptive-images.php to your document-root folder.Add one line of JavaScript into the <head> of your site.Add your CSS Media Query values into $resolutions in the PHP file.OUhttp://wil.to/picturefill/Uso da tag <picture> com polyfill baseado nos elementos source usando os atributos media e srcset.
Uso de Media Queries érecomendacaodesde 19 de junho de 2012 - http://www.w3.org/TR/css3-mediaqueries/http://responsive.is/typecast.comÉ preciso escolher os melhores breakpoints“Breakpoints” são as larguras de tela (em pixels) onde o site começa a se transformar e adicionar conteúdo extra dependendo do dispositivo onde você está navegando. Por exemplo: a partir dos 410px de largura, entendemos que o usuário não está mais navegando em um smartphone no modo “retrato”, e sim no modo “paisagem”. E então servimos a ele um conteúdo e uma interface específica para aquele tipo de navegação.MobileMobile LandscapeTabletTablet LandscapeDesktop
Sóusar media-queries e trocar tudopraporcentagem no cssnãovaifazer a aplicaçãoserresponsivaouter a melhorexperienciapara o usuário.Existemvarios outros desafios. O queimportaé o conteúdo. Fazer um car sort, com usuarios e designers e ver o queéimportante, o quedeveaparecerounão.Analisar a persona, qual o goal de cada um.
Dedo é diferente de mouseNo celular, não existe o estado hover, tão comum no Desktop. Você não tem como passar o dedo em cima de algo sem causar um clique.
http://sergiolopes.org/media-queries-retina/0.75dppx (= 72dpi) - Androidlow-end, tipo Galaxy 5.1dppx (= 96dpi) - Notebooks, desktops e vários celulares e tablets.1.33dppx (= 127dpi) - Nexus 7.1.5dppx (= 144dpi) - Vários Androids, como Atrix ou S2.2dppx (= 192dpi) - Telas retina da Apple, celulares e tablets mais modernos como S3.3dppx (= 288dpi) - Celulares ultra modernos, como Droid DNA e Galaxy S4.
xhdpi (extra high dpi) - pixel ratio 2 - ex. Galaxy S3, Galaxy Note 2, Nexus 4.hdpi (high dpi) - pixel ratio 1.5 - ex. Galaxy S2, Motorola Atrix, NexusOne.tvdpi - pixel ratio 1.33 - usado só no tabletNexus 7.mdpi (mediumdpi) - pixel ratio 1 - telas normais, comuns em smartphones simples.ldpi (lowdpi) - pixel ratio 0.75 - aparelhos low-end como o Galaxy 5.dpi altíssimo (ainda sem nome) - pixel ratio 3 - aparelhos Full HD com tela 1920x1080 como o HTC Droid DNA e o Galaxy S4.O viewport é o quanto de conteúdo cabe na tela, em CSS pixels, não device pixels. Todos os iPhones mostram 320px de conteúdo, não importando se é retina (com 640px físicos) ou não. Precisa ser assim, pois os pixels físicos são muito pequenos na tela retina. Seria péssimo pro usuário mostrar 640px de conteúdo, tudo ficaria muito pequeno.No fim, pra usabilidade, conta mais o tamanho do viewport que o tamanho físico da tela.Quando lemos comparativos sobre aparelhos, é comum ver as pessoas citando DPIs físicos. Por exemplo:iPhone não-retina tem 163 dpi com largura de 320pxiPhone retina tem 326 dpi com largura de 640pxGalaxyS tem 233 dpi com largura de 480pxGalaxyY tem só 133 dpi com largura de 240pxOlhando novamente pra lista de aparelhos vemos que todos têm a mesma largura de viewport e a variação na densidade de CSS pixels é bem menor:iPhone não-retina tem 163 dpi de conteúdo com viewport de 320px de larguraiPhone retina tem 163 dpi de conteúdo com viewport de 320px de larguraGalaxyS tem 155 dpi de conteúdo com viewport de 320px de larguraGalaxyY tem 177 dpi de conteúdo com viewport de 320px de largura
Nem só de jQuery é feito o mundo dos frameworks JavaScript. Há vários inclusive focados em mobile! O famoso jQuery Mobile é um plugin cheio de componentes para mobile, com temas interessantes e muitas funções. Há ainda o jqTouch e o fantástico SenchaTouch.Não use nenhum deles se você vai fazer um site mobile. O SenchaTouch, outro poderoso framework JavaScript com foco mobile, atinge inacreditáveis 580 KB em sua versão completa, e o jQuery Mobile, incríveis 91 KB, além dos 95 KB do jQuery em si. Esses frameworks de componentes são indicados para mobile apps construídas na Web, em especial se você for empacotá-las, usando algo como o PhoneGap. Pra sites, são um tiro no pé. Obviamente eles podem melhorar muito em próximas releases, mas há muito a ser enxugado para serem candidatos a um site web mobile.