Comparação entre Servidores de Hospedagem de Sites

Uma dúvida que muitas pessoas tem depois de desenvolver um projeto web é onde esse projeto pode ser hospedado, levando em consideração preço, suporte, disponibilidade e recursos dos planos de hospedagem.

Fiz uma lista de algumas empresas de hospedagem de sites com algumas comparações baseadas em experiência própria e em comentários na internet.

Locaweb

A Locaweb é uma das marcas mais conhecidas no Brasil, não só pela hospedagem mais uma diversa gama de serviços relacionados à internet como e-mail marketing, atendimento on-line, loja virtual e help desk.

A Locaweb tem um programa de parceria que se você for uma empresa de desenvolvimento de websites e tiver 5 sites ou mais hospedados com eles, você entra na lista de desenvolvedores parceiros, lista essa que pode render futuros clientes.

Espaço e transferência ilimitada. Domínios Ilimitados (para o mesmo site). Envio de 2 mil e-mail marketing por mês.

Em relação ao suporte, pode ser efetuado via ticket, chat ou telefone, e também existe um wiki com bastante conteúdo que ajuda bastante os usuários a conhecer vários recursos disponíveis nos planos de hospedagem.

A desvantagem é mesmo o preço, se você tem dinheiro e pode pagar, provavelmente você será feliz na Locaweb.

Endereço: http://www.locaweb.com.br

Hostgator

A Hostgator é também uma empresa reconhecida em todo o brasil com e presa bastante pela qualidade dos seus serviços mas à um custo acessível, você só terá problemas se seu site/blog tiver realmente muitos acessos e com bastante recursos como imagens e flash.

Todos os planos tem espaço e transferência ilimitada, os valores ficam bem mais em conta se for pago 3 anos de uma vez, tem planos até com SSL e IP dedicado incluso.

O suporte via chat responde rapidamente e sempre se mostrou bastante eficaz.

Endereço: http://www.hostgator.com.br

BR Data

Bom, eu nunca hospedei meu site na BR Data, mas achei interessante incluir esta empresa nesta lista porque ela possui preços realmente baixos e competitivos, com apenas R$ 36,00 você contrata 1 ano de hospedagem, quase o preço de um domínio. Aconselho esta empresa caso você precise hospedar um site pessoal ou se você está aprendendo tecnologias web e precisa de um servidor para se aprimorar nos estudos.

Endereço: http://www.brdata.net

Publicado em Dicas | Deixar um comentário

Como medir o tempo de carregamento de um site?

Você trabalha a performance de seus sites, revisa o código, consultas ao banco, gasta um bom tempo para que o site possa ser carregado mais rapidamente e também consuma menos recursos do servidor. Mas como medir isso?

Existe um serviço on-line que mede tanto o tempo de carregamento total de um site, como o tempo de cada recurso (como javascript, css e imagens). O endereço do serviço é: http://tools.pingdom.com/

Além do tempo de carregamento, o site tem a ferramenta de testes de DNS e também ping/traceroute.

Publicado em Desenvolvimento Web | Deixar um comentário

Ganhando performance no wordpress com W3 Total Cache

VelocímetroRecentemente tive que melhorar a performance de um blog wordpress e utilizei o plugin W3 Total Cache. Ele cria cache das páginas, banco de dados e objetos, minifica o html, javascript e css do site, e também junta todos os arquivos javascript e css interno em um único arquivo. Com tudo isso o carregamento do site fica muito mais rápido.

Baixando o plugin

Download na página oficial de plugins do wordpress:
http://wordpress.org/extend/plugins/w3-total-cache/

Configurando o W3 Total Cache

Primeira coisa que precisamos fazer é desabilitar o modo preview, assim estamos ativando o plugin em todo o blog.

Page Cache

Esta opção cria uma página estática para cada uma página do blog. Na primeira vez que uma página é aberta, é criada uma versão estática dela para que as próximas pessoas que abrirem a mesma página, ela não precise se montada novamente, apenas visualize o cache salvo.

Minify

Esta opção diminui o tamanho dos arquivos javascript, css e html. A técnica consiste em remover todos os caracteres desnecessários como espaços em branco, tabulações, quebra de linhas e também os comentários. Alem da remoção de caracteres, o tamanho do nome das variáveis também é diminuído com a técnica de ofuscar, assim a primeira variável se chamará ‘a’, a segunda ‘b’ e assim por diante.

Obs: seus arquivos originais são mantidos intactos, é criado um novo endereço com os arquivos minificados.

Database Cache

O database cache é um dos mais importantes, um blog que tem um tráfego muito intenso, faz inúmeras consultas ao banco, tornando-o lento. Está opção salvará em cache consultas feitas ao banco de dados, evitando que repetidas consultas sejam feitas ao banco de dados.

Object Cache

Opção que aumenta a performance de sites dinâmicos que utilizam a API do Object Cache.

Browser Cache

Esta opção dirá para o navegador quanto tempo o blog e todo seu conteúdo (como imagens) deverá ser mantido no computador do visitante, assim nas próximas páginas que o mesmo vistante navegar no seu blog, ele não precisará carregar novamente os arquivos que ele já baixou.

Calculando os ganhos

Depois de todo o trabalho feito, como medir quanto de performance você ganhou? Existe uma ferramenta on-line para calcular o tempo de carregamento de um site, você pode acessar ela através do endereço: http://tools.pingdom.com.

Publicado em Desenvolvimento Web, jQuery | Com a tag , | Deixar um comentário

Máscara para Formulários em jQuery

Neste post vou mostrar um plugin bem simples mas que agrega um valor muito grande aos formulários dos nossos sites. O plugin que usaremos é o Masked Input.

Na configuração do Masked Input, você determina qual será a formatação preenchida em um campo do formulário, assim se você tem um campo  que deverá ser preenchido um telefone, você passa a seguinte formatação: “(99) 9999-9999″, agora o usuário só poderá digitar um telefone neste campo. A máscara alem de facilitar a digitação escrevendo apenas os números, também limita o campo.

Download:

Como usar:

Agora que você já fez o download, você precisa incluir o plugin dentro da tag head no html do seu site para poder usá-lo.

Incluindo os arquivos necessários:

<!-- jQuery carregado diretamente do google -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- Masked Input -->
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

Ativando a máscara em um input

<script>
$(document).ready(function() {
   $("#data").mask("99/99/9999");
   $("#telefone").mask("(99) 9999-9999");
});
</script>

Inputs que receberão a máscara

<form>
   <input id="data" name="data" />
   <input id="telefone" name="telefone" />
</form>

Configurações

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

Veja o demo funcionando no site do desenvolvedor.

Publicado em Desenvolvimento Web, jQuery | Deixar um comentário

Hacks e filtros em CSS para o Internet Explorer

Um filtro ou hack CSS é o que nos possibilita fazer um navegador específico ou um grupo de navegadores exibir ou ocultar uma regra ou declaração do CSS.

Os hacks se baseiam em bugs e diferenças existentes na implementação de cada navegador.

Utilize hacks sensatamente

Muitos desenvolvedores ao ver algo não funcionar em um navegador específico, recorrem imediatamente à hacks. Mas devemos ter cuidado, muitas vezes o erro está em nosso próprio código e não no navegador. O ideal é analisar-mos nosso CSS, caso realmente haja um problema no CSS do navegador, procure em livros ou mesmo na internet a maneira mais indicada de resolver o problema.

Se a unica alternativa for mesmo usar um hack ou filtro, utilize de forma controlada.

Internet Explorer 6

Alfinetadas no IEDe longe o IE 6 é o navegador que causa mais dor de cabeça aos desenvolvedores atuais. Até a microsoft recomenda a não utilização do IE 6, mas infelizmente ainda é usado nos dias de hoje, principalmente por empresas que usam o Windows XP e não atualizam o navegador.

Apesar de todos os problemas, existem varias maneiras de resolver os bugs do IE sem a utilização de hacks. Antes de usá-los dê uma pesquisada em como resolver o problema específico.

Lista de Hacks

Segue uma lista de hacks que podem ser usados no Internet Explorer.

Underline – o hack do IE 6

#elemento{
  width: 100px; /* funciona em todos os navegadores */
  _width: 90px; /* funciona apenas no IE6 */
}

Asterístico – o hack do IE 6 e IE 7

#elemento{
  width: 100px; /* funciona em todos os navegadores */
  *width: 90px; /* funciona apenas no IE6 e no IE7 */
}

 

Filtros do Internet Explorer

Todos as versões do IE

<!--[if IE]> // Funciona em todos as versões do IE
  <link rel="stylesheet" type="text/css" href="iehack.css" />
<![endif]-->

Uma única versão

<!--[if IE 7]> // Funciona só no IE 7
  <link rel="stylesheet" type="text/css" href="ie7hack.css" />
<![endif]-->

Versões anteriores

<!--[if lt IE 8]> // Funciona apenas no IE com versão menor que 8 (o IE 8 não é executado neste exemplo)
  <link rel="stylesheet" type="text/css" href="ielessthan8hack.css" />
<![endif]-->
Publicado em Desenvolvimento Web | Deixar um comentário

Mudanças na Campus Party Brasil 2012

Foi divulgado ontem que a 5ª edição da Campus Party não será mais realizada no Centro de Exposições Imigrantes, agora o evento vai para o Anhembi Parque, que tem capacidade para aproximadamente 8 mil campuseiros em 70 mil m². Segue foto e algumas informações sobre o local.

Anhembi Parque o novo local do Campus Party 2012Av. Olavo Fontoura, 1.209, Anhembi Parque – Santana, São Paulo

Tem um mapinha em pdf bem legal que ensina você como chegar no Anhembi Parque, ou você pode se localizar através do google maps.

Mas calma que as mudanças não param por aí, a data do evento também mudou e agora a Campus Party Brasil 2012 será realizada de 6 até 12 de fevereiro de 2012. A partir do dia 22 de agosto nós já poderemos fazer nossas inscrições.

Fim da filaOutro detalhe bem importante é que não teremos mais aquela fila interminavel que consumia um dia inteiro apenas para entregar as credenciais. Agora receberemos nossas credenciais em casa, entregue pelos correios.

Fique atento no site oficial que conta com um contador regressivo para o lançamento do website da Campus Party Brasil 2012.

Publicado em Notícias | Com a tag | 1 comentário

Detecção facial com jquery

O plugin jquery que venho apresentar hoje, é muito útil para aplicativos de redes sociais, ele é capaz detectar se existe faces em uma foto e nos mostra qual o posicionamento de cada face.

O funcionamento do reconhecimento de face deste plugin jquery é parecido com o que agente já conhece nas redes sociais como o orkut e facebook. A detecção nos testes que realizei se mostrou bem rápida, ao clicar no botão, rapidinho ele já mostrou os rostos da foto com um quadrado em volta.

Como funciona

É necessário incluir 4 arquivos em sua página.

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>

Agora já podemos usar nosso plugin de reconhecimento facial.

<script>
    $(function() {
        var coords = $('#myPicture').faceDetection();
        console.log(coords);
    });
</script>

Quando chamamos a função faceDetection o plugin procura faces em toda a foto e depois de encontradas, traz de retorno as coordenadas de todas as faces. Segue uma foto de exemplo que possui 2 faces:

Reconhecimento facial com jquery

O plugin de detecção de face dá o seguinte retorno para que possamos manipular da maneira que quisermos:

'0' ...
	'x' => "47"
	'y' => "63"
	'width' => "69"
	'height' => "69"
	'positionX' => "286.922577945233"
	'positionY' => "63.485156433244995"
	'offsetX' => "518.422577945233"
	'offsetY' => "258.485156433245"
	'confidence' => "8.13876"
	'neighbour' => "undefined"
'1' ...
	'x' => "198"
	'y' => "96"
	'width' => "77"
	'height' => "77"
	'positionX' => "438.0552182748371"
	'positionY' => "95.8862892293751"
	'offsetX' => "669.5552182748371"
	'offsetY' => "290.8862892293751"
	'confidence' => "7.8083839999999975"
	'neighbour' => "undefined"

Veja o demo deste plugin e depois faça download.

Publicado em Desenvolvimento Web, jQuery | 2 comentários

Os 8 Sliders em jquery mais usados

Sliders são galerias (de imagens ou não) onde o conteúdo fica se reversando de forma automática ou manual, guiado por ícones, botões, textos ou thumbnails.

O bom é que podemos colocar um slider em um espaço de destaque e ocupar pouco espaço mostrando um conteúdo relevante aos usuários.

Dica: se você tiver um bom conhecimento em HTML e CSS, você pode criar(ou modificar) a interface e usar apenas o código jquery do slider, que é quem possui todas as funcionalidades.

Segue a lista dos 8 sliders feitos em jquery que são mais usados nos dias de hoje:

Slide Deck

Slide DeckVer DemoDownload
Slider bonito e poderoso, o conteúdo é dividido em abas e dentro de cada aba ainda pode conter um slider interno, como na segunda aba do exemplo acima.

Galleria

Galleria jQueryVer DemoDownload
Galleria é um plugin para visualização de fotos que possui vários recursos muito bons. O primeiro botão do lado esquerdo mostra todas as fotos da galeria em miniatura para o usuário poder pular direto pra ela quando clicar, o segundo botão é para passar as fotos automaticamente, o penúltimo botão mostra as fotos em uma janela flutuante(na própria página) e o ultimo botão maximiza o slider em tela cheia.

Slider Content

Slider que suporta conteúdo htmlVer DemoDownload
Esse daqui é bem legal porque ele suporta um conteúdo html como imagens, textos e links como mostra na figura acima.

Feature Content

Feature content sliderVer DemoDownload
Este plugin é bem completo, possui a imagem de destaque com título e resumo, e a navegação fica ao lado direito a thumbnail e título em cada item.

Feature List

Feature ListVer DemoDownload
Feature List é daqueles plugins que já vem pronto, se você customiza-lo ótimo, mas se for usar do jeito que ele vem já fica bonito, ele é composto por 3 abas com direito a ícone, titulo e resumo.

jFlow

Slider jFlowVer demoDownload
Com certeza o jFlow não poderia faltar nesta lista, este slider é pra quem precisa usar um numero variável de imagens com ou sem um título.

Supersized

Supersized jQueryVer DemoDownload
Esse aqui tem um propósito diferente, ele ocupa 100% da página funcionando em modo de tela cheia. Ele redimensiona proporcionalmente a imagem até que ocupe todo o espaço, a navegação tem suporte ao teclado, carrega as imagens em background e possui integração com o Flickr.

Easy Slider

Easy SliderVer DemoDownload
Como o nome sugere, ele é bem simples e fácil de usar, você pode usar a navegação por setas como na imagem acima ou por navegação numérica, usar repetição continua (ou não), e também dizer se quer passar de forma automática.

Publicado em Desenvolvimento Web, jQuery | Deixar um comentário

Por que usar frameworks?

Bom pessoal, inicialmente gostaria de deixar claro o que é um framework, eu mesmo no inicio dos meus estudos em desenvolvimento web não entendia direito o que era um framework, confundia muito frameworks com IDE de desenvolvimentos, etc.

Em busca de uma explicação formal para FRAMEWORKS, encontrei no Wikipédia o seguinte:

Um framework, ou arcabouço, em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.

Um framework não passa de um monte de arquivos organizados, com um monte de funções, rotinas e variáveis inclusas, que servem para nos poupar o tempo de “reinventar a roda”, diversas e diversas vezes, para cada novo projeto.

Quando eu estava iniciando a minha carreira de programador web, eu não gostava nem de ouvir alguém falar que iria usar um framework para desenvolver algo, eu logo pensava que isso era coisa de quem não sabia programar (meus pensamentos de programador sem experiência). Com o passar do tempo eu fui me cansando de toda vez que iria desenvolver um site ou um sistema, ter que criar os velhos módulos de autenticação, autorização, etc. Além do mais, tinha que me preocupar com toda questão de segurança, desempenho e compatibilidade, sempre, sempre e sempre. Eis que resolvi desenvolver minhas funções pré-prontas, ai se foram horas, dias e várias linhas de código escritas para evitar ter que reescrever sempre as mesmas coisas ao desenvolver um novo projeto. Criei umas coisas bem bacanas, mas com um tempo percebi que as minhas funções não eram tão flexíveis, e eu não poderia usa-las em algumas situações especiais.

Eis que foi contratado um novo designer na empresa onde trabalho, e ele trouxe consigo uma boa bagagem de desenvolvimento com framework e nos sugeriu utilizar o mesmo para nossas novas atividades na empresa. Confesso que no inicio não gostei muito da ideia, mas disse a ele que se nos provasse que valia apena, nós usaríamos.

Assim o milagre aconteceu, o mar se abriu, logo no primeiro projeto desenvolvido com um framework eu descobri a beleza da: redução do tempo de desenvolvimento, níveis de abstração, código testado, extensibilidade, segurança, dentre várias outras. Percebi o quanto um framework poderia agilizar o desenvolvimento dos nossos projetos, e ainda melhor, já incluso todo questão de segurança e compatibilidade.

Então agora eu respondo a pergunta que fiz no inicio. Por que usar frameworks?

Em minha opinião você DEVE usar frameworks SEMPRE. Você vai evitar estar reescrevendo códigos desnecessários e focar realmente nas regras de negócio da sua aplicação.  Script que normalmente você passava 30 minutos para escrever, você vai passar a escrever em 5 minutos.

Hoje eu utilizo o Zend Framework para desenvolvimento de sistemas. Mas existem vários outros frameworks legais, acho que cada um deve procurar e utilizar aquele que mais se familiarizar.

Publicado em Dicas | Com a tag , | 2 comentários

Múltiplos Backgrounds com CSS3

Uma de várias vantagens que o CSS3 traz pra nós que desenvolvemos websites é a possibilidade de incluir vários backgrounds (imagens de fundo) em um mesmo elemento (div por exemplo).

A sintaxe para ter um elemento HTML com múltiplos backgrounds é a seguinte:

#multiplosBackgroundsCSS3 {
    background:
    url(cima.png) top left repeat-x,
    url(baixo.png) bottom left repeat-x,
    url(esquerda.png) top left repeat-y,
    url(direita.png) top right repeat-y;
}

Podemos ver que é muito parecida com a sintaxe do CSS anterior, basta adicionar vírgulas e inserir novas imagens de fundo em nosso elemento HTML.

Um conselho pessoal: apenas use múltiplos backgrounds para incrementar a aparência do site, alguns navegadores antigos como o Internet Explorer 8 (que nem é tão antigo assim) não suportam esta propriedade do CSS3. Então se seu site depender disto, muitos usuários não vão achar seu site legal.

Publicado em Desenvolvimento Web | Deixar um comentário