Este documento fornece informações sobre um profissional de design responsivo. Em três frases:
O documento resume as qualificações e experiência de um designer especializado em design responsivo, incluindo formação acadêmica em design gráfico e interação. Ele atua como designer de interação, professor e diretor de uma escola de design. O foco é no desenvolvimento de sites e aplicativos com layout flexível adaptado a diferentes telas.
Business Analysis Canvas, BAC é uma ferramenta visual e colaborativa que tem como objetivo simplificar a comunicação e facilitar o entendimento das demandas de negócio através da construção de um modelo de visão única. A construção do modelo se dá através da colaboração, geração de ideias, debate e compartilhamento de experiência e conhecimento onde as partes interessadas interagem e atuam ativamente.
BAC, foi inspirado e adaptado do BMG (Business Model Canvas) que foi apresentado pelo Alexander Osterwalder no Livro Business Model Generation, nos modelos A3 da TPS (Sistema Toyota de Produção), nas técnicas Design Thinking, Visual Thinking ,Gestão à Vista, Kanban e Lean.
Business Analysis Canvas, BAC é uma ferramenta visual e colaborativa que tem como objetivo simplificar a comunicação e facilitar o entendimento das demandas de negócio através da construção de um modelo de visão única. A construção do modelo se dá através da colaboração, geração de ideias, debate e compartilhamento de experiência e conhecimento onde as partes interessadas interagem e atuam ativamente.
BAC, foi inspirado e adaptado do BMG (Business Model Canvas) que foi apresentado pelo Alexander Osterwalder no Livro Business Model Generation, nos modelos A3 da TPS (Sistema Toyota de Produção), nas técnicas Design Thinking, Visual Thinking ,Gestão à Vista, Kanban e Lean.
Como produzir conteúdo de qualidade de forma consistenteEmília Chagas
Nesta apresentação, você vai conhecer os quatro pilares do marketing de conteúdo:
- Planejamento e Distribuição: pilares da consistência;
- Criação e Análise: pilares da qualidade.
Uma breve palestra sobre a otimização de websites. Serão demonstradas algumas técnicas para otimizar a velocidade de carregamento de um website.
Vídeo explicativo: http://youtu.be/cvLNWIuc3RQ
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
Desenvolver um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.
Matriz do Programa de Pós Graduação em Design Editorial e Infografia oferecido pelo IED São Paulo. Mais informações acesse: http://ied.edu.br/sao_paulo/curso/design-editorial-e-infografia/
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.
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.
Como produzir conteúdo de qualidade de forma consistenteEmília Chagas
Nesta apresentação, você vai conhecer os quatro pilares do marketing de conteúdo:
- Planejamento e Distribuição: pilares da consistência;
- Criação e Análise: pilares da qualidade.
Uma breve palestra sobre a otimização de websites. Serão demonstradas algumas técnicas para otimizar a velocidade de carregamento de um website.
Vídeo explicativo: http://youtu.be/cvLNWIuc3RQ
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
Desenvolver um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.
Matriz do Programa de Pós Graduação em Design Editorial e Infografia oferecido pelo IED São Paulo. Mais informações acesse: http://ied.edu.br/sao_paulo/curso/design-editorial-e-infografia/
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.
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.
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.
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
Evoluindo a experiência web no SporTV Play com ReactGuilherme Garnier
Ao projetar a nova plataforma de vídeos ao vivo no SporTV Play durante as Olimpíadas de 2016, com foco em maior desempenho e resiliência, construímos uma nova interface web com React e outras técnicas modernas de desenvolvimento front-end.
Nesta palestra, será apresentada essa experiência e analisadas as principais técnicas adotadas, dificuldades e soluções encontradas no caminho, incluindo:
- gerenciamento de estado com MobX (e por que não Redux)
- arquitetura do CSS: estilos inline, CSS in JS ou CSS modules?
- estruturação de componentes: presentational components e container components
- organização e compartilhamento de componentes
- dicas para otimização da performance com React
O participante sairá da palestra com uma visão prática e ampla do trabalho de front-end em um dos projetos mais importantes da plataforma de vídeos da Globo.com.
De março a maio de 2012 mais de 30 unidades do Senac São Paulo na capital e interior recebem o ciclo gratuito de palestras Road Show TI Experience 2012.
O evento tem a proposta de apresentar o que há de mais novo e relevante no mundo da tecnologia da informação e no mercado de trabalho na área.
Nesta apresentação mostro como o HTML5 e suas tecnologias acessórias são a nova fronteira no projeto de aplicações WEB
A cultura do conhecimento serve como o "motor invisível e intangível" para a circulação e a troca de produtos de massa: discussão, negociação e desenvolvimento coletivos.
Convergência representa uma transformação cultural: não depende apenas da tecnologia e não ocorre por meio de aparelhos, mas por uma cultura de convergência (onde há uma transformação na mente dos usuários).
Aula para a disciplina "Projeto de Interface" dos cursos "Sistemas para Internet" e "Sistemas para Smartphones e Tablets" do Centro Tecnológico da Universidade Positivo.
Wireframes para sites e dispositivos móveisTersis Zonato
Aula para a disciplina "Projeto de Interface" dos cursos "Sistemas para Internet" e "Sistemas para Smartphones e Tablets" do Centro Tecnológico da Universidade Positivo.
Aula para a disciplina "Projeto de Interface" dos cursos "Sistemas para Internet" e "Sistemas para Smartphones e Tablets" do Centro Tecnológico da Universidade Positivo.
Aula inicial para a disciplina "Projeto de Interface" dos cursos "Sistemas para Internet" e "Sistemas para Smartphones e Tablets" do Centro Tecnológico da Universidade Positivo.
Apresentada no evento Semana D 2014:
A palestra tem por objetivo demonstrar a importância do design de interação e do profissional da área, relacionando com conceitos filosóficos que buscam compreender o usuário e a tecnologia.
67. Margin e padding flexíveis
1. Ao definir a propriedade margin de um elemento, o
contexto é a largura do elemento que o contém;
!
2. Ao definir a propriedade padding de um elemento, o
contexto é a largura do próprio elemento.
padding
conteúdo
margin
border
68. CSS box-sizing
http://css-tricks.com/box-sizing/
É possível controlar o tamanho
com width, a borda com border e
as margens externas e internas
com margin e padding. Box
model é como todas essas
propriedades se relacionam pra
determinar o tamanho final do
elemento.
.elemento {
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
69. Margin e padding flexíveis
#logo p {
Contexto (px)
padding: 0 0 0 1.666666666667%; /* 5px / 300px */
}
5px ÷ 300px
1.666666666667%
#logo p
Alvo (px)
Resultado x 100 (%)
70. Margin e padding flexíveis
#content {
Contexto (px)
padding: 0 4% 0 0; /* 40px / 1000px */
}
40px ÷ 1000px
4%
#content
Alvo (px)
Resultado x 100 (%)
CUIDADO
com o float!
cuidado com o float
73. Imagens fluídas
O banner está com uma
altura fixa de 400px
podendo travar o tamanho
em telas menores.
!
A imagem tem 350px de
altura com a borda.
!
Portanto é possível usar um
padding-bottom de 50px.
86. Media Queries
<link rel=”stylesheet” href=”styles.css” media=”all” />
!
<link rel=”stylesheet” href=”main.css” media=”screen” />
!
<link rel=”stylesheet” href=”print.css” media=”print” />
@media screen and (max-width: 1080px) {
!
}
@media screen and (min-width: 320px) and (max-width: 480px) {
!
}
87. Contexto (px)
1000px ÷ 1080px
92.59%
Media Queries
.container
Alvo (px)
Resultado x 100 (%)
@media screen and (max-width: 1080px) {
.container {
width: 92.59%;
}
}
88. Contexto (px)
960px ÷ 1080px
88.88%
Media Queries
#header
Alvo (px)
Resultado x 100 (%)
@media screen and (max-width: 1080px) {
#header {
width: 88.88%;
}
}
89. Media Queries
A div #wrapper está com a
propriedade min-width
definida com 1000px.
!
Basta alterar para 100% e o
conteúdo irá se adaptar à
largura da tela.
@media screen and (max-width: 1080px) {
#wrapper {
min-width: 100%;
}
}
125. Touch events
• touchstart
Quanto o dedo toca a superfície
!
• touchmove
Quanto o dedo desliza na superfície
!
• touchend
Quando o toque é finalizado