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.
O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2013 Construsite Brasil - Desenvolvimento web.
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
Palestra para iniciantes no desenvolvimento responsivo, onde são explicada algumas técnicas para dar maior orientação ao desenvolvedor de como se aprofundar posteriormente.
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap.
Veja quais as melhores estratégias para um bom site responsivo. Dicas para melhorar a experiência dos usuários. Aplicando Mobile-first em seus projetos.
O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2013 Construsite Brasil - Desenvolvimento web.
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
Palestra para iniciantes no desenvolvimento responsivo, onde são explicada algumas técnicas para dar maior orientação ao desenvolvedor de como se aprofundar posteriormente.
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap.
Veja quais as melhores estratégias para um bom site responsivo. Dicas para melhorar a experiência dos usuários. Aplicando Mobile-first em seus projetos.
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.
Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
Nessa apresentação explico um pouco o que envolve o desenvolvimento de uma interface responsiva, alguns conceitos sobre media-queries, grids e como utilizar o Bootstrap de forma eficiente e rápida.
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.
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.
Palestra sobre Aplicações Responsivas, para o 15 Encontro Locaweb em Porto Alegre.
Você nao deve pensar so no fron-end mas em todo o conjunto do projeto.
E isso se aplica a Mobile em geral, Aplicações nativas ou web.
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.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
Padrões Web e algumas vantagens para o designerDiego Eis
Palestra bem básica sobre algumas vantagens do CSS. Vantagens mais ligadas a design. Palestra feita para iniciantes e interessados no Semana do Design feito na Faculdade Impacta de Tecnologia em SP.
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.
Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
Nessa apresentação explico um pouco o que envolve o desenvolvimento de uma interface responsiva, alguns conceitos sobre media-queries, grids e como utilizar o Bootstrap de forma eficiente e rápida.
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.
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.
Palestra sobre Aplicações Responsivas, para o 15 Encontro Locaweb em Porto Alegre.
Você nao deve pensar so no fron-end mas em todo o conjunto do projeto.
E isso se aplica a Mobile em geral, Aplicações nativas ou web.
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.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
Padrões Web e algumas vantagens para o designerDiego Eis
Palestra bem básica sobre algumas vantagens do CSS. Vantagens mais ligadas a design. Palestra feita para iniciantes e interessados no Semana do Design feito na Faculdade Impacta de Tecnologia em SP.
Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?
Esta palestra, ministrada no evento Next Level Apps (Google São Paulo), referencia sites, programas, plugins e serviços que facilitam a organização e execução de aplicativos móveis.
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
Workshop que foi ministrado para a Semana da Computação no IFSP - São Carlos, sobre os conceitos de Desenvolvimento Web utilizando Bootstrap além de poder conhecer a fundo algumas bibliotecas e padrões para customizar nossos projetos e uma breve introdução sobre a importância de prototipagem.
IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...Diego Santos
Slides da palestra: IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando Puppet. Esta palestra foi apresentada pelo colaborador da 4Linux Guto Carvalho, na CloudConf.
Palestra de Neto Marin no InterCon Dev - Android, em setembro de 2013, sobre Next Level Apps. Saiba mais em: http://intercon.imasters.com.br/dev/android/
Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima
A apresentação "Responsive Web Design - Entregando a informação da melhor maneiro possível" foi mostrada aos meus colegas de trabalho com o intuito de chamar a atenção para a maneira como fazemos nossos sites e como o público vê os nossos sites.
Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3.
Apresentação feita para o treinamento dos colaboradores da Vitrio.
Público alvo do treinamento: Analistas de conteúdo, Designers e equipe de Marketing Digital.
O principal assunto era uma breve introdução ao JavaScript ,jQuery e plugins. Entretanto, abrangemos outros tópicos, tais como: Desenvolvimento em Camadas, requisições, performance de web sites e algumas ferramentas.
Material de apoio do segundo dia do curso de verão no Senac. Uma introdução aos conceitos do Rails e apresentação da proposta do projeto a ser desenvolvido.
A idéia é cumprir os objetivos propostos nas próximas três aulas.
1. WEB DESIGN RESPONSIVO
Rodrigo Simoni
CEO da Brandweb
facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br
sexta-feira, 28 de setembro de 12
2. O IMPACTO DOS
DISPOSITIVOS MÓVEIS
sexta-feira, 28 de setembro de 12
3. 255 milhões de linhas móveis ativas no Brasil
Fonte: Anatel
sexta-feira, 28 de setembro de 12
4. 69%
dos brasileiros têm celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12
5. 46%
navegam na internet através de celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12
6. 77,7 milhões de pessoas na internet mobile
Fonte: IBGE
sexta-feira, 28 de setembro de 12
7. Tablets
275%
Crescimento de tablets no Brasil em 2012
Fonte: IDC Brasil
sexta-feira, 28 de setembro de 12
9. Estes Números estão crescendo
Alguns motivos:
Crescimento da classe C
Xing Ling com internet
Popularização da intenet
Redes sociais
sexta-feira, 28 de setembro de 12
10. O que é Web Design
Responsivo?
sexta-feira, 28 de setembro de 12
11. O que é Web Design Responsivo?
É uma técnica de estruturação HTML e CSS, em que o
site se adapta em qualquer tamanho de tela sem que
precise fazer versões do site para cada dispositivo.
sexta-feira, 28 de setembro de 12
13. Como surgiu?
Em 2010, Ethan Marcotte publicou um artigo no blog A List
Apart apresentando pela primeira vez o conceito e as
técnicas de Web Design Responsivo.
sexta-feira, 28 de setembro de 12
14. Como surgiu?
Leitura obrigatória:
sexta-feira, 28 de setembro de 12
16. Os ingredientes
Como fazer de fato um site responsivo?
Em termos de front-end, os ingredientes são:
1. Grid flexível
2. Imagens e mídias flexíveis
3. Media queries
sexta-feira, 28 de setembro de 12
18. 1. Grid flexível
Grid é um conjunto de linhas bases que fornecem uma
estrutura para o seu layout.
sexta-feira, 28 de setembro de 12
19. 1. Grid flexível
Grid é um conjunto de linhas bases que fornecem uma
estrutura para o seu layout.
sexta-feira, 28 de setembro de 12
20. 1. Grid flexível
Site de exemplo:
sexta-feira, 28 de setembro de 12
21. 1. Grid flexível
Site de exemplo:
• Faça seus layouts usando grids.
• Pense em como seu layout se
adaptará nos smartphones e
tablets.
• Exemplo de grids: http://960.gs/
sexta-feira, 28 de setembro de 12
22. 1. Grid flexível
Antes de tudo insira a meta tag viewport.
Serve para desativar a escala original do navegador, definindo uma nova escala,
orientando como o site deve ser exibido, além de controlar de zoom do dispositivo.
<meta name="viewport" content="width=device-width;
initial-scale=1.0">
sexta-feira, 28 de setembro de 12
25. 1. Grid flexível
Decore a fórmula mágica:
objeto ÷ contexto = resultado
sexta-feira, 28 de setembro de 12
26. 1. Grid flexível
Fórmula mágica:
objeto ÷ contexto = resultado
300px ÷ 960px = 0.3125
Coloque o ponto duas casas para a direita e acrescente o sinal de %.
sexta-feira, 28 de setembro de 12
28. 1. Grid flexível
Fontes flexíveis - trocar px por em
Os valores de tamanho das fontes devem ser substituídos de px para em.
O Valor padrão das fontes considerada pelas browsers é de 16px, exemplo:
.chamadas h1 {
! font: 30px arial;
! color: #666;
! margin: 1%;
}
Fórmula: 30 ÷ 16 = 1.87500
No caso de fontes, não é necessário posicionar o ponto para direita.
sexta-feira, 28 de setembro de 12
29. 1. Grid flexível
Fontes flexíveis - trocar px por em
.chamadas h1 {
! font: 1.87500em arial; /* 30px / 16px */
! color: #666;
! margin: 1%;
}
sexta-feira, 28 de setembro de 12
31. 2. Imagens flexíveis
As imagens também precisam se adaptar conforme o tamanho da tela, para não “sair
fora” do layout. Então faça o seguinte:
img {
max-width: 100%;
}
A mesma regra serve para outros elementos do html:
img, embed, object, video {
max-width: 100%;
}
sexta-feira, 28 de setembro de 12
32. 2. Imagens flexíveis
Adapte isso para o IE...
img, embed, object, video {
width: 100%;
}
sexta-feira, 28 de setembro de 12
34. 3. Media Queries
São novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consulta
de mídia que o navegador faz quando o seu site for acessado.
Media queries interna no CSS:
@media screen and (max-width: 1024px) { /* Layout para desktops */
Estilos aqui...
}
@media screen and (max-width: 380px) { /* Layout para Smartphones */
Estilos aqui...
}
@media screen and (max-width: 780px) { /* Layout para Tablets */
Estilos aqui...
}
sexta-feira, 28 de setembro de 12
35. 3. Media Queries
Chamando as Media Querie externamente:
<link rel="stylesheet" href="smartphones.css" media="screen and (max-
width:320px)" />
<link rel="stylesheet" href="tablets.css" media="screen and (max-width:
320px)" />
Outros tipos de especificações para Media Queries estão no site da W3C..
sexta-feira, 28 de setembro de 12
36. 3. Media Queries
Media queries não são suportadas pelo IE8 e inferiores. Por isso, devemos usar uma
biblioteca como o css3-mediaqueries-js que faz o trabalho sujo.
Para chamá-la:
<header>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/
css3-mediaqueries.js"></script>
<![endif]-->
</header>
sexta-feira, 28 de setembro de 12
37. Alguns exemplos
http://www.globo.com
http://bostonglobe.com
http://html.adobe.com/edge
http://mediaqueri.es/
sexta-feira, 28 de setembro de 12
38. Obrigado!
Rodrigo Simoni
facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br
sexta-feira, 28 de setembro de 12