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 webdesign | LCF HOST

Tag: webdesign


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.


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:


URLs amigáveis (slug) à WordPress

Apenda a gerar URLs amigáveis como é feito no WordPress e implemente em seu sistema PHP

desenvolvimento web em WordPress é excelente! O CMS já vem com diversas funções e funcionalidades para facilitar a vida de desenvolvedores e, até mesmo, de pessoas que não tem o mínimo conhecimento em programação (um dos objetivos é esse, mesmo).

Mas muitos desenvolvedores, principalmente os ainda incipientes, esquecem que o WordPress nada mais é do que PHP! Claro, o WP é nada mais, nada menos, que um sistema feito em PHP, como você e eu poderíamos ter feito. Mas, por motivos que me fogem ao conhecimento, as pessoas esquecem isso… Talvez o nível de abstração em programação que o CMS proporcione seja o “culpado”, mas, sinceramente, não tenho certeza.

Então, se você tiver a curiosidade de vasculhar os arquivos PHP que fazem do WordPress o que ele é, vai ter uma grata surpresa e encontrar uma rica fonte de scripts, funções e funcionalidades que você sempre quis implementar e não sabia como!

URLs amigáves à WordPress

Por exemplo, muitos querem implementar uma estrutura de URLs amigáves (gerar os famosos “slugs”) em sistemas desenvolvidos do zero  – seja através de frameworks ou em PHPU (“PHP Unha”) -, mas não sabem como. Ora, se sabemos que o WordPress possui um ótimo sistema de geração de slugs e temos acesso a seu código-fonte, tudo o que é preciso é vasculhar o código-fonte e encontrar as funções certas.

Seguindo o exemplo de gerar slugs, procurando um pouco, é possível saber que as funções necessárias se encontram em /wp-includes/formatting.php. E, como era de se esperar, as funções estão devidamente documentadas com seu escopo, parâmetros e retorno. Precisa de mais?

Para gerar URLs amigáveis à WordPress, são necessárias 4 funções. 3 “preliminares” que são:

E, com essas funções devidamente estabelecidas, a função que gera os slugs, propriamente dita:

Então, para gerar um slug em seu próprio sistema depois de implementar as funções mostradas, basta escrever:

Achou o nome da função grande ou feio? Você tem o código, altere como bem entender!

Considerações finais

O WordPress é software livre (registrado sob a licença GPL), então você pode pegar essas 4 funções e implementar em seu site/sistema/softwares sem o medo de receber uma cartinha do advogado da equipe WordPress amanhã ou depois.

Fica uma pergunta: você tem um software livre à disposição e fica quebrando a cabeça em busca de soluções de código que já existem e estão implementadas nele? Vasculhe todo o código fonte (veja alguns recursos que ajudam no artigo sobre ferramentas e recursos para desenvolvimento web) e procure por aquilo que vai lhe ser útil!

Não seja tímido! 😉


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!


Problemas comuns de WordPress e como resolvê-los

Conheça problemas comuns de WordPress e saiba como facilmente resolvê-los através de soluções simples e eficientes.

Todos os dias há perguntas postadas nos fóruns de WordPress sobre alguns dos problemas mais comuns que novos usuários enfrentam. É fácil de instalar e divertido de trabalhar com WordPress e os novos usuários se animam, rapidmente, com os poderosos recursos oferecidos por muitos de seus plugins e temas.

Eventualmente, os neófitos se deparam com perguntas, questões e problemas que muitos antes deles também já se depararam. WordPress tem uma enorme comunidade global de usuários por trás, então, não importa o problema que um usuário esteja enfrentando, há uma boa chance de que alguns outros usuários já o tenham enfrentado e que já exista uma solução disponível para corrigir esse problema ou responder a essa pergunta.

Neste artigo, vamos discutir alguns desses problemas comuns de WordPress e aprender, através de suas soluções, como resolvê-los.

Consumo de memória do WordPress

Quando um site rodando em WordPress cresce em popularidade e pageviews, o consumo de memória é um dos primeiros (se não, o primeiro) problema que os mantenedores do site enfrentam. Se eles estão em uma hospedagem compartilhada ou um VPS, seus webhosts enviarão e-mails sobre o uso de memória e limite alocado. Pelo menos, os bons hosts farão isso; se for um de baixa qualidade, seu site pode apenas cair e você sequer vai ficar sabendo disso a tempo…

Felizmente, existem diversas soluções para esse problema.

O motivo pode ser um plugin ou tema mal feito rodando. Para descobrir, instale o plugin WP-Memory-Usage. Desative todos seus plugins, exceto o WP-Memory-Usage e, em seguida, vá ativando um por um. Observar como vai ficar o uso de memória depois de ativar cada plugin pode ajudar a descobrir qual(is) é(são) o(s) vilão(ões) da história.

Depois dessa verificação inicial, se os temas e plugins estiverem funcionando dentro do esperado, então pode ser uma ótima ideia instalar um plugin de cache, como W3 Total Cacheou WP Super Cache. Se um plugin de cache não reduzir significativamente a memória com as configurações padrão, será preciso uma configuração mais específica, alterando parâmetros tais como compressão, minify de scripts, aumentar o intervalo dos caches, etc.

Leia estes excelentes artigos (em inglês) sobre como otimizar instalações de WordPress:

Sites em WordPress hackados

Outro problema comum de WordPress é descobrir que seu site foi invadido! As chances de tal coisa acontecer em seu site podem ser significativamente reduzidas seguindo algumas dicas práticas de segurança para WordPress.

Existem diferentes tipos de hacks que os usuários do WordPress enfrentam. O mais comum deles é quando um site redireciona para algum outro site com conteúdos ilegais e/ou obscenos, links injetados para outros sites, códigos estranhos em arquivos de temas, etc. Lembre-se de que, na maioria das vezes, é fácil corrigir esses problemas.

  • Mantenha sempre a instalação do WordPress atualizada com a última versão
  • Faça backups regulares de sua instalação e banco de dados WordPress
  • Execute o WP-Security-Scan, um excelente plugin para detectar códigos suspeitos em seus temas, plugins e arquivos principais do wordPress. Se você encontrar algo suspeito em plugins ou temas, apague! Se você encontrar algo suspeito no core do WordPress, substitua por novos!
  • Verifique regularmente seu arquivo .htaccess por mudanças e códigos suspeitos
  • Leia o artigo “My site was hacked” no Codex do WordPress, peça ajuda em fóruns, peça a ajuda do seu provedor de hospedagem para ter certeza que não aconteceu um ataque em todo o servidor.

Perda da senha de admin e/ou e-mail

É realmente surpreendente quantas pessoas instalam o WordPress e esquecem seus nomes de usuário, senha e e-mail utilizados durante a instalação. Existem várias maneiras de recuperar senha e nome de usuário e é importante conhecer algumas delas.

Recuperar senha do WordPress via PHPMyAdmin

Se você tiver acesso ao banco de dados através do phpMyAdmin, vá até lá e encontre a tabela wp_users. Clique na aba “Procurar” e, em seguida, encontre seu user_login. Clique no ícone “Editar”, à esquerda da linha. Agora você vai ver sua senha encriptada; exclua e substitua por qualquer senha que quiser. Haverá um drop-down “Funções” ao lado. Clique sobre ele e selecione “MD5”. Clique em “Executar” e pronto, você atualizou sua senha!

Recuperar senha do WordPress por FTP

Conecte em seu site via FTP, vá em wp-content/themes/SEU_TEMA. Substitua “SEU_TEMA” com o nome do tema ativo em seu site. Edite o arquivo functions.php (se você não tiver um no seu tema, crie). Adicione esta linha:

Substitua “NovaSenha” com qualquer senha que você quiser. O “1” é o para o user_ID – supondo que você é o admin do site e não excluiu o primeiro usuário que criou durante a instalação.

Faça upload do arquivo editado de volta para o servidor. Agora, faça o login usando a senha que você adicionou no functions.php. Uma vez que você tenha conseguido logado, lembre-se de apagar esta linha de seu arquivo de funções.

Escrevendo código em posts e widgets

Para fazer o WordPress mais seguro e proporcionar um ambiente confiável e consistente, por padrão a plataforma não permite que os usuários insiram códigos nos posts, comentários e widgets. No entanto, depois de algum tempo a maioria dos novos usuários se sente confortável o suficiente com o WordPress para querer adicionar funcionalidades diferentes nessas áreas.

Por exemplo, para mostrar os códigos deste artigo, não é possível simplesmente colar o código. Ele seria retirado pelo WordPress e não seria mais legível.

Adicionando código nos posts do WordPress

Codex do WordPress sugere o uso de entidades HTML para escrever código, mas esta é uma forma muito custosa de se fazer isso. Então, se você pretende compartilhar regularmente trechos de código com os visitantes de seu website, então você precisa de algum plugin específico, tal como o Syntax Highlighter Evolved.

O plugin permite escrever código em seus posts e estilizar códigos com shortcodes. É muito fácil de usar, personalizável e suporta várias linguagens incluindo PHP, JavaScript, HTML e CSS.

Adicionando código nos widgets da barra lateral

Também pode haver a necessidade de exibir trechos de códigos em Widgets ou adicionar uma função ou tag em um widget. Para isso, é possível instalar algum plugin, como PHP Code Widget ou Widget Logic.

Conclusão

Certamente, deve haver outras perguntas comuns, questões e problemas que os novos usuários de WordPress muitas vezes se deparam. A primeira coisa a se fazer quando se deparar com qualquer problema com seu site WordPress é pesquisar.

Faça buscas usando diversos termos e você vai ver que muitas pessoas já forneceram soluções para esses problemas de WordPress. Se não, você pode sempre fazer perguntas no Fórum WordPress, IRC e outros fóruns WordPress relacionados.

E você, conhece algum problema comum de WordPress e a solução adequada?


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.


Página 1 de 212