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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
Acessibilidade na Web: Principais problemas e Soluções - FISL14Juliana Fernandes
Palestra dada no FISL14 sobre acessibilidade na web, que aborda os principais problemas encontrados na web e como resolvê-los.
Vídeo da palestra:
http://www.youtube.com/watch?v=yFeOdjCU8rU
Post no blog:
http://www.vivendoporai.com.br/acessibilidade-web-principais-problemas-solucoes-fisl14/
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.
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
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 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.
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.
Acessibilidade na Web: Principais problemas e Soluções - FISL14Juliana Fernandes
Palestra dada no FISL14 sobre acessibilidade na web, que aborda os principais problemas encontrados na web e como resolvê-los.
Vídeo da palestra:
http://www.youtube.com/watch?v=yFeOdjCU8rU
Post no blog:
http://www.vivendoporai.com.br/acessibilidade-web-principais-problemas-solucoes-fisl14/
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.
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
Responsive Design - Responsive UX StrategycomOn Group
Responsive design pode ser descrito como um conjunto de técnicas de design e desenvolvimento web que dão a uma experiência digital a capacidade de se adaptar ao suporte em que está a ser acedida.
No entanto, as mudanças que ocorrem nestas soluções deviam ser mais profundas, pensadas com um mindset virado para a UX.
Responsive UX Strategy apresenta-se como um sistema que integra várias disciplinas, entregando experiências únicas para múltiplos dispositivos com estética apurada e conteúdo relevante, ajustados para responder às expectativas dos utilizadores.
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.
Palestra sobre Design Mobile ministrada no dia 23/10/2013 na Semana Acadêmica da Universidade Anhembi Morumbi em São Paulo, e no dia 24/10/2013 na Jornada Tecnológica da Fatec de Carapicuiba.
Web Designer é uma extensão da prática do design gráfico, onde o foco do projeto é a criação de sites e documentos disponíveis no ambiente da World Wide Web.
Semelhante a Introdução as práticas de desenvolvimento web com design responsivo (20)
Apresentação de Introdução ao Apache Maven, software criado pela Apache Software Foundation com o objetivo de ser um facilitador na criação, automatização e gerenciamento de dependências de projetos.
Esta apresentação demonstra alguns conceitos sobre o software, instalação, configuração e criação de projetos através de linha de comando e também de IDEs como Eclipse e Netbeans.
Apresentação de TCC. Conceitos de Escalabilidade Vertical/Horizontal, Clusterização e Balanço de Carga. Testes de desempenho na Aplicação, desenvolvida com Ruby On Rails, Ajax, MySQL.
Introdução as práticas de desenvolvimento web com design responsivo
1. Introdução as práticas de
Desenvolvimento Web com
Design Responsivo
Meditec 2013
Anderson Davi
andersonrdavi@gmail.com
Régis Eduardo
regiseduardogregol@gmail.com
2. Roteiro
● Introdução
● Sites mobiles ou sites responsivos
● Resoluções de telas
● Técnicas do design responsivo
● Tipos de Medidas no CSS
● Media Queries
● Metatag ViewPort
● Ferramentas
3. Introdução
O que é web design responsivo?
É um web design que responde a quaisquer dispositivos com diferentes
resoluções de tela e, devido a uma série de técnicas é bem apresentado em
qualquer um deles.
Como surgiu?
Tudo começou em um blog chamado A List Part de Ethan Marcotte. Em
2010, ele publicou um artigo com o título Responsive Web Design dando
sugestões e explicações de seus conceitos para o que ele chamou de web
design responsivo.
15. Técnicas do
design responsivo
As três técnicas do Web Design Responsivo:
● Layout Fluído: Também chamado de Flexible Grid Layout, adaptação
"natural", evita barra de rolagens;
● Recursos Flexíveis: Imagens flexíveis, vídeos, etc;
● Media Queries: Reposicionamento de elementos conforme a resolução
atual da tela.
18. Tipos de Medida do CSS
Pixel (px): A mais usada em folhas de estilo (CSS). É uma unidade de
medida fixa. Um píxel, representa um ponto não divisível na tela.
Point (pt): Pontos são mais utilizados em folhas de estilo de
impressão. Um ponto é igual a 1/72 polegadas e também são medidas
fixas.
19. Tipos de Medida do CSS
Ems (em): Ems são utilizados frequentemente para tamanhos de fonte.
São unidades escaláveis. 1em representa o tamanho da fonte do
elemento pai.
Porcentagem (%): Unidade semelhante com "em". Unidade mais
adaptável, pois se adequa a diferentes resoluções de tela.
Boas práticas:
● Utilizar "em" para tamanhos de fonte;
● Utilizar "%" para elementos de bloco.
20. Elementos vs Textos
Elementos são flexíveis, podem se ajustar ao
espaço de tela disponível.
Textos não são flexíveis.
26. Media Queries
Media Types: Recomendação da W3C, desde o CSS2. Apresentar o
site conforme a media.
Tais como:
● all: Folha de estilo para todos os dispositivos;
● print: Utilizada para layout de impressão;
● screen: Utilizada para telas coloridas de computador.
Também existem outras medias como:
braille, embosed, handheld, projection, speech, tty, tv.
27. Media Queries
Exemplos de Media Queries.
<!-- no html -->
<link rel="stylesheet" href="style.css" media="all and (max-width: 320px)">
/** No arquivo */
@media all and (max-width: 320px) {
h1 {
font-size: 0.7em;
}
}
31. Metatag viewport
<meta name="viewport" content="">
width Define uma largura para o viewport. Os valores podem ser em PX ou
“device-width”, que determina automaticamente um valor igual a largura da
tela do dispositivo.
height Define uma altura para o viewport. Os valores podem ser em PX ou
“device-height”, que determina automaticamente um valor igual a altura da
tela do dispositivo.
initial-scale Define a escala inicial do viewport.
user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar
da tela. É ativado quando o usuário bate duas vezes com o dedo em um
lugar da tela.
32. Responsivo ou não?
● O que vale a pena?
○ Montar layout responsivo ou site específico pra
mobile ?
● Vantagens
● Desvantagens
● Bootstrap
35. Referências
ZEMEL, Tárcio. Web design Responsivo, Páginas adaptáveis para todos os
dispositivos. 2012, Casa do código.
LOPES, Sérgio. Design Resposivo Por Uma Web Única. 2012. Disponível em:
<http://sergiolopes.org/responsive-web-design/>
EIS, Diego. Manipulando a metatag viewport. Disponível em: <http://tableless.
com.br/manipulando-metatag-viewport/>