Desenvolvimento web

Desenvolvimento de site por R$150,00/Mês

Desenvolvimento Web responsivo com Melhor Custo-beneficio

Planos de desenvolvimento web com hospedagem Gratís
Arquivo de Dicas | LCF HOST

Dicas


Twitter Bootstrap

Conheça mais sobre Twitter Bootstrap e saiba como você pode desenvolver projetos mais robustos, profissionais e visualmente agradáveis com este incrível framework!

Twitter Bootstrap já não é nenhuma novidade para os desenvolvedores que conseguem acompanhar as melhores tendências e ferramentas lançadas “lá fora” por conseguirem ler em inglês e, apesar de a popularidade do Twitter Bootstrap (TB) poder contar com uma curva crescente de uso em solo brasuca, um artigo sobre este fantástico framework vem, sim, em um bom momento. Se quiser saber mais sobre o Twitter Bootstrap, continue lendo!

O que é o Twitter Bootstrap

Se você acompanha os artigos do desenvolvimento para web, deve se lembrar que em março deste ano, no artigo que comentava sobre o novo tema do blog, que uma das tecnologias usadas por aqui é o Twitter Bootstrap. Entretanto, foi só um comentário “por alto” e, neste artigo você encontrará mais informações sobre o TB.

Idealmente e tecnicamente, o Twitter Bootstrap pode ser considerado um framework. Ele é um projeto que nasceu dentro do Twitter pelas mãos dos desenvolvedores @mdo and @fat. Fato curioso é que, inicialmente, tratava-se de um esforço para documentar determinados padrões de design e UI dentro do Twitter, mas a coisa tomou proporções maiores e seus autores decidiram virar amigos da garotada, disponibilizando o Twitter Bootstrap no Github (que, por sinal, é um dos projetos mais populares de lá).

Grosso modo, o TB é um conjunto de HTML, CSS e JavaScript que proporciona uma maneira ultra-rápida, eficiente e profissional de planejar e desenvolver o front-end de web sites, aplicações, sistemas e produtos web através de seus elementos de UI e interações. Na prática, isso quer dizer que você pode “dar vida” a seus sites e produtos web em apenas algumas horas!

Através do uso de HTML5 e CSS3, os projetos feitos com TB são modernos e garantidos de serem “duráveis”. Para melhorar, o CSS é feito com LESS! E, para constar, no momento da descrita deste artigo, a versão do Twitter Bootstrap é a 2.2.0.

Principais características do Twitter Bootstrap

Como citado, o Twitter Bootstrap possui um conjunto incrível de elementos de marcação, estilo e comportamento para que dar a início a projetos de características profissionais seja uma tarefa bem simples para os desenvolvedores web.

Scafolding

Sua poderosa estrutura conta com:

  • Estilos globais que servem para todos os navegadores modernos
  • Sistema de grid
  • Sistema de grid fluido
  • Layout fixo
  • Layout fluido para web design responsivo

Projetar estruturas de layout com o TB é extremamente simples e muito rápido, já que ele já conta com alguns tipos de grid, layouts e exemplos de marcação para se começar com seu uso imediatamente! Por exemplo, ao se conhecer suas classes, ter um layout fluido é tão simples quanto:

CSS

Com o poder das classes pré-definidas do TB, é possível ter um visual incrível dos elementos de marcação mais básicos e contar com elementos de UI fantásticos. O CSS do Twitter Bootstrap abrange:

  • Tipografia
  • Código
  • Tabelas
  • Formulários
  • Botões
  • Imagens
  • Icon Fonts

Por exemplo, veja como é simples apresentar botões bonitos e funcionais apenas usando algumas classes pré-definidas:

Botõesclass=””
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger

Componentes

Provavelmente você nunca criou componentes tão funcionais em seus sites usando uma marcação tão simples e bem pensada, com características cross-browser e visual de encher os olhos. São eles:

  • Dropdowns
  • Grupos de botões
  • Dropdown de botões
  • Navegações
  • Barra de navegação
  • Breadcrumbs
  • Paginação
  • Rótulos e emblemas
  • Tipografia
  • Thumbnails
  • Alertas
  • Barras de progresso
  • E mais!

JavaScript

E, além de prover toda a parte visual para sua aplicação web, o TB também oferece a parte de interação destes componentes visuais! Através de seus plugins próprios para jQuery, é possível obter interações como:

  • Transições
  • Modais
  • Dropdowns
  • Scrollspys
  • Abas
  • Tooltips
  • Popovers
  • Alertas
  • Botões
  • Colapsáveis
  • Carrosséis
  • Autocompletes

É bom demais ou não é? 😉

Recursos para Twitter Bootstrap

E, se não fosse bom o suficiente, existem diversos projetos complementares ao Twitter Bootstrap para que sua força e poder de desenvolvimento seja ainda mais potencializado!

  • Globo BootstrapÉ fácil traduzir um projeto de sucesso no mundo inteiro e colocar o nome da sua marca… De qualquer maneira, está aí o Globo Bootstrap, que é a tradução do TB para a Língua Portuguesa (sinceramente, a qualidade não está tão boa e não há garantias que acompanhe as atualizações do projeto original Segundo Alexandre Magno, toda a comunidade web é bem vinda a contribuir com o projeto, inclusive traduções, e a ideia é continuar na ativa)
  • Built With Bootstrap. Uma galeria com sites feitos com Twitter Bootstrap que mostra todo o potencial do framework
  • Bootswatch. Algumas pessoas criticam que os sites feitos com o TB se parecem demais. Para os que compartilham desta opinião, não tem mais o que reclamar com o Bootswatch, que é uma coletânea de estilos para o Twitter Bootstrap
  • {wrap}bootstrap. Se quiser investir em templates prontos feitos com TB, esse é o lugar!
  • Font Awesome. Com Font Awesome é possível estender os ícones-fonte do Bootstrap, ficando com uma gama de possibilidades bem maior para compor o visual do seu site.
  • Bootsnipp. Snippets HTML grátis para várias situações comuns de UI para Bootstrap.
  • Fuel UX. Fuel UX estende o Twitter Bootstrap com controles JavaScript adicionais. Complemente as interações de seus projetos em TB com combobox, datagrid, pillbox, busca e spinner.
  • X-editable. Se você precisa de um “edit in place” em seus projetos, o X-editable vai servir perfeitamente. Ele é um edit in place para se trabalhar com Twitter Bootstrap (e possui versões para jQuery UI e jQuery puro).
  • Bootstrap Shortcodes. Para os que adoram usar WordPress (eu!), eis uma coletânea de shortcodes para implementar facilmente os elementos visuais do TB.
  • Datepicker for Bootstrap. Se faltava um datepicker para o seu projeto com Bootstrap, agora não falta mais!

Conclusão

Com Twitter Bootstrap é possível dar vida a um projeto em poucas horas, já que sua curva de aprendizado é curtíssima. À medida em que se o vai usando, mais e mais prática é adquirida e, cada vez mais, a produtividade e agilidade em desenvolver o front-end é alcançada. Este é um projeto realmente diferenciado no mundo do desenvolvimento web e seus autores, definitivamente, contribuíram de forma positiva para a melhoria e facilitação do trabalho de seus pares.


CSS Blocks: introdução à API

Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.

No primeiro artigo sobre CSS Blocks (o primeiro brasuca, aliás!) apresentamos o otimizador de CSS da LinkedIn, explicando um pouco sobre o porquê de sua existência e seus princípios-base. Agora, vamos a mais algumas explicações de código para entender melhor o que CSS Blocks é capaz de fazer.

Como uma breve recapitulação, CSS Blocks é um compilador inspirado em CSS Modules, BEM e Atomic CSS que, usando o OptiCSS, promete entregar estilos bem mais enxutos e performáticos. No momento da publicação deste artigo, é possível usá-lo nas templating languages JSX/React e Glimmer (com WebpackBroccoli ou Ember-CLI) — por se tratar de um projeto open source, a tendência é que mais e mais opções surjam bem rapidamente.

O que é um “Bloco”?

O nome da coisa é CSS Blocks, “Blocos CSS”; mas, segundo a metáfora de desenvolvimento escolhida, o que seria um “Bloco”?

Um Bloco é uma folha de estilo isolada, escrita em seu próprio arquivo, que contém todos os conjuntos de regras para quaisquer elementos e seus vários modos e estados de interação para uma unidade discreta de estilo — como um componente, por exemplo.

Normalmente, um único bloco conterá estilos para um componente ou conceito específico, mas é totalmente natural — e incentivado — um template usar vários Blocos e os compor juntos na marcação.

Um Bloco pode conter:

  • Seletor :scope
  • Seletores de classe
  • Seletores de estado
  • Seletores de sub-estado

Seletor :scope

O conjunto de regras de escopo contém estilos aplicados à raiz da sub-árvore de estilo com escopo. Trocando em miúdos, todos os outros elementos atribuídos a estilos de um Bloco devem estar contidos na sub-árvore do documento de um elemento atribuído ao escopo desse Bloco. Usa-se a pseudo-classe :scope para representar esses estilos.

O seletor :scope pode conter a propriedade especial block-name que torna possível fornecer um nome específico para o Bloco para um debugging mais fácil e respectiva geração de classe BEM. Se nenhum nome de bloco for fornecido, infere-se o nome do bloco a partir do nome do arquivo.

Sim, você leu corretamente: a compilação final de CSS Blocks gera nomes de classes seguindo a metodologia BEM!

Por exemplo:

Seletores de classe

Blocos podem conter outras classes que podem ser aplicadas a elementos dentro da sub-árvore de estilo escopada. São apenas seletores de classe comuns, mas são locais para esse Bloco e isolados de todas as outras classes com nomes iguais em outros Blocos.

Juntos, o seletor :scope e todos os seletores de classe (.class) declarados definem a interface completa dos elementos estilizados disponíveis para quem vai usar um Bloco.

Seletores de Estado

Estados representam um modo ou estado de interação no qual :scope ou uma classe — denominada Elemento Originário do Estado — pode estar. Os Estados são gravados como seletores de atributos com o namespace especial state.

Seletores de sub-estado

Estados no seletor :scope ou um seletor de classe podem conter sub-estados para um estilo mais granular. Os sub-estados de um Estado são mutuamente exclusivos, ou seja, um elemento só pode estar em um sub-estado de um Estado por vez.

Restrições na API de CSS Blocks

CSS Blocks implementa um subconjunto estrito de CSS. Isso significa que alguns dos recursos que normalmente poderiam ser usados em um arquivo em um arquivo de Bloco foram intencionalmente restringidos para garantir que a compilação final possa gerar estilos da maneira mais otimizada possível.

A equipe principal de desenvolvimento do CSS Blocks já planeja melhorias neste sentido; em breve, estas restrições serão bem menores.

Para ficar claro:

  • Permitido:
  • Proibido (por enquanto):
    • !important (você já deveria tê-lo banido, de qualquer maneira)
    • tag[attribute] que não seja de Estado, #id e seletores *
    • Os Combinadores Lógicos :matches():not():something() e :has()
    • Importante: seletores devem se manter rasos (shallow)

No contexto de CSS Blocks, “seletores rasos” significa:

Apenas 1 combinador por seletor

Seletores de Combinadores Hierárquicos (” “ e “>“) devem ser um estado de :scope, sub-estados ou pseudo-classes

Seletores de irmão (“+” e “~“) devem ter como target a mesma classe ou :scope usado no seletor-chave

Como todo o código é analisado e compilado estaticamente (statically) antes de atingir o navegador, obviamente um erro bastante útil será gerado caso alguma dessas restrições de sintaxe seja violada.

Conclusão

É difícil tentar decorar todas essas peculiaridades; com o tempo de uso de CSS Blocks, naturalmente isso vai se internalizar. De qualquer maneira, é bom saber que existe uma tabela bem útil mostrando o que é permitido e proibido na API — que, devido à incipiência de CSS Blocks, deve ser alterada (para melhor) bem rapidinho e com bastante frequência.

Para ficar claro, eis o que acontece na fase de Compilação de CSS Blocks:

O processo de otimização vai além; existem mais passos até que o output final aconteça — ou você achou que CSS Blocks servia só para escrever BEM de maneira mais complicadinha? Mas isso já é assunto para outro artigo…


Responsive Components: uma solução para container queries

Conheça Responsive Components, uma solução para componentes responsivos que resolve o problema de Container Queries e pode ser usada imediatamente!

Você já deve ter ouvido falar em Container Queries, uma proposta que permitiria a desenvolvedores web estilizarmos elementos DOM com base no tamanho do elemento contentor (“que contém”) ao invés do tamanho da viewport do navegador. Mas já ouviu sobre Responsive Components?

Se você é um desenvolvedor a par das discussões envolvendo responsividade, provavelmente já ouviu falar sobre Container Queries antes. Desde quando toda a festa de web design responsivo começou, já havia desenvolvedores pedindo por tal recurso (inicialmente Element Queries, depois mudando para Container Queries) — de fato, Container Queries podem ser o recurso CSS mais solicitado que os navegadores ainda não têm.

Já existem muitosmuitosmuitos artigos explicando exatamente porquê container queries são difíceis de fazer no CSS e porquê os fabricantes de navegadores hesitaram em implementá-las. Essa discussão não precisa ser revivida neste post.

Ao invés de focar estritamente na proposta formal de CSS chamada “Container Queries” (Consultas de Contêiner), este artigo abordará o conceito mais amplo de construção de componentes que respondem a seu “ambiente” — responsive components. E se você aceitar esse “enquadramento” maior, realmente já existem novas APIs que permitem que se obtenha isso. Isso mesmo: não é preciso esperar Container Queries chegarem oficialmente para começar a criar componentes responsivos; é possível começar agora!

A estratégia proposta neste artigo permite o uso hoje e é projetada como um aprimoramento, então os navegadores que não suportam as APIs mais recentes ou não executam JavaScript funcionarão exatamente como fazem atualmente. Também é simples de implementar, altamente performática e não requer nenhuma ferramenta especial, bibliotecas ou frameworks.

Para ver alguns exemplos dessa estratégia em ação, existe o site de demonstração Responsive Components, em que cada exemplo aponta para o código-fonte CSS.

Mas antes de começar a realmente ver alguns exemplos, é importante saber como a estratégia proposta funciona.

A estratégia de Responsive Components

A maioria das estratégias/metodologias de web design responsivo funcionam de acordo com estes 2 princípios fundamentais (e aqui não será diferente):

  1. Para cada componente, define-se primeiro um conjunto-base de estilos genéricos que se aplicam independentemente do ambiente em que o componente esteja contextualizado/inserido
  2. Em seguida, definem-se adições ou substituições para os estilos-base que se aplicam em condições ambientais específicas

O poder desses princípios é que eles funcionam mesmo se o navegador não suportar os recursos necessários para cumprir ou permitir condições de ambiente específicas. E isso inclui casos em que o recurso requer JavaScript — usuários com JavaScript desativado obterão os estilos-base e eles funcionarão normalmente.

Na maioria dos casos, os estilos-base definidos no item “1” acima são estilos que funcionam para os menores tamanhos de viewport possíveis (uma vez que viewports menores tendem a ser mais restritivas do que as maiores) e elas não estão envolvidas com nenhum tipo de media query (o que significa que se aplicam em toda parte).

Eis um exemplo que define estilos-base para .MyComponent e depois os substituem em 2 breakpoints arbitrários, 36em e 48em:

Claro, esses breakpoints usam media queries, então eles se aplicam ao tamanho da viewport do navegador. O que os defensores de container queries procuram é a capacidade de fazer algo como isto (nota: esta é a sintaxe proposta; não a sintaxe oficial):

Infelizmente, a sintaxe acima não funciona em nenhum navegador atualmente e não funcioná tão cedo… No entanto, funciona hoje algo mais ou menos como:

Claro, este código assume que os contêineres de componentes têm as classes corretas adicionadas a eles (neste exemplo, .MD e .LG). Mas ignorando esse detalhe por enquanto, a segunda sintaxe ainda faz sentido para qualquer desenvolvedor CSS que quer construir um componente responsivo.

Quer esteja escrevendo uma container query como uma query de comparação de largura (a primeira sintaxe) ou usando classes de breakpoint nomeadas (a segunda sintaxe), os estilos ainda são declarativos e funcionalmente os mesmos. Contanto que seja possível definir breakpoints nomeados, aparentemente não há um benefício claro a favor de um ou de outro.

E para que o restante do artigo fique claro, aqui está o mapeamento das classes/breakpoints (no qual min-width se aplica ao contêiner, não à viewport):

BreakpointLargura do Container
SMmin-width: 24em (384px)
MDmin-width: 36em (576px)
LGmin-width: 48em (768px)
XLmin-width: 60em (960px)

Agora é preciso garantir que os elementos de contêiner tenham sempre as classes de breakpoint corretas; então os seletores de componentes corretos irão corresponder (match).

Observando redimensionamento de contêineres

Quase desde sempre em desenvolvimento web foi possível observar mudanças em window, mas também quase sempre foi difícil ou impossível (pelo menos de uma forma significativa) observar mudanças de tamanho em elementos individuais de DOM. Isso mudou quando o Chrome 64 disponibilizou ResizeObserver.

ResizeObserver, seguindo os passos de APIs semelhantes, como MutationObserver e IntersectionObserver, permite que sejam observadas mudanças de tamanho nos elementos DOM de uma forma altamente performática.

Aqui está um possível código necessário para fazer com que o CSS mostrado anteriormente funcione com ResizeObserver:

Este exemplo usa a sintaxe ES5 porque (como será explicado mais adiante) pode ser interessante inserir este código diretamente no HTML em vez de incluí-lo em um arquivo JavaScript externo. A sintaxe mais antiga é usada para garantir um amplo suporte de navegadores.

O código cria uma instância única de ResizeObserver com uma função de callback. Em seguida, consulta o DOM por elementos com o atributo data-observe-resizes e começa a observá-los. A callback — que é invocada inicialmente após a observação e novamente após qualquer alteração — verifica o tamanho de cada elemento e adiciona (ou remove) as classes de breakpoint correspondentes.

Em outras palavras, esse código transformará um elemento de contêiner com 600px de largura assim:

Para:

E essas classes serão atualizadas automática e instantaneamente sempre que o tamanho do contêiner mudar. Com isso, os seletores .SM e .MD corresponderão (mas não os seletores .LG ou .XL) e esse código funcionará perfeitamente.

Customizando breakpoints

O código na callback de ResizeObserver acima define um conjunto padrão de breakpoints, mas também permite que sejam especificados breakpoints personalizados por componente, passando um JSON através do atributo data-breakpoints.

A estratégia recomendada é alterar o código acima para usar qualquer mapeamento-padrão de breakpoints que faça mais sentido para o projeto que se está trabalhando e, em seguida, especificar inline um conjunto de breakpoints específicos para qualquer componente que precise:

O site Responsive Components tem um exemplo de um componente que configura seus próprios breakpoints juntamente com componentes usando breakpoints padrão.

Lidando com alterações dinâmicas no DOM

O exemplo de código acima apenas funciona para elementos de contêiner que já estão no DOM.

Para sites baseados em conteúdo (content-based sites), isso geralmente é bom, mas para sites mais complexos, cujo DOM muda constantemente, será preciso se certificar de que a observação de todos os elementos de contêiner adicionados dinamicamente está acontecendo.

Uma solução “one-size-fits-all” para este problema é expandir o snippet acima para incluir um MutationObserver que acompanha todos os elementos de DOM adicionados. Esta é a abordagem usada no site Responsive Components, que funciona bem para sites de pequeno e médio porte com modificações de DOM limitadas.

Para sites maiores, com atualizações freqüentes no DOM, já se usa algo como Custom Elements ou algum framework com métodos de lifecycle que rastreiam quando elementos são adicionados/removidos do DOM — se for este o caso, provavelmente é melhor apenas fazer um hook a esses mecanismos.

Por exemplo, um elemento personalizado <responsive-container> poderia ser algo assim:

Embora seja tentador criar um novo ResizeObserver para cada elemento de contêiner, é realmente muito melhor criar um único que observa muitos elementos. Para saber mais, veja as descobertas de Aleks Totic sobre o desempenho do ResizeObserver na lista de discussão blink-dev.

Componentes aninhados

Nas primeiras experimentações com esta estratégia, cada componente não foi envolvido com um elemento de contêiner. Em vez disso, foi usado um único elemento de contêiner por área de conteúdo distinta (header, sidebar, footer etc.) e, no CSS, usados combinadores de descendentes (descendant combinators) ao invés de combinadores de filho (child combinators).

Isso resultou em marcação e estilo mais simples, mas rapidamente se desfez quando se tentou aninhar componentes dentro de outros componentes (o que não é muito raro). O problema é que, com a abordagem do combinador descendente, os seletores corresponderam a vários containers ao mesmo tempo…

Após a construção de alguns demos não-triviais, tornou-se claro que uma estrutura direta filho/pai para cada componente e seu contêiner era muito mais fácil de gerenciar e dimensionar. Observe que os recipientes ainda podem conter mais de um componente, desde que cada um deles seja um descendente direto.

Seletores avançados e abordagens alternativas

Como já explicado, a estratégia descrita neste artigo traz uma abordagem aditiva para estilizar componentes: inicia-se com estilos-base para adicionar mais estilos em seguida. Entretanto, esta não é a única abordagem possível. Em algumas situações, pode ser preciso definir estilos que correspondam exclusivamente e somente se apliquem a um breakpoint específico (ex: ao invés de (min-width: 48em), algo como (min-width: 48em) and (max-width: 60em)).

Se fosse este o caso, seria preciso ajustar um pouco o callback de ResizeObserver para aplicar o nome da classe do breakpoint que corresponde atualmente (currently-matching breakpoint). Então, se o componente estivesse em seu tamanho “grande”, ao invés de definir o nome da classe SM MD LG, seria simplesmente LG.

No CSS, seria possível escrever seletores como:

Importante notar que, ao usar a estratégia para correspondência aditiva, ainda pode haver correspondência exclusiva por meio de um seletor como .MD:not(.LG) — embora a leitura desse seletor seja mais custosa (para humanos e máquinas).

No final das contas, é possível escolher qualquer convenção que faça mais sentido para o projeto em questão; que funcione melhor para a situação concreta que se apresente.

O seletor :matches() ainda não é bem suportado nos navegadores atuais. Mas é possível usar ferramentas como postcss-selector-matches e similares para transpilar em algo que funcione de maneira cross-browser.

Breakpoints de altura

Até agora, todos os exemplos focaram em breakpoints de largura. Não é surpresa, já que a maioria esmagadora das implementações de web design responsivo usam a largura e nada mais (pelo menos quando se trata de dimensões da viewport). Contudo, nada na estratégia apresentada no artigo evitaria que um componente respondesse à altura de seu container, já que ResizeObserver reporta ambas as dimensões.

Portanto, se fosse preciso observar mudanças de altura, seria possível definir um conjunto separado de classes de breakpoints — talvez com um prefixo W- para breakpoints de largura e H- para breakpoints de altura.

Suporte dos navegadores

Na data de publicação deste artigo, ResizeObserver só é suportado no Chrome, mas não há absolutamente nenhuma razão para que não seja possível usá-lo imediatamente. A estratégia descrita aqui é intencionalmente projetada para funcionar bem se o navegador não suportar ResizeObserver ou mesmo se o JavaScript estiver desabilitado.

Em qualquer um desses casos, os visitantes verão os estilos-padrão — que devem ser mais do que suficientes para oferecer uma boa experiência. Na verdade, eles provavelmente serão os mesmos estilos que você já está oferecendo hoje.

A abordagem recomendada é usar media queries para o layout do site e, em seguida, essa estratégia de componentes responsivos para componentes específicos que precisem dele (muitos não irão precisar).

Se for preciso fornecer uma UI consistente em todos os navegadores, é possível usar o polyfill de ResizeObserver, que oferece um excelente suporte (IE9+). Entretanto, certifique-se de que o polyfill seja carregado somente quando for realmente preciso.

Também é importante levar em consideração que polyfills tendem a ser mais lentos em dispositivos móveis e, dado que componentes responsivos importam mais em viewports maiores, provavelmente não é preciso carregar o polyfill se o visitante estiver em um dispositivo com viewport pequena.

O site de demonstração Responsive Components leva em conta esta última abordagem: ele carrega o polyfill somente se o navegador não suporta ResizeObserver e se a largura da viewport é pelo menos 48em.

Limitações e melhorias futuras

No geral, a estratégia de componentes responsivos descrita neste artigo é incrivelmente versátil e tem poucas desvantagens. A partir de agora, é altamente recomendado que sites com áreas de conteúdo cujos tamanhos possam mudar independentemente da viewport implementem uma estratégia de componentes responsivos ao invés de confiar somente em media queries (ou alguma solução JavaScript que não aproveita ResizeObserver).

Isto posto, passemos a algumas limitações que valem a pena serem discutidas.

Não é CSS puro

Uma desvantagem óbvia desta solução é que requer mais do que apenas CSS para ser implementada. Além de definir os estilos em CSS, também é preciso se valer de marcação no HTML e coordenar ambos com JavaScript.

Certamente uma solução baseada em CSS puro é a ideal; é o objetivo final. Mas não há motivos sólidos para impedir o uso desta estratégia hoje.

“Flash of un/incorrectly-styled content”

Na maioria dos casos, é uma prática recomendada carregar todo o JavaScript de forma assíncrona, mas, neste caso, o carregamento assíncrono pode levar os componentes a renderizar inicialmente no breakpoint padrão para depois alternar para um breakpoint maior depois de o JavaScript ser carregado.

Embora esta não seja a pior experiência do mundo, é algo que definitivamente não estaria na lista de preocupações em uma solução de CSS puro. E uma vez que esta estratégia envolve coordenação com JavaScript, também é preciso prestar atenção quando estilos e breakpoints são aplicados para evitar esse re-layout.

Uma das maneiras mais ágeis para lidar com isso é incorporar o código de container query no final dos templates de HTML, garantindo que seja executado o mais rápido possível. Em seguida, adicionando-se uma classe ou atributo aos elementos de contêiner uma vez que sejam inicializados e estejam visíveis para que se saiba quando é seguro mostrá-los (e se certificar de considerar o caso em que o JavaScript está desativado ou cause erros quando executado). É possível ver um exemplo disso no site de demonstração.

As unidades são baseadas em pixels

Muitos desenvolvedores de CSS (se não a maioria) preferem definir estilos com base em unidades com mais relevância contextual (por exemplo: emvh etc.), enquanto o ResizeObserver, como a maioria das API de DOM, retorna todos seus valores em px.

No momento, não há realmente nenhuma boa maneira para contornar isso.

No futuro, uma vez que os navegadores implementem CSS Typed OM (uma das novas especificações CSS Houdini), será possível converter fácil e economicamente entre várias unidades de CSS.

Até lá, o custo de realizar esta conversão provavelmente afetaria o desempenho ao ponto de prejudicar a experiência do usuário.

Conclusão sobre Responsive Components

Este artigo descreve uma estratégia para o uso de tecnologias web modernas para criar responsive components: elementos DOM que podem atualizar seu estilo e layout em resposta a mudanças no tamanho de seu contêiner.

Enquanto as tentativas anteriores de construir componentes responsivos eram valiosas em sua exploração/tentativa, limitações na plataforma significavam que essas soluções eram sempre grandes demais, lentas demais ou ambas. Felizmente, agora existem APIs de navegador que permitem construir soluções eficientes e performáticas.

A estratégia descrita neste artigo:

  • Funciona, hoje, em qualquer site
  • É fácil de implementar (copiar > colar)
  • Tem performance tão boa quando uma solução baseada em CSS puro
  • Não requer bibliotecas específicas ou frameworks
  • Vale-se de aprimoramento progressivo (progressive enhancement): quem não tiver as APIs necessárias ou esteja com JavaScript desabilitado ainda consegue usar o site

A estratégia apresentada neste artigo é “pronta para produção” (production-ready), mas ainda estamos muito nos primeiros estágios da coisa.

À medida que a comunidade de desenvolvimento web começar a mudar o design de componentes de viewport ou orientado a dispositivo (device-oriented) para orientado a contêiner (container-oriented), certamente todos veremos o emergir de possibilidades e melhores práticas até então inimagináveis!


10 dicas que desenvolvedores web iniciantes devem saber

Conheça 10 dicas que desenvolvedores web iniciantes devem saber para começar e/ou continuar suas carreiras

Se você é um desenvolvedor iniciante, pode ser confuso sobre onde você deve começar no mundo do desenvolvimento web, já que o ramo é amplo e oferece muitas opções de escolha. Há muitas perguntas a serem feitas, tais como “Que linguagem de programação quero aprender?” ou “Eu deveria saber sobre front-end ou apenas back-end?”, e existem, literalmente, centenas de outras.

Mas, para que você não fique tão perdido, esta lista com 10 dicas que desenvolvedores web iniciantes devem saber realmente pode ajudá-lo a iniciar sua carreira como desenvolvedor ou, caso já tenha começado, servir de norte para a continuação dos caminhos a serem trilhados.

Decida quais habilidades você quer

Ao iniciar na carreira de desenvolvedor web, você realmente precisa se concentrar em alguma coisa e aceitar o fato de que não é possível ser um “generalista” — ou, como a garotada hoje em dia prefere chamar, um desenvolvedor full stack.

Acredite: mesmo dando muita vontade de atuar em vários e vários ramos do desenvolvimento web, isso é impossível para quem está começando. Afinal, é preciso saber atuar em várias frentes para ser um “full stack” e, quando se está começando, mal se tem o conhecimento para uma só. Faz sentido, certo?

Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo. O que você pode fazer é centrar seus esforços no aprendizado em uma habilidade e se tornar um perito nesse campo.

Pode ser PHP, Ruby, C#, etc., mas tem que ser bom no que faz. Depois de dominar um deles, você pode seguir em frente, mas não faça isso até que você tenha grande conhecimento nesse campo.

Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo.

Esta dica também é bom para front-end designers, que sempre começam com HTML e CSS, depois passam para JavaScript, muito comumente se especializando em frameworks, Node, ou quaisquer outros que estiverem interessados.

Claro, é possível aprender HTML e CSS ao mesmo tempo, mas isso é porque eles meio que trabalham em conjunto. Você não pode realmente dominar PHP e Ruby ao mesmo tempo — a menos que você gaste 20 horas de estudos por dia, o que, definitivamente, não é recomendado –, portanto, para quem possui QI abaixo de 130, o recomendado é adquirir as habilidades uma a uma.

Mas, já que você é um novato e, provavelmente, não deve saber muito sobre linguagens de programação hardcore, escolher uma área para começar pode ser complicado, mas há uma solução: pense no que você quiser desenvolver: se for temas para WordPress, então seu caminho é o PHP; se for sistemas de gestão personalizados, tente ASP.NET; jogos de iPhone, aprender Swift e assim por diante.

Aprenda direito

Outra dica para novatos é, independentemente da linguagem que você escolher, aprenda direito! Se você aprender HTML codificando layouts com tabelas, isso não é nada certo. Codificar usando os mais recentes padrões da web parece inútil para alguns, mas é realmente importante e é altamente recomendado a aprender assim, já que será mais fácil e fará mais sentido ante o cenário atual de desenvolvimento web.

Além do mais, inevitavelmente a situação de ter que pegar o código de alguém para compreender e/ou passar seu próprio código para ser compreendido acontecerá; quanto mais ambos estiverem alinhados com técnicas modernas de desenvolvimento, melhor será para todos.

Google é o seu melhor amigo

Realmente não importa que tipo de problema (relacionado a webdev) apareça, certamente o Google pode mostrar a direção certa para resolvê-lo.

Fóruns de programação são altamente recomendados também, mas, antes de postar uma pergunta em algum fórum, tente buscar uma solução no Google porque, na maioria das vezes, você vai encontrar uma resposta para sua pergunta — ou, pelo menos, uma resposta que irá guiá-lo para resolver a questão.

Analise o código alheio

Pegando o exemplo da área de front-end, às vezes, desenvolvedores têm conhecimentos de design de front-end e fazem seus próprios layouts antes de começar a codificá-los. É importante olhar outros sites para entender como eles são codificados. Se você gosta de algum estilo ou elemento de um site, olhe para o código fonte e o analise!

Atualmente, é praticamente considerado uma insanidade trabalhar com front-end sem usar a DevTools do Chrome. Antes de ela servir para ajudar no trabalho do dia-a-dia, certamente pode servir para ajudar a entender códigos de terceiros.

Entre numa rede de conhecimentos

Outra coisa importante é participar de uma rede dentro de seu campo de conhecimento. Nunca é demais conhecer outros desenvolvedores/designers. É muito interessante (e até gratificante) ter discussões sadias e trocas de informações/ajuda com pessoas da mesma área. Você pode até colaborar com seu colegas desenvolvedores em projetos maiores, já pensou?

Você está perto de conseguir um projeto mas não tem certeza se você pode lidar com o tipo de trabalho solicitado? Recomende um de seus colegas desenvolvedores! Ele(s) provavelmente irá(ão) executar o trabalho melhor do que você — se for(em) especialista(s) nessa área específica — e você pode fechar algum tipo de parceria em algum momento futuro.

Faça parte de uma rede e a mantenha ativa e sempre por perto. Há sempre a demanda por um desenvolvedor que esteja “ao redor”. Há um discussão interessante no GitHub sobre como encontrar projetos open source para colaborar que certamente vai ajudar bastante.

Entenda os designers

É altamente recomendado compreender designers, caso não tem ideia de como eles trabalham. E isso vale tanto para designers gráficos quanto para front-end designers.

É sempre bom para aprender como eles trabalham e porque eles podem entregar páginas estáticas que realmente não correspondem aos mais recentes padrões da web. Aprenda a conversar com eles e explicar o que está errado e saber pedir para corrigir seus próprios erros. Dessa forma, sua relação de trabalho será mais próxima e o resultado bem melhor.

Não se surpreenda, mas é até indicado que desenvolvedores devem participar do processo de design!

Use ferramentas profissionais

Apesar de HTML, CSS e JavaScript poderem ser feitos até com o Bloco de Notas, isso não é recomendado. E, se isso não é recomendado para front, é igualmente desaconselhado para back. Trabalhe com editores/IDEs profissionais/robustos. Use o que os profissionais usam, caso contrário você não será um deles!

Esse tipo de ferramenta verifica erros, tem autocomplete e dá sugestões durante a codificação. Há uma razão pela qual PhpStorm, VSCode, Neovim, Eclipse, NetBeans e outros são muito usados em todo o mundo: eles ajudam a fazer o trabalho e o fazem em grande estilo!

Deixe as coisas legais por último

Cada linguagem tem a sua própria “versão cool”. Por exemplo, HTML tem HTML5, CSS tem CSS3, JavaScript e AJAX tem jQuery/Zepto e assim por diante. É muito melhor se você aprender a linguagem básica e depois estudar mais até chegar no estágio cool.

Também, as coisas “cool” trabalham a partir dos elementos básicos, então você não será capaz de desenvolver e entender um controle deslizante com jQuery se você não compreender o JavaScript básico.

Mantenha-se informado e atualizado

É sempre bom se manter informado e atualizado sobre o que está acontecendo no mundo do desenvolvimento web, em especial da(s) área(s) que você atua. Você pode fazer isso através da leitura de feeds, livros “de verdade”, blogs, fóruns e screencasts. Fique atualizado e certifique-se de que você é um dos primeiros a oferecer produtos desenvolvidos com a tecnologia mais recente.

No começo, pode não funcionar muito (as pessoas podem querer manter o “velho” até que as novas tecnologias mostrem seu valor), mas, certamente, também há aquelas pessoas que querem ter um produto totalmente novo, desenvolvido com as mais recentes tecnologias — e isto lhe dará uma vantagem e fará você conhecido no ramo.

Não é surpresa para ninguém do ramo que os melhores e mais recentes conteúdos e tutoriais estão em inglês. Então comece a puxar da memória todas aquelas aulas sobre o verbo “to be” ou fixe uma aba do Google Tradutor no seu navegador, porque você vai precisar.

Continue com o processo de aprendizagem

Depois de se tornar um especialista no campo que escolheu, trilhe seu caminho rumo ao aprendizado de outras linguagens e/ou áreas de atuação. Fique de olho aberto nas linguagens mais importantes e aprenda aquelas que julgar serem as mais interessantes. Quando você domina duas, vá para a terceira e assim por diante.

E continue até que não haja muito mais para aprender dentro do que você escolheu. Acredite, compartimentar os estudos para não ficar sobrecarregado é o caminho.

Conclusão

É bastante comum que desenvolvedores iniciantes passem por tempos difíceis neste campo profundo do desenvolvimento web, mas estas dicas servem justamente para ajudar que cada um encontre seu caminho.

Nem sequer importa muito por onde começar, tudo o que importa é começar! Isso geralmente é o que leva mais tempo, então não desperdice estes dias preciosos e comece agora a estudar e a desenvolver a web!

Para ajudar, veste este (não tão recente, mas até que útil) vídeo sobre uma técnica de estudos que pode ajudar a não perder a sanidade ante tudo isso que queremos aprender sobre tecnologia:


Pixels, pixels ou pixels? Dicas de Web Mobile com viewport

Foi-se o tempo em que pixel significava apenas o menor ponto na tela. Bastava dizer que uma imagem tinha 200px, e então ela ocuparia 200 pontos, ou seja, 25% de uma tela de tamanho padrão 800×600.

Mas o mundo mobile mudou completamente o jogo e, hoje, o conceito de pixel pode significar várias coisas.

(Atualização: escrevi mais detalhadamente sobre esses aspectos dos pixels diferentes e viewport, incluindo telas retina, no meu livro A Web Mobile, publicado pela editora Casa do Código. Se você estuda design responsivo, sites mobile, e assuntos relacionados, vai gostar desse livro.)

Os primeiros Smartphones

Era muito comum que os smartphones da Nokia lá pelos idos de 2007 tivessem uma resolução de 240×320 pixels, como um N95.

Quando surgiu o primeiro iPhone, sem teclado e só touch, a Apple decidiu explorar um tamanho maior de tela, 320×480 pixels. Era o dobro dos pixels normalmente usados na época, com um tamanho físico mais ou menos também com o dobro do tamanho.

Esses valores representam o tamanho físico do aparelho, o número de pixels físicos existentes. Na prática, um iPhone conseguia exibir páginas com mais que 320 pixels de largura. O truque era trabalhar com a ideia de zoom.

Na imagem anterior, abrimos o site da Caelum, que tem 960px de largura, em um iPhone de 320px. Repare como, apesar de menor, o Site está sendo renderizado corretamente.

Mas nosso HTML e CSS não foi codificado pensando em 320px, e sim em 960px. Quando colocamos a imagem do logotipo, por exemplo, nosso HTML diz <img src=".." width="160" height="50">. E, obviamente, o logo não está sendo renderizado a 160px, senão ocuparia metade da tela de 320px do iPhone. Se você medir, verá que o logo está sendo renderizado em mais ou menos 52px, ou 1/6 da tela do iPhone.

CSS pixels e o layout viewport

Repare que usamos uma medida de pixels no HTML/CSS que difere do pixel real usado na tela. O navegador do iPhone, na verdade, se comporta como se tivesse 980px de largura, embora o aparelho tenha apenas 320px. Isso é feito para que o usuário possa ver páginas feitas para Desktop sem problemas.

Nossa página funciona como se tivéssemos 980px disponíveis. Quando escrevemos “245px” no CSS, estamos nos referindo a 1/4 dessa tela imaginária de 980px. Na hora de exibir, porém, os 980px serão encaixados nos 320px reais, aplicando um zoom out.

Essa tela imaginária de 980px é o que chamamos de layout viewport. É o tamanho com o qual trabalhamos no nosso HTML/CSS, sem nos preocuparmos com a renderização no aparelho. Repare que um pixel no layout viewport tem outro significado do pixel físico do aparelho. É comum chamá-lo de CSS pixel.

Zoom e o visual viewport

Mas navegar no celular nessa página gigante sem zoom é praticamente impossível. A grande diferença da navegação mobile com a Desktop é o frequente uso do zoom e o scroll em todas as direções.

Na imagem acima, demos um zoom para ver mais detalhes. Repare que a o layout da página continua o mesmo. Um elemento de “245px” continua ocupando 1/4 do total do nosso layout viewport. A diferença é que, agora, só estamos visualizando uma parte do layout viewport; o restante está fora da tela, e precisaríamos fazer scroll para ver.

Isso nos leva para outro conceito importante: o visual viewport, que representa o tanto do layout viewport que conseguimos visualizar no momento.

Geralmente não estamos interessados no tamanho do visual viewport. Lembre que os CSS pixels são sempre relativos ao layout viewport.

Sites mobile e a meta tag viewport

Abrir um site Desktop no celular é uma experiência pouco agradável. Frequentemente, vamos querer criar uma página otimizada para mobile, que não demande tanto zoom e já mostre o conteúdo em tamanho e formato interessantes para uma tela tão pequena.

Como fazer? Obviamente, não podemos deixar a página com layout fixo em, por exemplo, 960px. Podemos tentar um width:100% no elemento principal, pensando em se adaptar a diversos tamanhos de tela.

Nosso layout viewport é considerado como 980px e o site é mostrado como se fosse de Desktop, com zoom mínimo e conteúdo praticamente ilegível. Que tal colocar width:320px, o tamanho real do dispositivo?

O layout viewport continua em 980px mas o conteúdo fica em 320px. O usuário precisa dar zoom para visualizar e, pior, a página fica com um imenso espaço em branco.

O que precisamos é uma forma de redimensionar o layout viewport para que ele seja mais adequado a tela pequena do mobile. A Apple introduziu uma meta tag viewport no iPhone que, depois, foi adotada em praticamente todas as plataformas móveis – Android, Opera, Windows Phone etc.

<meta name="viewport" content="width=320">

Isso indica ao navegador que o layout viewport deve ser 320px. Agora, colocar width:100% vai significar 320px, deixando a visualização mais confortável.

Viewport flexível com device-width

Deixar “320” fixo na nossa tag de viewport pode não ser uma boa ideia. Há diversos aparelhos diferentes no mercado, cada um com tamanho diferente. E mobile agora também inclui tablets, como o iPad, que tem largura de 800px.

É possível deixar a meta tag viewport com tamanho flexível, baseado no tamanho do aparelho. Basta usarmos:

<meta name="viewport" content="width=device-width">

Isso assumirá o valor, por exemplo, de 320px no iPhone e 800px no iPad. Outros aparelhos poderão assumir outros valores.

Altíssimas resoluções

Antes de aparecerem os Androids de alta resolução e, depois, o iPhone 4, toda a história dos pixels se resumia a diferença entre os CSS pixels e os device pixels. Isso porque um device pixel no iPhone clássico significava um pixel físico na tela.

A retina display mudou isso. O iPhone 4 passou a vir com resolução de 640×960 pixels, melhorando a renderização de textos e imagens. Outros celulares foram até além. O Galaxy Nexus, por exemplo, tem resolução HD de 720x1280px.

Como ficam nossas páginas mobile então que assumiam uma resolução bem menor? Com resolução tão alta quanto um Desktop, os celulares mais modernos vão renderizar as páginas bem pequenas, como um site Desktop? Nossas páginas continuam funcionando porque esses dispositivos de alta resolução continuam reportando um device-width de 320px, pra manter a compatibilidade.

A ideia de reportar um device-width diferente do tamanho de pixels físicos surgiu no Android e depois foi copiada pelo iOS e outras plataformas.

Dessa forma, conseguimos evoluir a resolução da tela com densidades de pixels maiores (dpi) sem afetar a forma como o usuário usa nosso Site mobile, que continua otimizado para telas pequenas.

Os três pixels

Um pixel, pode então, representar três conceitos diferentes quando lidamos com mobile:

Pixel físico: número real de pixels na tela. Nos celulares modernos, é um número altíssimo, com ótima resolução, geralmente com densidade acima de 300 dpi.

Device pixel: é o número de pixels reportado pelo aparelho como sendo seu tamanho. É pensado pra ser um valor que ofereça conforto visual para o usuário olhando para aquele tamanho de tela. É comum que esse valor seja 320px em celulares, copiado do iPhone original.

CSS pixel: é o que usamos no HTML/CSS como px, representando um tamanho dentro do layout viewport. Quando colocamos a meta tag viewport com valor width=device-width, estamos dizendo que nosso CSS pixel é igual a um Device pixel.

Hoje, no Desktop, esses três pixels são equivalentes**. Mas, em breve, teremos que lidar com esse tipo de diferença também no Desktop com a chegada das telas de alta densidade também aos computadores.

Lidando com zoom

Mesmo otimizando nossa página para 320px, o usuário ainda pode dar zoom na página. Em alguns cenários, pode ser interessante desabilitar o zoom, o que pode ser feito na tag viewport com user-scalable:

<meta name="viewport" content="width=device-width, user-scalable=no">

De maneira geral, é interessante deixar o usuário dar zoom caso queira, já que este é um gesto comum ao usar a Web no celular. Podemos, porém, controlar os níveis de zoom com as propriedades minimum-scale e maximum-scale:

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=4">

O código acima indica que o usuário pode aumentar até 4x a página e diminuir até pela metade.

Podemos controlar também o nível padrão de zoom quando a página é aberta, com initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O valor 1.0 é muito comum quando trabalhamos com device-width e significa o zoom padrão. Se tivermos uma página Desktop não otimizada pro viewport de mobile, podemos usar essa propriedade para controlar o zoom inicial (lembre que o inicial é mostrar todo o layout viewport de 980px, o que pode não ser interessante).

Por fim, é importante citar um bug do iOS que afeta o zoom e o viewport quando rotacionamos o dispositivo em uma página com width=device-width que permita zoom. Se você abre a página no modo retrato, ele vai assumir o scale como 1.0, deixando o visual viewport igual ao layout viewport. Ao rotacioná-lo para modo paisagem, o dispositivo mantém o visual viewport no valor antigo, mas aumentando o layout viewport. Na prática, a página dá zoom automático e o lado direito da página não fica visível. O usuário, que não deu zoom, precisa diminuir o zoom para ver tudo.

É um bug famoso que acontece só no Mobile Safari do iOS, não existindo no Android e outras plataformas. A solução mais direta é desabilitar o zoom por completo, algo que é feito em diversos sites mobile por causa desse bug. Mas não é a solução ideal, já que poder dar zoom é uma feature que interessa ao usuário mobile. Existem alguns hacks para tentar resolver esse problema no iOS.

Conclusão

Trabalhar com telas diferentes é um grande desafio. O uso da meta tag viewport procura facilitar a padronização das páginas nos mais diversos tamanhos de telas e densidades de pixels. Compreender os diferentes significados de viewports e pixels é essencial para se desenvolver para mobile.

E, usando ainda media queries, podemos criar páginas que se adaptem facilmente a diversos dispositivos.

O curso WD-43 da Caelum, de desenvolvimento Web, trata também de tópicos de Web Mobile. Mostramos o uso do viewport e media queries para criação de uma página responsiva. Além disso, meu livro A Web Mobile, aprofunda em diversos assuntos de design responsivo e aspectos técnicos de sites para dispositivos móveis.

Referências

** No Desktop, quando damos zoom numa página, também temos a complicação dos viewports diferentes e a diferença entre CSS pixels e device pixels. Mas, na prática, todo mundo ignora e assume zoom de 100%, onde os CSS pixels são iguais aos device pixels.


Missões de manutenção do site
Mantenha seu negócio on-line funcionando sem problemas com um controle mensal dessas áreas cruciais
Recentemente, eu estava na concessionária de automóveis assistindo o trabalho de mecânica no meu carro, e de repente um pensamento me pareceu: quantos proprietários de empresas on-line verificam regularmente sob o capô para garantir que seus sites estejam funcionando sem problemas?

E mesmo que você faça exames freqüentes no seu site, você tem certeza de que está dando uma resposta completa? Cerca de uma vez por mês, você deve “pular o capuz” para realizar um check-up abrangente, encontrar o que não está funcionando e consertá-lo. Aqui está o que você deve procurar:

Estatísticas de tráfego O
seu host deve fornecer estatísticas básicas, mas considere obter o programa gratuito do Google Analytics ou usar os serviços de uma empresa de análise de internet baseada em taxas – você terá uma visão mais profunda de como seus visitantes viajam através do seu site. Você deve ser capaz de responder as seguintes perguntas:

  • Em quais páginas seus visitantes deixam seu site? Por exemplo, eles abandonam seu site na página da ordem sem fazer um pedido? Em caso afirmativo, talvez haja um problema com o processo de check-out.
  • Quanto tempo os visitantes gastam no seu site e em cada página individual? Se eles visitam sua página inicial e depois saem quase que imediatamente, obviamente você não está chamando sua atenção.
  • Como seus visitantes o acham? São sites particulares que enviam muito tráfego ao seu lado? Você pode aproveitar isso de alguma forma em parceria com eles? A maioria de seus visitantes vem de um motor de busca específico? Em caso afirmativo, qual poderia ser o motivo disso – e como você pode contrariar o tráfego de outros motores de busca? Quais palavras-chave e ofertas em seus anúncios de pagamento por clique estão melhorando? Você pode incorporá-los em outros lugares em seu site?
  • O que está causando picos de trânsito? De onde vêm os visitantes? Existe um novo link apontando para o seu site? Uma campanha de e-mail ou anúncio de PPC é particularmente bom? Poderia haver uma razão sazonal? Como você pode fazer isso uma ocorrência regular?
  • Onde vivem os seus visitantes? Se houver muito interesse de um determinado local, você pode ajustar seu site para atender especificamente a essas pessoas (por exemplo, oferecendo serviços em outro idioma)?
  • Quais termos de pesquisa e palavras-chave resultam na maior parte do tráfego para o seu site? Você pode colocar mais destes – ou outras palavras-chave semelhantes – em seu código e conteúdo para atrair ainda mais tráfego?

Estatísticas de vendas O
tráfego é bom, mas as vendas fazem você ganhar dinheiro. Acompanhe suas taxas de conversão – a porcentagem de seus visitantes que realmente se tornam clientes pagantes. Muitas rotas com poucas conversões indicam que existe algum tipo de desligamento entre a mensagem que leva as pessoas ao seu site e a mensagem que eles estão a ver quando chegarem lá. Olhe para onde você perde essas pessoas e você verá por onde começar a ajustar e testar. O menor tráfego com altas conversões significa que você está fazendo as coisas certas no seu site e você precisa se concentrar em obter mais tráfego.

Taxas de resposta por e-mail
Verifique sempre seus números de tráfego e vendas cuidadosamente após cada envio de e-mail. Você pode descobrir quais linhas de assunto e ofertas promocionais estão funcionando melhor para você, e mesmo quais horas do dia, semana e ano são melhores para seus e-mails.

O e-mail ainda é uma das técnicas de marketing mais eficazes, e você aproveitará o máximo se você automatizar todas essas tarefas de e-mail desde o início. Um sistema de gerenciamento de e-mail como iContact economizará tempo e fornecerá resultados detalhados em um formato amigável para que você possa facilmente analisar o que está funcionando e o que precisa funcionar.

Manutenção geral
Aqui estão algumas outras coisas relacionadas ao seu site que você deve observar de perto:

  • Verifique se há links quebrados e outras falhas técnicas em seu site. As Ferramentas do Google para webmasters podem ajudar com isso. Outro bom recurso para verificar links quebrados e outros fatores que afetam o desempenho do seu site – como a velocidade de carregamento do seu site – é o Sitereportcard.com .
  • Procure palavras-chave relevantes para sua indústria para ver se o seu site aparece nos resultados da pesquisa.
  • Verifique os sites dos seus concorrentes regularmente para ver se eles estão executando promoções especiais ou têm novos produtos. Se você realmente deseja ver seu funcionamento interno, você pode usar uma ferramenta paga como KeywordSpy ou iSpionage para ver quais palavras-chave estão usando e onde. E certifique-se de se inscrever para seus boletins informativos ou feeds RSS – é uma ótima maneira de manter a guia sobre o que eles estão fazendo.
  • Procure na web frases aleatórias das páginas do seu site para se certificar de que ninguém esteja usando seu conteúdo sem voltar para você.
  • Procure no nome da sua própria empresa e URL para ver se alguém está dizendo algo ruim sobre você.

Um mau funcionamento no seu site pode ser tão prejudicial para o seu negócio como uma falha de freio seria para o seu carro. Idealmente, você deve reservar um dia a cada mês para realizar uma revisão importante do site. Isso manterá seu negócio funcionando tão bem como um motor bem oleado.


Novo Firefox funciona como um coelho

Novas versões de versões dos navegadores não recebem o zumbido que costumavam obter, mas o Firefox Quantum é uma exceção.

A última versão do navegador da Fundação Mozilla, lançado na terça-feira, é tudo sobre desempenho. O Firefox é duas vezes mais rápido que o ano passado, afirmou a Mozilla. Não é apenas rápido na inicialização – permanece zippy mesmo quando tributado por várias abas.

“Temos um melhor equilíbrio de memória com o desempenho do que todos os outros navegadores”, disse o vice-presidente do Firefox, Product Nick Nguyen.

“Nós usamos 30 por cento menos memória, e o motivo disso é que podemos alocar o número de processos que o Firefox usa em seu computador com base no hardware que você possui”, disse ele à TechNewsWorld.

$ 1 milhão de experiência em US $ 300 para laptop

As melhorias de desempenho em Quantum podem ser uma bebida da fonte da juventude para muitos sistemas de usuários do Firefox. “Um número significativo de nossos usuários estão em máquinas com dois núcleos ou menos, e menos de 4 gigabytes de RAM”, explicou Nguyen.

O aumento de desempenho pode ser atraente para outros usuários também.

“Nós temos um ótimo navegador para você, mesmo que você não tenha o computador mais recente”, disse Nguyen. “Nós vemos uma grande oportunidade para pessoas com US $ 300 laptops ter uma excelente experiência moderna”.

O público-alvo da Quantum provavelmente é proprietário de PCs mais antigos que sentem a maior dor no momento, disse Rob Enderle, analista principal do Grupo Enderle .

“A geração atual de navegadores avançados é bastante intensiva em recursos, o que retarda as máquinas e cria atrasos que os usuários acham realmente irritantes”, disse ele à TechNewsWorld.

Além das melhorias sob o capô, a Mozilla redesenhou a interface do usuário do Firefox.

“Chamamos essa iniciativa” Photon “, e seu objetivo é modernizar e unificar tudo o que chamamos de” Firefox “, enquanto aproveitamos o novo e rápido mecanismo”, escreveu Mark Mayo, vice-presidente sênior do Firefox, em uma publicação online.

“Para criar o Photon, nossa equipe de pesquisa de usuários estudou como as pessoas navegavam na Web”, explicou. “Nós olhamos para o hardware do mundo real para tornar o Firefox ótimo em qualquer exibição, e nós nos certificamos de que o Firefox parece e funciona como o Firefox independentemente do dispositivo que você está usando”.

Momento fortuito?

Além de anunciar o lançamento da Quantum, a Mozilla informou na terça-feira que fez do Google seu provedor de busca padrão nos Estados Unidos e no Canadá.

As receitas dessa parceria devem beneficiar a Mozilla.

“Esperemos que ele ajude a continuar seus esforços de desenvolvimento e construir o motor Quantum”, disse Ross Rubin, analista principal da Reticle Research .

O lançamento de Quantum pela Mozilla foi uma jogada defensiva, ele disse à TechNewsWorld. “É para evitar uma nova erosão da base de usuários do Firefox, que teve um forte sucesso nos últimos anos”.

O Quantum poderia fazer mais por Mozilla do que simplesmente evitar defecções do Firefox, manteve Charles King, analista principal da Pund-IT .

“A Quantum parece ser projetada para trazer usuários anteriores, que abandonaram a Mozilla em última análise para o Google Chrome, de volta ao Firefox”, disse ele à TechNewsWorld.

“A chegada de Quantum também coincide com o que parece um crescente descontentamento entre os usuários do Google Chrome e o Microsoft Edge”, acrescentou King. “Em outras palavras, não poderia haver um tempo melhor para a Mozilla para apresentar um novo navegador inovador”.

Tough Browser Market

Mesmo com vantagens de desempenho, a Quantum terá dificuldade em conquistar o compartilhamento de navegador do líder Chrome, que possuía cerca de 47% do mercado de desktop a partir do mês passado, de acordo com números do NetMarketShare.

Com 6,53 por cento do mercado, o Firefox foi um terceiro distante, por trás do Microsoft Internet Explorer com 12,52 por cento.

“O novo Firefox Quantum é consideravelmente mais rápido, o que foi um grande problema para o antigo Firefox”, disse Greg Sterling, vice-presidente de estratégia e visão da Local Search Association .

“Comparado com o Chrome, o antigo Firefox era muito lento, então esta é uma melhoria real”, disse ele à TechNewsWorld.

“O desafio será conquistar os usuários que desertaram para o Chrome – além dos que são filosóficamente opostos ao Google”, afirmou Sterling. “Eu suspeito que veremos uma melhoria incremental no compartilhamento de mercado do Firefox, mas esse lançamento não mudará as coisas drasticamente”.


5 dicas para projetar seu site para atender cada cliente individualmente

Pesquisas atuais mostram que 40% dos consumidores compram mais de varejistas que personalizam sua experiência de compra em todos os canais. Além disso, quase três em cada quatro, ou 74 por cento, de consumidores online ficam frustrados com sites quando o conteúdo exibido não tem nada a ver com seus interesses. É claro que um site personalizado é uma vantagem para todos os comerciantes ou empresários que lideram um negócio de sucesso hoje.

A personalização do site leva em consideração que os usuários têm diferentes motivações, dispositivos, locais e restrições de tempo. Com a tecnologia atual, os comerciantes podem agora reunir informações específicas sobre o que um visitante do site está procurando e traduzir sua visita em uma conversão mais alta

“As organizações gastam dezenas ou centenas de milhares de dólares, e às vezes até milhões de dólares, para criar experiências dinâmicas dinâmicas na web”, explicou Itai Sadan, CEO e co-fundador da plataforma de criação de sites móveis DudaMobile . A empresa recentemente lançou no site que adiciona conteúdo web dinâmico com base no comportamento do cliente para criar experiências de visualização personalizadas.

“Ferramentas caras e esse tipo de personalização tradicionalmente requer um desenvolvimento e projeto substancial na web, e é por isso que estamos entusiasmados por ter preços acessíveis para essa indústria explosiva”, disse Sadan.

A personalização do site em uma escala de massa é realmente possível com o crescente número de opções de baixo custo disponíveis para os empresários hoje. Aqui estão cinco maneiras pelas quais os empresários podem começar a aumentar a conversão através da personalização básica do site:

1. A frequência do visitante deve determinar diferentes experiências do usuário.  Um visitante de um site pela primeira vez quase sempre estará procurando informações diferentes do que alguém que visita o site repetidamente.

David Reischer, diretor de marketing da LegalAdvice.com , sugere acompanhar cada usuário de forma diferente para dar experiências de usuário diferentes. “Utilizamos um cookie para rastrear um visitante que retorna para que possamos direcioná-los para a página mais adequada e relevante. Isso torna a navegação no site mais fácil para usuários repetidos “.

Para aumentar a conversão de visitantes pela primeira vez, inclua um número de telefone ou endereço comercial, um formulário de contato para capturar leads ou um tutorial de vídeo para explicar um produto ou serviço para um visitante pela primeira vez.

“Para visitantes frequentes, adicione um ponto para se inscrever para uma lista de endereços ou adicionar informações sobre novos produtos ou serviços”, sugere Sadan.

2. A localização geográfica ajuda a reunir o marketing online e offline.  A capacidade de saber onde alguém está no momento em que visitam um site é a mudança de jogo para os comerciantes.

“Online, podemos acompanhar a jornada de compra individual do nosso cliente, otimizando-a a cada passo”, explica Bart Heilbron, CEO e co-fundador da BlueConic , o sistema em tempo real de engajamento de clientes online. “No entanto, nunca fomos capazes de usar esses insights em nossa interação off-line. Com a localização geográfica, agora podemos fazer. ”

Se alguém está a poucos quarteirões de distância de uma empresa e procurando em um telefone celular, é provável que eles possam ser facilmente convertidos como clientes se eles veem um endereço e até um cupom que diz: “Entre hoje e descanse 20%”. restaurantes, um botão OpenTable para reservar uma tabela ou um aplicativo Google Map que fornece instruções passo a passo para o local da loja são críticos para a conversão.

3. Ajuste o conteúdo com base em determinados horários.  Alterar o conteúdo em um site com base na hora do dia, semana ou mesmo temporada também pode aumentar as conversões. Considere substituir um número de telefone disponível para os visitantes do site durante o horário comercial com um formulário de contato quando o negócio está fechado. Isso evitará perder os clientes potenciais que desejem entrar em contato fora do horário comercial.

“A capacidade de oferecer produtos diferentes ao longo de um dia com base em tendências, hábitos ou cultura direcionados aumentará as conversões”, disse o CEO da empresa de marketing na internet , WebiMax , Ken Wisnefski. “Por exemplo, um restaurante oferece um menu diferente ao longo do dia, quando eles mudam de almoço para jantar”.

4. Reconheça feriados e outros eventos especiais.  Esta é uma ótima maneira de personalizar um site e se conectar melhor com o sentimento de um cliente. Mude o tema para os corações durante o Dia dos Namorados ou adicione uma imagem de fogos de artifício durante o 4 de julho.

“Isso poderia ter um efeito positivo no engajamento do cliente e, por sua vez, conversão”, disse Sadan.

5. Capture a fonte do visitante para adaptar o conteúdo.  Conhecer a fonte de destino original que um visitante entrou em um site deve impactar significativamente o conteúdo na página de destino que eles vêem primeiro. Isso pode proporcionar uma experiência perfeita e consistente para o visitante.

De acordo com Sadan, “Os visitantes que chegam ao seu site a partir de uma campanha de marketing por e-mail ou como uma referência de outro site devem receber mensagens dedicadas que estão alinhadas com a mensagem que eles viram no e-mail ou no site de referência. Oferecer um cupom neste ponto também pode ser uma boa idéia “.


Campus Party 2018 traz fundador da Apple, discussão sobre bitcoin e batalha de drones

A 11ª edição do evento acontece entre 31 de janeiro a 4 de fevereiro, no Anhembi, em São Paulo; Neste ano, 12 mil pessoas acamparão no local.

Campus Party, o maior evento de tecnologia e cultura nerd da América Latina, levará para São Paulo de discussões sobre a tecnologia por trás do bitcoin e sobre como a tecnologia pode fazer a diferença na sala de aula, além de palestras de peso, como a de Steve Wozniak, que fundou a Apple com Steve Jobs. Uma das novidades neste ano para quem visita a área aberta do evento é a batalha de drones, em que os pilotos tentam derrubar as aeronaves dos rivais

A 11ª edição da Campus Party ocorre no Pavilhão de exposições do Anhembi, em São Paulo, entre 31 de janeiro a 4 de fevereiro. Neste ano, 12 mil pessoas acamparão no local.

A expectativa da organização é que o número de visitantes chegue a 100 mil. A capacidade total de conexão, um assunto sensível para campuseiros, será de 40 Gibabits por segundo. Pela primeira vez, haverá áreas com Wi-Fi e monitoramento para evitar ataques hacker.

“Aqui a gente monta a internet de uma cidade inteira em coisa de um dia”, brincou Franceso Farruggia, presidente do Instituto Campus Party.

Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 (Foto: Helton Simões Gomes/ G1)Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 (Foto: Helton Simões Gomes/ G1)

Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 

Bitcoin e Blockchain

Boa parte da programação de oficinas e palestras da Campus Party será dedicada a discutir o bitcoin, a moeda virtual que passou a chamar a atenção do mundo ao se valorizar mais de 1000% em 2017 e chegar próxima da cotação de US$ 20 mil. Só que o objetivo não será analisar se a criptomoeda enfrenta uma bolha especulativa ou não, debate que dominou o mundo financeiro em 2017.

O foco será a “blockchain”, a tecnologia por trás do bitcoin, que funciona como um livro contábil em que todas as transações com a moeda são registradas de forma segura e confiável. Don Tapscott, um dos principais palestrantes desse ano, subirá ao palco para falar sobre isso. Ele é autor do livro “Blockchain Revolution: How the Technology Underlying Bitcoin is Changing Business, Money and the World” (“Revolução Blockchain: Como a Tecnologia Sustentando o Bitcoin está Mudando Negócios, Dinheiro e o Mundo”).

Boné para tirar sono

Alguns dos eventos são levados à Campus Party por patrocinadores, como Petrobras, Visa, TV Globo e Ford. “Vocês poderiam se perguntar por que uma montadora de 115 anos está aqui. E eu poderia passar o dia inteiro falando disso. A gente veio porque aqui é um celeiro de tecnologia e inovação”, afirmou Fernão Silveira, diretor de comunicação para América Latina da Ford, que vai expor um Mustang 5.0 GT, modelo que a empresa começa a importar agora para o Brasil.

A montadora mostrará algumas de suas tecnologias, como seus serviços conectados para carros e até um boné que faz caminhoneiros que estiverem dirigindo ficarem acordados.

Drones, games e educação

Apesar de palestras e workshops serem feitos em uma área de acesso restrito aos campuseiros, há atividades na área aberta da Campus Party.

Em uma arena ocorrerá o campeonato brasileiro de drones, em que pilotos profissionais usam todas suas habilidades para correr mais rápido que os adversários. Lá também os visitantes do evento poderão participar de duelos de drones. Durante eles, a velocidade fica em segundo plano e o objetivo é derrubar a aeronave dos rivais.

Em outro espaço, ocorrerá torneios de games como “Dragon Ball Z”, “Counter Strike”, “Injustice 2”, entre outros.

Outra novidade de 2018 da Campus Party é uma nova área de atuação: a educação. Haverá oficinas de robótica para crianças e adolescentes e batalhas de robôs virtuais.

Simuladores

Também na área aberta, a Campus Party reunirá 8 simuladores, como asa delta a kart, por exemplo. O destaque fica por conta do MotionSphere, um simulador de sensações vivenciadas por pilotos de aviões super-rápidos. Ele é capaz de imitar acelerações, curvas e impactos de até sete vezes a força da gravidade.

Startups e universidade

Outra área a que os visitantes poderão ir e que já esteve presente em outras edições da Campus é a Startup & Makers. Nela, 120 empresas iniciantes de tecnologia mostrarão como funcionam seus negócios, em busca de parcerias e até de investidores.

Já na Campus Future, estudantes universitários expõem protótipos de novas tecnologias criadas a partir de suas pesquisas.


Os 11 pior pedaços de conselhos que você já ouviu (e o que fazer em vez disso)
O “2 centavos” de algumas pessoas deixa você com apenas isso.

Como instruções ruins, um conselho ruim pode orientá-lo fora da pista. Principais empresários e membros de The Oracles pesam sobre os piores conselhos que eles constantemente ouviram e o que fazer em vez disso.

Grant Cardone
Crédito da imagem: os oráculos

1. O sucesso é uma jornada, não um destino.

Quantas vezes você já ouviu a frase: “O sucesso é uma jornada, não um destino”? Por favor! O sucesso não é apenas uma “jornada”, é um estado sobre o qual você tem controle e responsabilidade. Nenhum clube da NFL conta a sua base de fãs que é a jornada que conta. Todo mundo sabe que é tudo sobre o anel: o Super Bowl. Um bombeiro que conduz um caminhão de bombeiros não está focado na jornada; Ele está focado em chegar ao fogo e colocá-lo fora.

Sua vida não é diferente. É o destino mais importante. As pessoas que dizem o contrário provavelmente correm um seminário ou tentam vender um livro. – Grant Cardone , especialista em vendas superior que construiu um império imobiliário de US $ 500 milhões e um autor de best-seller do NYT ; siga Grant no Facebook ou no YouTube

Tim Draper
Crédito da imagem: os oráculos

2. Recupere sua equipe.

Um conselho de consertos rápidos que ouço o tempo todo é: “acelerar sua equipe”. Na verdade, todo empresário deve manter seu time tão magro quanto possível até encontrar um produto forte ou um ajuste de mercado. Uma equipe maior não faz um melhor lucro.

Como mencionei no meu livro, Como ser o Startup Hero , uma vez que três grandes clientes estão pagando pelo seu serviço e estão dispostos a expandir sua compra, só então você pode “acelerar” o negócio. – Tim Draper , lendário VC, fundador da Draper Associates e DFJ

Michael Johnson
Crédito da imagem: os oráculos

3. Apenas seja positivo.

Na indústria do comportamento humano e otimização do potencial pessoal, as pessoas adoram dizer: “Apenas seja positivo”. Isso coloca as pessoas para um pesadelo de saúde mental! Ninguém é apenas positivo ou negativo; as pessoas mais bem sucedidas são equilibradas.

Se uma pessoa é excessivamente otimista, eles geralmente não consideram os riscos associados às suas ações ou aprendem através de tentativas e erros dolorosos. Muitos auto-proclamados “pensadores positivos” se espalha internamente por seus pensamentos negativos, ao mesmo tempo em que estabelecem expectativas irrealistas sobre se sentirem felizes ou pacíficas constantemente. É melhor ficar equilibrado: há uma hora e um lugar para todas as emoções. – Michael Johnson, “The Mojo Master”, palestrante e treinador de mentalidade para atletas profissionais e empresários de elite; siga Michael no Facebook

Michael Alden
Crédito da imagem: os oráculos

4. Siga o exagero.

Nova tecnologia gera exagero e desinformação. Recentemente, investei muito tempo e recursos em cryptocurrency. Eu estudei como se eu preparasse para o exame de bar. Ao analisar as tendências da corrente criptográfica, eu aprendi que você sempre deve fazer sua pesquisa. Não basta investir em algo porque seu amigo envia um texto dizendo: “Compre isso agora”. Atuar cegamente na histeria é uma receita para o desastre.

Em vez disso, faça perguntas. Leia sobre isso. Os bons empreendedores se adaptam e atuam rapidamente. Mas o melhor ato com informações confiáveis ​​para aumentar seus negócios e patrimônio líquido. Michael Alden , autor de best-seller e CEO daCloiXonné

Sharran Srivatsaa
Crédito da imagem: os oráculos

5. Não seja uma “aberração de controle”.

Todo empreendedor alto provavelmente foi criticado como um “freak de controle” em algum momento. No entanto, tendo em conta as inúmeras distrações diárias que os empresários encontram, se você quer fazer “um trabalho profundo” com um impacto abrangente, você tem de controlar o seu tempo para fazer cada dia uma obra-prima.

Meu “dia da obra-prima” é composto por seis categorias: comer, mover, dormir, trabalhar profundamente, servir e desenvolver pessoal. Cada categoria tem uma ação que eu posso realizar nesse dia, seja 30 minutos de exercício (mover) ou fazer uma chamada de inspiração 5am ​​Club (serviço). Para alcançar seu potencial, exerça controle sobre sua vida. – Sharran Srivatsaa , investidor-anjo e presidente da corretora (região ocidental) em Douglas Elliman; cresceu Teles Properties 10X em cinco anos

Steve Griggs
Crédito da imagem: os oráculos

6. Faça o que você ama e o dinheiro seguirá.

Durante anos, eu acreditei: “Faça o que você ama e o dinheiro vai seguir”. Eu perderia dinheiro em projetos e me dizia: “Não se preocupe, o dinheiro vai seguir”. Eu tive que desaprender esta lição do jeito difícil .

Em qualquer empreendimento, certifique-se de entender as finanças. Não se sinta culpado por fazer lucro. O lucro é a linha de vida de qualquer negócio. Em vez de apenas “fazer o que você ama”, eu digo, “seja justo, honesto e obtenha lucro”.

Outro conselho que eu ouvi dizer é “ficar sob o radar”. Não tenho certeza de como eu consegui isso embutido na minha cabeça; não faz sentido. Se as pessoas não o conhecem, elas não comprarão de você. – Steve Griggs , fundador e CEO da Steve Griggs Design ; O premier designer de paisagens da NYC transformou os quintais e os jardins do telhado em fugas privadas

Jared Goetz
Crédito da imagem: os oráculos

7. Sempre triturar.

Muitos empresários glorificam “o grind”. Não me interpretem mal: sou um grande proponente de trabalhar duro e fazer as coisas, mas acho que é tão importante, se não mais, ter equilíbrio.

Muitas vezes, os empresários ficam tão apanhados na moagem que não conseguem ver que o que eles estão trabalhando não os impulsiona. Trabalho inteligente. Concentre-se no seu bem-estar. Reserve tempo pessoal. Reflita. Estas práticas terão efeitos maciços e positivos sobre o seu sucesso. – Jared Goetz , empresário em série e especialista em comércio eletrônico; co-fundador de quatro empresas multimilionárias em cinco anos

John Hanna
Crédito da imagem: os oráculos

8. As decisões empresariais devem basear-se na lógica, e não nas emoções.

O conselho de fazer decisões comerciais lógicas soa racional, mas é falho. A neurociência provou que é impossível tomar decisões sem emoção. Todos entrámos em um campo de negócios armado com fatos, números e pesquisas independentes, pensando que nossa proposta é à prova de balas, apenas para receber um “No.” definitivo.

Isso porque a semente da motivação está no coração. Se você aplicar apenas lógica a negócios, você estará condenado a falhar porque a tomada de decisões é principalmente emocional. A paixão, a resistência e o zelo são impulsionados pelas emoções. Lógica, sabedoria e razão são ferramentas que a mente alavanca para que as decisões baseadas em emoções sejam bem-sucedidas. – John Hanna , autor de ” Way of the Wealthy ” e CEO doFairchild Group

Nafisé Nina Hodjat
Crédito da imagem: os oráculos

9. Seja um buldogue.

O pior conselho que recebi como advogado é: “Seja um buldogue”. Todos querem um advogado feroz e implacável. No entanto, um advogado de defesa criminal implacável e feroz sem uma estratégia holística só será efetivo em uma pequena porcentagem de casos.

Bruce Lee disse uma vez: “Seja como a água”. Resolvi muitos casos em favor dos meus clientes, adaptando a estratégia do caso e sendo aberto a abordagens não convencionais. Se sua única estratégia é ser bulldog no negócio, você vai sentir falta oportunidades para crescer e servir seus clientes de forma eficaz. -Nafisé Nina Hodjat, fundadora e advogada da Firma SLS

Shaun Rawls
Crédito da imagem: os oráculos

10. Fale até que você faça isso.

“Fake to till you make it” é uma estratégia de negócios em papel para novatos e um jogo de tolos para profissionais reais. Você nunca vai enganar aqueles que você quer conquistar, e você pode apenas prejudicar sua reputação em ascensão no processo.

Quanto ao “fazer”, o conhecimento é poder. Quanto mais você sabe, mais você cresce. Saiba tudo o que puder dos melhores líderes em sua indústria. Entrevistá-los; leve-os para o almoço; estudá-los. O melhor atalho para o sucesso é aprender com os melhores. Combine este conhecimento com autenticidade, e você terá uma proposição de valor única que o serve ao longo de sua carreira. – Shaun Rawls , empresário permanente, fundador e CEO da Rawls Consulting

Joe Kakaty
Crédito da imagem: os oráculos

11. Faça isso, como sempre, foi feito.

Os “especialistas” adoram pregar sobre como algo sempre foi feito. Seus métodos experimentados pelo tempo invariavelmente trabalhavam em “insert-mega-company-company-name-here”, e é por isso que ele vai funcionar para você. Mas apenas porque uma estratégia funcionou para uma grande marca corporativa não significa que ela funcionará em uma cultura inicial ou pode ser copiada para obter os mesmos resultados.

Se você está em uma indústria em rápida mudança como o negócio de mídia, sugiro recrutar uma mistura de especialistas experientes, bem como tipos de produtos em bruto, quebram o molde, que gostam de inovar. Quando resolver problemas, não fique preso em como algo já foi feito antes. Descubra o que funciona melhor para você. – Joe Kakaty , co-fundador e presidente da Poker Central

Siga The Oracles no Facebook .

 


Página 1 de 3123