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

Transcrição

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. Em termos não-técnicos, tráfego é a quantidade de água que

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 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étodo é um conjunto de comandos, uma subrotina, 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: Onde: open("método ", "URL "[, sinaldesincronização[, "nomeusuário"[, "senha"]]]) 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 completo (Ex.: <img src= 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 Um exemplo do uso do método OPEN:

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 propósitos. Exemplo:

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 readystate.

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>untitled Document</title> <script language="javascript" type="text/javascript"> 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> <meta http-equiv="content-type" content="text/html;

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. <img src=" /><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 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 Vamos ao código de como criar o Objeto XMLHttpRequest:

14 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 Deixei o código comentado para um fácil entendimento. Ótimo, agora temos nosso objeto. E agora? Agora esse assunto fica para o próximo post, onde falarei sobre algumas funções básicas para trabalhar com ele. Espero que tenham entendido um pouco sobre o conceito de AJAX e de como criar o objeto para começar a trabalhar com AJAX. return xmlhttp =