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 négocios na internet | LCF HOST

Tag: négocios na internet


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…


Erros comuns em desenvolvimento web para campanhas de SEO

Conheça erros comuns em desenvolvimento web para campanhas de SEO e saiba como evitá-los

Uma boa campanha de SEO acontece quando várias ações de otimização são realizadas, conjunta e simultaneamente. E, certamente, uma dos aspectos da estratégia de uma ação de SEO são as ações técnicas tomadas no desenvolvimento web.

Este é um artigo traduzido do original “Why my SEO campaign failed? Part 2: Common Web Development mistakes“, do blog Web SEO Analytics, e sofreu pequenas modificações.

Passar muitos argumentos no URL

Quando o site é dinâmico, os desenvolvedores web precisam ter uma referência sobre o qual a página, o produto ou categoria o visitante quer ver. Normalmente um ID é necessário para recuperar os dados do banco de dados. Em outros casos, devido à complexidade do projetoou devido a más técnicas de programação, mais variáveis são necessárias para identificar uma determinada página. Aqui está um exemplo de um URL dinâmico:

Infelizmente, este tipo de URL não é amigável nem para pessoas, nem para mecanismos de busca. Segundo é possível ler nas Diretrizes Técnicas das Diretrizes para Webmasters da Central do Webmaster Google,

Se você decidir usar páginas dinâmicas (por exemplo, o URL que contém um caractere “?”), saiba que nem todos os spiders de mecanismos de pesquisa rastreiam as páginas dinâmicas e estáticas. Isso ajuda a manter os parâmetros curtos e a quantidade desses parâmetros pequena.

Por isso, é altamente recomendado usar algum tipo de reescrita de URL, como mod_rewrite, para converter as URLs dinâmicas para URLs amigáveis. Qual é o risco, se isso não for feito? Bem, se há muitos parâmetros em URLs: os motores de busca podem não indexar as páginas; além disso, geralmente  URLs não amigáveis não contém palavras-chave importantes no endereço, então, não raramente você pode conseguirá rankings inferiores para essas páginas do que se elas tivessem URLs amigáveis.

Usar muito JavaScript, frames/iframes, AJAX, Flash e Silverlight

JavaScript, frames/iframes, AJAX, Flash e Silverlight são ferramentas úteis e alguns deles, quando bem usados, melhoram a experiência do usuário. Mas nenhum deles é search engine friendly.

As mesmas Diretrizes Técnicas do Google citadas, indicam:

Use um navegador de texto como o Lynx para examinar o seu site, pois muitos spiders de mecanismos de pesquisa veem o site do mesmo modo que o Lynx. Se recursos especiais como JavaScript, cookies, IDs de sessão, frames, DHTML ou Flash permitirem que você veja todo o site em um navegador de texto, os spiders dos mecanismos de pesquisa poderão ter dificuldade em rastrear o seu site.

Se o objetivo é que o site seja amigável aos mecanismos de busca, devemos verificar se eles podem ser vistos usando browsers de texto simples como o Lynx (que é como o googlebot “vê” os sites). É possível usar emuladores do Lynx ou desabilitar CSS e imagens diretamente no navegador (se usar, Firefox, uma ótima opção é usar o plugin Web Developer).

Não usar o atributo alt em imagens e não otimizar o caminho das imagens

Os motores de busca (e computadores, em geral) não são muito bons em identificar o que é representado em uma imagem. Portanto, a fim de compreender sobre o que uma imagem é, os bots analisam o nome e o atributo “alt” das imagens.

O Google Image Search pode trazer uma quantidade significativa de tráfego. Se você não garantir o “apoio” a mecanismos que permitam a otimização de imagens, você pode perder uma boa fonte de tráfego. Assim, garanta que você use corretamente ambos, o atributo alt e o nome da imagem – usar um CMS que permita esse tipo de otimização é uma boa dica.

Usar métodos incorretos para oferecer suporte a idiomas diferentes

Quando você tem sites multilíngue, tenha certeza de que a arquitetura está correta. Não há uma única forma “correta” para fazer isso. Basicamente, há três maneiras corretas para suportar um site em vários idiomas e cada um dos métodos a seguir tem alguns prós e contras:

  • Subdomínios. Exemplo: fr.example.com, gr.example.com, etc
  • Subdiretórios. Exemplo: www.example.com/fr/, www.example.com/gr/, etc
  • Diferente domínios. Exemplo: www.example.fr, www.example.gr, etc

A dica é evitar o envio de conteúdo baseado em IP sem ter a mesma versão do site disponível para todos. Também não implementar soluções ruins como passar o idioma como uma variável GET, por exemplo www.example.com/?lang=fr.

Não se preocupar com o tempo de carregamento da página

Recentemente o Google informou que passou a usar a velocidade de carregamento dos websites em seus algoritmos de classificação (apesar de isso não estar valendo para sites de todos os países do mundo). Há um debate sobre se esse recurso deve ser incluído, uma vez que não tem nada a ver com a relevância de um site. No entanto, a velocidade aumenta a experiência do usuário. Além disso, ter um site leve, que carregue rapidamente, pode melhorar seu ROI e diminuir a carga do seu servidor (conheça 8 maneiras de melhorar a performance de um site).

7 dicas de desenvolvimento web

Algumas dicas para guiar o desenvolvimento de suas páginas web são:

  • Colocar menus, cabeçalhos e rodapés em arquivos separados, a fim de realizar mudanças globais rápidas (funções “include);
  • Tentar usar subdomínios em sites multi idioimas;
  • Usar caminhos absolutos para cada página, imagem, CSS e javascript do site;
  • Usar canonicals para evitar conteúdo duplicado;
  • Usar redirecionamento 301 ao invés de 302 quando o caminho para a página mudar e nunca apagar páginas;
  • Redirecione corretamente as versões sem “www” para as que tenham “www” e vice-versa;
  • Não adicionar IDs de sessão nas URLs.

E você, conhece algum outro erro comum em desenvolvimento web que pode atrapalhar uma campanha de SEO e o que fazer para evitar/corrigir?


Dominando o “this” em JavaScript

A palavra-chave “this” em JavaScript confunde desenvolvedores novos e experientes. Leia este artigo e domine o “this” em JavaScript!

A palavra-chave this em JavaScript confunde desenvolvedores JavaScript novos e experientes. Este artigo pretende elucidar a questão de uma vez, deixando claro como usar this corretamente em todos os cenários, incluindo situações mais peculiares em que normalmente this se revela mais difícil de ser compreendido.

Em JavaScript, usa-se this de forma semelhante ao uso de pronomes em linguagens naturais, como o inglês ou francês. Escreve-se: “João está correndo rápido porque ele está tentando pegar o trem”. Note o uso do pronome “ele”. Poderia se ter escrito: “João está correndo rápido porque João está tentando pegar o trem”. Não se reutiliza “João” dessa maneira, pois se assim fosse, nossa família, amigos e colegas nos abandonariam… De uma maneira graciosamente semelhante, em JavaScript se usa a palavra-chave this como um atalho, um referente; ou seja, o sujeito no contexto ou o sujeito do código em execução.

Exemplo:

Se se usa person.firstName e person.lastName, tal como no último exemplo, o código se torna ambíguo. Considere que poderia haver outra variável global (você estando ciente dela ou não) com o nome “person”. Em seguida, as referências a person.firstName poderiam tentar acessar a propriedade firstName da variável global person e isso poderia levar a erros difíceis de serem depurados. Portanto, usa-se a palavra-chave this não apenas para fins “estéticos” (isto é, como um referente), mas, também, para fins de precisão. Seu uso realmente torna o código mais inequívoco, assim como o pronome “ele” tornou a frase mais clara, informando que se estava referindo ao João específico do início da frase.

Assim como o pronome “ele” é usado para se referir ao antecedente (substantivo a que um pronome se refere), a palavra-chave this é similarmente usada para se referir a um objeto a que a função (onde this é usado) está vinculada. Esta palavra-chave não se refere apenas ao objeto, mas também contém o valor do objeto. Assim como o pronome, isso pode ser pensado como um atalho (ou um substituto razoavelmente não-ambíguo) para se referir ao objeto no contexto (o “objeto antecedente”).

O básico sobre this em JavaScript

Primeiramente, é preciso saber que todas as funções em JavaScript têm propriedades, assim como os objetos têm propriedades. E quando uma função é executada, ela obtém a propriedade this — uma variável com o valor do objeto que invoca a função na qual this é usado.

A referência ao this sempre se refere a (e contém o valor de) um objeto — um objeto singular — e normalmente é usado dentro de uma função ou método, embora possa ser usado fora de uma função no escopo global.

Quando em modo estrito (strict mode), this mantém o valor undefined em funções globais e em funções anônimas que não estão vinculadas a nenhum objeto.

this é usado dentro de uma função (digamos função “A”) e ele contém o valor do objeto que invoca a função A. Isso é preciso para acessar métodos e propriedades do objeto que invoca a função A, especialmente porque nem sempre é possível saber o nome do objeto invocador e, às vezes, não há nenhum nome para usar para se referir ao objeto invocando. Na verdade, this é realmente apenas um atalho-referência ao “objeto antecedente” (ou o objeto invocador).

Reflita sobre este exemplo básico que ilustra o uso de this em Javascript:

E também considere este exemplo em jQuery:

Explicando melhor o exemplo jQuery anterior: o uso de $( this ), que é a sintaxe da jQuery para esta palavra-chave em JavaScript, é usado dentro de uma função anônima, que é executada no “on click” do botão. A razão pela qual $( this ) está vinculado ao objeto de botão é porque a jQuery vincula $( this ) ao objeto que invoca o método de clique. Portanto, $( this ) terá o valor do objeto jQuery ($( 'button' )) mesmo que $( this ) seja definido dentro de uma função anônima que não pode acessar a variável “this” na função externa.

Importante ressaltar que o botão é um elemento DOM na página HTML e também é um objeto; neste caso, é um objeto jQuery porque está envolvido na função jQuery $().

A maior pegadinha com this em JavaScript

Se você entender este princípio de JavaScript, você entenderá a palavra-chave “this”: não é atribuído um valor a this até que um objeto invoque a função na qual this é definido.

Para fins didáticos, considere onde this está definido como “Função this”. Mesmo que pareça que this se refere ao objeto onde ele é definido, isso só acontece quando um objeto chama a “Função this” a que this está atualmente atribuído. E o valor atribuído é baseado exclusivamente no objeto que invoca a “Função this”.

this tem o valor do objeto sendo invocado na maioria das circunstâncias. No entanto, existem alguns cenários nos quais this não tem o valor do objeto sendo invocado. Cenários estes visto mais à frente.

O uso de this em escopo global

No escopo global, quando o código está sendo executado no navegador, todas as variáveis globais e funções são definidas no objeto window. Portanto, quando se usa this em uma função global, ele se refere a (e tem o valor de) o objeto window global — não no strict mode, como observado anteriormente –, que é o contêiner principal de toda a aplicação JavaScript ou página da web.

Deste modo:

Quando this é mal compreendido e se torna complicado

A palavra-chave this é mais mal compreendida em “métodos emprestados”; quando se atribui um método que usa this para uma variável; quando uma função que usa this é passada como uma função de callback e; quando this é usado dentro de uma closure (uma função interna).

Um pouco sobre “contexto” antes de continuarcontexto em JavaScript é semelhante ao assunto de uma frase na escrita normal. Na frase “João é o vencedor quem devolveu o dinheiro.” o sujeito da sentença é João e é possível afirmar que o contexto da sentença também é João porque o foco da sentença está nele neste momento particular da sentença. Mesmo o pronome “quem” está se referindo a João, o antecedente. E tal como é possível usar um ponto-e-vírgula para mudar o assunto da frase, também é possível ter um objeto que é o contexto atual e mudar o contexto para outro objeto invocando a função com outro objeto.

Similarmente, em código JavaScript:

Ajustando this quando usado em um método callback

As coisas ficam um pouco cabeludas quando passamos um método (que usa this) como um parâmetro para ser usado como uma função de retorno (callback). Por exemplo:

No código acima, uma vez que o botão ($( 'button' )) é um objeto e se está passando o método user.clickHandler() no clique como um callback, sabe-se que this dentro do método user.clickHandler() não mais se refere ao objeto userthis agora se refere ao objeto em que o método user.clickHandler é executado porque este é definido dentro do método user.clickHandler. E o objeto que invoca user.clickHandler é o objeto de botão — user.clickHandler será executado dentro do método de clique do objeto-botão.

Importante observar que, mesmo que se esteja chamando o método clickHandler() através de user.clickHandler (o que é preciso fazer, já que “clickHandler” é um método definido no “user”), o método clickHandler() será executado com o objeto button como contexto para que “this” agora se refere. Então, this agora se refere ao objeto de botão ($( 'button' )).

Neste ponto, deve ser claro quando o contexto muda — quando se executa um método em algum outro objeto do qual o objeto foi originalmente definido, a palavra-chave this já não se refere ao objeto original, no qual this foi originalmente definido, mas se refere ao objeto que invoca o método onde this foi definido.

Solução para corrigir this quando um método é passado como uma função de callback

Como realmente se quer que this.data faça referência à propriedade de dados no objeto “user”, é possível usar os métodos bind()apply() ou call() para definir especificamente o valor de this.

Ao invés dessa linha:

Deve-se usar bind() para clickHandler, assim:

Ajustando this dentro de um closure

Outro exemplo de quando this é mal compreendido é quando se usa um método interno ou closure. É importante observar que closures não podem acessar a função externa dessa variável usando a palavra-chave this porque essa variável é acessível somente pela própria função e não por funções internas. Por exemplo:

this dentro da função anônima não pode acessar o this da função externa, então ele se refere ao objeto global window (quando o strict mode não está sendo usado).

Solução para manter this dentro de funções anônimas

Para sanar a questão, usa-se uma prática comum em JavaScript: atribuir o valor de this a uma variável antes de entrar no forEach:

É bastante comum na comunidade JavaScript escolher o nome “that” para este tipo de “contorno”, caso em que a atribuição da variável (e posteriores referências) ficariam como:

Ajustando this quando método é atribuído a uma variável

Se se atribui um método que usa this a uma variável, o valor de this quase escapa à imaginação. Como em:

Solução para manter this quando um método é atribuído a uma variável

É possível sanar a questão definindo especificamente o valor de this com o método bind:

Ajustando this em “métodos emprestados”

“Métodos emprestados” é uma prática comum no desenvolvimento em JavaScript. Veja o exame da relevância de this no contexto de métodos emprestados.

this do método avg não se referirá ao objeto gameController; ele se referirá ao objeto appController porque está sendo chamado no appController.

Solução para manter this quando um método é atribuído a uma variável

Para corrigir o problema com a garantia de que o this dentro do método appController.avg() se refere a gameController, usa-se o método apply() assim:

O objeto gameController toma emprestado o método avg() de appControllerthis dentro do método appController.avg() será definido para o objeto gameController porque se passa o objeto gameController como o primeiro parâmetro de apply() — o primeiro parâmetro no método apply() sempre define o valor de this explicitamente.

Palavras finais sobre o this em JavaScript

Como visto, this fica um pouco problemático em situações onde o contexto original muda, especialmente em funções de callback, quando invocado com um objeto diferente ou em métodos emprestados. Lembre-se: this é atribuído ao valor do objeto que invocou a função. Mas, ao terminar de ler este artigo, certamente você aprender e/ou revisou o suficiente sobre this em JavaScript e agora tem as ferramentas e técnicas necessárias para trabalhar nos cenários mais inóspitos.

Até lá, bons códigos e boa sorte!


Os melhores bancos de imagens (stock images) grátis

Lista com os melhores bancos de imagens grátis (free stock images) em uma compilação sensacional para usar imagens em qualquer projeto web.

Todos nós já fizemos uma busca por imagens no Google. Mas em função do acordo antipirataria antipirataria com a Getty Imagesa empresa decidiu remover o botão “Ver imagem”. Também pensamos que fosse algum topo de brincadeira de mal gosto, mas é a sério mesmo! Se você fizer uma busca por imagens neste exato momento, já vai notar a falta do amado botãozinho…

A opção de arrastar uma imagem para a barra de busca (“busca reversa”) continua lá — e para os que não descuidaram dos mistérios profundos do clique com o botão direito do mouse, o impacto pode não ser assim tão grande –, mas o grande público, com a ausência da opção, certamente vai começar a visitar muito mais sites do que fazia antes, se é que vocês me entendem.

Fazendo do limão que a Google nos deu uma deliciosa limonada, segue lista dos melhores sites para conseguir imagens grátis para serem usadas — as famosas stock photos. Isso mesmo: os melhores bancos de imagens grátis que podem ser usadas à vontade, imagens sem direitos autorais. E estamos falando de boas imagens, de alta resolução, para serem usadas em qualquer projeto web!

Pexels

Sem dúvida alguma, Pexels é um dos melhores serviços de banco de imagens de graça que existem atualmente. Grande parte das imagens “hero” aqui do desenvolvimento para web são de lá. Dê uma passeada pelos posts para ter uma amostra da qualidade das imagens que o site oferece.

Para virar fã de vez, todas as imagens estão sob a licença Creative Commons Zero (CC0), que, na prática, significa que são de domínio público e é permitido usá-las à vontade, para qualquer fim, com ou sem edição, inclusive comercialmente.

O objetivo do Pexels é oferecer “high quality and completely free stock photos“, quer dizer, fotos de alta qualidade e completamente grátis. Até o momento, estão conseguindo. Com louvor.

Foter

Uma outra excelente opção quando o assunto é banco de imagens gratis é o Foter. Ao oferecer “Premium Royalty-Free Stock Photos“, ele também é uma alternativa de peso que deve ser sempre altamente considerado ao se procurar boas imagens.

Mas qual é o segredo para ser um stock de imagens com mais de 220 milhões de opções? Eles usam a API do Flickr para buscar fotos licenciadas sob Creative Commons!

Fazer uma busca por algum termo do interesse/necessidade ou navegando pelas categorias do Foter, rapidamente você vai comprovar que ele também é uma das melhores opções de banco de imagens disponíveis atualmente.

Pixabay

A primeira coisa que pode ser lida ao entrar no Pixabay é: Imagens gratuitas de alta qualidade. Mas talvez você encontre algo a mais: vídeos! Para entender melhor, não é preciso mais do que as própria explicação que consta no site:

Imagens e vídeos gratuitos que você pode usar em qualquer lugar: Pixabay é uma vibrante comunidade de criativos, compartilhando imagens e vídeos livres de direitos autorais. Todos os conteúdos são lançados no Creative Commons CC0, o que os torna seguros de usar sem pedir permissão ou dar crédito ao artista — mesmo para fins comerciais.

Com quase 1,5 milhão de opções (e crescendo), talvez você se arrependa de não consultar o Pixabay quando estiver procurando por imagens.

Unsplash

Há 3 regras do Unplash que você deve saber:

  1. As imagens são grátis para uso pessoal e comercial;
  2. Nenhuma atribuição é necessária e;
  3. Novas fotos são adicionadas diariamente.

A empresa canadense oferece incontáveis opções de imagens para serem usadas à vontade que podem ser encontradas através de busca, categorias ou coleções próprias, organizadas e disponibilizadas também de maneira gratuita.

Acesse e navegue um pouquinho pela Unsplash para comprovar a qualidade. Realmente não fica devendo nada para qualquer outro serviço de stock image similar.

Visual Hunt

Se você entra em um stock de imagens e quer opções, qual é o número de opções de imagens disponíveis bom o suficiente? Se a resposta é algo em torno de 350 milhões de fotos grátis, então certamente este é o momento de conhecer o Visual Hunt.

High quality free photos in one place“. Esse é o lema do Visual Hunt. Para tanto, eles são uma espécie de agregado de vários stocks de imagens, coletando diversas fotos pela web à fora e as juntando em um só lugar — também usando aquela ajudinha marota da API Flickr.

A maioria das imagens têm licença CC0, são divididas por categorias e tags e a busca é bastante eficiente. Ah, e eles deixam fazer o embed diretamente do site!

StockSnap

Sendo um auto-denominado serviço de curadoria de imagens, a frase que o pessoal da StockSanap gosta de divulgar é: “StockSnap is the best place on the internet to find beautiful free stock photos”, ou, em outras palavras, o melhor banco de imagens grátis da internet. Para saber se é verdade ou não que seja “o melhor”, você mesmo vai ter que entrar para conferir.

Todas as imagens — que podem ser encontradas pela busca, categorias ou uma seção especial de “tendências” — também estão sob Creative Commons Zero. Use sem pudores!

Contribua com os bancos de imagens grátis

Certamente a lista de sites de stock photos apresentados no artigo não pretende ser uma completamente abrangente. Existem literalmente milhares de sites que disponibilizam bancos de imagens e seria uma maluquice querer colocar todos em uma só listagem.

Mas estes são excelentes sites, de renome e reconhecimento mundiais. E sabe como chegaram a este status? A maioria deles permite a contribuição de qualquer um que julgue que suas imagens sem realmente de qualidade e devam ser compartilhadas sem limites com o mundo.

Se você gosta de dar uns cliques e gostaria de ajudar com estes fabulosos serviços de banco de imagens, veja quais desses lhe agradam mais, faça seu login e comece a fazer do mundo das imagens grátis um lugar ainda melhor!


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:


O que SEO pode aprender com UX?

Pontos interessantíssimos sobre UX, SEO, a relação entre ambos e o que pode acontecer a estas carreiras a partir de agora.

Experiência do Usuário (ou User Experience, também chamada UX) desempenha um papel fundamental em orientar decisões básicas que moldam web sites e produtos digitais e, cada vez mais, está “tomando seu lugar à mesa”, por assim dizer. A razão é porque UX é multidisciplinar, englobando Design, Arquitetura da Informação, Usabilidade, Design de Interface, Estratégia de Conteúdo e Pesquisa. Apesar da sua relativa “juventude”, UX, como disciplina, tem crescido exponencialmente nos últimos anos.

Consultores de SEO são trazidos mais tarde ao processo e, geralmente, têm um alcance de trabalho limitado em UX, mas seus esforços podem ter um impacto mais amplo por causa dos números. Então, por que SEO parecem ter menos força com a liderança executiva?

Ambas as disciplinas construíram suas reputações na tomada de decisões apoiadas por dados, mas como especialistas em SEO podem aplicar o sucesso de UX em seus cargos?

Breve história

Pessoas que trabalham com Experiência do Usuário (UX) não acabaram de surgir. Eles eram psicólogos, jornalistas, designers de interface e arquitetos da informação – pessoas que escutam bem e pode traduzir suas descobertas em recomendações contextuais. UX, em sua forma atual, existe desde meados da década de 1990. Anteriormente, pessoas da área de UX estariam trabalhando em áreas afins como:

  • Psicologia
  • Ergonomia
  • Interação Humano-Computador
  • Design de Produtos
  • Biblioteconomia

SEO existe desde, pelo menos, 1997, e evoluiu em conjunto com a tecnologia. Antes disso, o análogo mais óbvio seria marketing. Há pontos em comum definidos nos dados que os profissionais de UX e SEO trabalham, mas as pessoas que trabalham nestas áreas têm diferentes origens e prioridades que podem contribuir para a desconexão entre os dois.

A maioria das pessoas que querem/têm um site veem SEO como uma grande prioridade. Ninguém quer pagar por um sistema que não existe aos olhos dos mecanismos de busca e, portanto, corre o risco de ter seu crescimento obstruído. SEO é uma preocupação crítica, mas é, em última análise, secundária a uma grande experiência.

O papel da UX

Implementar processos centrados no usuário se tornou uma prioridade em muitas empresas porque tem um alto retorno sobre o investimento (ROI), muitas vezes resultando, diretamente, em maior satisfação do cliente, crescimento do negócio e engajamento de marca.

Não existe uma definição singular sobre o que é o processo de UX, já que os que atuam na área trazem sua própria combinação única de habilidades e conhecimentos para os projetos e porque as recomendações variam de acordo com cada contexto em que se está trabalhando.

Alguns diriam que UX se concentra em acrescentar “personalidade” e utilidade para um meio inerentemente sem emoção. Um bom profissional de UX irá:

  • Ajudar pessoas (“usuários”) a alcançar seus objetivos
  • Equilibrar os objetivos do negócio com a integridade da experiência do usuário
  • Em última instância, ajudar as pessoas a melhorar suas vidas através da tecnologia

A grande marca de um consultor de UX é a facilitação (entre as preocupações dos stakeholders, estratégia, design, conteúdo e engenharia). Consultores de UX idealmente atuam como agentes de mudança dentro das empresas.

SEO e UX são diferentes

As pessoas realmente não enxergar uma interseção entre UX e SEO. É mais ou menos como na Corrida de Revezamento: eles não querem se tocar, só querem se apressar e seguir em frente.

Simplificando, SEO leva as pessoas a um site, aumentando a encontrabilidade de informações; e UX as mantêm lá, fazendo com que a informação seja envolvente e utilizável. Não é mágica. Os comportamentos de busca de informação que as pessoas usam para encontrar o que estão procurando pela primeira vez são muito diferentes dos “gatilhos” que levam a tráfego repetido.

Ambas as disciplinas são necessárias para acomodar diferentes tipos de informações de comportamentos de busca; o objetivo primordial deve ser o equilíbrio entre o ranking nos mecanismos de busca e a integridade da experiência da marca. Em última instância, a relação do usuário de longa duração é com a experiência.

“Me dê alguma coisa acionável”

Todo estão fazendo o trabalho necessário para ajudar produtos digitais a encontrarem sua audiência; como isso é alcançado é “o” ponto de diferenciação. Tudo se resume a todos pedindo a mesma coisa: “Me dê alguma coisa acionável”.

O que UX e SEO consideram como “acionável”?

SEO considera métricas web como acionável – dados quantitativos que são derivados a partir de medições. Ao lidar com o tráfego web, minutos ganhos podem se traduzir em números enormes em sites de grande escala. Devido ao fato de os consultores serem trazidos mais tarde no ciclo de planejamento de um produto, há uma ênfase em melhorias incrementais conforme o tempo passa.

UX emprega métodos de pesquisa qualitativa e quantitativa em sua busca pelo equilíbrio entre utilidade e prazer. Dependendo do projeto, você pode precisar de dados quantitativos, como web analytics. Outras vezes você pode usar dados qualitativos como:

  • Entrevistas com usuários
  • Análise heurística
  • Pesquisa de campo

Essas fontes de dados, qualitativas e quantitativas, são essenciais para a identificação de oportunidades de mudança – grandes e pequenas.

Estratégia de Conteúdo e SEO a longo prazo

A longo prazo, SEO deve quase que cuidar de si mesmo com uma boa Estratégia de Conteúdoe uma “voz de marca” diferenciada – conteúdo real deveria, teoricamente, levar a ganhos reais de tráfego.

Envolvente, o conteúdo exclusivo é essencial para a sua estratégia, claro. Essa estratégia poderia envolver o crescimento do “estilo” de uma marca ou o estabelecimento de liderança de pensamento em um campo, em particular, ou o desenvolvimento de uma marca orientada a serviço. Conteúdos novos também são cruciais se você está focado em compartilhamento social e backlinking, já que ambos aumentam o alcance de um site e fazem crescer a base de usuários.

Técnicas de SEO podem desvirtuar a Estratégia deConteúdo se aplicadas em excesso. Quando os ganhos são mais de de otimização, ao invés de conteúdo real, relevante, a experiência geral é diminuída. A desvantagem desta maior ênfase na estratégia de conteúdo é que SEOs podem, eventualmente, não serem mais necessários em dado momento.

Mas existe alguma forma de agregar valor e fazer crescer o papel de SEO que não está em desacordo com a experiência holística do cliente?

Educação como chave para a elevação da disciplina

É a educação a chave para elevar a disciplina e levar a SEO para o próximo nível?

Uma coisa que UX tem feito muito bem na última década é se promover. Existe uma comunidade ativa na internet dedicada a melhorar e legitimar a UX, ajudando a próxima geração de profissionais da área a crescer em seus cargos.

Design originalmente se referia ao apelo visual, mas esses esforços criativos muitas vezes tornaram muitos sites inutilizáveis… Design se expandiu para incluir UX, o que transformou o site atrativo num sistema coeso. Os sistemas foram ficando funcionais e atrativos, mas não particularmente interessantes, daí a necessidade da Estratégia de Conteúdo.

Qual é o objetivo de um sistema atraente, funcional e envolvente que não se pode encontrar? Assim, a necessidade de SEO. É um pouco de especialidade nicho que às vezes é tratado como um adendo pelo pessoal que faz a administração.

SEO ainda está, muitas vezes, associado a táticas questionáveis devido à época em que era mais comum que atualmente comprometer a experiência global em função de pequenos ganhos em rankings de busca. Táticas como:

  • “Keyword stuffing”
  • Rodapés obesos, cheios de links
  • Conteúdo falso e/ou de baixa qualidade

Capacitar a próxima geração de designers e SEOs para tomar decisões inteligentes e educar as partes interessadas nesse sentido é a chave para o crescimento da disciplina e elevação da percepção do nível executivo de SEO.

Jakob Nielsen recentemente levantou um excelente ponto sobre SEO de curto prazo ser, principalmente, sobre um bom design. E a definição de “bom design” deve incluir projetar com SEO em mente, para além de todas as outras coisas que os designers de hoje têm de se preocupar. Seria incentivar jovens designers de projetos de sistemas a não violarem osprincípios básicos de encontrabilidade, acessibilidade e credibilidade.

Quando designers se preocupam com os princípios básicos de SEO, eles têm o poder de melhorar a integridade de seus projetos. Quando as pessoas têm um sentimento de “posse” do processo, eles são mais propensos a valorizar a ênfase adicional nas melhores práticas de SEO. Consultores então seriam livres para o trabalho mais especializado ou para encontrar novas maneiras de contribuir para expandir a definição de seus papéis.

O valor de UX

Não existe uma quantidade finita de trabalho, empregos ou de receita; a grande coisa a respeito de UX é o tanto que as pessoas estão dispostas a pagar por isso. Rúben Steiger fala sobre isso em seu artigo “Who’s the Chief Experience Officer?“.

Em seu livro “Future Shock”, de 1971, o futurista Alvin Toffler falou sobre a vindoura “indústria experiencial” em que as pessoas no futuro estariam dispostas a alocar altos percentuais de seus salários para viver experiências incríveis […] […] Empresas precisam começar a pensar sobre a relação holística entre suas marcas, produtos e serviços. “Moldar” uma experiência requer um projeto que considera estes três elementos de marca, produto e serviço, a fim de gerar resultados bem sucedidos.

Faz sentido que as empresas teriam que sentar e prestar atenção às oportunidade em mãos. Diretores de Experiência (CXOs) até já começaram a fazer incursões na estrutura executiva da indústria da tecnologia. Quantos profissionais fizeram isso recentemente?

Muitas empresas querem ser a Apple, uma empresa reconhecida pela qualidade de sua UX, mas estes “wannabes” (termos pejorativo para se referir a pessoas que querem ser o que não são) não estão dispostos a colocar o trabalho em seus processos de design de produto e cadeia de suprimentos para suavizar os solavancos. Você não pode simplesmente imitar a aparência de um sistema porque, no minuto em que os usuários começarem a tentar fazer as coisas que querem/precisam fazer, as diferenças se tornam claras.

Experiência do Usuário tem um lugar à mesa porque o valor agregado é claro. Processos eficientes de design centrado no usuário resultam em maior satisfação do cliente, o crescimento do negócio e num engajamento global de marca. A contribuição da UX para produtos digitais, em última análise, ajuda as pessoas a melhorarem suas vidas através da tecnologia.

Pode a SEO ganhar um assento à mesa?

Especialistas em SEO podem ter de se adaptar a fim de evitar o destino de “marginalização”. Estratégia de Conteúdo apenas começou a ter seu “lugar ao sol” e sua contínua popularidade poderia reduzir a necessidade de otimização de busca para todos. Especialistas em SEO terão que aprender novas especialidades no futuro ou enfrentar a concorrência cada vez mais dura por trabalhos? Há outras oportunidades além dos paradigmas habituais para fazer crescer a posição de SEO dentro das organizações?

UX capturou o Zeitgeist (“Espírito do Tempo”) porque tem uma comunidade robusta dedicada a crescer, educar e legitimar o campo, e provou seu valor para a liderança executiva. Alguns diriam que SEO tem um problema de percepção, indo sempre pelo caminho do nível executivo.

Pode ser hora de considerar uma reeducação das partes interessadas e membros da equipe sobre o valor de SEO.


HTTP 503: a maneira correta para SEO

Considerações a respeito do status code HTTP 503: o que significa, suas implicações de uso e como usar o HTTP 503 em períodos de manutenção de um site.

Você dá a devida importância aos códigos de status que são enviados nos cabeçalhos HTTPdas páginas de seu site? Saiba que enviar um cabeçalho de resposta HTTP com um código errado pode ser fatal… Principalmente quando alguma manutenção está sendo feita no site ou sistema. Neste artigo, breves considerações a este respeito e quais medidas tomar em relação ao status code 503 quando seu site entrar em manutenção.

Códigos de status HTTP e mecanismos de busca

Um mecanismo de busca constantemente verifica se o conteúdo que ele está indexando ainda existe e/ou não mudou. Geralmente, mecanismos de busca verificam 2 coisas:

  • Se o conteúdo está sendo “encabeçado” com o código HTTP 200;
  • Se o conteúdo ainda é o mesmo.

Um código 200 de HTTP significa: “Tudo está bem, aqui está o conteúdo que você pediu”. É o único status que indica que tudo está bem com o conteúdo. Se o conteúdo foi movido, você pode redirecioná-lo – permanentemente, com um HTTP 301 ou; temporariamente, com um HTTP 302 ou 307.

Se o servidor retorna qualquer outro código de status HTTP, significa que o mecanismo de busca já não pode encontrar o conteúdo. Se um servidor retorna um HTTP 200, mas a página é, de fato, um erro e diz algo como “Arquivo não encontrado” ou tem muito pouco conteúdo, o Google vai classificá-la como um “soft 404” no Google Webmaster Tools.

Como mecanismos de busca lidam com o tempo de inatividade do servidor (downtime)

Se, durante um rastreamento, um motor de busca encontra algum conteúdo que não existe mais, por exemplo, ele retorna um status code HTTP 404 que, geralmente, remove o conteúdo dos resultados de pesquisa até que o crawler possa voltar e verificar se ele está lá novamente. Se isso acontece, geralmente vai demorar um pouco para que o conteúdo volte a aparecer nos índices de busca novamente.

O que você deve fazer é garantir que um código de status HTTP 503 será retornado! Esta é a definição do código de status 503 da RFC (que define esses códigos de estado):

O servidor atualmente é incapaz de lidar com o pedido devido a uma sobrecarga temporária ou manutenção do servidor. A implicação é que esta é uma condição temporária que será aliviado após algum atraso. Se conhecido, o tempo de atraso PODE ser indicado em um cabeçalho Retry-After. Se nenhum Retry-After é fornecido, o cliente DEVE lidar com a resposta como seria para uma resposta 500.

Então, você tem que enviar um código de status 503 em combinação com um cabeçalho Retry-After. Basicamente, você está dizendo: “Espere! Estamos fazendo alguma manutenção, por favor, volte em X minutos”. Isso soa muito melhor do que um erro que diz: “Not Found”. Um código de status 404 literalmente significa que o servidor não pode encontrar qualquer recurso para retornar à URL acessada.

Como enviar um cabeçalho HTTP 503?

A maneira como se envia um código HTTP 503 como resposta a uma requisição depende da linguagem server-side que você está trabalhando. Por exemplo, em PHP, envia-se esse HTTP 503 assim:

O tempo de atraso do exemplo, 3600, é dado em segundos, de modo que 3600 segundos corresponde a 60 minutos (ou 1 hora). Você também pode especificar o tempo exato em que o visitante deve voltar enviando uma data em GMT ao invés do número em segundos. Algo como:

Quando preferir usar GMT, faça isso com muita cuidado e consciência! Especificar uma data errada pode causar resultados inesperadamente desastrosos!

“Meu site nunca está em manutenção, eu uso WordPress!”

Bobagem. Toda vez que você atualiza o core do WordPress ou quando você está atualizando plugins, o WP fornece uma página de manutenção. Essa página, por padrão, envia um cabeçalho HTTP 503 adequado.

Você pode substituir essa página de erro padrão com um arquivo maintenance.php na sua pasta wp-content, mas, se fizer isso, você tem que ter certeza de que o arquivo envia os cabeçalhos HTTP 503 apropriados! Na dúvida, você pode dar uma olhada no código da função wp_maintenance().

Se seu banco de dados caiu, o WordPress envia um erro interno do servidor usando a função dead_db(). Se você está fazendo uma manutenção planejada no banco de dados, é preciso criar uma página personalizada com uma mensagem de erro – usando o arquivo db-error.phpem ​​sua pasta wp-content, que envia o cabeçalho HTTP 503 adequado.

Cuidado com o cache!

Se você está trabalhando com algum tipo de sistema de cache, muito cuidado ao realizar essas mudanças! Tenha absoluta certeza de que o código HTTP 503 está sendo enviado corretamente durante o tempo em que a manutenção está sendo realizada.

Se não tomar cuidado, o código HTTP 500 (“Internal Server Error”, um erro genérico) pode ser enviado e, definitivamente, isso é algo que você não vai querer que aconteça.

HTTP 503 através do robots.txt

Segundo este post de Pierre Longe no Google+, se você enviar um código de status HTTP 503 para o arquivo robots.txt, o Google vai parar todo o rastreamento no domínio até que seja autorizado a rastrear o robots.txt novamente. Essa é uma forma muito útil de prevenir uma eventual sobrecarga no servidor ao fazer manutenções.

Usar essa técnica ainda exige que você envie um HTTP 503 para cada URL do site, incluindo as que apontam para recursos estáticos, mas, depois que o Google tiver acesso ao robots.txt novamente, provavelmente vai parar de martelar seu servidor por um tempo.

Conclusão: saiba que cabeçalhos HTTP você está enviando

Em suma, você deve ter ciência do que está acontecendo em seu site/sistema e saber, exatamente, quais códigos de status HTTP são enviados em quais situações e por quanto tempo.

tweet de Vanessa Fox reforça bem essa ideia:

It’s about more than number of pages crawled – you need to know about important pages & what response code they return @vanessafox

Quer dizer: É muito mais do que sobre o número de páginas indexadas – você precisa saber a respeito das páginas importantes e qual código de resposta elas retornam.

É a mais pura verdade!


Saiba mais sobre Wireframes antes de contratar um desenvolvedor da Web
Você deve explicar sua visão se você espera que seu desenvolvedor web compartilhe sua visão.
As opiniões expressas pelos contribuintes empresariais são próprias.

Como alguém que esteve em ambos os lados do contrato, como freelancer e como cliente, uma das coisas mais bem vindas que você pode fazer para um freelancer é ajudá-los com seu trabalho de forma significativa.

Você é o cliente do inferno?

Quando se trata de desenvolvimento web, isso significa duas coisas. Primeiro, leia os Clientes do Inferno e se esforça para nunca ser “esse cara”. Em segundo lugar, esteja pronto para apresentar seu desenvolvedor web com um wireframe.

Quando digo a palavra wireframe, o que você imagina? Se você está pensando em CGI e modelos poligonais dos anos 80, você está um pouco fora da marca. Um wireframe de design web é como esse esqueleto poligonal, mas para um site.

O que é um wireframe?

É um layout gráfico e design que não exige nenhuma codificação, manipulação de imagem, ou mesmo mais do que colocar um lápis em uma folha de papel quadrado. Basta verificar alguns desses exemplos .

Um wireframe é uma ferramenta incrivelmente útil para um desenvolvedor web. Isso mostra exatamente o que você tem em mente e dá-lhes uma idéia da escala de vários elementos, os elementos cruciais que você deseja incluir em suas páginas. O wireframe é uma espécie de truque de codificação que eles podem precisar para implementar para que tudo aconteça.

Desta forma, você não os surpreende com “oh, e por sinal, eu quero a navegação na barra lateral” ou “hey, na verdade, você pode fazer essa imagem estática uma apresentação de slides?”

Você economizará tempo, você economizará dinheiro e você salvará o sangue, o suor e as lágrimas de você e seu desenvolvedor web.

Mas espere! Eu estou assustado.

Se você tem medo da complexidade de um wireframe, não se preocupe com isso. Você não precisa fazer um design em escala completa de todas as páginas em seu site. Tudo o que você realmente precisa são os princípios básicos. Você quer saber onde você terá sua navegação e qual o tipo de layout que deseja para as páginas do produto.

Você quer um par de detalhes sobre quantos slots extras você precisa para miniaturas de artigos ou outros produtos relacionados. Alguns dos wireframes da galeria acima são muito simples, não mais do que um punhado de caixas aninhadas em outras caixas, mas ainda é suficiente para um desenvolvedor web começar.

Além disso, lembre-se, faz parte do trabalho do desenvolvedor para ajudá-lo a refinar o design. Eles podem dizer-lhe “hey, este design é um pouco confuso, e se cortarmos isso e mudarmos para lá?”

O design moderno é uma chave.

Eles podem dizer-lhe que os padrões de design modernos sugerem que você não deveria ter sua navegação no lado direito na calha. Eles podem usar seu wireframe como base. Apenas corta as primeiras cinco ou seis fases de prototipagem de ida e volta, o desenvolvedor normalmente teria que passar para chegar a este estágio com você.

Os wireframes também são muito fáceis de criar, desde que você tenha e mantenha uma visão do que você deseja que seu site pareça. Eu já disse que você pode colocar um lápis em uma folha de papel e fazer um, mas você também pode usar uma das dezenas de aplicativos lá fora.

O padrão da indústria que encontrei é o Balsamiq, que é livre para tentar e barato para comprar. Ou você pode usar outras ferramentas como Wireframe.cc, Moqups ou UXPin para soluções baseadas na web.

Se preferir trabalhar a partir de um tablet ou dispositivo móvel, o OmniGraffle funciona no iOS, o Wire Flow funciona no Android e o Fluid UI funciona em ambos.

Tudo o que você faz é um processo.

Na verdade, não é tão difícil quanto parece – ou soa. Lembre-se, produzir qualquer coisa é um processo iterativo. Passando de uma idéia para um esboço, de um esboço para um wireframe, de um wireframe para um projeto mais detalhado, e de lá para um protótipo é típico.

Qualquer quantidade de ajuda que você possa trazer para o seu desenvolvedor percorrerá um longo caminho – e confie em mim – é muito apreciada.


Uma nova ferramenta para adicionar recursos do Facebook ao seu site

Boas notícias para o empresário das redes sociais: o Facebook facilitou a integração de suas funções sociais em muitos sites. O gigante da mídia social baseado em Menlo Park lançou seu próprio plug-in pré-fabricado para o popular site e ferramenta de blogs , o WordPress.

Com o novo plug-in, chamado Facebook para WordPress , os proprietários de sites podem adicionar botões Like, Subscribe, Send e Recomendações facilmente em páginas não só, mas também em álbuns de fotos e lojas online – adicionando opções adicionais de compartilhamento e engajamento. Uma função chamada Social Publisher publica automaticamente novos conteúdos em um site de volta para a página do Facebook da empresa. Existem também funções Insights, que acompanham a quantidade de atividade que ocorre.

Ao ser apelidado de “o oficial” plug-in do Facebook para o WordPress, esta ferramenta entra em um campo lotado de complementos do Facebook, incluindo o Facebook Connect , o Facebook Tab Manager e os membros do Facebook .

Aqui estão quatro razões pelas quais um negócio pode considerar a integração de recursos do Facebook em sua experiência online:

1. É fácil de adicionar. 
Os sites que funcionam no WordPress devem encontrar o plug-in simples de baixar e configurar a partir dos painéis de controle do WordPress. As opções incluem cor, tamanho e escolha as páginas para colocar links no Facebook.

Para sites que não usam o WordPress, você ainda pode adicionar muitos desses recursos ao seu site. Visite os desenvolvedores.Facebook.com e escolha entre opções semelhantes. O Facebook fornecerá algumas linhas de código para copiar e colar nas ferramentas de edição nas páginas de controle de um site.

2. Obter novos “amigos”. 
Ao adicionar um botão “Curto” ou “Compartilhar” em uma página ou publicação, as empresas estão permitindo que clientes e visitantes compartilhem conteúdo facilmente em suas próprias paredes no Facebook. Esse recurso pode ajudar a espalhar a mensagem de uma empresa mais, mais rápido e ajuda as informações a serem virais.

Considere também usar o recurso de comentários do Facebook. Permite que as empresas evitem discriminadores anônimos e coloca nomes e rostos reais para comentários.

3. Acesse análises mais detalhadas. 
O recurso Insights do plug-in pode fornecer uma dimensão adicional às análises para empresas. As empresas já têm acesso aos dados de log da Web para quantas pessoas visitam seu site e de onde elas são. Mas com a Insights, as empresas podem dizer quantos visitantes realmente “gostam” de uma página.

Por exemplo, postar um álbum de fotos com 100 visualizações pode ser analisado adicionalmente, rastreando qual imagem obtém o máximo de “Likes”. Os dados que você coleciona da Insights podem ajudá-lo a melhorar o envolvimento do cliente com seu site.

4. Mantenha sua marca socialmente relevante. 
O plug-in torna tão simples quanto possível colocar um ícone bem conhecido, como o botão “Curtir” do Facebook na página da empresa. Com mais e mais clientes socialmente conscientes, isso pode ajudar a aumentar a credibilidade adicional em um site.


Página 1 de 212