Mostrando postagens com marcador Web Development. Mostrar todas as postagens
Mostrando postagens com marcador Web Development. Mostrar todas as postagens

HTML 5: ainda é o momento?

Quando falamos em desenvolvimento para web, uma das primeiras linguagens na qual pensamos é o HyperText Markup Language, mais conhecido como HTML. A última versão dessa linguagem foi lançada em 2010 e, em princípio, imaginamos que o HTML 5 traria diversos recursos e inovação, e trouxe. Mas hoje, dois anos depois, deixa de atender a muitas necessidades do mercado.

Os dispositivos móveis estão (literalmente) por toda a parte. A agência de pesquisa digital Flurry divulgou um estudo que mostra que o Brasil está em terceiro lugar no ranking de países com o maior número de dispositivos móveis com o iOS, da Apple, ou o Android, do Google. Os dados mostram que a taxa de crescimento dos sistemas operacionais no país no período de 12 meses, compreendido entre julho de 2011 e o mesmo mês deste ano, foi de 220%.

Com o aumento do uso dos dispositivos móveis, houve também um crescimento da demanda por aplicações para esses aparelhos. E, por consequência, há a necessidade de profissionais no setor. Recentemente, a Gartner listou três implicações em que devemos ficar de olho nesta era pós-PC na qual estamos.

Comentário também é conteúdo, se indexável

Algumas pessoas querem saber se o Google considera comentários em posts de blog como conteúdo. Sim, ele considera, sobretudo porque os comentários de um blog são áreas em que há discussão e muitos temas são levantados ali. Portanto, nada mais natural que o Google considerá-los na busca.

O fato de pessoas usarem palavras-chave que levam tráfego de pesquisa é um dos bons motivos de manter espaço de comentários em sites e blogs, do ponto de vista de SEO. Infelizmente, não há dados para demonstrar, mas seria possível fazer um estudo, mostrando como páginas com comentários tendem a receber mais visitas de busca orgânica

O comentário deve estar indexável

Por padrão, o algoritmo do Google não lê JavaScript, iframe ou popup. No caso de popup, mesmo que lesse, ele perderia sua eficácia, uma vez que as palavras-chave de comentários são sempre uma maneira de tornar o conteúdo mais relevante, e nunca o conteúdo mais relevante do artigo.

Indexável é todo aquele conteúdo que está em formato de texto, em HTML e dentro do próprio HTML, visível para o usuário.

Portanto, o comentário está indexável pela maioria dos sites que aceitam comentários. De todo modo, evite plugins de comentário em seu site ou blog, porque geralmente o Google é incapaz de indexá-los, pois eles vêm via JavaScript.

Utilize sempre a tag nofollow

Se você quiser permitir comentários em seu site ou blog, não permita que os autores postem links sem a tag nofollow. Ela serve para o usuário, mas não para o Google, e foi criada para combater pessoas que comentavam em blogs não pela interação, mas por link building.

Plataformas de blog como WordPress e Blogger já vêm com as tags de nofollow automaticamente, então não é preciso se preocupar.

iMasters

Como melhorar a performance do seu servidor Apache

Em um mundo cada dia mais dinâmico, nada pior do que ter que esperar as coisas. Isso tem que ser levado muito em conta quando se trata de sites na Internet, principalmente os que vendem online. Esse é o motivo pelo qual você deve se preocupar, e muito, com a performance do seu site.

De acordo com a Forrester Consulting, em 2006, compradores online esperavam que uma página web carregasse em até 4 segundos e, hoje, esse mesmo cliente espera que essa página carregue em 2 segundos ou menos. A Amazon, pouco tempo atrás, descobriu que aumentou sua receita em 1% a cada 100 milisegundos de ganho em performance, e um estudo comprovou que cada segundo gasto na abertura de uma página pode representar 5% a menos de conversão para a sua loja.

Design como disciplina estratégica no e-commerce

Além do comum entendimento de que o ser humano é social, já que desde a época das cavernas, existiam relações em grupos, sabemos que nós somos fortemente impactados por questões estéticas. Dentro desse contexto, pode-se afirmar que é imprescindível fazer para interfaces, sejam digitais ou físicas, projetos que sejam bem resolvidos visualmente.

Mas isso ainda é pouco, já que projetos digitais, e ainda mais projetos de e-commerce, são cheios de detalhes que podem fazer total diferença nos resultados de vendas.

O que defende-se neste artigo é a necessidade de uma integração entre todas as áreas por intermédio do design. Tal como o pensamento do design de serviços, o chamado design thinking, a discussão deve ser integrada entre todos os times envolvidos no projeto. Afinal de contas, a interface vai receber o conteúdo, as estratégias de vendas e será produzida em alguma tecnologia.

Como o SEO aumenta o ROI de links patrocinados

Atualmente, o marketing de busca é divido em duas frentes: SEO e Links Patrocinados. Mas a dúvida da maioria dos anunciantes é: se estou investindo em Links Patrocinados, por que preciso investir na otimização do meu site para as buscas orgânicas (SEO)?
Tela do Google mostrando os espaços correspondentes aos links patrocinados e à busca orgânica
Para responder a essa questão, primeiro vamos entender a importância e a composição do “coração” dos Links Patrocinados do Google, o Índice de Qualidade (Quality Score), que permite aos anunciantes pagarem um menor valor e conseguir posições melhores.

Não use jQuery! Não aprenda qualquer framework antes de...

...conhecer o mínimo da linguagem base em que esse framework foi escrito! E por isso que existem tantos desenvolvedores se enrolando... Tentam usar bibliotecas, frameworks e ajax antes de aprender o básico.

Aprender CodeIgniter, Kohana, CakePHP, Smarty…antes de aprender PHP é loucura! Ninguém faz curso de Zend Framework sem nunca ter programado PHP. Primeiro se aprende PHP e depois vai para um framework. Então, por que inverter os papeis com JavaScript?

Ok, a curva de aprendizado do jQuery, assim como dos demais frameworks, é menor, e se aparecer um problema?

Aí, aquele desenvolvedor que optou por começar com o framwork sem antes passar pela linguagem base começa a ter dúvidas básicas de programação. O framework não resolve tudo para ele. Só vai facilitar o trabalho se ele não se enrolar com os conceitos fundamentais.

Há gente pedindo plugin jQuery para descobrir o que está na URL. Ele não queria e nem precisava fazer um parser da querystring, só precisava saber o que estava lá. Não sabia da existência do document.location e das diversas propriedades desse objeto.

Outro programador não queria usar o document.createElement(), ele insistia em querer fazer com jQuery! OK, existe plugin pra isso, mas para quê? O método nativo da linguagem já é tão bom! Ao framework o que é do framework. Ficar inchando a página de plugins só vai aumentar o tráfego. Usar plugins e frameworks onde não é necessário só vai deixar a aplicação mais lenta!

Um outro caso: respondi uma dúvida de um desenvolvedor que era super simples, usando apenas JavaScript e eram três ou quatro linhas de código. Ele testou, disse que funcionou, e depois pediu para ver como ficaria aquilo em jQuery. Era idiota reescrever 4 linhas de JavaScript usando o framework e nem dava! Percebi que ele pensava: "JavaScript estava ultrapassado e ele pretendia fazer da forma moderna."

O mesmo ocorreu com AJAX: a dúvida estava resolvida, e o cara pediu para ver como ficaria em AJAX! E era tudo apenas JavaScript puro, não havia o menor motivo para ir no servidor e voltar. Nesse momento, começa a surgir uma confusão de papeis. Gente achando que AJAX é uma linguagem, que precisa enfiar jQuery em tudo...

Já vi tópico começar "sobre AJAX" e terminar apenas com PHP puro! O cara queria colocar uma requisição assíncrona onde não precisava. Completa inversão de valores e pura falta de conhecimento, certo?

É imprescindível aos desenvolvedores começarem a aprender linguagens server-side depois de terem algum contato com HTML. Precisamos de HTML para programar para a Web, é a linguagem padrão, que vai possibilitar todo o resto. O PHP, ASP, Java e afins, vai gerar HTML, mais cedo ou mais tarde.

Eis que começam a surgir dúvidas bobas. O programador vai fazer uma listagem de produtos para uma loja virtual e não sabe como colocar um produto do lado do outro. Isso é porque ele não sabe HTML, muito menos CSS! Sem entrar no mérito da divisão de trabalho, FrontEnd, BackEnd e outros mais, ao menos, um pouco da linguagem do outro, era bacana.

Em agências pequenas, ou como freelancer, muitas vezes acontece de o mesmo profissional fazer ambos trabalhos, Front ou BackEnd. Alguns passos são importantes e devem ser respeitados. Comece do básico, evolua, só depois vá para o hardcore!

Antes de tudo, você recebe aulas de Lógica de Programação e Programação Básica, certo? Deveria ser assim, mas assusta ver a quantidade de programadores que tem no mercado que não possuem essa base na formação.

Todo programador deveria obrigatoriamente estudar alguma linguagem de programação de baixo nível. Alguns programadores não conhecem as diferenças ou nem sabem que existem!

O conhecimento adquirido ao fazer algo em Assembly, por exemplo, é extraordinário. Se todos passassem por essa experiência, não teríamos tanto lixo sendo criado. Não precisa se tornar sênior, nem ser ótimo em HTML e CSS, nem defender tese de mestrado em lógica. Mas coisas como tipagem, declaração de variáveis, coletor de lixo e escopo... que faltam em vários programadores PHP e JavaScript. Há pessoas nos fóruns declarando uma function e achando que ela será executada só com isso, sem ele fazer uma chamada a ela.

Ponto importante: não ser dependente do framework. Aprenda a fazer com ele, mas sem também!

E se a sua empresa resolver mudar de paradigma, ou você mudar de trabalho e lá usarem outros, ou nenhum? Como fica?

Você novamente vai gastar um bom tempo reaprendendo outra ferramenta que poderia ser muito menor, se tivesse alguma idéia de como essas ferramentas fazem o que fazem.

A Inversão de Controle pode ser tua amiga. Há todos os "bons motivos" de se usar um framework e o principal ponto é: não comece por ele, vá aprendendo a base e evoluindo!

iMasters

10 códigos para usar no arquivo functions.php e melhorar seu painel de administração WordPress

Se você quer melhorar seus templates WordPress para torná-los mais interessantes e, acima de tudo, melhorar sua acessibilidade, navegabilidade e usabilidade (especialmente agora com a chegada do Google Panda), é extremamente importante ter alguns códigos à mão para usar no arquivo functions.php de forma a tornar o seu site mais atrativo e funcional.

01. Mostrar o botão "Todas as Opções"

Este truque é bastante interessante. Ele irá adicionar uma nova opção ao seu menu de “Opções” com um link para “all settings”, que vai te permitir ver uma lista completa de todas as opções do seu site, nomeadamente banco de dados etc. Este código torna o menu apenas visível a administradores.

// CUSTOM ADMIN MENU LINK FOR ALL SETTINGS
function all_settings_link() {
    add_options_page(__('All Settings'), __('All Settings'), 'administrator', 'options.php');
}

add_action('admin_menu', 'all_settings_link');

02. Remover notificação de updates para usuários

Este código permite que você remova as notificações de updates do WordPress para os seus usuários, sendo que essas notificações continuarão aparecendo para os administradores do site.

// REMOVE THE WORDPRESS UPDATE NOTIFICATION FOR ALL USERS EXCEPT SYSADMIN
global $user_login;

get_currentuserinfo();

if (!current_user_can('update_plugins')) { // checks to see if current user can update plugins
    add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2);
    add_filter('pre_option_update_core', create_function('$a', "return null;"));
}

03. Modificar a logomarca de login e a URL da imagem

Com este código você poderá mudar facilmente a logomarca da página de login do seu WordPress, bem como a URL dessa imagem e o texto alt da logomarca.

// CUSTOM ADMIN LOGIN HEADER LOGO
function my_custom_login_logo() {
    echo '';
}

add_action('login_head', 'my_custom_login_logo');// CUSTOM ADMIN LOGIN HEADER LINK & ALT TEXT

function change_wp_login_url() {
    echo bloginfo('url');  // OR ECHO YOUR OWN URL
}

function change_wp_login_title() {
    echo get_option('blogname'); // OR ECHO YOUR OWN ALT TEXT
}

add_filter('login_headerurl', 'change_wp_login_url');
add_filter('login_headertitle', 'change_wp_login_title');

04. Customizar a ordem do menu de administração

Você poderá reorganizar a ordem dos elementos do menu de administração do seu WordPress. A única coisa que precisa fazer é clicar num link existente no menu de admin e copiar o URL antes do /wp-admin/. A ordem seguinte representa a ordem do seu novo menu de admin.

// CUSTOMIZE ADMIN MENU ORDER
function custom_menu_order($menu_ord) {
   if (!$menu_ord) return true;
   return array(
        'index.php', // this represents the dashboard link
        'edit.php?post_type=events', // this is a custom post type menu
        'edit.php?post_type=news',
        'edit.php?post_type=articles',
        'edit.php?post_type=faqs',
        'edit.php?post_type=mentors',
        'edit.php?post_type=testimonials',
        'edit.php?post_type=services',
        'edit.php?post_type=page', // this is the default page menu
        'edit.php', // this is the default POST admin menu
  );
}

add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');

05. Remover itens desnecessários do Painel Admin

Remova vários itens do seu painel de controle que você não precisa.

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets() {
    global $wp_meta_boxes;
    //Right Now - Comments, Posts, Pages at a glance
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
    //Recent Comments
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
    //Incoming Links
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
    //Plugins - Popular, New and Recently updated WordPress Plugins
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);

    //Wordpress Development Blog Feed
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
    //Other WordPress News Feed
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
    //Quick Press Form
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
    //Recent Drafts List
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
}

06. Rodapé customizado no Painel Admin

Este truque permite colocar links no texto ou no rodapé do seu painel de administração do WordPress.

// customize admin footer text
function custom_admin_footer() {
    echo 'add your custom footer text and html here';
}

add_filter('admin_footer_text', 'custom_admin_footer');

07. CSS customizado no painel de administração

Poderá fazer as alterações que desejar ao css entre as tags.

/* Change WordPress dashboard CSS */
function custom_admin_styles() {
    echo '';
}

add_action('admin_head', 'custom_admin_styles');

08. Contagem de palavras em artigos

Este truque adiciona um contador do total de palavras publicadas junto da caixa "Right Now", que se encontra no início do painel de administração do WordPress. Muito útil se tiver curiosidade em saber quantas palavras já escreveu no seu site.

function post_word_count() {
    $count = 0;
    $posts = get_posts(array('numberposts' => -1, 'post_type' => array('post', 'page')));
    foreach ($posts as $post) {
        $count += str_word_count(strip_tags(get_post_field('post_content', $post->ID)));
    }
    $num =  number_format_i18n($count);
    // This block will add your word count to the stats portion of the Right Now box
    $text = _n('Word', 'Words', $num);
    echo "
{$num}{$text}
";
    // This line will add your word count to the bottom of the Right Now box.
    echo '

This blog contains a total of ' . $num . ' published words!

'; } // add to Content Stats table add_action('right_now_content_table_end', 'post_word_count'); // add to bottom of Activity Box add_action('activity_box_end', 'post_word_count');

09. Remover a barra de admin do WordPress 3.1

O novo WordPress 3.1 incluiu uma nova opção chamada Admin Bar. Essa barra para o administrador é adicionada ao topo do site quando você está logado. Se quiser removê-la permanentemente, use este truque!

remove_action('init', 'wp_admin_bar_init');

10. Adicionar links na barra de admin

Se você quiser usar a barra de admin, pode usar este truque para adicionar links para páginas ou opções que considera importantes de ter à mão.

function mytheme_admin_bar_render() {
    global $wp_admin_bar;
    $wp_admin_bar->add_menu(array('parent' => 'new-content', /* use 'false' for a root menu, or pass the ID of the parent menu */
                                  'id' => 'new_media', /* link ID, defaults to a sanitized title value */
                                  'title' => __('Media'), /* link title */
                                  'href' => admin_url('media-new.php'), /* name of file */
                                  'meta' => false /* array of any of the following options: array('html' => '', 'class' => '', 'onclick' => '', target => '', title => ''); */));
}

add_action('wp_before_admin_bar_render', 'mytheme_admin_bar_render');

iMasters

De quantos formatos eu preciso para vídeo HTML5?

A tag <video> no HTML5 é algo ótimo. Ela possibilita o playback de vídeos nativos em todos os browsers atuais, ao invés de depender de plugins, como o Flash. Ela abre a porta para vídeos web em dispositivos que não suportam o Flash. E ela também suporta codecs que antes a web não suportava.

Mas se você estiver publicando conteúdo em vídeo, isso pode ser confuso. Para, de fato, suportar vídeo web, quantas versões de saída você precisa criar? WebM, Ogg e MP4? Mas e o iPhone, ou o Android? E versões de bitrates reduzidas/completas?

Não existe uma resposta única para essa pergunta, então, aqui temos um guia simples para te ajudar a escolher as saídas para vídeos em HTML5.

Quais formatos web?

Existem três formatos de vídeo que funcionam nativamente em alguns browsers. Infelizmente, nenhum formato funciona em todos os browsers, então você precisa de pelo menos dois se você quiser ter um suporte significativo para vídeo em HTML5.

Minimamente, você deve usar MP4 + H.264, com AAC ou MP3. O vídeo MP4 roda nativamente no Safari, Chrome, e IE9 (Vista/Windows 7). Também é sua melhor opção para exibir vídeos, caso não tenha Flash, e eles rodam nativamente em muitos dispositivos (iOS, Android, Blackberry, PSP, Xbox, PS3, etc). Utilize o H.264 High Profile para melhor qualidade, e o Baseline Profile, se você quiser que o mesmo vídeo seja executável em dispositivos móveis.

Além disso, use o WebM + VP8, ou Ogg + Theora com áudio Vorbis para outros browsers. O WebM funciona no Firefox (versões posteriores a 4), no Chrome (vcersões maiores do que a 6, ou o Chromium), e no Opera (acima da versão 10.60), e o Ogg funciona no Firefox (a partir da 3.5), no Chrome (a partir da 3), e no Opera (versões posteriores a 10.54).

Se você escolher um, ou outro, qual deles deve usar: Ogg ou WebM?

Na nossa opinião, o WebM é o futuro do vídeo livre. O VP8 é um codec melhor que o Theora, e só vai melhorar a medida que a comunidade de vídeo fique por trás dele. Ter o Google no barco também não atrapalha. Portanto, apesar de o Ogg ser suportado por mais browsers, recomendo que você use, minimamente, MP4 + WebM, ou Ogg. Melhor ambos.

Quais dispositivos móveis?

Mais uma vez, não existe um único perfil para dispositivos móveis que funcione em todos eles. Na verdade, existem mais padrões variáveis para vídeos mobile, do que para vídeos web. Mas, felizmente, algumas receitas bem selecionadas podem cobrir a maioria dos dispositivos móveis modernos.

1. A maioria dos dispositivos móveis modernos suporta MP4/H.264. Isso inclui toda a série iOS (iPhone, iPod, iPad, Apple TV, etc), a maioria dos dispositivos Android, telefones Blackberry modernos etc. Para a maioria deles, tenha o cuidado de utilizar o H.264 Baseline profile. Use o 640×480, ou um menor para iOS e Android, e 480×360, ou menos, para suporte ao Blackberry.

Note que o mesmo arquivo que roda em um iPhone pode rodar na web, via HTML5 (alguns browsers), ou Flash. Então, se você quiser reduzir versões, use o mesmo arquivo. Mas pode ser que você esteja preso com o Baseline Profile para a maioria de dispositivos, e o Main/High fazem uma grande diferença, então, utilizar versões separadas de saída pode ser uma boa idéia, se você quer uma melhor qualidade para cada dispositivo.

2. Use 3GP/MPEG4 para dispositivos móveis mais antigos. A maioria dos Blackberrys e alguns Androids também suportam 3GP, e ele geralmente roda em iPhone/iPod também (uma vez que o iOS roda MP4/MPEG-4 e o 3GP é apenas um sub-conjunto do MP4).

3. Espera-se que o WebM chegue para o Android e outras plataformas móveis em até dois anos. Mas, por enquanto, use MP4 para melhor qualidade no Android.

Recomendação: No mínimo MP4, 640×480 ou 480×360. No máximo, três versões MP4 (480×360, 640×480, 720p + Main profile) mais uma, ou duas versões 3GP (320×240 e talvez 176×144). Veja neste artigo mais sobre configurações específicas de codificação.

E múltiplos bitrates?

Você deve utilizar múltiplos bitrates para entregar vídeos maiores para usuários com conexões rápidas de internet, e vídeos menores para usuários com conexões mais lentas? Se seus usuários estiverem assistindo a vídeos de alta qualidade na web, então a resposta é, provavelmente, sim. Considere usar 2-3 tamanhos e bitrates para conseguir isso, por exemplo, um vídeo com 640×360, e outro com 1280×720.

E o streaming?

Este guia não leva o streaming de vídeo em consideração. RTMP streaming (Flash), Smooth Streaming (Silverlight), e HTTP Live Streaming (iOS), todos eles pedem por vídeos especialmente preparados. Isso está além do escopo deste artigo.

TL;DR

* O mínimo para vídeo HTML5 é MP4 + WebM ou Ogg (ou ambos), usando a versão MP4 para Flash fallback.
* Para suporte móvel, uma saída H.264/MP4 pode te levar longe. 2-3 permitem melhor qualidade e maior compatibilidade.

Recomendações

Aqui estão algumas sugestões de configurações.

1. Suporte a tudo

* HTML5, Flash, Mobile: MP4/H.264, Baseline profile, 480×360 ou 640×480;
* HTML5: WebM ou Ogg.

2. Aumente a compatibilidade

* HTML5, Flash: MP4/H.264, High profile;
* HTML5: WebM;
* HTML5: Ogg;
* Mobile: MP4/H.264, Baseline profile, 480×360 ou 640×480.

3. Faça funcionar em qualquer lugar

* HTML5, Flash: MP4/H.264, High profile;
* HTML5: WebM;
* HTML5: Ogg;
* Mobile: MP4/H.264, Baseline profile, 480×360, para maior compatibilidade;
* Mobile: MP4/H.264, Main profile, 1280×720, para dispositivos iOS mais recentes (iPhone 4, iPad, Apple TV);
* Mobile: 3GP/MPEG4, 320×240 e/ou 177×144, para "não-smartphones"*.

iMasters

JavaScript e linguagens de pré-compilação

Eu sei que JavaScript não é uma linguagem que vai agradar a todo mundo, mas é a linguagem que roda nativamente em qualquer navegador com uma performance que não deixa nada a desejar. O que poderiam reclamar do JavaScript seria no máximo a sintaxe. Particularmente é questão de gosto.

Problemas? Todas as linguagens têm. Porém, como todas que têm uma boa comunidade ativa, ganham melhorias e novas características bem interessantes, assim como as APIs do HTML5 que já estão por aí e o ECMAScript 6 que vai trazer ótimas novidades.

Mesmo considerando toda a questão de gostos pessoais – e respeito muito isso – ainda acho que não podemos fugir da busca pela qualidade para atender uma vontade individual.

Ou seja, assim como para fazermos o melhor não deixamos de escrever em Java para apps de Android, em Objective-C para apps de iPhone, em Ruby para apps em Rails, utilizar qualquer outra pré-linguagem que compile para JavaScript para execução em navegador é algo que não parece ser a melhor opção.

A melhor linguagem que pode ser compilada para JavaScript é o próprio JavaScript. Tenho certeza das minhas interações pelo código e da qualidade do mesmo, assim como posso encontrar outro profissional bom na linguagem para entender o que está acontecendo. Estaríamos falando da mesma linguagem e a qualidade no código seria um facilitador para essa colaboração.

Outro ponto que acredito ser crucial: não somos únicos. Quando um programador sai da empresa, morre ou esteja em qualquer situação em que não escreva mais o código de determinada aplicação ele simplesmente não leva o código junto com ele, a menos que aquilo seja intencional.

O legado de um código é ensinar para uma pessoa nova aquilo o que está acontecendo. Se eu preciso de um novo profissional quando tenho um aplicativo em CoffeScript, qual linguagem eu devo exigir dele? CoffeScript, Javascript ou as duas?

O dia que encontrar um profissional que saiba apenas CoffeScript, vou acreditar que ele é totalmente incompleto e que teria o mesmo nível de quem somente aprendeu pseudo-código, sem me importar com o tempo que ele possui de experiência.

Como ele vai entender a real situação do meu aplicativo e todos os pontos que poderíamos melhorar? Como ele vai saber se tem ali um JavaScript bem escrito e funcional?

Em outras palavras, usar linguagens de pré-compilação me parece um verdadeiro "eXtreme Go Horse", do tipo que se funcionar, tudo bem, não se importando com o que estiver no meio do caminho.

iMasters

Upload progress bar com PHP 5.4

A versão 5.4 do PHP traz inúmeras atualizações e novas características, e dentre elas, está a possibilidade de monitorar o progresso do upload de arquivos via formulários, que antes só era possível mediante instalação de componentes PECL ou aplicando patches no código-fonte do PHP antes de compilá-lo.

Se você fizer uma consulta às configurações do PHP, verá que existem as novas session.upload_progress.enabled, session.upload_progress.cleanup, session.upload_progress.prefix, session.upload_progress.name, session.upload_progress.freq e session.upload_progress.min_freq. Estas variáveis definem o comportamento do PHP no momento da detecção e atualização das informações dos uploads de arquivos.

Para implementar uma barra de progresso que mostrará ao usuário as informações do upload depois que o formulário teve seu envio disparado, fiz algum código para exemplificar o processo. O código foi feito a partir de uma instalação "limpa" do Apache e do PHP.

upload.php (este é o arquivo que contém o formulário e as declarações de CSS e JavaScript necessárias, que podem estar em arquivos separados e chamados via SRC e HREF)
<?php

$is_PHP54_installed = ($x = @ini_get('session.upload_progress.name'));

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP 5.4 Upload Progress Bar Demo<?php echo (!$is_PHP54_installed ? ' (will not working, installed PHP version is ' . phpversion() . ')' : '') ?></title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#upload_progress_status {
  display: none;
  width: 50%;
  margin: 20px 0px 0px 0px;
  overflow: hidden;
}

#upload_progress_status .bar,
#upload_progress_status .bar .progress {
  display: block;
  line-height: 20px;
  overflow: hidden;
}

#upload_progress_status .bar {
  border: 1px solid #000;
}

#upload_progress_status .bar .progress {
  width: 0%;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  font-weight: bolder;
  text-align: center;
}

#form {
  display: block;
}

#loading {
  display: none;
}
</style>

<script type="text/javascript">
<!--
  $j = jQuery;

  upload_progress_status_timer = <?php echo (int)(@ini_get('session.upload_progress.min_freq')) * 1000 ?>;

  upload_progress_status_load = function () {
    try { upload_progress_status_load_XMLHTTP.abort(); } catch (e) {}

    upload_progress_status_load_XMLHTTP = $j.ajax ({ url: "upload_progress_status.php",
      dataType: "json",
      error: function () {
        setTimeout(function () { upload_progress_status_load(); }, upload_progress_status_timer);
      },
      success: function (info) {
        var ups = $j("#upload_progress_status"),
          bu = $j("#upload_progress_status .bytes_processed"),
          cl = $j("#upload_progress_status .content_length"),
          et = $j("#upload_progress_status .elapsed_time"),
          pbp = $j("#upload_progress_status .bar .progress");

        if (info != null) {
          ups.show();

          bu.html(info.bytes_processed_human);
          cl.html(info.content_length_human);
          et.html(info.elapsed_time_human);
          pbp.stop().animate({ width: info.uploaded }, upload_progress_status_timer).html(info.uploaded);

          if (!info.done) setTimeout(function () { upload_progress_status_load(); }, upload_progress_status_timer);
          else ups.hide();
        }
      }
    });
  }

  form_loading = function () {
    $j("#form").hide();
    $j("#loading").show();
  }
-->
</script>
</head>
<body>
<div id="form">
  <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data"<?php if ($is_PHP54_installed) { ?> onsubmit="form_loading(); upload_progress_status_load()"<?php } ?>><?php
  if ($is_PHP54_installed) { ?><input type="hidden" name="<?php echo $x ?>" value="demo" /><?php }

  for ($k=0; $k<=4; $k ) {
    ?>File <?php echo $k 1 ?>: <input type="file" name="files[<?php echo $k ?>]" size="30" /><br/><?php
  }

  ?><input type="submit" value="Send files" />
  </form>

  <?php if (count($_FILES)) echo '<pre>' . print_r($_FILES, true) . '</pre>' ?>
</div>

<div id="loading">Sending...</div>

<div id="upload_progress_status">
  <div class="bar"><div class="progress">0%</div></div>
  <span class="bytes_processed">0</span> of <span class="content_length">0</span><br/>
  <span class="elapsed_time">00:00</span> elapsed time
</div>
</body>
</html>

upload_progress_status.php (este é o arquivo que retornará ao JavaScript as informações do progresso do upload)
<?php

@session_start();

function get_user_readable_filesize ($fs) {
  $fsl = array('bytes', 'KB', 'MB', 'GB', 'PB', 'YB');
  $y = 0;
  while ($fs >= 1024) {
    $fs /= 1024;
    $y ;
  }
  return number_format($fs, $y ? 2 : 0, '.', '') . ' ' . $fsl[$y];
}

if (($info = @$_SESSION[ini_get('session.upload_progress.prefix') . 'demo'])) {
  $info['content_length_human'] = get_user_readable_filesize($info['content_length']);
  $info['bytes_processed_human'] = get_user_readable_filesize($info['bytes_processed']);

  $info['elapsed_time'] = time() - $info['start_time'];
  $info['elapsed_time_human'] = sprintf('%02d', (int)($info['elapsed_time'] / 60)) . ':' . sprintf('%02d', (int)($info['elapsed_time'] % 60));

  $info['uploaded'] = number_format(($info['bytes_processed'] * 100 / $info['content_length']), 2, '.', '') . '%';

  $x = $info['files'];
  unset($info['files']);
  $info['files'] = $x;
}

echo @json_encode($info);

?>
Acrescentei alguns itens no array de informações, que originalmente não existem nas que o PHP cria, como o cronômetro do upload, as informações de tamanho total e já enviado em um formato mais legível, e a porcentagem do total de dados já enviados.

Você pode customizar os arquivos, adicionando estilos CSS, eventos JavaScript, valores de retorno JSON, enfim, o que sua criatividade e necessidade exigirem. O essencial está na variável de sessão que está declarada no arquivo upload.php e no campo hidden declarado no formulário. São eles que tornam possível o monitoramento do progresso do upload no PHP 5.4.0 ou superior.

8 passos para montar seu time vencedor no marketing digital

Retorno com marketing digital, seja ele traduzido em novos contatos de negócios, vendas diretas ou fortalecimento da marca, não depende de trabalhos isolados, mas de planejamento, ações integradas e constante aprimoramento. É como no futebol. Jogadas de efeito, lances individuais e belos gols podem ajudar a ganhar uma partida, mas só um "padrão de jogo" que garanta consistência da defesa, meio de campo e ataque permitirá ao time conquistar vitórias ao longo do campeonato e brigar pelo título.

Para disputar o "campeonato" da internet, seu time de marketing digital também precisa estar bem preparado em três compartimentos: Propaganda e publicidade, conteúdo relevante, monitoramento e análise dos indicadores de desempenho. Todos precisam trabalhar de forma coordenada para seu time marcar gols e evitar sofrê-los.

Propaganda e promoções compõem o ataque, atraindo potenciais clientes. O conteúdo relevante faz o meio campo, cadenciando o jogo e direcionando os clientes para onde mais interessa (contatos, vendas etc.). A defesa é o monitoramento, que vai permitir fazer eventuais correções para melhorar a pontaria do ataque e evitar que o time sofra gols.

É necessário também um bom campo, no caso o seu website. Ele deve ser desenvolvido para facilitar o andamento do jogo, permitindo a você maior controle sobre as ações do seu time. Ter um bom site é como ter o mando de campo.

Como muito bem definiu o técnico de futebol Tite, resultado é consequência de performance.

A seguir, estão oito recomendações para ajudar você a definir o padrão de jogo e garantir a melhor performance para o seu time. São baseadas nos 8Ps do marketing digital, um método criado para auxiliar as empresas a desenvolver o planejamento de marketing digital, desde a definição do público-alvo até o monitoramento, formando um ciclo de aprimoramento e evolução contínua. Todos os detalhes sobre como montar um time vencedor estão no livro "Os 8Ps do Marketing Digital", do "craque" professor Conrado Adolpho.

Pesquisa: Defina o seu público-alvo, o perfil do consumidor/cliente a quem será direcionado o trabalho de comunicação, relacionamento, publicidade e venda.

Planejamento: Formalize tudo. Planejamento, ações, formas de execução, monitoramento e estrutura da equipe responsável em um documento detalhado, que servirá para direcionar o trabalho tanto em relação ao plano geral como para cada um dos responsáveis pela execução. Assim, todos terão uma visão mais clara sobre seu papel e responsabilidades no processo.

Produção: Transforme seu website em uma ferramenta de negócios e não simplesmente em um cartão de visitas. Para isso, é necessário desenvolver uma "arquitetura" que facilite o seu potencial cliente a encontrar as informações que procura, ao mesmo tempo em que o direciona a agir: entrar em contato diretamente, assinar uma newsletter, preencher um formulário, comprar.

Publicação: Crie conteúdo (textos, imagens, vídeos etc) de relevância para o seu público-alvo no site. Essa é a chave para atrair o interesse não só pelo seu site, mas também pelo que sua empresa tem a oferecer.

Promoção: O site está fácil de navegar, com conteúdo relevante? Agora falta divulgar tudo isso para seus clientes em potencial. Há várias formas de promover sua empresa na internet, mas tenha como ponto de partida transformá-lo em referência sobre seu ramo de negócio nas pesquisas do Google.

Propagação: Uma forte característica da internet é o seu poder de rápida disseminação, principalmente por causa da influência das redes sociais. Use isso a seu favor, desenvolvendo campanhas com alto poder de "viralização".

Personalização: Cada cliente ou consumidor em potencial que se cadastra em seu site deixando seu e-mail ou outras formas de contato vale ouro, pois significa que ele consentiu em manter contato com sua empresa. Aproveite essa oportunidade para manter o relacionamento, segmentando os diferentes perfis por grupos de interesses, enviando conteúdo de relevância de acordo com as necessidades de cada um.

Precisão: A internet dispõe de diversas ferramentas para monitoramento dos resultados de marketing digital. O Google Analytics, por exemplo, permite várias formas de analisar as visitas ao seu site, inclusive com o ROI (retorno sobre investimentos). Faça uso desses recursos, estabelecendo os indicadores que lhe permitam acompanhar as características de desempenho mais importantes.

iMasters

Como verificar se a pessoa curtiu sua fan page no Facebook

Se você já reparou que há fan pages no Facebook que permitem o acesso a certos conteúdos somente para quem clicou no botão "curtir" da página, mas sempre quis implementar isso nas suas páginas, pois saiba que este é um processo bem simples.

O Facebook envia a você um cabeçalho chamado "signed_request", que é codificado em base64. O que é preciso fazer é decodificar este string, e a função abaixo faz o processo.
function parsePageSignedRequest() {
 if (isset($_REQUEST['signed_request'])) {
  $encoded_sig = null;
  $payload = null;
  list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
  $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
  $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
  return $data;
 }

 return false;
}

Depois, em qualquer lugar do código HTML da sua página, execute o seguinte condicional abaixo. Dentro do if e do else, exerça sua criatividade, mostrando ou ocultando o que você quiser aos fãs, ou que ainda não são fãs, de sua página.
if (($signed_request = parsePageSignedRequest())) {
 if ($signed_request->page->liked) {
  echo "Obrigado por curtir nossa página! Receba informações exclusivas através do Facebook!";
 } else {
  echo 'Curta nossa página para receber informações exclusivas!';
 }
}

WordPress: 10 dicas para o arquivo .htaccess

O arquivo .htaccess é o arquivo que controla o webserver Apache e é extremamente útil, permitindo realizar uma série de tarefas bem interessantes e favoráveis ao seu site. Nunca se esqueça de que, antes de editar o seu arquivo .htaccess, você deverá sempre fazer um backup dele para evitar problemas futuros.

Remover o www na url

Por razões de otimização para buscadores (SEO), você poderá remover (ou usar sempre) o prefixo www nos endereços URL do seu site. O seguinte truque permite remover esse prefixo www da URL, e redirecionar qualquer URLs com www para a versão não-www automaticamente.
RewriteEngine On
RewriteCond %{HTTP_HOST} !^meusite.com$ [NC]
RewriteRule ^(.*)$ http://meusite.com/$1 [L,R=301]

Prevenir hotlinking

O hotlinking é uma má prática, que consiste em outros blogueiros utilizarem imagens do seu site no site deles, consumindo a sua banda. Quando alguém puxa uma imagem sua, essa pessoa está consumindo a sua banda para proveito próprio. Para prevenir esse abuso, utilize este truque no seu arquivo .htaccess substituindo as URL pelos seus próprios endereços.
RewriteEngine On
#Replace ?mysite.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+.)?meusite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Redirecionar todos os feeds para o Feedburner

A maioria dos sites usa o Feedburner para distribuir os feeds RSS para os seus leitores. Se você usa o WordPress, você deverá redirecionar todos os seus feeds (rss, atom etc) para o seu feed do Feedburner. Modifique as linhas 2 e 3 do código, e depois copie e cole no seu arquivo .htaccess.
<IfModule mod_alias.c>
 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://feedburner.com/seufeed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://feedburner.com/seufeed/
</IfModule>

Criar páginas de erro customizadas

Cansado daquelas páginas de erro padrão que seu site apresenta? Crie alguns arquivos .html com o aspecto e o design que você deseja, carregue-os para o seu servidor, e adicione o seguinte truque no seu arquivo .htaccess:
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

Forçar o download de arquivos específicos

Quando você oferece alguns arquivos como mp3s, arquivos de Excel ou PowerPoint, ou mesmo um Ebook Grátis para download, você poderá forçar o download sem que tenha de aguardar pela decisão do browser sobre o que fazer. Este truque força o download de arquivos .xls e .eps a partir do seu servidor. Poderá editar o código para o tipo de arquivos que desejar.
<Files *.xls>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>
<Files *.eps>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>

Registrar erros de PHP

Este truque é uma forma interessante de registrar erros dos seus arquivos PHP num arquivo de registro (log). Comece criando um arquivo do tipo php_error.log e coloque-o no seu servidor, e depois copie e cole para dentro do seu arquivo .htaccess. Não se esqueça de modificar a localização do arquivo de registros na linha 7 do código.
# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

Remover extensão de arquivos nas urls

As extensões de arquivos podem ser extremamente importantes para desenvolvedores, mas não existe interesse nenhum em você mostrar a extensão de um determinado arquivo para os seus usuários. Este truque irá remover a extensão .html de qualquer arquivo html que você tenha em seu servidor. Obviamente, este truque pode ser facilmente adaptável a outro tipo de extensões, como por exemplo as extensões PHP.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: php, htm, asp

Prevenir listagem de diretórios

Em seu servidor, quando um determinado diretório não contém um arquivo index, o Apache mostra automaticamente uma listagem de todos os arquivos presentes nesse diretório. Se você tiver uma pasta com imagens em seu servidor, se alguém acessar o endereço dessa pasta, poderá ver todo o conteúdo que você tem lá dentro. Se não quer que ninguém veja os arquivos que estão no seu servidor, copie e cole o seguinte de código para dentro do seu arquivo .htaccess.
Options -Indexes

Reduzir o peso das páginas

Você sabia que é possível enviar informação comprimida para os seus usuários, a qual é descomprimida pelo cliente do próprio usuário? Este código irá provavelmente poupar ocupação da banda e reduzir drasticamente o peso das suas páginas.
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Adicionar UTF-8 aos arquivos automaticamente

De forma a evitar problemas de codificação, você pode forçar um determinado tipo de codificação diretamente a partir do seu arquivo .htaccess. Você pode garantir que todos os seus arquivos HTML irão ser renderizados corretamente, mesmo que se esqueça de adicionar uma diretiva às suas páginas HTML.
<FilesMatch ".(htm|html|css|js)$">
AddDefaultCharset UTF-8
</FilesMatch>

Dica bônus: não se esqueça de fazer um backup do seu arquivo .htaccess antes de editar!

iMasters

Você realmente precisa de um aplicativo mobile?

Muitas empresas estão investindo em aplicativos mobile. De bancos a fabricantes de sabão, todo mundo quer ter sua bandeira fincada nas lojas de aplicativos mobile. Esse movimento tem um quê de “corrida do ouro”, com muita gente desenvolvendo aplicativos mobile porque todo mundo está fazendo, sem uma definição clara de objetivos e, o que é mais importante, sem um estudo de alternativas para se atingir esse objetivo.

Existe uma alternativa às aplicações mobile: são os sites mobile. Recomendo que a empresa avalie, antes de iniciar a construção de uma aplicação mobile, se seu problema não pode ser resolvido por um site mobile.

Sites mobile são multiplataforma. Já aplicativos para iPhone não rodam em Android, aplicativos para Blackberry não rodam em Windows Phone. Desenvolver um aplicativo que funcione nessas quatro plataformas significa desenhar uma vez só, porém construir quatro vezes, em linguagens de programação diferentes, com APIs diferentes.

Disponibilizar seu aplicativo nas diversas lojas mobile também significa encarar várias exigências burocráticas.

Um bom site mobile, por outro lado, funciona nas quatro plataformas citadas acima, e tem grande chance de funcionar em qualquer outra, sem esforço extra.

Sites mobile usam uma base de código que é aproveitada para desktops. Se você já tem um site ou aplicativo web que atende as suas necessidades, provavelmente, para ter um site mobile, será preciso mexer apenas no que os desenvolvedores chamam de "camada de apresentação". Caso você não tenha um site ou um aplicativo web e decida construí-lo mobile, vai aproveitar boa parte do seu investimento, se no futuro decidir tê-lo também funcionando em computadores.

Com HTML5, sites mobile podem executar quase tudo o que uma aplicação mobile faz, incluindo acessar o GPS, ler a orientação do dispositivo (se o telefone está em pé ou deitado), guardar dados no telefone, desenhar gráficos, transições, animações, tocar áudio e vídeo, e até funcionar offline.

Quando você precisa de um aplicativo? Existem situações em que construir um aplicativo é essencial:

Está desenvolvendo um jogo pesado

Ainda é muito difícil, com HTML5, construir interfaces tridimensionais, com gráficos de alta qualidade, muito movimento, respostas rápidas e interação com som.

Precisa interagir com o telefone

Não há uma maneira de um site mobile ler a agenda de contatos do telefone, ou as fotos da galeria, por exemplo. Embora existam maneiras de, por exemplo, disparar uma ligação telefônica a partir de um link ou botão.

Necessita de interação precisa com o acelerômetro

Sites mobile, hoje, apenas sabem se o telefone está em pé ou deitado, e mais nada. Não dá para fazer um aplicativo controlado pelo acelerômetro, assim como uma corrida em que o volante é o próprio telefone.

Pretende cobrar por seu aplicativo

Existem alternativas para se cobrar pelo acesso à aplicação ou vender conteúdo dentro dela, e fazem todo o sentido se seu aplicativo for realmente multiplataforma, acessível do computador e do celular. Se você pretende cobrar pelo uso do próprio aplicativo, é bom avaliar se usar as lojas de aplicativos, em que o usuário compra com um clique, já tendo seu cartão de crédito cadastrado, é a melhor solução. Nesse caso, as lojas de aplicativo também vão dar visibilidade ao seu aplicativo.

Seu aplicativo precisa rodar em background

Se seu aplicativo precisa de um serviço rodando em segundo plano, você não conseguirá fazer isso com um site. Por exemplo, se seu aplicativo deve avisar o usuário cada vez que ele se aproximar de um local específico, mesmo que ele esteja fazendo outra coisa no telefone ou esteja com o telefone no bolso.

Há, por outro lado, uma diversidade de situações em que um bom site mobile pode substituir, com vantagens, um aplicativo. Por exemplo, quando o aplicativo só acessa seu site, como fazem muitos aplicativos de internet banking, que são exatamente iguais ao site mobile do banco. Mesmo que seu site seja um aplicativo web razoavelmente complexo, com animações, gráficos e interações, é muito provável que seja possível fazê-lo funcionar em dispositivos móveis, atendendo a uma variedade de plataformas com um único esforço de investimento.

Avalie alternativas antes de construir um aplicativo mobile. Talvez você possa, com um site mobile, atingir um público muito maior, com um investimento menor, e ainda tenha uma drástica redução nos custos de manutenção e atualização do aplicativo.

iMasters

A importância de adotar os padrões e recomendações do W3C ao construir um website


Adobe lança o Edge, ferramenta que cria animações no padrão HTML5


A Adobe liberou segunda-feira (1°) uma versão de prévia do Edge, uma ferramenta voltada especificamente para criar animações no padrão HTML5 e que pode ajudar a diminuir a onipresença do Flash na web.

Além do HTML5, o Adobe Edge utiliza outros padrões web como CSS3 e JavaScript para criar as animações. Os interessados em testar o Adobe Edge podem baixá-lo no Adobe Labs ou esperar a versão final, que será lançada no ano que vem.

O programa parece ser um ótimo plano de contingência se o as habilidades do HTML 5 passarem a ser mais vantajosas e mais adotadas do que as do Flash.

Veja uma animação feita com HTML, JS & CSS.

O Adobe Edge está disponível para OS X e Windows e também deve ser utilizado em jogos.

iMasters

Como escolher a plataforma de loja virtual ideal para o seu negócio?

Um dos pilares que sustentam uma operação de comércio eletrônico é a loja virtual, também conhecida como plataforma. A plataforma representa tanto a frente de loja que o usuário irá acessar para realizar suas compras, quanto a ferramenta de gestão para o lojista administrar seu dia-a-dia. Ela também é responsável por apresentar seus produtos aos usuários e por disponibilizar os meios de pagamento a quem quiser comprar. Sendo que uma das grandes dificuldades das empresas que desejam iniciar no comércio eletrônico é qual plataforma escolher, principalmente devido à grande variedade de preços e de modelos de negócio.

Atualmente podemos citar quatro principais modelos de negócio: aluguel da licença de uso, venda da licença de uso, venda do código-fonte e código aberto.

O modelo de aluguel da licença de uso é o mais comum, no qual as empresas desenvolvem uma plataforma padrão e comercializam a licença de uso por meio do pagamento de uma taxa de instalação (ou set-up) e uma mensalidade que, normalmente, está vinculada ao tráfego da loja virtual (por exemplo: pageviews - número de impressões de página).

Quanto ao modelo de venda da licença de uso, ele é similar ao modelo de aluguel, mas sem uma mensalidade. Nos dois primeiros modelos apresentados, o código-fonte é de propriedade da empresa que desenvolveu, portanto, qualquer ajuste ou evolução que o lojista queira realizar deverá fazer com essa mesma empresa.

Com relação ao modelo de venda do código-fonte, o investimento inicial realizado será para aquisição da posse dos códigos-fonte da desenvolvedora proprietária, que dará o direito de evoluir ou realizar ajustes na plataforma por qualquer empresa ou profissional capacitado na tecnologia desenvolvida.

Por fim, existem plataformas de código aberto que estão disponíveis na internet a custo zero e dão direito a posse dos códigos-fonte. Nesse modelo, será necessário contratar uma empresa especializada na plataforma de código aberto escolhida (por exemplo: Magento) para realizar as customizações necessárias ao seu negócio e implantá-la.

Para todos os modelos existe uma grande variação no investimento inicial e mensal, que muitas vezes está diretamente relacionada à qualidade dos serviços da desenvolvedora e ao nível de customização permitido na plataforma. O importante é sempre avaliar como seus concorrentes estão se posicionando, qual tende a ser o melhor modelo para o produto que será vendido e o público-alvo, e qual o orçamento disponível.

Uma dica é de não investir mais de 25% do total da verba disponível para todo o projeto na plataforma. Mas não se esqueça de que, independentemente do modelo escolhido, deve ser feita uma avaliação das desenvolvedoras que o oferecem e nunca deixar de planejar toda a operação, levando em consideração os outros pilares: logística, atendimento, marketing e produto.

iMasters

Não tenha um site, tenha apenas uma fanpage no Facebook! Mesmo?

Vale a pena desativar o seu site e manter apenas a página no Facebook?

Algumas empresas e agências já optaram por não utilizar mais websites institucionais: seus domínios levam diretamente às suas páginas dentro do Facebook. Um estudo do final de 2010 também apontou que os sites se tornarão "cada vez mais irrelevantes". Mas será que é essa uma boa estratégia?

Ter a página no Facebook como "site oficial" é algo ousado, coerente com o cenário atual em que as mídias sociais têm relevância estratosférica e também aparentam vanguarda. De fato, as páginas corporativas no Facebook são muito versáteis e, com um trabalho bem feito, é possível disponibilizar galerias de fotos e vídeos, itens dinâmicos em Flash, textos, imagens, iframes, debates, enquetes e muito mais.

Só que alguns fatores devem se considerados antes de correr para o Facebook e abolir aquele site (supostamente sem graça) da sua empresa:

Segurança

Você investe pesado para que a página do seu negócio no Facebook fique impressionante, conquista milhares de fãs e engaja o pessoal, gerando muito buzz e visitas. Mas, e se o Facebook mudar as regras das páginas? Qualquer mudança pode fazer sua personalização ir por água abaixo. E se o Facebook for hackeado?

SEO

Você pode até fazer um recomendável redirecionamento 301 em seu domínio, mas mesmo assim o conteúdo da sua página no Facebook não será indexado pelos mecanismos de busca. O que isso significa? Perder muitas, muitas e muitas oportunidades de ganhar visitantes.

Flexibilidade

Mesmo sendo bastante versáteis, as páginas do Facebook jamais serão flexíveis como os websites (que são 100% personalizáveis). Você não poderá, por exemplo, utilizar a paleta de cores da sua marca ou oferecer áreas de acesso restrito.

Mensuração

As estatísticas fornecidas pelo próprio Facebook são pobres. Já a instalação e configuração do Google Analytics nas páginas do Facebook podem ser uma dor de cabeça e ainda não há como saber se os dados obtidos serão precisos, principalmente devido ao modelo de navegação por abas.

Personalidade

Identidade visual, recursos inovadores, conteúdo exclusivo... grande parte do que ajuda a criar a personalidade de uma marca na internet acaba se perdendo, pois todas as páginas seguem o mesmo padrão azulão do Facebook, com a mesma disposição de elementos presente em todas as outras páginas corporativas dentro da mídia social.
Restrição

Temos mais de 80 milhões de pessoas utilizando a internet no Brasil. No entanto, menos de 10% delas utilizam o Facebook e, para visualizar completamente e aproveitar todos os recursos das páginas corporativas, os usuários precisam ter conta e estarem logados na mídia social. Essas páginas são muito importantes para as empresas porque atingem um público que gosta de se engajar e compartilhar informações, mas a mídia social no Brasil ainda está transitando entre a fase de early adopters e maioria inicial. Ou seja, a experiência plena com as páginas corporativas do Facebook fica limitada aos cerca de 7 milhões de usuários brasileiros, excluindo todo o restante da população brasileira conectada.

Fico muito curioso para saber quais são os argumentos dos defensores da abolição do site com adoção da página no Facebook, porque sinceramente, só vejo vantagem em ter ambas funcionando paralelamente, complementando-se. O que você acha? Deixe seu comentário!

iMasters

Os 10 mandamentos dos sites corporativos

Sempre que uma nova empresa é criada ou quer reformular seu site corporativo, surgem muitas dúvidas de como deixá-lo atrativo e bem elaborado. Confira então os 10 mandamentos para que ele fique funcional e atraente.

1º mandamento: Não deixarás o site pesado.

Mesmo sua empresa tendo uma internet muito boa, seu cliente pode não ter. Ainda existem pessoas que usam internet discada, e um site pesado demora muito para abrir. Isso pode fazer com que potenciais clientes simplesmente desistam de acessá-lo.

2º mandamento: Não poluirás seu site.

Tenha em mente que o chique é ser simples. Um bom site corporativo não tem que ter 10 mil cores diferentes ou 500 efeitos de deixar qualquer um de boca aberta. Bom é aquele que tem poucas cores e faz com que elas sejam harmoniosas, sem agredir os olhos dos internautas. Quanto aos efeitos especiais, use-os com moderação. Tudo o que há em excesso, em vez de ser moderno, pode ser irritante.

3º mandamento: Testará seu site em vários browsers.

Para alguns profissionais de TI, é difícil entender por que ainda existem pessoas que insistem em utilizar o Internet Explorer como browser. Por isso, lembre-se de testar seu site nos principais browsers para ter certeza de que, independentemente do browser utilizado pelo internauta, ele verá o site da forma correta.

4º mandamento: Não deixará seu site uma baderna.

O site é a fachada de sua empresa na internet. Deixá-lo bagunçado é o mesmo que receber um cliente num escritório sujo e desorganizado. A impressão não será boa, e isso pode acarretar no sumiço deles.

5º mandamento: Site não é lugar para brincar de esconde-esconde.

Uma das piores coisas é ficar escondendo links importantes. Quanto mais prático seu site for, mais o cliente irá gostar. As pessoas tendem a não ter muita paciência na internet, pois a associam a algo ágil e prático. Quanto menos cliques, melhor.

6º mandamento: Revisará todo o texto que for publicado.

Os textos de um site devem ser muito bem escritos. Uma vírgula no lugar errado pode fazer com que o cliente entenda erroneamente o que se quis dizer. Tome cuidado também com os erros ortográficos, que são um dos maiores “pecados” que seu site poder ter. Isso transmite claramente uma imagem de descaso e de falta de profissionalismo por parte de sua empresa.

7º mandamento: Responderás os e-mails de contatos feitos pelo site.

Não responder os e-mails que foram enviados pelo site pode lhe trazer alguns problemas. Primeiramente, o cliente poderá acreditar que o site não está funcionando direito e com isso não fazer uma segunda tentativa. Ou, pior ainda, pode acreditar que está havendo um descaso por parte da empresa.

8º mandamento: Não colocarás aquilo que não podes oferecer.

Não pense que quanto mais serviços você colocar em seu site corporativo, mais bonito ele ficará. Se algum cliente entrar em contato solcitando um serviço anunciado no site que a empresa não pode oferecer, o descrédito será total.

9º mandamento: Terás referências.

Atualmente, as pessoas sempre procuram referências antes de comprar ou de solicitar qualquer tipo de serviço. Por isso, é interessante ter uma página na qual se apresente clientes satisfeitos. Colha depoimentos e os publique com autorização dos clientes.

10º mandamento: Integrará seu site com mídias sociais.

As mídias sociais farão o papel de “outdoor eletrônico” para sua empresa, enquanto o site será sua sede. A boa integração entre ambos é sempre importante, pois a partir das mídias sociais você atrairá novos clientes e manterá os atuais sempre atualizados.

Por fim, procure uma boa empresa para criar e para atualizar seu site corporativo. Profissionais “quebra-galho” não darão conta do recado. Lembre-se da importância que um site tem para o seu negócio.

iMasters

E-commerce e a Realidade Aumentada

Já imaginou se o mundo físico e o mundo virtual se misturassem, e dessa união surgisse um novo ambiente? Essa é a proposta da Realidade Aumentada, que vai ao encontro das intenções do e-commerce, que surgiu com o intuito de tornar virtual uma operação física.

No entanto, essa transformação do processo de compra em uma operação online deixa algumas lacunas não preenchidas na experiência de compra do internauta. A falta de contato físico com determinados tipos de produto pode causar receio em efetuar a compra via internet.

Produtos como livros e CDs são chamados commodities, por não terem diferença alguma entre um exemplar e outro. Em outras palavras, não é preciso experimentar vários exemplares de um livro ou de um CD para escolher o ideal. Todos possuem o mesmo conteúdo e o mesmo nível de usabilidade e aderência ao comprador.

Por outro lado, existem produtos cujo processo de compra envolve mais do que o produto em si. É levada em conta sua utilização dentro de determinado contexto, ou junto ao consumidor. Como exemplos dessa categoria temos os produtos ligados à decoração e ao vestuário.

Falando em decoração, imagine que você queira pintar a sua casa. Nem todos possuem a capacidade de olhar uma sala vazia e com paredes brancas e imaginá-la pintada e decorada. Essa questão dificulta o processo de compra de produtos nessa área e, geralmente, recorre-se a um profissional de decoração, que vai até a loja com você, te mostra as cores, texturas objetos etc. Mas, em um mundo online, não se pode experimentar, testar.

Nesse contexto, a Realidade Aumentada tem como função auxiliar o consumidor no processo de escolha do produto, dando a ele mais segurança para efetuar a compra.

A Suvinil é um exemplo de empresa que anteviu essa tendência e lançou, em seu site, um aplicativo que simula as cores das tintas nas paredes da casa do usuário, basta que ele envie a foto do cômodo para fazer a simulação.

Outra categoria que enfrentou dificuldades e vem se adaptando a elas desde sua inserção no comércio eletrônico é a de vestuário.

A primeira opção que as lojas virtuais dessa categoria encontraram foi a de expressar em centímetros as medidas de seus produtos, uma vez que não existe um padrão entre o que é P, M, G ou GG. Uma alternativa eficaz, mas que foi complementada pela Realidade Aumentada.

Confira no vídeo abaixo a solução de realidade aumentada desenvolvida pela Zugara, uma empresa norte-americana especializada no desenvolvimento de softwares deste tipo.

O recurso de Realidade Aumentada pode atuar como um forte motivador de consumo, sobretudo para segmentos que demandam uma experiência mais próxima com o produto.

O e-commerce, em sua essência, é a reprodução, em ambiente virtual, de um processo tipicamente físico. Desde seu surgimento, as lojas virtuais buscam tornar a experiência da compra online o mais próxima possível de como ela seria pessoalmente. Essa é justamente a proposta da Realidade Aumentada e, por isso, ela deve ser vista como o próximo passo a ser dado em direção a um mercado virtual com cada vez menos lacunas separando-o do mercado físico.

iMasters