Currently browsing category

HTML/CSS

Como tratar a renderização de imagens em um site responsive

Imagens reponsivas – adaptando elementos visuais em diferentes telas de forma otimizada

Tratar imagens responsivas é um dos maiores desafios quando o assunto é design responsivo em um projeto web e mobile. Temos diferentes soluções para adaptar imagens ao tamanho da tela e muitas vezes é necessário combinar diversas formas para se obter as imagens no layout adequado e tendo uma perfomance otimizada. Vou apresentar …

Criando um menu responsivo com React e Material UI

Quando você possui uma navegação em seu projeto web, ela precisa muitas vezes passar por mudanças e adaptações para se adaptar num browser mobile. Você pode aprender mais sobre como fazer isso em Adaptando um site em dispositivos móveis na prática. Muitas vezes simples soluções usam apenas CSS e diferentes …

Personalize páginas web para uma melhor versão para impressão

Com o CSS, é possível ter diferentes versões de uma mesma página apenas trocando as folhas de estilo. Um ótimo exemplo de ver como isso acontece na prática é explorar os diferentes temas do CSS Zen Garden, um site especialista de mostrar como, com um mesmo markup, é possível dar …

7 motivos para (ainda) usar (e continuar) com o Bootstrap

No desenvolvimento de interfaces na web, nos deparamos as vezes com padronizações e ferramentas de desenvolvimento que ajudam na consistência da interface de um projeto. Atualmente temos uma preocupação maior para adequarmos cada vez mais às necessidades mais complexas de interação. Além disto, temos também que atender diversos browsers com diferentes suportes para …

Um modelo de layout em duas colunas de uma carteira virtual utilizando CSS e layout.

Adaptando um sistema aos dispositivos móveis na prática, com CSS3 e Javascript

Já falei bastante da necessidade em um projeto novo de adotar Mobile First para atender a demanda dos usuários que atualmente navegam muitas vezes mais pelo celular do que pelo Desktop. No entanto, pensar numa experiência mobile como primordial nem sempre é possível, principalmente em projetos já consolidados. Sendo assim, precisamos …

Aplicações Web Multiplataforma – único código, múltiplas experiências

Nesta edição da Qcon 2015, eu tive o prazer de poder palestrar sobre um assunto bastante abrangente e que vem preocupando o cenário web de encontro ao mundo mobile: aplicações HTML5 vs Apps Nativas. Com o título Aplicações Web Multiplataforma – único código, múltiplas experiências, tentei abordar o cenário atual que estamos …

Design Responsivo e Mobile First

Atualmente, os sites estão tendo uma grande necessidade de se adaptarem para diversos dispositivos, e com isto estão surgindo diversas formas para se conseguir este objetivo da melhor forma possível. Atualmente, chegamos na era responsive, onde os sites já construídos, usando media-queries, podem se adaptar ao dispositivo. No entanto, para …

Globo Bootstrap

Baseado no Twitter Bootstrap, o Globo Bootstrap é um framework de front-end poderoso, totalmente intuitivo para facilitar no desenvolvimento dos elementos de interface nos sites da Globo.com. Pode ser também usado em seus projetos como um guideline para produzir de forma consistente os padrões consolidados do Twitter e da Globo.com. …

A página inicial do twtter bootstrap

Twitter Bootstrap em português

Existe uma versão do Bootstrap em português atualizada no github da globo.com. Um kit completo de componentes de interface para iniciar algo mais complexo. Isto é uma boa definição para o Bootstrap do Twitter. Eu diria também que seria um framework de redesenho, tentando aproximar de um modo muito simples …

Twitter Bootstrap

Vamos começar por Bootstrap

Desde os guias de design, até os padrões de interação, temos a eterna necessidade de definir os padrões e a consistência em uma aplicação web de modo a reutilizar o máximo possível os elementos de design. Se não bastasse isto, o twitter, com o Bootstrap foi além e implementou um …