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.
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
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.
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.
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/
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.
O que você precisa saber para se tornar um dev front-endDiego Eis
Ser um desenvolvedor front-end já foi mais fácil. Essa palestra mostra o caminho das pedras para os que estão iniciando na área e os que já estão, servindo como guia para assuntos importantes na área.
Link do artigo relacionado:
http://tableless.com.br/tornar-dev-front-end/
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
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.
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.
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/
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.
O que você precisa saber para se tornar um dev front-endDiego Eis
Ser um desenvolvedor front-end já foi mais fácil. Essa palestra mostra o caminho das pedras para os que estão iniciando na área e os que já estão, servindo como guia para assuntos importantes na área.
Link do artigo relacionado:
http://tableless.com.br/tornar-dev-front-end/
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
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.
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.
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.
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.
Partindo de uma introdução ao Node, entenderemos o funcionamento da Engine JavaScript V8, o Loop de Eventos, o Ambiente de Desenvolvimento até criarmos um pequeno Microsserviço com Node.js e o framework Express.
Construindo Aplicações com Zero Load TimeJoão Moura
Hoje em dia o tempo se tornou o asset mais valioso de todos os tempos, ninguém quer e pode desperdiça-lo, nem desenvolvedores nem usuários. Provas disso estão ao nosso redor todos os dias, e definitivamente não somente dentro desse novo contexto de negócios e Startups permeados por metodologias como Agile, Lean, entre outros. Nenhum usuário quer encarar loadbars e nenhum produto pode se dar ao luxo de não ser performático, escalável e principalmente rápido. Os usuários não demandam mais somente uma boa experiência, ela precisa ser ágil! Atualmente existem muitas tecnologias e técnicas que podemos explorar para nos ajudar a alcançar um processo de desenvolvimento e uma aplicação mais rápida, e esse será o objetivo dessa palestra. Irei abordar algumas dessas técnicas e filosofias que irão habilitar você a de fato construir aplicações com Zero LoadTime.
Os testes de interfaces são uma das atividades mais trabalhosas e difíceis de serem executadas, pois além do aspecto subjetivo da pessoa que está testando e a complexidade das técnicas envolvidas, ainda existe a questão de saber se efetivamente aquela interface será funcional para o usuário que irá usar o sistema.
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
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.
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.
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.
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.
Partindo de uma introdução ao Node, entenderemos o funcionamento da Engine JavaScript V8, o Loop de Eventos, o Ambiente de Desenvolvimento até criarmos um pequeno Microsserviço com Node.js e o framework Express.
Construindo Aplicações com Zero Load TimeJoão Moura
Hoje em dia o tempo se tornou o asset mais valioso de todos os tempos, ninguém quer e pode desperdiça-lo, nem desenvolvedores nem usuários. Provas disso estão ao nosso redor todos os dias, e definitivamente não somente dentro desse novo contexto de negócios e Startups permeados por metodologias como Agile, Lean, entre outros. Nenhum usuário quer encarar loadbars e nenhum produto pode se dar ao luxo de não ser performático, escalável e principalmente rápido. Os usuários não demandam mais somente uma boa experiência, ela precisa ser ágil! Atualmente existem muitas tecnologias e técnicas que podemos explorar para nos ajudar a alcançar um processo de desenvolvimento e uma aplicação mais rápida, e esse será o objetivo dessa palestra. Irei abordar algumas dessas técnicas e filosofias que irão habilitar você a de fato construir aplicações com Zero LoadTime.
Os testes de interfaces são uma das atividades mais trabalhosas e difíceis de serem executadas, pois além do aspecto subjetivo da pessoa que está testando e a complexidade das técnicas envolvidas, ainda existe a questão de saber se efetivamente aquela interface será funcional para o usuário que irá usar o sistema.
Darkmira - Performance em aplicações PHPCiro Vargas
Perfomance em aplicações web do SO ao Browser. O que você está perdendo com a falta de performance no seu site? Alguns dados de CRO e SEO e dicas para diminuir o tempo de carregamento da página
No MasterchefBR é comum ouvir que menos é mais, será que o mesmo vale para o desenvolvimento de aplicativos?
Nessa palestra apresentei como desenvolver um App multiplataforma: iOS, Android e Web (Desktop e Mobile) usando Turbolinks 5. Ou seja, como fazer mais (4 plataformas) com menos.
Link para gravação da apresentação: https://goo.gl/KsWujQ
Link para Google Slides: https://goo.gl/BcGSgi
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.
Otimização de Websites para Ganho de Performance & ResiliênciaSucuri
Abordar princípios, técnicas e ferramentas para otimizar e desenvolver websites rápidos, robustos e leves, prontos para receber grande volume de acessos e/ou melhorar scores de web pages analyzers (PageSpeed, YSlow, etc). https://sucuri.net/pt/desempenho-de-sites/
Do MVP ao PWA, melhorando o engajamento com cliente na CVCJanderson Silva
Palestra apresentada no QCon São Paulo 2018 - Um dos grandes desafios na relação entre a oferta de um produto online e o cliente em potencial é garantir uma experiência imersiva que resulte em um engajamento que o induza a escolher seu produto ao invés da concorrência e consequentemente aumente a taxa de conversão online.
Nesta palestra, será apresentada a abordagem técnica que transformou um produto mínimo viável que tinha por objetivo experimentar uma alternativa de busca de pacotes turísticos por mapa em um aplicativo web progressivo que permitiu o vislumbre de grande potencial para o aumento das conversões online, bem como a aceitação e o investimento dos stakeholders.
Serão apresentadas abordagens para o service worker e manifesto de aplicativos web que permitem uma experiência imersiva na tela inicial do usuário como um aplicativo nativo, fornecendo a gestão de cache com indexedDB API, notificações Push e interações ágeis.
Além disto, serão discutidos os desafios encontrados durante a implementação, bem como os ajustes arquiteturais necessários para a evolução e garantia no processo de maturidade do projeto.
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoiMasters
Design UX. O que é e para que serve? Como utilizar no seu projeto e o quanto influencia. Boas práticas na criação de um site.
Nesta palestra, o Guilherme irá mostrar exemplos práticos e irá exercitar o conceito de UX em diversos momentos (da concepção à entrega do produto final).
De uma maneira leve e até bem humorada, a ideia é desmistificar esse conceito e trazer maneiras de utilizar técnicas de UX no dia a dia.
Será abordado ainda, design para desktop x mobile, como projetar um PWA otimizado e também diferenciação entre UX e UI.
Mobile UX: a experiência como vantagem competitiva.
Apresentação utilizada na palestra realizada no dia 31 de maio de 2014, no MobileConf no Rio de Janeiro.
6. Carregamento progressivo, bom ou mal?
05
http://velocityconf.com/velocityny2014/public/schedule/detail/35658
Mostra algo imediato
Frustração
7. techniques that DON’T physically increase the ability of your
app to respond (since device’s connection speed is out of
your control) but instead can help to make your
app feel faster.
How is this possible? Well, the answer is simple: you give your
users the illusion of speed and responsiveness — even
under a slow connection.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
13
http://www.sitepoint.com/3-tips-make-application-feel-faster/
11. Sensação de rapidez
15
Pré carregar
componentes
Menos elementos no
DOM
Dê uma sensação
de página
carregada com
fluidez
Feedback instantâneo
Dicas
Componentes sob
demanda
Organização
simples
Reduzir
verificações
DNS
12. Você carregou mesmo Instagram?
04
http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
ex.
13. Escalas de tempo da
experiência do usuário
08
http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
tempo - aspectos da usabilidade em diferentes tempos de espera do usuário
10min
—————————————————————————————
Visita longa a um
site
Tempo de um
download
1m
—————————————————————————————
Espera por vídeos
transações
bancárias
10s
————————————————————Impaciente
Atenção dispersa
1s———————————————————————————-—
Navegação Livre
O usuário está
no controle
0.1s
————————————————————
Percepção
14. Percepção de uso do usuário no tempo
18
http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
10 anos1 ano1 mês1 semana
Geralmente
verificações
semanais
como
LinkedIn
1 dia
Esperar 1 dia
assume que há
alguma
intervenção
humana
para aprovação
Sites de
colaboração
e B2B podem
ter
transações
que levam
um maior
tempo
Sites que
requerem
campanhas
ou
engajamento
social
Conhecimento
profundo de
sistemas
complexos
ex: Unix
15. Quando a Interface é muito rápida
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Tempo de resposta rápido nem
sempre é o mais eficiente
17
http://www.nngroup.com/articles/too-fast-ux/
Mudanças muito rápidas na
interface podem ser imperceptíveis
Mais rápido pode ser também mais
difícil
16. Elementos que mudam automaticamente
04
Exemplo de como mudanças rápidas na interface podem dificultar o entendimento do usuário
Se um usuário precisa responder a seguinte pergunta:
http://www.nngroup.com/articles/auto-forwarding/
teste: A siemens tem ofertas especiais de máquinas de lavar? R: Não vi
Resultado: elementos que se auto rotacionam podem irritar o usuário e comprometer a
visibilidade
ex.
Neste caso um accordion que se rotaciona
automaticamente. exibindo ofertas,
esconde uma informação que poderia ser
importante. Não importa o quão rápido ele
carregar, ele pode não estar atendendo com
uma informação quando o usuário precisa e
pode distrair tua atenção
17. Páginas que carregam muito rápido
04
Exemplo de como um carregamento rápido nem sempre é o mais eficiente e pode frustar o
usuário
twitter.com
Se tentar utilizar a função de Tweet no momento que a página aparece e está carregando
não consigo
ex.
18. Como ser eficiente na interface?
12
Elementos
Pensar estrategicamente em cada elemento
+ Botões grandes o suficiente para interagir facilmente
+ Projetar elementos de interface de acordo com a função que ele desempenha
+ Atalhos para os usuários mais avançados executarem as tarefas mais rápido
+ Elementos cada vez mais interativos
+ Consistência entre ícones
+ Consistência entre duração de tarefas
+ Sugerir alternativas de forma inteligente
? $
otimizar carregamento
de 8s para 5s aumenta
18% do faturamento
19. Interações mais
eficientes
14
http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
Interações mais eficientes também dão a sensação ao usuário de rapidez
Estados definidos de um botão
Botões precisam responder imediatamente ao
toque e dar a indicação de que algo está
acontecendo
Animações
performáticas
Animações não são firulas
São elas causadoras do
"Wow!"
Dialogue com o usuário
É necessário também passar uma
linguagem acessível ao usuário e que o
faça se sentir confortável