Como determinar o quanto seu site precisa de espaço em disco e tráfego mensal no plano de hospedagem

(1)

Como determinar o quanto seu

site precisa de espaço em

disco e tráfego mensal no

plano de hospedagem

Esta é uma pergunta que você precisa de resposta antes de escolher a empresa que você vai hospedar o seu site.

Você precisa analisar o conteúdo que o seu site irá ter. É só texto? Imagens? Áudio e vídeo?

Textos não precisam de muito espaço. Imagens precisará de um pouco mais de espaço. Já arquivos de áudio e vídeo, você tanto precisará de espaço como tráfego.

Muitas empresas oferecem uma grande quantidade de espaço em disco, mesmo que você nunca vá utilizá-la toda. Se alguém for utilizar todo esse espaços disponível, os servidores poderão não ser capazes de gerenciá-los.

Você verá uma média de espaço em disco e tráfego que estão sendo oferecidos. Uma empresa pode estar oferecendo 1GB de espaço, enquanto outro oferece apenas 500MB, e ambos com o mesmo preço. O segredo é a qualidade do serviço, então não olhe só para o que está sendo oferecido.

Uma regra de forma geral no ramo de hospedagem é que 2MB é o suficiente para hospedar 10 páginas e 4 ou 5 imagens. Usando essa idéia, você poderá derterminar o quanto de espaço em disco você precisará para hospedar seu site.

Você pode calcular o seu tráfego da mesma forma. Tenha certeza que você entende bem a diferença entre espaço em disco e tráfego.

(2)

passa por um cano. Deu pra entender? Em outras palavras, é a quantidade de dados que trafegam em relação ao seu site. Se você acha que seu site vai ter muita transferência de arquivos e visitação, você deve procurar por planos que tenham alta disponibilidade de tráfego.

Se você escolher um plano que seu site vá ultrapassar a quantidade disponível de trafego naquele mês, o seu site será suspenso até que o dia 1 do próximo mês chegue, que é quando normalmente os hosts reiniciam a contagem de tráfego. Talvez seja uma boa hora pra dar um upgrade de plano e solicitar um com uma disponibilidade de mais tráfego.

A melhor maneira de controlar o seu espaço em disco e tráfego é manter o site o mais simples possível. Não use imagens com alta resolução e nível de qualidade em excesso. Otimize as imagens para que sejam mais leves de serem carregadas, o que diminuirá no uso dos 2 recursos citados e ainda facilita a visita dos usuários pra ver o conteúdo.

Mesmo com tudo isso você tenha dúvida em qual plano adquirir da sua empresa de hospedagem, entre em contato com eles passando o máximo que puder de informações sobre o seu site, assim eles poderão te ajudar na escolha do plano mais viável para você.

Visitem http://www.uebihost.com.br e confiram os planos de hospedagem. Também trabalhamos com revenda de hospedagem (pretendo criar algumas matérias a respeito disto), streaming (web-rádio) e desenvolvimento web.

Caso você tenha dúvida, você pode deixar um comentário que eu ajudarei dentro do possível na sua escolha do plano.

(3)

O que é preciso para criar um

site?

Muitas pessoas pensam que para desenvolver um site só precisam de apenas uma habilidade, mas de fato, você precisa de vários. Apesar de existirem muitos construtores rápidos tipo o próprio WordPress que eu utilizo aqui como meu blog, CMS Joomla, Drupal e muitos outros, você consegue desenvolver um site com uma cara legal e em poucos cliques. De qualquer forma, se você quer ter um site que se destque no meio de todos esses desenvolvedores que utilizam essas metodologias, você precisa investir tempo em seus estudos para que você possa aprender e desenvolver suas habilidades para criar um site.

Aprenda um pouco de PHP

Se você estiver utilizando WordPress, você precisará de um pouco de conhecimento em PHP para efetuar suas modificações, fazendo com que você ganhe tempo durante este processo. Assim como o Joomla. Ambos os sistemas citados tem fóruns de suporte com excelente pessoas que ajudam outros usuários a desenvolver ou personalizar o seus sites.

Se estivermos falando de sistemas personalizados, como desenvolvimento próprio de programação, você precisará de um pouco mais de conhecimento para evitar problemas de segurança ou erros comuns nas suas páginas e outras coisas.

Conheça bem o HTML

HTML é essencial para que você tenha controle sobre o desenvolvimento do seu site. Felizmente, HTML é muito fácil de aprender. Basta você dar uma olhada nesses editores HTML e analisar o código que está sendo implementando e pesquisando um pouco sobre cada TAG para saber o que ela faz. Você

(4)

aprenderá rapidinho.

Use CSS para dar estilo

CSS é um ótimo caminho para adicionar alguns estilos ao seu site de forma rápida e fácil, de uma forma geral. Existem algumas ferramentas online que podem ajudar a aprender CSS. A mais utilizada e muito boa é o plugin do Firefox chamado Firebug. Com ele você pode editar qualquer página e ver o que acontece em tempo real.

Aprenda um pouco de Design Gráfico

Não tem nada mais frustrante do que você não ser capaz de criar sua própria arte e fazer com que ela seja realmente do jeito que você quer que ela seja. Você não precisa pagar caro por softwares deste tipo, pois existem ferramentas grátis como o Gimp que consegue resultados muito bons. Existem outros softwares pagos como o Photoshop, Fireworks e Corel Draw.

Aprenda a utilizar o Painel de

Controle do seu servidor de

hospedagem

Muita gente assina um plano de hospedagem e nem sabe por onde começar. É muito importante você saber o que o seu provedor de hospedagem dispõe no painel para que você possa utilizar quando necessário. Aqui na Uebi Host é utilizado o CPanel. Por padrão ele dispõe de uns vídeos-tutoriais que ensinam o que a maioria dos recursos que estão disponíveis lá fazem.

SEO é sempre esquecido

Existe muito material na internet sobre SEO mas, a maioria deles não prestam ou só tem muita enrolação com jogadas de

(5)

marketing. Sempre é bom consultar vários locais e ver o que realmente pode ser útil ao seu site, ou se o que está sendo dito realmente não importa.

Concluindo

O que eu disse aí emcima é só apenas uma parte do que se pode ser usado é um site complexo. Mas se você reservar um pouco do seu tempo para aprender sempre um pouco mais de cada uma das 6 coisas que citei, você começará a ter uma noção melhor do que se está sendo utilizando nos sites que você visitar, passando a ter uma visão diferente, ou seja, deixando de ser apenas um leigo-visitante para um desenvolvedor web.

Continue visitando aqui o meu blog, pois pretendo sempre postar sobre esses assuntos, e um pouco mais.

Não deixe de comentar.

Introdução ao AJAX – Métodos

Open e Send

Irei demonstrar alguns métodos básicos para se trabalhar com o objeto XMLHttpRequest, que já demonstrei no post “Introdução ao AJAX – Objeto XMLHttpRequest“.

Tentarei ser bem objetivo e claro para quem não trabalha com programação ou está iniciando.

O que é um método?

M é t o d o é u m c o n j u n t o d e c o m a n d o s , u m a s u b r o t i n a , procedimentos, ou algo tipo uma função que executa os comandos

(6)

com o intuito de alterar e/ou obter uma resposta após a execução dele, manipulando algum atributo. Pode receber parâmetros por valor para serem passados aos seus comandos internos. Em resumo, são as ações que podem ser realizadas. Agora que temos um breve entendimento do conceito de método, vamos ver quais são os métodos básicos para se trabalhar com o AJAX. Após criarmos o objeto, precisamos criar uma comunicação com o servidor para que haja a troca de dados. Iremos ver agora os métodos OPEN e SEND.

Método OPEN

Este método tem como objetivo abrir um documento. A linha de comando é a seguinte:

open("método ", "URL "[, sinaldesincronização[, "nomeUsuário"[, "senha"]]])

Onde:

Método – Obrigatório – Determina se é pelo GET ou POST URL – Obrigatório – É o caminho para o documento que desejamos acessar, podendo ser utilizado o caminho c o m p l e t o ( E x . : < i m g src=”http://www.google.com.br/intl/pt-BR_br/images/logo. gif” />) ou absoluto (Ex.: <img src=”/intl/pt-BR_br/images/logo.gif” />)

Sinal de Sincronização – Informa o tipo de comunicação a ser feita, se é Assíncrona (padrão – a página não ficará congelada enquanto o objeto recebe uma resposta) ou Síncrona

Nome de Usuário – Estas duas últimas servem para permitir acesso a um documento restrito.

Senha

(7)

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "/conteudo.html");

Neste exemplos criamos o objeto XMLHttpRequest (sem considerar as diferenças entre os navegadores) e criamos uma comunicação com a página “conteudo.html”. Até então, não estamos obtendo nada. Para isso precisamos do método SEND para completar o código.

Método SEND

Este método é responsável por ativar a conexão com o outros documento e fazer as devidas requisições para se obter uma resposta. Entenda ele como um intermediador, um interprete de comunicação entre o documento atual e o que está sendo acessado.

Este método possui apenas um parâmetro, que são obrigatórios nos navegadores, com excessão do IE.

O comando:

xmlhttp.send(null);

Agora que a conexão está completa, precisamos capturar a resposta do documento acessado, através de duas propriedades do Objeto XMLHttpRequest: responseText e o responseXML

responseText : Obtêm a resposta em formato de string, ou seja,

um texto.

responseXML : Retorna um objeto DOM, ou seja, um Node (Nó),

que pode ser manipulado com as funções próprias para isto.

É importante notar que o objeto XMLHttpRequest podemos acessar tanto documentos HTML como XML, só que caso acessemos um documento HTML, não poderemos utilizar a propriedade

responseXML, o que muitas vezes é essencial para os nossos

(8)

resposta = xmlhttp.responseXML; ou

resposta = xmlhttp.responseText;

Agora que já estamos conseguindo realizar o envio de dados pelo send(), precisamos obter estas respostas, mas para isso precisamos saber a hora exata de obter a resposta, ou então não teremos essa tal resposta. Para isso iremos precisar da propriedade onreadystatechange.

Propriedade: onreadystatechange

É associada a um código Javascript para ser executado toda vez que houver mudança de estado no Objeto XMLHttpRequest, ou seja, podemos definir o que o nosso código irá fazer quando ele obter a resposta do documento acessado. Veja o exemplo de utilização:

xmlhttp.onreadystatechange = verificadorDeEstado; Esta propriedade possui 5 estados:

0 – Não iniciado (unitialised) – Quando o objeto ainda não foi iniciado, ou seja, nenhuma comunicação foi criada ainda;

1 – Carregando (loading) – O documento foi encontrado e está sendo carregado;

2 – Carregado (loaded) – O documento terminou de ser carregado;

3 – Interativo (interactive) – O objeto XMLHttpRequest está interagindo, processando os dados;

4 – Completo (completed) – A comunicação finalizou.

Estes estados podem ser acessados através da propriedade

(9)

Propriedade: readyState

O estado que nos interessa mais é o 4, quando a comunicação é finalizada e já temos uma resposta, seja ela com o que nós realmente queríamos ou não, pois o documento pode ter sido carregado e tenha acontecido um erro durante o processo, sendo assim a resposta será um erro, e não o que queríamos, não é verdade?

Para evitar isso, precisamos ter mais um controle sobre o carregamento do documento, sabendo do servidor qual foi a resposta ao tentar carregá-lo. Esta resposta fica armazenada na propriedade status, e os 2 tipos de respostas que interessam mais é o 404 (erro ao tentar carregar a página, arquivo não encontrado) e o 200 (OK, arquivo foi encontrado). O comando para se obter o status é:

estado = xmlhttp.readyState;

Agora podemos criar nossa função para verificar se o estado está no 4 e arquivo foi encontrado ao tentar acessá-lo:

function verificadorDeEstado(){

if(xmlhttp.readyState==4){ // Completo

if(xmlhttp.status==200){ // Resposta do Servidor: OK document.getElementById("conteudo").innerHTML = xmlhttp.responseText; }else{ alert("Problema: " + xmlhttp.statusText); } } }

Esta função testará todas as possibilidades comentadas anteriormente, caso ele consiga, irá carregar o resultado em forma de texto dentro da div “conteudo” da página atual. Caso a comunicação falhe, ele irá exibir um alerta com o estado da falha, acessado pelo statusText.

(10)

Agora vamos a um exemplo de uso do que foi aprendido aqui:

INDEX.HTML

Aqui ficará todo o código que irá processar o nosso AJAX e irá fazer com que exiba o conteúdo da página “conteudo.html”

< ! D O C T Y P E h t m l P U B L I C " - / / W 3 C / / D T D X H T M L 1 . 0 T r a n s i t i o n a l / / E N "

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Document</title>

var navegador = navigator.userAgent.toLowerCase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador

//Função que inicia o objeto XMLHttpRequest function objetoXML(){

if (navegador.indexOf('msie') != -1) { //Internet Explorer var controle = (navegador.indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'

try{

return xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE

}catch(e){}

}else{ //Firefox, Safari, Outros..

return xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla

} } var xmlhttp = objetoXML(); // Abre a página function abrirPag(url){ xmlhttp.onreadystatechange = verificadorDeEstado;

(11)

xmlhttp.open("GET",url,true); xmlhttp.send(null); if (xmlhttp.readyState == 1) { document.getElementById("conteudo").innerHTML = "<img src='loader.gif'>"; } return url; }

// Verifica o estado do objeto

function verificadorDeEstado(div_id){ if(xmlhttp.readyState == 4){ // Completo

if(xmlhttp.status == 200){ // Resposta do Servidor: OK var local = div_id;

document.getElementById("conteudo").innerHTML = xmlhttp.responseText ; }else{ alert("Problema: " + xmlhttp.statusText); } } } </script> </head> <body>

<a href="#" onClick="abrirPag('./conteudo.html');">Carregar Documento</a>

<div id="conteudo" style="background-color:#CCC; width:500px; min-height:100px">CONTEUDO</div>

<div id="conteudo2" style="background-color:#999; width:500px; height:100px">CONTEUDO 2</div>

</body> </html>

CONTEUDO.HTML

Aqui poderá ser qualquer coisa (ex.: texto, imagens, etc). <html>

<head>

(12)

charset=utf-8" />

<title>Meu Conteúdo Carregado</title> </head>

<body>

<h1>Meu Conteúdo</h1>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a

type specimen book. It has survived not only five centuries, but also the

leap into electronic typesetting, remaining essentially unchanged.

< i m g

src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /><br>

It was popularised in the 1960s with the release of Letraset sheets containing

Lorem Ipsum passages, and more recently with desktop publishing software

like Aldus PageMaker including versions of Lorem Ipsum. </body>

</html>

Espero que tenham gostado deste post.

Introdução ao AJAX – Objeto

XMLHttpRequest

Vamos começar de uma forma direta, utilizando os meus conceitos.

(13)

O que é o AJAX?

A definição exata é Asynchronous JavaScript and XML. Não é nenhuma linguagem de programação nova ou metodologia, mas sim um conjunto de técnicas que estão disponíveis desde 2000.

O AJAX utiliza o objeto XMLHttpRequest, o que permite fazer o envio de dados e receber uma resposta de um servidor sem a necessidade de recarregar toda a página web. Dái que vem o termo Asynchronous (assíncrono) da definição, porque pode-se carregar dados não necessariamente ao mesmo tempo que a página é carregada, ou seja, não precisa de sincronia do carregamento dos dados da página web.

Objeto XMLHttpRequest

Este objeto permite o envio de dados através do GET ou POST no servidor (ex.: envio de um formulário) e obtenha uma resposta (ou chamado também de retorno) como argumento para outras funções de Javascript.

O objeto foi criado pela Microsoft para ser utilizado no IE4, onde se utiliza o recurso ActiveX. Existem 2 versões do Activex para as versões do Internet Explorer:

Microsoft.XMLHTTP Msxml2.XMLHTTP

Os outros navegadores, também o implementaram utilizando a linguagem JAVA, que fundiu-se a partir das versões do navegadores abaixo:

Firefox 1.0 Netscape 7 Safari 1.2 Opera7.6

(14)