Category Archives: Design

responsividade e dicas de media queries

O que são Media Queries e como elas influenciam o Design Responsivo?

Design Responsivo III – Media Queries e Compatibilidade

Ok. Então você decidiu fazer o seu layout responsivo… Este post contém muitas informações e ferramentas úteis para criar imagens fluidas, fazer consultas de mídia, vencer os browsers antigos e testar o resultado final para você desenvolver um layout like a boss.

exemplo de design responsivo

Imagens Fluidas

O primeiro passo é garantir que as imagens vão se adaptar de acordo com o layout. A solução mais prática é forçar as imagens a se redimensionarem proporcionalmente de acordo com o tamanho de um container. Para fazer isto basta uma linha de código:

1
2
3
img {
    max-width: 100%;
}

Esta técnica também funciona para outros objetos como vídeos:

1
2
3
4
5
6
img,
embed,
object,
video {
    max-width: 100%;
}

Se você (ainda) dá suporte ao Internet Explorer 6 você deve colocar o seguinte parâmetro em uma folha de estilos especifica para ele:

1
2
3
4
5
6
img,
embed,
object,
video {
    width: 100%;
}

Parece a mesma coisa, mas não é. A diferença é que no max-width:100% as imagens nunca ultrapassarão o tamanho do container. Já no segundo caso as imagens SEMPRE estarão EXATAMENTE do tamanho do container. Se você for usar esta regra para o IE certifique-se de que suas imagens são do tamanho certo para não “estourar” os pixels, ok?

Outra coisa importante de se ter em mente é que o Windows não renderiza muito bem imagens redimensionadas em browsers antigos (como IE7 ou anterior). O artigo Fluid Images do Unstoppable Robot Ninja ensina a usar o filtro AlphaImageLoader para corrigir o problema. Realmente ninja!

Outra técnica bacana é cortar as laterais da imagem, escondendo ou revelando algumas partes de acordo com o tamanho do browser. Uma maneira simples de fazer isto seria determinar um overflow:hidden para o container da imagem.

1
2
3
4
5
6
7
8
.uma-div-feliz {
   overflow: hidden;
}
.uma-div-feliz img {
   display: block;
   max-width: auto;
}

Só lembrando que esta técnica vai cropar (existe este verbo? :) ) a imagem indiscriminadamente. Se você quiser ter um controle maior sobre que parte da imagem é cortada o artigo Hiding and Revealing Portions of Images ensina algumas maneiras de fazer isto.

O que são Media Queries?

A explicação rápida: são expressões de CSS utilizadas para mudar o layout em diferentes aparelhos sem mudar o conteúdo. A explicação longa: No CSS2 existia uma função chamada Media Type. Ela servia, como o nome já diz, para reconhecer um determinado tipo de dispositivo. Ao todo eram 10 diferentes Media Types:

  • all – todos os dispositivos
  • aural – sintetizadores de voz
  • braille – leitores de Braille
  • embossed – impressoras de Braille
  • handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.
  • print – impressoras convencionais
  • projection – apresentações de slides
  • screen – monitores coloridas
  • tty – teleimpressores e terminais
  • tv – televisores

 

Como isto funciona na prática? Vamos supor que você queira determinar estilos específicos para a impressão em papel, por exemplo. Você pode fazer isto basicamente de duas maneiras. Acrescentando um link para uma outra folha de estilos no cabeçalho do seu documento:

1
<link rel="stylesheet" media="print" href="print.css" />

Ou utilizando um CSS unificado com a função @media:

1
2
3
@media print {
    /* estilos */
}

E isto serviu bem. Por um tempo… Com a evolução dos dispositivos alguns aparelhos não se encaixavam em nenhuma destas categorias. Um smartphone moderno tem a tela e resolução muito melhores do que os celulares que se encaixam na categoria handheld… E o que dizer dos recém inventados tablet? Para a nossa salvação, no CSS3 a coisa ficou mais complexa com as tais Media Queries, uma espécie de upgrade dos Media Types. Media Querie, do inglês Consulta de Mídia, é uma expressão lógica que não verifica apenas o tipo do dispositivo, mas também a capacidade dele. É como se o Media Querie fizesse uma pergunta para o browser (sendo que a resposta é sempre verdadeira ou falsa). A vantagem disto é um controle muito maior sobre o layout! Você consegue utilizar estas consultas para checar coisas como a altura e a largura do browser, orientação, resolução, etc.

Parâmetros do Media Queries

Os Media features lembram bastante as propriedades de CSS. Cada uma tem um nome e aceita certos valores. Basicamente é a lista de perguntas disponíveis que você pode fazer para o browser. São elas:

Width

Largura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Height

Altura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-width

Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-height

Altura da mídia.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Orientation

Orientação da mídia.
Valor: portrait (retrato) ou landscape (paisagem)
Aceita prefixo min/max: Não.

Aspect-ratio

Proporção. Razão entre os valores do ‘width’ e ‘height’. Apenas aplicável a mídias do tipo bitmap.
Aceita prefixo min/max: Não.

Device-aspect-ratio

Proporção da tela do dispositivo.
Aceita prefixo min/max: Não.
Exemplo de aplicação:

1
2
3
@media screen and (device-aspect-ratio: 16/9) {
      /* estilos */
}

Color

Número de bits por cor. Se o valor for zero o dispositivo é monocromático.
Valor: numérico
Aceita prefixo min/max: Sim.

Color-index

Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero.
Valor: numérico
Aceita prefixo min/max: Sim.

Monochrome

Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0.
Valor: numérico
Aceita prefixo min/max: Sim.

Resolution

Resolução do dispositivo (densidade por pixel). Apenas aplicável a mídias do tipo bitmap.
Valor: número em DPI ou DCM
Aceita prefixo min/max: Sim.

Scan

Tipo de formação de imagens especifico para televisores.
Valor: progressive (progressivo) ou interlace (entrelaçado)
Aceita prefixo min/max: Não.

Grid

Determina se o dispositivo é baseado em bitmap ou em um grid (exemplo: um terminal tty ou um telefone com apenas uma fonte fixa).
Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Aceita prefixo min/max: Não.
Grid neste contexto é um tipo de dispositivo. Não tem nada a ver com o grid do design, ok? :)

Operadores

Através dos operadores not (não), and (e) e only (apenas) você consegue ter um controle muito mais preciso. Você também pode utilizar o sinal de virgula que equivale a um “ou”. Combine isto com media types e você está pronto para dominar o mundo! :)

Resolução de tela, sua nova melhor amiga!

Se você quiser desenvolver um CSS tendo um dispositivo específico em mente basta você saber a resolução de uma tela (altura e largura em pixels). Já se você quer uma gama maiores de aparelhos  é preciso fazer algumas generalizações para determinar quais vão ser os pontos que o seu layout deverá se transformar. Para isto vamos considerar as seguintes larguras:

  • 320 pixels - Smartphones no modo retrato.
  • 480 pixels - Smartphones no modo paisagem.
  • 600 pixels - Tablets pequenos. Ex: Amazon Kindle (600×800)
  • 768 pixels - Tablets maiores em modo retrato. Ex: iPad (768×1024)
  • 1024 pixels - Tablets maiores em modo paisagem, monitores antigos.
  • 1200 pixels - Monitores wide.

Alguns exemplos

Um iPhone em modo retrato, por exemplo, possui 320px de width. Se você desenvolver um CSS para o smartphone da Apple basta utilizar o seguinte Media Querie:

1
2
3
4
/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
      /* estilos */
}

É como se você perguntasse para o browser: “Hey, o seu dispositivo é uma tela e a largura máxima é 320 pixels?”. Se a resposta for sim o navegador aplica os estilos. Fácil, né? Já se você quiser determinar os estilos de um iPad independente da orientação:

1
2
3
4
5
6
/* iPads (restrato e paisagem) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
      /* estilos */
}

Estas são algumas opções. As possibilidades de combinação são infinitas. Se você quiser mais algumas idéias de uma olhadinha no artigo Hardboiled CSS3 Media Queries do Stuff and Nonsence.

Um exemplo legal de aplicação é utilizar um container e ir variando a max-width de acordo com a resolução da tela. Assim você garante que o seu conteúdo responda a diferentes tipos de dispositivos. Uma ferramenta legal para testar estes pontos de quebra é o Responsivepx. Você consegue visualizar o site e ir diminuindo e aumentando a área de corte até perceber em qual ponto começa algum problema… E aí é só usar um media query para botar a ordem na casa. :)

Para mais informações sobre Media Queries leia a documentação da W3C sobre o assunto.

OK. Mas isso funciona em TODOS os browsers?

Bem, tecnicamente os navegadores que trabalham legal com Media Queries são  Firefox 3.5+, Opera 9.5+, Safari 3+, Google Chrome 4+ e Internet Explorer 9+.  Segundo esta pesquisa cerca de 70% de todos os browsers no mercado aceitam Media Queries. Mas existem algumas maneiras de fazer os outros 30% participarem também da brincadeira…

E6 denial message by RobotJohnny.com

creditos: John Martz

Modernizr

Modernizr é uma biblioteca de JavaScript que detecta quais features de HTML5 e CSS3 um browser suporta. E isso, como vocês podem imaginar, pode ser aplicado aos Media Queries. Através de uma função em JS você pode determinar que uma folha de estilos seja carregada apenas se aquele browser aceitar Media Queries. É importante ler com cuidado toda a documentação da biblioteca para entender tudo que é possível fazer. Se você não precisa de tudo o que o Modernizr oferece, no site da biblioteca você pode baixar uma versão customizada escolhendo apenas as funções que deseja utilizar.

Ficou curioso para saber o que o seu browser atual aceita?  Sem problemas! A suite de testes do Modernizr informa tudo o que o seu navegador pode ou não fazer. Mas se bater uma preguiça de testar a aceitação em browser por browser você pode conferir algumas tabelas em alguns sites como HTML5 Please ou HTML5 & CSS3 Support.

Respond.js

Uma alternativa muito mais simples e leve (apenas 3kb) do que o Modernizzer , orespond.js adiciona suporte a min/max-width para o IE6-8 e outros browsers antigos. Útil se você só precisa destes parâmetros. Para utilizar o respond.js você precisa (além de obviamente instalar o plugin) colocar o comentário condicional /*/mediaquery*/ ao final de todas as media queries que você utilizar no seu CSS. Por exemplo:

1
2
3
@media screen and (max-width: 768px) {
  ...
}/*/mediaquery*/

css3-mediaqueries-js

Outra solução baseada em javascript. O css3-mediaqueries-js  é mais pesado do que o respond, mas em compensação aceita mais funções e promete fazer IE 5+, Firefox 1+ e o Safari 2 aceitarem todas os features do Media Queries. Você pode conferir mais algumas dicas sobre como degradar suavemente Media Queries neste post da Smashing Magazine.

fonte: blog.popupdesign.com.br

Ferramentas para designers e webdesigners

21 Ótimas Ferramentas para webdesigners e designers

Typetester

Permite testar blocos de texto com diferentes fontes em vários ajustes.

Kuler

Gerador de paletas de cores desenvolvido pela Adobe.

Lipsum

Textos do tipo “Lorem Ipsum”, ideal para designers que precisam preencher algo com texto para melhor visualizar como ficará o trabalho depois de pronto.

Pixlr

Provalmente o melhor editor de imagens tipo Photoshop, gratuito, para usar sem precisar de instalação. É só acessar e usar!

5 Testsize

Permite testar como vai ficar um blog ou site em qualquer resolução de tela, mesmo aquelas que seu computador não suporta.

Browser Shots

Tira um print da tela de qualquer url que você fornecer, nos mais variados sistemas operacionais e navegadores. Muito bom para saber como seu blog vai aparecer em navegadores que você nem sonha em ter instalado.

Web Resizer

Permite fazer vários ajustes em imagens online, como recorte, ajuste de cores e outros.

BGPatterns

Ferramenta para testar vários tipos de padrões para fundo de páginas. Depois de testar, você pode baixar a imagem para usar em seu projeto.

Stripe Generator

Similar ao BGPatterns, mas para criar padrões de listras, com vários ajustes como largura, cor e sombras.

Blind Text Generator

Mais um que ajuda a criar textos para visualização, do tipo “Lorem Ipsum”, “Cicero” e outros, com opções de formatação variada.

CSS Type Set

Gerador de estilos CSS automáticos, no sistema WYSIWYG (ver o que edita em tempo real). É só ir modificando o texto e o código sai pronto na janela ao lado.

Fontstruct

Criador online de fontes para usar em seus projetos.

Type Navigator

Navegador de fontes, ajudar você a descobrir qual fonte é aquela que viu em algum lugar e não conhece. Basta ir selecionando as características da fonte procurada nas configurações do lado esquerdo, clicar em Search, e na janela principal aparecerão todas as fontes similares. (FORA DO AR)

ColoRotate

Mais um bom serviço para criação de paletas, em formato tridimensional, com muitas opções e várias paletas prontas.

html Ipsum

Oferece diversos blocos de texto para teste, já com formatações diversas, como em listas, parágrafos, cabeçalhos, etc.

Icon Finder

Serviço de busca por ícones, que podem ser baixados no formato .ico ou .png.

Iconza

Serviço que permite personalizar ícones padrão, com cores e cor de fundo e depois baixá-los em formato .png.

My Fontbook

Permite que você faça testes com as fontes que tem em seu computador.

Font Squirrel

Oferece fontes gratuitas para usar em web design, com download tanto da fonte quanto do código css para imbuir a fonte no design, o @font-face kit.

Ajaxload

Serviço de criação de gifs animados do tipo “carregando…”, com vários formatos e possibilidade de customização de cores e tamanhos.

Adobe Browser Lab

Serviço da Adobe que permite testar qualquer site em dezenas de versões dos principais navegadores, rodando em variados sistemas operacionais. Requer um Adobe Id (gratuito).

Dia-do-designer

Feliz Dia do Designer! 05/Nov

Parabéns Designers!

A Master Studio Web parabeniza todos os profissionais criativos do Brasil, e do mundo!

dia-do-designer

Sabemos o quanto os designers são importantes em nossas vidas. Sem eles, não teríamos cadeiras confortáveis, computadores extremamente fáceis de usar, Imac, Iphone, Macbook, entre outros produtos :)

Na Master Studio Web contamos com uma equipe maravilhosa de webdesigners e designers gráficos, então nada mais justo que comemorarmos este dia. Desejamos muitas artes incríveis, sketchs de arrasar e muitos vetores para finalizar!

 

Parabéns novamente!

design_responsivo

Design Responsivo ou versões diferentes para tamanho de tela

Olá amigos,

Hoje vou abordar um tema bastante polêmico, e não são mamilos ;) . Houveram vários pedidos para abordarmos o tema “responsividade”, então segue abaixo uma análise das vantagens e desvantagens de trabalhar com design responsivo.

Uma das primeiras coisas que devemos analisar no momento de definir como será desenvolvido o projeto visual é saber quem irá acessar as páginas. Se houver um alto índice de usuários que utilizam dispositivos móveis, é de extrema importância dar uma atenção especial a esse público e trabalhar com conteúdo exclusivo. Porém, é neste momento em que mais ocorrem dúvidas entre trabalhar com design responsivo ou uma versão mobile específica. 

No gráfico abaixo vemos a crescente nos acessos através de dispositivos móveis em sites no Brasil:

Gráfico com aumento dos acessos através de dispositivos móveis

Pense em dois cenários para decidir o que vai utilizar:

  • Situação 1 – Você precisa de um site rápido e que de certa forma deve indexar melhor nos mecanismos de busca.
  • Situação 2 – Você precisa de um site adaptável e que esteja preparado para todos os dispositivos e tamanhos de tela.

Vantagens do design responsivo

  • Fácil manutenção: Quando se trabalha com design responsivo, normalmente se projetam as páginas para “x” tamanhos então fica muito mais fácil fazer uma definição para um tamanho específico de tela.
  • Compatibilidade: Independentemente do tamanho da tela, dispositivo ou navegador o site é otimizado para essas variáveis.
  • Estrutura única: Seu site terá uma estrutura única e dependerá basicamente das media queries para se adaptar ao tamanho da tela;

Desvantagens do design responsivo

  • Um pouco mais lento – como seu site estará pronto para qualquer situação (meio MacGyver), ele com certeza ficará um pouco mais lento por conta de ter mais códigos e mais recursos iniciais.
  • Não é totalmente focado nas necessidades do usuário - Vale lembrar que um site responsivo está preparado para todas as situações, porém não é otimizado para isso. Por exemplo, se você pretende divulgar um conteúdo específico com funcionalidades focadas no usuário, com certeza o design responsivo não é o mais indicado. 

Outras soluções 

Design Responsivo-Dispositivos

Layout Fluido

É bem comum você entrar em um site que “aumenta” conforme sua tela aumenta e “diminue” conforme sua tela também diminue. Este é o layout fluido, que basicamente não muda suas características, porém se “ajusta” ao tamanho da tela até um determinado limite.
 

Conclusões

Lembre-se que cada projeto possui um público-alvo específico com características bastante diferentes, então não siga um padrão genérico. Busque sempre atingir da melhor forma o público-alvo de seus clientes.

Abraço e até a próxima…

Não esqueça de curtir e seguir a @masterstudioweb no Twitter 

2011

Dicas práticas de como utilizar o cliente para melhorar a indexação nos buscadores.

 

A cada ano que passa, vemos mais redes de lojas físicas de pequeno, médio e grande porte abrindo lojas virtuais e novas empresas nascendo somente para o mundo on-line. Com o aumento de empresas atuando no e-commerce, percebemos a diminuição do Retorno sobre o Investimento (ROI) das campanhas de uma loja virtual devido ao aumento da demanda de compra das mídias como AdWords, inflacionando os preços.

Portanto, os gestores estão cada vez mais investindo em formas alternativas para mostrar os seus produtos aos potenciais clientes. Um desses meios são os buscadores como o Google.

O SEO (Search Engine Optimization) é o conjunto de estratégias utilizadas com intuito de melhorar o posicionamento dos produtos, categorias, departamentos e todas as páginas de uma loja virtual nos buscadores. Na figura abaixo, podemos ver que os links marcados em vermelho foram pagos, mas os que aparecem marcados em verde foram indexados organicamente pelo Google.Reprodução
Nesse caso que estamos mostrando, a Net Shoes adotou uma estratégia melhor que a Corpo Perfeito para o termo pesquisado, “Tênis Nike”, e acabou aparecendo primeiro. Já a Corpo Perfeito adotou uma estratégia melhor que a World Tennis, e assim por diante.

Segundo o manual de boas práticas do Google, um dos pontos-chave para melhorar a indexação da loja virtual é a geração de conteúdo.

Sendo assim, veja dicas de como gerar e administrar o conteúdo e o tráfego para sua loja virtual.

1. Crie artigos relevantes para os consumidores dos seus principais produtos.

A BodyBuilding, empresa americana de suplementos alimentares, possui matérias exclusivas sobre os seus principais produtos. Quando um cliente adquire um desses produtos, a equipe envia um e-mail customizado para o cliente informando que na loja virtual há uma matéria indicando como utilizá-lo.
Reprodução
2. Peça avaliações sobre o produto.

A Net Shoes, um determinado período após a finalização da compra, envia um e-mail para o cliente pedindo que ele escreva o que achou do produto que comprou e fazendo uma série de perguntas relacionadas ao item.
Reprodução
3. Vá atrás de quem também tem conteúdo.

No mercado de moda feminina, vemos que diversos blogs possuem forte influência no processo decisório de compra. Faça alianças estratégicas com blogs ou canais de relevância no seu mercado e busque expor a sua loja nesses canais.

4. Pense… pense… repense quais palavras são mais relevantes para a sua loja.

Criar conteúdo é importante, mas criar conteúdo contendo as palavras ou expressões mais significativas para a sua loja é essencial. Utilize ferramentas como o Google Insight para definir quais as palavras mais relevantes para o seu negócio.

5. Evite, ao máximo, os conteúdos duplicados.

O Google não gosta de encontrar conteúdo duplicado. Portanto, utilize a ferramenta WebMaster Tools para identificar quantas e quais são as suas páginas que possuem conteúdo duplicado.

Esse texto foi publicado por Rafael Campos.

Rafael Campos é Gerente Comercial da VTEX, empresa fornecedora de tecnologia para o comércio eletrônico.

 

Fonte: www.olhardigital.uol.com.br

empreendedo

Os principais motivos para você se tornar um empreendedor.

Satisfação, independência, relacionamento e outras razões que vão fazer você querer abrir seu próprio negócio

O site Rock the Post, focado em notícias do mundo do empreendedorismo, publicou uma lista com os principais motivos para uma pessoa se tornar um empreendedor. A primeira razão é simples: satisfação. Segundo o site, ser o responsável por ajudar diversas pessoas e a melhorar suas vidas é muito gratificante. Isso acontece porque na maioria das vezes um empreendedor cria soluções e serviços que podem mudar a vida dos cidadãos. E essa satisfação em ajudar o próximo pode se tornar um bom impulso à inovação.

O segundo motivo talvez seja o mais citado: independência. Todo mundo que pensa em abrir algum negócio fica atraído pela possibilidade de fazer seus próprios horários e cuidar da empresa do jeito que achar mais conveniente. A independência ainda permite que você tenha uma melhor qualidade de vida e consiga conciliar melhor o trabalho com a família. Isso sem falar que trabalhar em seu próprio negócio e conseguir atingir resultados almejados te faz muito bem. Portanto, o orgulho é reconhecido como uma das principais razões para alguém se tornar um empreendedor.

A publicação ainda aponta a construção de relações e o networking (rede de relacionamento profissional) como os maiores motivos para se empreender. Com o seu próprio negócio, você tem a oportunidade de conhecer pessoas incríveis, seja um funcionário ou executivos de outras companhias. Com isso, seu círculo de amizade aumenta e sua rede de relacionamento se torna ainda maior e mais sólida. Mais uma vez, você tem a chance de ajudar pessoas, apresentando umas às outras, e obter ajuda através de sua extensa lista de conhecidos.

Obviamente, se você conhecer muitas pessoas, você também terá a chance de viajar muito. E não há nada melhor do que conhecer novas culturas e países para aumentar sua experiência de vida e lhe abrir a mente para novas ideias. Além disso, no empreendedorismo, você pode escolher quais as pessoas que irão trabalhar para você e diminuir as chances de encontrar alguém com quem você não se dê bem. Em uma empresa, é extremamente importante que os funcionários trabalhem em harmonia para que essa sinergia se reflita no resultado final.

Por fim, o site afirma que o potencial de renda é uma das características do empreendedorismo que mais chama a atenção dos potenciais empresários. A possibilidade de você ganhar quantias maiores e não se prender a um salário fixo é tentadora. Assim como há momentos de dificuldades na companhia, nos momentos de fartura ninguém melhor que o fundador para faturar uma bela bolada.

Você concorda com o site? Estes motivos te levariam a abrir a sua própria empresa? Para contribuir com a discussão, escreva nos comentários abaixo o que você acha mais atraente no empreendedorismo e o que mais te faz ficar com medo de arriscar.

 

Fonte: www.olhardigital.uol.com.br

a

Estudo da Universidade de Harvard indica: “trabalhe menos para trabalhar melhor”.

Uma pesquisa recente desenvolvida em conjunto pela Harvard University e o Boston Consulting Group(BCG) indica que, para que as pessoas possam exercer bem sua função profissional, é necessário dedicar alguns finais de semana para você mesmo, longe de laptops e trabalhos home office.

12 times de consultoria do BCG foram entrevistados no estudo. Cada equipe deveria fazer previsões de folga entre si – e, naturalmente, tirar tais folgas. O resultado, segundo Leslie Perlow, líder da pesquia em Harvard, foi que “praticamente tivemos que forçar alguns profissionais a ficar longe do trabalho”.

Para os pesquisadores, o resultado das folgas “forçadas” fizeram com que os times se comunicassem melhor durante o expediente, compartilhando mais confidências e criando relações mais fortes de trabalho. O método de estudo também aprimorou a capacidade de planejamento estratégico e antecipação de situações, o que implica em melhora no atendimento a clientes, por exemplo.

De acordo com matéria do Wall Street Journal, o resultado agradou tanto o Boston Consulting Group que o escritório pretende adotar esse método em sua sede e também em projetos internacionais: “Isso realmente muda a forma como trabalhamos”, disse.

Você concorda com isso? Acha que produziria mais para a sua empresa se tivesse um tempo dedicado exclusivamente para si? Conte-nos o que acha disso nos comentários.

rs

Cinco dicas para tornar os seus negócios mais interativos nas redes sociais.

Com o aumento dos canais de mídia social, existe a necessidade de se comunicar facilmente – e simultaneamente – com os usuários. Dessa forma, que tipo de mensagem sua marca visa transmitir aos clientes socialmente engajados?
Foi pensando nisso que o site Social Media Examiner elaborou cinco dicas de como você e sua companhia podem formular seus objetivos de forma confortável, fácil, rápida e confiante, para então tornar sua marca ainda mais eficaz no mercado da competitividade.

1. Determine a personalidade da sua marca

Grande parte das pequenas empresas cresce gradualmente, acrescentando clientes e serviços ao longo do tempo. À medida que evoluem, elas garantem uma reputação de como conseguem evoluir e fazer bons negócios, determinando, assim a voz da sua marca. Com isso, ao identificar os traços de personalidade da sua companhia, os clientes terão razões para chegar até você

Um bom exemplo dessa situação é comparar a marca da sua empresa a um tipo de carro, rede de hotéis ou até a um CEO de alguma multinacional, para saber qual deles melhor representa a sua mensagem. Richard Branson ou Bill Gates? Land Rover ou Porsche? Com qual deles você tem mais a ver? Definir o seu personagem lhe dará mais convicção acerca de como alcançar bons resultados.

2. Identifique o público e sua verdadeira audiência

Com a quantidade de dados que estamos sujeitos na geração atual, o mesmo produto pode servir para diferentes tipos de grupos. Por isso, certifique-se de conhecer o público que é mais receptivo à sua mensagem e que está mais de acordo com as propostas da sua marca.

Por exemplo: se você é uma empresa B2B (Business-to-business), sites como LinkedIn e Google+ podem ser um terreno melhor e mais direcionado do que um serviço de ofertas profissionais no Twitter para seguidores aleatórios. Ao invés de uma abordagem menos direta, alinhe sua marca e empenhe o potencial de seus recursos para as comunidades que irão responder a suas demandas.

Junte-se a subgrupos específicos da indústria e fóruns para se mostrar participativo, oferecendo respostas pensadas em sua área de especialização. Além disso, é importante que você faça a medição da influência de sua marca no mercado de negócios. Para isso, existe uma opção eficaz e gratuita que, inclusive, já falamos aqui no Olhar Digital: o Klout, um serviço que mapeia sua participação nas principais redes sociais da atualidade e lhe fornece gráficos, dados e outras informações demográficas sobre como sua empresa/mensagem tem se saído na internet.

3. Desenvolva um objetivo mais consistente

Algo fundamental para o crescimento da marca é a sua consistência. Por isso, não deixe de transmitir um estilo familiar de mensagens ao se comunicar com os demais consumidores. Vale lembrar que não há uma maneira certa ou errada de falar: o importante é saber falar com o público – que não exige frases mais fechadas. Seja mais próximo do seu cliente, utilize de uma linguagem mais informal (sem deixar a seriedade de lado), elabore uma comunicação mais sociável. Conheça-o.

Contudo, não adote um perfil de multi-personalidades, como ter um lado mais rígido no Facebook, e no Twitter uma versão menos séria. Isso pode causar um certo transtorno para os usuários. Se vários funcionários contribuem para suas mídias sociais, certifique-se de que eles compreendem a personalidade de sua marca (como foi dito no item 1).

4. O tempo é tudo

Saber quando falar é muitas vezes crucial para estabelecer um contato confiável de sua marca no mercado. Se antecipar exageradamente ou esperar muito tempo pode dar a impressão de que você não está antenado ao que está acontecendo. Se organizar e mostrar-se ponderado é a melhor solução.

Uma maneira simples que pode amenizar eventuais problemas desse gênero é o Google Alerts. Nele, você pode delimitar um assunto-chave na sua indústria, de modo que seus funcionários estarão informados, esclarecidos e preparados para oferecer insights e comentários quando for necessário.

Outros meios, como o Twitter, por exemplo, também são ótimas ferramentas para estar por dentro – e em tempo real – sobre os principais fatos do dia a dia. E não se esqueça: cada segundo pode ser um fator determinante para definir a sua marca. Leia e responda os comentários de seus clientes para não se esquecer e ficar para trás.

5. Praticar é essencial

Hesitar pode gerar falta de confiança. E nada constroi melhor a confiança do que a prática. Felizmente, a web oferece uma ampla oportunidade para aperfeiçoar o poder da sua marca. Você pode começar com o blog da empresa (caso já exista um) e construir uma biblioteca de artigos úteis para seus clientes.

Tais artigos podem ser reaproveitados a vários diretórios, que vão amplificar sua mensagem. Elabore alguns tweets, faça atualizações diárias no Facebook, contribua com o seu perfil no LinkedIn, e você terá o reconhecimento esperado para o seu setor. Sabendo bem que tipo de personalidade sua marca possui e o público a ser atingido, as características da sua empresa serão aprimoradas, para então melhorar e fortalecer sua voz no mercado de negócios.

Ao seguir estas cinco dicas, você provavelmente se sentirá mais à vontade para se comunicar e alcançar uma audiência maior de sua marca e empresa. E qual sua opinião? Diga suas experiências nos comentários abaixo.

Fonte: www.olhardigital.uol.com.br

fundo

Apresentamos: Resolve Rs

A Resolve Assessoria Financeira é uma sociedade de fomento mercantil, uma factoring, que tem como clientes pessoas jurídicas. Sua atividade principal consiste na compra de títulos de curto prazo,provenientes da venda a prazo de mercadorias ou prestação de serviços.

A Resolve Incorporadora e Construtora tem como atividade a contrução de residenciais, casas e apartamentos na região metropolitana de Porto Alegre. A organização tem por missão construir um produto de extrema qualidade, objetivando propiciar a realização, comodidade e satisfação dos clientes.

Agora, que estão levemente apresentados… Bora ir no site dar uma olhadinha!

http://www.resolvers.com.br/intro/

css3-web-design-examples

Dicas CSS 3

Não é de hoje que o CSS se tornou o elemento chave na hora de buscar detalhes no layout que sejam realmente eficazes. Com o CSS3 não foi diferente, trazendo algumas alterações como:

  • Box-Shadow: Serve basicamente para aplicar efeitos de sombra em elementos de bloco
  • Text-Shadow: Serve basicamente para aplicar efeitos de sombra em textos
  • Border-Radius: Serve basicamente para arredondar o canto de elementos de bloco
  • Opacity: Serve basicamente para ajustar a opacidade de algum elemento da página
  • Outline Offset: Aplica uma linha externa ao objeto.
  • Entre outras novidades

Text-shadow: declaração

É com a propriedade text-shadow que podemos adicionar sombra a um texto utilizando CSS3. Sua declaração é bastante simples. No exemplo, vamos adicionar uma sombra preta a um elemento <h1> cinza claro:

text-shadow: #000 2px 3px 2px;
text-shadow: #000 2px 3px 2px;

No exemplo, #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é oraio da sombra (efeito blur).

Obviamente, como qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels:

text-shadow: #000 0.2em 0.3em 0.2em;
text-shadow: #000 0.2em 0.3em 0.2em;

Sendo um efeito de sombra, ele tem resultados mais naturais quando usamos tons de cinza. Sombras com distâncias e raio pequenos têm um efeito de relevo bem interessante, que promete ser a tendência para essa propriedade:

text-shadow: #FFF 1px 1px 1px;
text-shadow: #FFF 1px 1px 1px;

text-shadow: #999 1px 2px 2px;
text-shadow: #999 1px 2px 2px;

Sombras coloridas e raios com valores muito alto são irreais e dão um aspecto completamente amador ao layout. Por isso, esse efeito deve ser utilizado com muita cautela:

text-shadow: #600 1px 2px 5px;
text-shadow: #600 1px 2px 5px;

Como esse recurso é utilizado para sombrear textos, quando aplicado a outros elementos terá efeito apenas sobre o seu conteúdo:

div {text-shadow: #600 1px 2px 5px; border: #000 1px solid;}
div {text-shadow: #600 1px 2px 5px; border: #000 1px solid;}

Múltiplas sombras e valores negativos

É possível aplicar mais de uma sombra a um mesmo texto. As sombras se sobrepõem de acordo com a ordem da declaração, mas nunca vão se sobrepor ao texto original. Repare que na segunda declaração os valores dos deslocamentos horizontal e vertical são negativos, o que faz a sombra ser projetada na direção contrária (à esquerda e acima do elemento):

text-shadow: #000 1px 1px 1px, #FFF -1px -1px 1px;
text-shadow: #000 1px 1px 1px, #FFF -1px -1px 1px;

Box-shadow: declaração

Agora vamos ver como aplicar sombras em bordas. A declaração da propriedade box-shadow é semelhante à da propriedade text-shadow:

box-shadow: #000 2px 2px 1px;
box-shadow: #000 2px 2px 1px;

Onde #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (2px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (1px) é o raio da sombra (efeito blur).

Porém, assim como na propriedade border-radius, existem duas declarações diferentes: -webkit-box-shadow para Chrome e Safari, e -moz-box-shadow para o Firefox. No momento em que este artigo era escrito, o navegador Internet Explorer, pelo menos até a versão 8, não oferecia suporte ao recurso. Porém, como as sombras têm um efeito apenas estético, a falta de suporte não deve atrapalhar a navegação de usuários com browsers nessa condição.

Veja mais exemplos do uso dessa propriedade. Note que o fundo azul serve apenas para realçar o objeto branco e mostrar claramente como as sombras funcionam:

box-shadow: 5px 5px 10px #0076a3;
box-shadow: 5px 5px 10px #0076a3; -webkit-box-shadow: 5px 5px 10px #0076a3; -moz-box-shadow: 5px 5px 10px #0076a3;

box-shadow: -1px -1px 2px #325d6f;
box-shadow: -1px -1px 2px #325d6f; -webkit-box-shadow: -1px -1px 2px #325d6f; -moz-box-shadow: -1px -1px 2px #325d6f;

Tal como acontece com text-shadow, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra com box-shadow, não apenas pixels:

box-shadow: 0px 0px 1em #666;
box-shadow: 0px 0px 1em #666; -webkit-box-shadow: 0px 0px 1em #666; -moz-box-shadow: 0px 0px 1em #666;

Múltiplas sombras em bordas

Também é possível adicionar múltiplas sombras a um elemento usando box-shadow, bastando, para isso, separar as declarações com vírgula. As sombras se sobrepõem na ordem em que foram declaradas, mas nunca se sobrepõem ao elemento original.

No seguinte exemplo, utilizando uma sombra mais escura que o fundo e outra mais clara, ambas com os valores baixos do raio e das distâncias, criamos um interessante efeito de profundidade:

box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2;
box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2; -webkit-box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2; -moz-box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2;

É importante ressaltar que, assim como em um editor de imagens, o uso da sombra deve ser bem utilizado. Sombras coloridas ou com raio muito grande são irreais e dão um aspecto amador ao seu layout:

box-shadow: -5px -10px 30px #900, 6px 9px 15px #090;
box-shadow: -5px -10px 30px #900, 6px 9px 15px #090; -webkit-box-shadow: -5px -10px 30px #900, 6px 9px 15px #090; -moz-box-shadow: -5px -10px 30px #900, 6px 9px 15px #090;

Aplicação em outros elementos

Nos exemplos anteriores, aplicamos a sombra a elementos <div>, mas a propriedade box-shadow pode ser utilizada em qualquer elemento. Nos exemplos abaixo, aplicamos sombra aos elementos <button> e <input>, e também em uma imagem com uma borda branca:

box-shadow aplicado a outros elementos

É claro que o Internet Explorer até a versão não interpreta nosso querido CSS3. Me pergunto como milhares de pessoas utilizam um navegador que não segue um padrão. Mozilla firefox, Google Chrome, Opera e Safari seguem de certa forma um padrão e estão sempre sendo atualizados. A microsoft desde os primórdios não soube aproveitar o trunfo de possuir a grande parcela do mercado de sistemas operacionais para lançar ferramentas web que ajudem realmente.O webmatrix, por exemplo, é legal mas não é uma brastemp. As ferramentas online do Office são fracas ao extremo e quem nunca usou o Apple Mail, sofre na mão do Outlook horroroso 

 

dragstrip

Sites Relacionados A Arrancada

Revista Especializada Em Arrancada Totalmente On Line

Site do Piloto Alejandro Aanches referencia em arrancada no Brasil e considerado o mais veloz tbm. Nao deixando dee quando visitar o site dar uma jogadinha no jogo de reação virtual, que simula uma arrancada num dragster da equipe Flash Power

 

Maior e mais completo site de arrancada do sul do pais tudo sobre os melhores eventos do genero