Design Responsivo é uma técnica de estruturação HTML e CSS, em que o site se adapta ao browser do usuário sem precisar definir diversas folhas de estilos para cada resolução.

Como surgiu?

Em 2010, pensando em melhorar a sua experiência de navegação, Ethan Marcotte criou o artigo Responsive Web Design para o blog A List Apart. Ele apresenta o arquiteto inglês Christopher Wren, que disse certa vez que arquitetura é uma arte que “objetiva a eternidade”. Todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Infelizmente o Design Digital não tem a permanência da arquitetura. Na verdade, o que é projetado para internet hoje, já estará desatualizado daqui a duas semanas!

Por que usar?

Nos tempos atuais, além dos desktops e notebooks, é possível acessar a internet através de smartphones, tablets, televisores e já existem até mesmo geladeiras que possuem internet para algumas finalidades, como buscar receitas ou ler as últimas notícias, por exemplo.

Fonte: Webop - http://webop.com.br/blog/mobile/o-crescimento-da-internet-movel-no-brasil

De acordo com a pesquisa realizada pela WMcCann, 41% dos entrevistados acessam a internet pelo celular e, dentre estes, 47% utilizam banda larga móvel (3G). Além disso, 44,4% das pessoas que ainda possuíam o celular convencional, disseram que pretendiam trocar de aparelho em 6 meses ou menos.

“A tendência, este ano, é aumentar ainda mais. As pessoas preferem ter um celular conectado à internet, para acessar de qualquer lugar”, disse o ministro das Comunicações, Paulo Bernardo, ao participar do programa Bom Dia, Ministro, produzido pela EBC Serviços em parceria com a Secretaria de Comunicação da Presidência. “Temos, agora, de ter mecanismos para treinar e orientar as pessoas a entrar nesses ambientes digitais com muita velocidade. E também baratear planos e smartphones”, completou.

Frequentemente estão surgindo novas maneiras de acessarmos a internet, então é preciso conseguir uma estrutura de codificação HTML e CSS que independa do meio utilizado pelo usuário para acessá-la. Afinal, você pode até querer eleger uma categoria como alvo principal: desktops, por exemplo, mas ainda vai haver as diferenças entre sistemas operacionais, browsers, resoluções de tela…

Exemplos:

Rachel Nabors

StartUP Britain

YAML CSS Framework

Como fazer?

O Design Responsivo usa Media Queries, que em uma tradução livre é consulta de mídia. São expressões que direcionam o visitante do seu site para uma folha de estilos diferente de acordo com o dispositivo que ele estiver utilizando.

1
2
3
4
5
6
7
8
9
10
11

/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
/* estilos */
}
 
/* iPads (retrato e paisagem) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* estilos */
}

Quer saber mais?

Ainda é difícil encontrar artigos em português que expliquem tão bem o passo-a-passo de como fazer um Design Responsivo, mas indicamos esses três artigos do blog da PopUp Design.

• Design Responsivo I – O que é e por que usar
• Design Responsivo II – Grids e Texto
• Design Responsivo III – Media Queries e Compatibilidade

• O pulo do gato: @font-face
• Referências rápidas (Cheat Sheets) para Desenvolvedores Web
• Novo layout no blog!
• Dicas para enriquecer seu design
• Padrões Web – O que são e porque usá-los

Com isso, surgiu a idéia de fazermos um portal que houvesse uma integração com o Google Maps, onde qualquer pessoa pudesse mapear os problemas da sua cidade e compartilhá-la nas redes sociais, fortalecendo e dando mais visibilidade à mesma.

Aqui em Campinas/SP, a página do Festival do Buraco no Facebook é bastante conhecida, e através dela fizemos uma parceria com o Cristovan Grazina, proprietário da página no Facebook, para nos ajudar com a parte de conteúdo e divulgação do portal.

A ferramenta foi feita para funcionar de forma simples, sem que haja a necessidade de muitos passos ou conhecimento para se fazer uma reclamação. Para isso, o visitante faz uma conta no portal, para que ele gerencie as suas reclamações e possa fazer reclamações futuras, coloca o endereço e o tipo de problema (buraco, enchente, iluminação pública, terreno baldio, etc.) e pronto, a reclamação dele é feita e marcada no mapa. Se o visitante quiser, ele ainda pode colocar uma foto do problema, um vídeo e uma descrição, explicando aquela reclamação.

Integrado com as redes sociais Twitter, Facebook e Google Plus, qualquer pessoa poderá facilmente compartilhar uma reclamação, que pode ser comum à várias pessoas. Assim, as pessoas fortalecem e dão mais visibilidade à aquela reclamação, aumentando a chance da mesma ser resolvida pelos órgãos públicos.

Reconhecimento

O projeto foi um dos ganhadores do Desafio Inovação da Locaweb:

E também ganhou destaque nos jornais Correio Popular e Já de Campinas:

Então, se a sua cidade está com problemas, agora você tem um canal de reclamação, totalmente transparente e integrado com as redes sociais. Todas as reclamações feitas são passadas  para os respectivos órgãos públicos correspondentes a cada queixa.

Vamos usar a internet, junto a milhões de usuários, para fazer reclamações e cobrarmos nossos direitos às autoridades, colocando-as para trabalhar! Participe dessa iniciativa!

Portal Cidade Reclama: www.cidadereclama.com.br

Página no Facebook: www.facebook.com/cidadereclama

Perfil no Twitter: www.twitter.com/#!/cidadereclama

Perfil no YouTube: www.youtube.com/user/cidadereclama

Página no Google Plus: plus.google.com/113944662190293372529

• Não há artigos relacionados.

Estamos aqui hoje para falar de duas coisas que adoramos muito: Música e Criatividade.
Dois temas que para nós e para outras tantas são bem divertidos. Primeiramente porque ninguém vive sem música, muito menos sem a nossa tão grande e especial criatividade, que é essencial no dia-a-dia de agência.

Conhecendo um pouco sobre música

“A música (do grego  musiké téchne, a arte das musas) é uma forma de arte que se constitui basicamente em combinar sons e silêncio seguindo uma pré-organização ao longo do tempo”. Trazendo essa definição para o ambiente de trabalho, temos no time sempre alguém que curte trabalhar com música outros já preferem o silêncio.

Você deve estar se perguntando, mas o que afinal é o silêncio? De acordo com o professor de composição e de linguagem musical da Escola de Música da UFMG, Rogério Vasconcelos, o silêncio tem vários significados. “A definição mais comum que as pessoas tem é que o silêncio é ausência de som, mas na verdade não há uma falta de som, porque sempre vai haver ruídos.”

Os gostos e estilos sempre variam bastante. Existem aqueles que preferem trabalhar ao som de uma música pesada, outros preferem um som mais tranquilo. E estilos que vão desde religioso, até música clássica.

Tenhamos em mente que a música tem a ver com um estado de espírito de cada um, variando de acordo com a situação emocional do dia da pessoa. Um dia ela pode estar triste e preferir uma música mais introspectiva, outro, estar feliz e preferir algo mais “pra cima”.

Ao se conectar com algum estilo de música, nós automaticamente caímos em um campo que costumo dizer : “Cultura = Conhecimento = Criatividade”.

Podemos reparar que no meio publicitário as pessoas tentam associar grandes ou pequenas campanhas com músicas. Por que? Porque a nossa percepção de sentimentos, reações e emoções se dá através da música. O nosso cérebro é um órgão que nos permite pensar, que aprende e cresce interagindo com o mundo através da percepção e da ação.

Vamos observar dois filmes publicitários:

Chevrolet fez um vídeo criativo para divulgar o Chevy Sonic, um carro teen da marca.

Feito pela agência Goodby Silverstein & Partners, neste vídeo feito em parceria com a banda OK Go, com a fantástica música “Needing/Geeting” , os criativos fizeram do automóvel uma verdadeira orquestra ambulante, e tudo isso em pleno deserto.

Veja o Resultado:

Vale a pena relembrar da propaganda da Vivo utilizando o clássico “Eduardo e Mônica”, e que neste caso, a campanha foi gerada a partir da música. E ai? Será que teremos o filme do “Faroeste Caboclo”? =)

Time X Música

E para finalizar este post vamos dar uma passada por nosso time e ver o que eles estão escutando ultimamente enquanto trabalham para exercitar sua criatividade e produtividade.

Rodolfo

Jéssica

Heitor

Gisele e Eliane

Elas preferem o silêncio, e não escutam música enquanto trabalham.

Eric

Jonathan

Marcela

Henrique

Lembrando que aquelas pessoas que optam por não escutar música durante o trabalho é porque preferem constituir a “música do silêncio” conforme vimos no começo do post.

E você? Qual música te ajuda no processo da criatividade?

Valeu pessoal, e até a próxima!

• Não há artigos relacionados.

Já divulgamos o DNAD12 no nosso Twitter, e nesse post iremos colocar mais detalhes do evento para o pessoal que está interessado em ir, assim como nós.

O DNAD 12 acontecerá nos dias 01/06 (sexta-feira) e 02/06 (sábado) de 2012 das 8:30 até às 19:00, apresentando questões sobre arquitetura de software, desenvolvimento de software usando padrões e técnicas que o tornam mais sustentável, relacionamento entre componentes tecnológicos, dentre outros, voltado para arquitetos de software, desenvolvedores, testadores, analistas, etc.

O evento irá acontecer em São Paulo/SP, no hotel Braston São Paulo, na rua Martins Fontes, 330. Veja a página de localização do evento para mais detalhes.

A programação do evento está praticamente fechada, e conta com palestras sobre ASP.NET, ProblemFactory, REST, coaching, Monadic Design, NodeJS, entre outros assuntos.

Aproveite para fazer a inscrição o quanto antes, pois com isso você aproveita o desconto.

Você pode seguir o perfil no twitter @netarchitects ou ficar atento à hashtag #dnad12 para ficar por dentro das últimas novidades do evento.

Após o evento, eu e a @jessy_uepa iremos atualizar esse post com os nossos comentários sobre as palestras

• Não há artigos relacionados.

Por esse motivo é cada vez mais comum ver pessoas recorrendo às agências especializadas no assunto para realizar esse trabalho.

No entanto, devemos ter cautela ao contratar uma empresa, pois existem algumas técnicas que mecanismos de buscas como o Google interpretam como ilícitas. Caso seu site use alguma destas, muito provavelmente ele será punido.

Tipos de punição

• Penalidade -30
• Penalidade -950
• Exclusão

Penalidade -30: Nesta punição, o domínio é punido e todo seu site recebe um decréscimo de 30 posições no ranking.

Penalidade -950: Aqui o site é punido por páginas individuais, o domínio consegue escapar dessa punição, porém os resultados costumam cair entre três e quatro páginas.

Exclusão: A última e mais séria punição é ter seu site excluido do banco de dados do Google e seu site não aparecerá mais para nenhum resultado. O que resta a fazer quando isso acontecer?

Você deve retirar as técnicas proibidas usadas no site e em seguida pedir uma reconsideração para as empresas responsáveis como Google, Yahoo e Bing. Então você pode esperar pela sorte que aceitem seu pedido e retornem o seu site para a SERP.

O que você não deve fazer

Conhecendo algumas técnicas das quais são mal vistas pelos mecanismos de buscas, vamos colocar algumas delas aqui para que você possa evitá-las:

• Uso excessivo de palavras-chave e também palavras-chave escondidas;
• Links escondidos na página;
• Compra e troca de links;
• Link farm (Criação de várias páginas para indicando links para um site especifíco);
• Spam em comentários de blogs.

Essas são as táticas mais famosas de Black Hat consideradas pelo mais poderoso site de buscas, o Google. Para dar um exemplo de uso de alguma técnica ilícita vamos pensar no seguinte:

Aplicando isso na prática

O seu site recebe 5 links por dia, e certo dia ele recebe 200 links. O Robô do Google vendo isso, achará muito suspeito, e a partir disso tentará analisar a fonte de todos esses links extras que apontam para o seu site. Caso ele identifique que você usou, por exemplo algum software de backlinks, automaticamente você receberá alguma punição daquelas que já falamos no post.

Outro exemplo é quando o seu site mostra um conteúdo para o usuário e um outro conteúdo para a ferramenta dos mecanismos de busca . Esse é um clássico exemplo onde o site pode levar a penalidade da exclusão.

Ultimamente tem se falado bastante de uma recente declaração vinda de um dos engenheiros da companhia, dizendo que o Google está preparando uma nova mudança em seu algoritmo de busca que iria afetar sites muito otimizados. Essa declaração repercutiu o mundo do SEO e muitas pessoas com medo de que seus sites sejam prejudicados por essa nova mudança.
Porém, felizmente, prevemos que essa mudança não seja algo realmente novo, e sim que o algoritímo ficará mais inteligente e punirá com mais eficiência sites que abusam de técnicas não permitidas.

Caso já tenha passado por alguma situação de punição ou possui alguma dúvida, comente abaixo!

• Não há artigos relacionados.

1. O que é?

O LESS adiciona habilidades comuns de JavaScript e tem uma sintaxe incorporada chamada mixin, para criar classes reusáveis que podem ser extendidas para funções completas com a adição de argumentos e parâmetros.

Veja o que Andy Clarke, designer e especialista em padrões web diz sobre o uso de LESS:

Escolhi o Less pois acho que o pré-processador de CSS é mais adequado para designers como eu, que não querem trabalhar com linhas de comandos, o Less mudou meu fluxo de trabalho com CSS completamente. Gostaria de tê-lo descoberto antes.

2. Para que serve?

LESS estende CSS com comportamento dinâmico como variáveis, mixins, operações e funções. LESS roda tanto no cliente (Explorer, Chrome, Safari, Firefox) quanto no servidor, usando Node.js e Rhino.

3. Veja um exemplo básico do uso de LESS:

1
2
3
4
5
6
7
8

@color: #4D926F;
 
#header {
  color: @color;
}
h2 {
  color: @color;
}

Quer saber mais sobre esse framework? Leia a documentação em português criada pelo pessoal da @loopinfinito.

Fonte: Revista W

• Referências rápidas (Cheat Sheets) para Desenvolvedores Web
• O que é Design Responsivo?
• O pulo do gato: @font-face
• 5 dicas para deixar o seu código CSS mais legível e otimizado

Preparamos um post explicando o que são design patterns e seus princípios comuns, baseado no livro “Professional ASP.NET Design Patterns” de Scott Millett.

Tirinha retirada do site Vida de Programador, um blog que publica tirinhas diárias com histórias engraçadas e verídicas sobre o dia-a-dia de um programador.

Explicando Design Patterns

Design patterns (Padrões de projeto) são soluções de templates abstratas de alto nível. Pense nelas como um “blueprint” (desenho técnico ou documentação de uma arquitetura, etc.) para soluções e não como uma solução por si própria. Você não achará um framework que você poderá simplesmente aplicar para a sua aplicação; ao invés disso, você chegará ao design patterns através da refatoração do seu código e generalização do seu problema.

Design patterns não são somente aplicados em desenvolvimento de software; design patterns podem ser encontrados em diversas áreas da vida, da engenharia até da arquitetura. Em fato, foi o arquiteto Christopher Alexander que introduziu a ideia de patterns em 1970 para construir um vocabulário comum para discussões sobre design. Ele escreveu:

Cada pattern descreve um problema que ocorre várias vezes ao nosso redor e com isso, descrevem a solução para o problema de uma maneira que você pode usar essa solução diversas vezes sem ter que fazer a mesma coisa duas ou mais vezes.

Origem

As origens do design patterns que prevalecem hoje na arquitetura de software nasceram das experiências e conhecimento dos programadores utilizando a programação orientada a objeto. O conjunto dos mais conhecidos design patterns estão catalogados no livro chamado “Design Patterns: Elements of Reusable Object-Oriented Software”, mais conhecido como “Design Patterns Bible”. Esse livro foi escrito por Erich Hamma, Richard Helm, Ralph Johson e John Vlissdes, mais conhecidos como “Gang of Four”.

Eles coletaram 23 design patterns e organizaram em 3 grupos:

• Creational Patterns (Padrões de Criação): Tratam da construção do objeto e o de referência;
• Structural Patterns (Padrões Estruturais): Tratam da relação entre objetos e como eles interagem entre sim para formarem grandes objetos complexos;
• Behavioral Patterns (Padrões Comportamentais): Tratam da comunicação entre os objetos, especialmente em termos de responsabilidade e de algoritimos.

Utilidade

O valor dos design patterns reside no fato que eles são soluções que foram utilizadas e testadas, o que nos dá confiança em sua eficácia.

Design patterns focam na reutilização de soluções. Todos os problemas não são iguais, mas se você puder “quebrar” o problema e achar similiaridades com problemas que você já resolveu antes, você pode aplicar essas soluções. Depois de décadas de programação orientada a objeto, a maioria dos problemas que você encontrará já terão sido resolvidas no passado, e haverá um pattern disponível para ajudar você na implementação da solução. Mesmo se você acredita que o seu problema é único, ao quebrá-lo em pequenas partes, você será capaz de generalizá-lo o suficiente para encontrar a solução apropriada.

O nome dos design patterns são úteis porque refletem o seu comportamento e propósito, e fornecem um vocabulário comum em um brainstorming de solução. É muito mais fácil falarmos em termos do nome do pattern do que detalhar sobre como essa implementação deveria funcionar.

O que eles não são

Design patterns não são a bala de prata (solução de todos os problemas). Você deve ter o entendimento geral do seu problema, generalizá-lo e então aplicar o pattern apropriado para a solução desse problema. Porém, nem todos os problemas requerem um design pattern. É verdade que o design pattern pode ajudar a tornar problemas complexos em problemas simples, porém eles também podem tornar problemas simples em problemas complexos.

Princípios comuns de design

Há diversos princípios comuns de design, que, assim como os design patterns, se tornaram boas práticas através dos anos e ajudaram a formar uma fundação no qual o nível empresarial e software de fácil manutenção podem ser construídos. Abaixo, segue um resumo dos princípios mais conhecidos:

Keep It Simple Stupid (KISS)
Mantenha Isto Estupidamente Simples

Um problema comum em programação de software é a necessidade de complicar demais a solução. O objetivo do princípio KISS é manter o código simples, mas não simplista, assim evitando complexidade desnecessária.

Don’t Repeat Yourself (DRY)
Não Repita Você Mesmo

O princípio do DRY é evitar a repetição de qualquer parte do sistema abstraindo as coisas que são comuns entre si e colocá-las em um lugar único. Esse princípio não se preocupa somente com o código, mas qualquer lógica que está duplicada no sistema.

Tell, Don’t Ask
Fale, não pergunte

O principio Tell, Don’t Ask está estreitamente alinhado com o encapsulamento e a atribuição de responsabilidades para as suas classes corretas. O princípio afirma que você deve dizer aos objetos quais ações você quer que eles realizem, ao invés de fazer perguntas sobre o estado do objeto e então tomar uma decisão por si próprio em cima da ação que você quer realizar. Isso ajuda a alinhar as responsabilidades e evitar o forte acoplamento entre as classes.

You Ain’t Gonna Need It (YAGNI)
Você Não Vai precisar Disso

O princípio YAGNI se refere a necessidade de adicionar somente as funcionalidades que são necessárias para a aplicação e deixar de lado qualquer tentação de adicionar outras funcionalidades que você acha que precisa. A metodologia de projeto que adere ao YAGNI é a test-driven development (TDD) – desenvolvimento orientado a testes. TDD se baseia na escrita de testes que comprovam a funcionalidade do sistema e então escrevem somente o codigo para obter êxito no teste.

Separation Of Concerns (SoC)
Separação de Responsabilidades

SoC é o processo de dissecação de uma parte de software em distintas características que encapsulam um único comportamento e dados que podem ser utilizados por outras classes. Geralmente, a responsabilidade representa uma características ou comportamento da classe. O ato de separar um programa em discretas responsabilidades aumenta significativamente a reutilização de código, manutenção e testabilidade.

• Não há artigos relacionados.

Estamos buscando um novo integrante para nossa equipe de Design.

Quer colocar a sua criatividade em prática e colaborar por uma internet mais bonita e navegável?

Requisitos:

• Conhecimentos em Photoshop
• Illustrator
• Noções de HTML e CSS
• Estar cursando Design, Artes, Publicidade ou cursos similares
• Gostar de estudar, ler, aprender sobre a área
• Trabalhar em equipe
• Muita força de vontade e algum talento

Interessou? Mande seu currículo e portfólio online para trabalhe@princiweb.com.br

Estamos aguardando!

• Não há artigos relacionados.

Devido a muitos argumentos quanto à acessibilidade de navegação web, o Flash tem perdido seu espaço para meios alternativos de animação para web, o HTML 5, o CSS 3 e o JavaScript. Não que ele será completamente abolido da internet, isso é algo para se discutir. O Flash não é suportado por alguns dispositivos mobile, como os da Apple, e não adianta discutir, todos querem seus iPads e iPhones com total acesso a conteúdos interativos. Os conteúdos em flash não são interpretados pelo browser como texto, o que o torna inacessível a usuários com deficiência visual, que navegam com a ajuda da tecla tab e de ferramentas de voz que leem o conteúdo da página. E pelo mesmo motivo o flash não consegue ser lido e indexado pelo robô de busca do Google, Bing e Yahoo.

A Adobe bateu e rebateu na tecla da permanência do Flash como principal fonte de animações e motion design para web (principalmente contra a Apple), mas cedeu às insistências e resolveu ser mais flexível: criou uma nova carta na manga: o Adobe Edge

A função do Adobe Edge é criar animações com os poderosos HTML 5, CSS 3 e JavaScript.

A descrição oficial do produto diz que o Edge pode importar gráficos em SVG, PNG, JPG, GIF conseguindo coreografar facilmente a animação na timeline de edição e além disso, conta com 25 efeitos diferentes para edição.

Ainda não foi divulgada uma data para o lançamento da versão final do programa, mas você pode baixar o preview no próprio site da Adobe Labs http://labs.adobe.com/technologies/edge/

Veja o screenshot:

E o vídeo

Com o lançamento desse programa que entrará para a história (é o primeiro com o intuito de criar animações em HTML 5), a Adobe aproveitou e lançou o The Expressive Web (http://beta.theexpressiveweb.com), um site para mostrar tudo que pode ser criado com o HMTL 5 e o CSS 3.

É válido reforçar que por enquanto infelizmente nem todos os browsers suportam o HTML 5 e o CSS 3. Ficamos na expectativa dessa nova era da internet.

• Não há artigos relacionados.

A partir do dia 30 de Março todas as fan pages do Facebook terão o formato de timeline e uma das principais mudanças é que agora estas páginas terão uma imagem grande de capa no topo.

Claro que todas as empresas estarão trabalhando para utilizar da melhor maneira possível essas imagens, que serão o primeiro impacto para os visitantes, mas é bom estar atento as regras para a criação da capa da sua fan page:

As imagens de capa não podem conter:

• Preço ou informações de compras, como “40% off” ou “Faça o download em nosso site”
• Informações de contato, como endereço do site, e-mail, endereço ou outras informações destinadas a seção “sobre” da sua página.
• Referências a elementos da interface do usuário, tais como “Curtir” ou “Compartilhar”, ou quaisquer outros recursos do site Facebook
• Chamadas para a ação, como “Adquira agora” ou “Conte para seus amigos”

Imagens da Capa não devem ser falsas ou enganosas e não devem infringir as leis de propriedade intelectual.

Veja a mensagem do Facebook sobre as regras do uso das imagens de capa.

• Não há artigos relacionados.