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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
Base da apresentação sobre Web Design Responsivo para as turmas de primeiro e terceiro ano do curso técnico de Web Design da escola SESI/SENAI.
Reprodução permitida,
Esta apresentação foi em 11 de abril de 2011, na Código Digital para falar um pouco sobre o API do HTML5. Buscamos várias referências e artigos de especialistas para falar um pouco das mudanças do html.
O Mobile First veio para atender a demanda da web por adaptação ao crescente uso da internet em dispositivos móveis, mas para o desenvolvedor se adaptar a esta nova forma de pensar para web, é preciso quebrar alguns paradigmas. Nesta palestra irei mostrar o workflow de desenvolvimento pensando primeiramente em desenvolver sites adaptados para dispositivos móveis e assim tirar proveito das vantagens de se construir um site ou aplicação web em vários dispositivos.
Se você é daqueles que vê uma página recheada de novas tags estruturais do HTML5 (cabeçalho com HEADER, rodapé com FOOTER, NAVs, SECTIONs, ASIDEs, etc), e não tem certeza se aquilo realmente está correto; ou se já se perguntou "qual o significado de cada uma dessas tags", então você precisa aprender a semântica correta das novas tags do HTML5 e finalmente saber quando (não) usá-las.
Os acesso a aplicações web vindo de dispositivos móveis tem aumentado exponencialmente, e um dos grandes desafios hoje para o desenvolvedor é criar aplicações que ofereçam o melhor dos recursos de cada dispositivo – mas sem replicar código específico a cada plataforma.
Nessa palestra serão compartilhadas experiências vividas e estratégias adotadas na Globo.com, na migração de portais web para aplicações web multiplataforma. É mostrado como recursos de linguagens conhecidas como HTML5, JavaScript e CSS3 têm nos auxiliado na construção de um único código acessado em qualquer dispositivo – explorando o que de melhor cada plataforma oferece. Veremos também como temos utilizado Responsive Design, RESS (Responsive design with server side components) e Mobile First como apoio nessa caminhada.
Aprenda a cobrar seus serviços com Dhiego BicudoDhiego Bicudo
Palestra especialmente preparada para profissionais de comunicação e marketing que possuem dificuldades em cobrar seus serviços e como se precificar neste competitivo mercado.
Saiba como desenvolver Apps para múltiplos sistemas operacionais e dispositivos móveis usando HTML5.
Com uma única base de código em HTML5, você pode gerar apps nativos para iOS, Android, Windows 8 e Windows Phone, Tizen e diversos outros sistemas operacionais móveis.
Usando o Intel XDK e outras ferramentas gratuitas da Intel, você consegue aprender rapidamente tudo o que precisa para iniciar o desenvolvimento de apps ainda hoje.
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.
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.
É necessário uma boa estratégia e preparação para implementar Responsive Design. Na fase de preparação deve-se preparar a estrutura, filtrar requisitos do cliente e apresentar possíveis soluções antes de fazer Design Visual do website.
Quer aprender a programar para Android nativo?
Conteúdo da primeira aula do curso básico de Android!
Introdução ao Android
Ambiente de Desenvolvimento
Arquitetura
Estrutura da Aplicação
Hello World
Desenvolvimento de aplicativos mobile híbridos
Apresentação realizada para os funcionários do Centro de Informática e Automação de Santa Catarina - CIASC
Utilização CMS - WordPress | Criação de um site de um restauranteDiogoAlfama
CMS - WordPress
Utilização da estrutura do CMS para a criação de um site de um restaurante
Utilização dos plugins disponíveis e personalização com templates e temas grátis
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
Semelhante a Responsive Web Design - Introdução (20)
1. VÍTOR TEIXEIRA | PRIMEIT @ SAPO UX Team
INTRODUÇÃO AO RESPONSIVE WEB DESIGN
@vsdteixeira vteixeira@primeit.pt
PrimeAcademy
Maio 2014
2. RESPONSIVE WEB DESIGN
Ethan Marcote
MOBILE FIRST
Luke Wroblewski
MOBILE UX - PRINCÍPIOS BÁSICOS
Vítor Teixeira - http://pae.gg.sl.pt
3
2
BIBLIOGRAFIA
1
3. ALGUNS NÚMEROS
1900M
Utilizadores globais de internet em
dispositivos móveis em 2015
1700M
Utilizadores globais de internet em
dispositivos fixos em 2015
Fonte: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
4. Isto já está a acontecer!
É necessária uma solução…
5. RESPONSIVE WEB DESIGN // RWD
Adaptar o layout e interação de um site a um variado
número de resoluções, densidades de ecrã e modos de
interação
6. Não são apenas resoluções
diferentes, são também
diferentes contextos e formas
de interação
7. ALICERCES DO RWD
Fluid Grids
CSS Media Queries
Imagens e Media flexíveis
Mobile First / “Preocupação
com contexto”
RWD
12. NÃO ESQUECER DA META
<meta name=“viewport” content=“width=device-
width, , initial-scale=1.0”>
A largura do nosso site fica optimizada para o dispositivo em
que está a ser visto
13. SERÁ QUE ESTÁ BEM ASSIM?
grid.html
http://pau.7q.sl.pt
14. DE PX PARA %
Para começar, um pouco de matemática…
!
target / context = result
16. Prática
Quando estiverem mais à vontade podem parar de passar pixels para percentagens e começar a pensar nas
relações baseadas nas proporções entre elementos e seus contentores diretamente
DICAS
Não arredondar valores… 33%+33%+33% != 100%
Escrever o racional em comentário ao lado da regra
○
24. CUIDADO
Devido às imagens serem as mesmas de desktop, os sites têm o potencial de ficar
pesados para ambiente mobile
<picture> element, srcset, etc em desenvolvimento… mas ainda é cedo para
usar…
JS to the rescue! [For now…]
http://ink.sapo.pt/ui-elements/images/#targeting-multiple-devices
https://github.com/scottjehl/picturefill
JS
28. FEATURES QUE PODEM SER TESTADAS
Mais informação: http://www.w3.org/TR/css3-mediaqueries/#media1
width min|max prefixes
height
device-width
device-height
orientation portrait | landscape
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
29. ANATOMIA DE UMA MEDIA QUERY
@media screen and (min-width:1024px){
body{
/* Your rules here… */
!
}
}
…és do tipo ‘screen’?
…e tens pelo menos 1024px de largura?
30. UMA QUESTÃO DE REGRAS
grid-responsive.html
http://pau.jz.sl.pt
31. POSSIBILIDADE DE CHAINING
@media screen and (min-width:480px)
and (orientation: landscape){
body{
/* Your rules here… */
}
}
…és do tipo ‘screen’?
…e tens pelo menos 480px de largura?
… e a orientação do dispositivo é landscape?
32. ESTADO DO SUPORTE
>IE8 suportam media-queries!
Para os outros: JS again // https://github.com/scottjehl/Respond
38. Definir um scope para os
nossos esforços, identificando
as resoluções mais usadas pelo
nosso público
39. IDENTIFICAR BREAKPOINTS
Definir Breakpoints naturais // Device Agnostic
Desenhar primeiro o protótipo mobile
Esticar até ficar mal,
Voltar atrás um pouco: Breakpoint
Olhar para os devices existentes e usar como base para os nossos testes
ex: 320, 480, 600 , 768, 1024, 1200
!
[Layout fluído continua a garantir que dificilmente teremos algo partido
noutras resoluções]
◎
41. DESIGN ITERATIVO
Photoshop until perfect:
1 mockup por cada view: mobile, tablet, wide, etc ~= 4 por ecrã
Enviar e esperar feedback
Alterar tudo o que for necessário
Enviar e esperar feedback…
!
[Review é tipicamente baseado apenas no aspeto]
!
Uma perspetiva mais ágil:
Fazer um mockup/sketch genérico
Discutir com a equipa como deve responder a diferentes dispositivos
e browsers // mobile, nojs, no-mediaqueries, etc
Corrigir apenas o que é crítico nos mockups e rever novamente
!
[Decisões para exceções antes de ser demasiado tarde]
Photoshop apenas para Design Direction
42. … E COLABORATIVO
Fazer protótipos responsive o mais cedo possível
!
[Se for necessário em colaboração com os developers]
Mais informação: http://www.slideshare.net/stephenhay/mobilism2012 // http://viljamis.com/blog/2012/responsive-workflow/
O browser é o nosso canvas e não é estático
Review em reuniões interativas com hands-on
!
[Levar sempre um conjunto de dúvidas para validar com restantes]
44. BASIC LIFE SUPPORT
Começar sempre com os estilos adequados a mobile e experiências mais
simples // Content First
!
[Fazer media-queries com min-width ascendente (Progressive Enhancement)]
Assim mesmo sem suporte para media-queries, todos os browsers vão poder
ver esta versão simples e não carregar por defeito a versão com mais
detalhes do desktop
45. PREVENIR EM VEZ DE REMEDIAR
Não depender de media-queries para degradar a experiência mas sim para
melhorar, se houver suporte
Exemplo: ethanmarcotte.com
/* Default, linear layout */
.page {
margin: 0 auto;
max-width: 700px;
width: 93%;
}
/* Small screen */
@media screen and (min-width: 600px) { … }
!
/* "Desktop" */
@media screen and (min-width: 860px) { … }
!
/* IT'S OVER 9000 */
@media screen and (min-width: 1200px) { … }
46. JAVASCRIPT RESPONSÁVEL
Load recursos dependentes de javascript apenas com javascript
Markup stubs
HTML Injection via Javascript
Se JS não estiver disponível, utilizador não vai ter o Markup desnecessário
!
Se for algo que não queremos apenas em determinadas resoluções temos:
HEAD.JS // http://headjs.com/
!
Permite carregar o restante Javascript apenas quando nós quisermos
[Também faz feature detection]
JS
if(screen.width>480){…}