É muito comum quando se estuda uma linguagem não se dar principal foco ao desenvolvimento em segurança, mas este, em ambientes de produção é um dos factores decisivos do sucesso de uma aplicação e da confiança por parte dos utilizadores.
Neste artigo vai ser abordada uma forma de defesa relativa a possíveis ataques de SQL Injection em PHP utilizando o SGDB MySQL, e com recurso a Prepared Statements.

Existe suporte oficial a várias bases de dados: CUBRID, MS SQL Server, Firebird/Interbase, IBM, Informix, MySQL, MS SQL Server, Oracle, ODBC e DB2, PostgreSQL, SQLite, 4D [print_r(PDO::getAvailableDrivers());]

Vantagens e Desvantagens

Vantagens:
i. Previne SQL Injection
ii. Melhora a performance (pode só ser notado quando usado em grandes plataformas)
iii. Mais simples de escrever e ler

Desvantagens e Limitações:
i. Limitado a: SELECT, INSERT, UPDATE, REPLACE, DELETE, e CREATE TABLE
ii. Placeholders apenas para valores e nunca para nomes de tabelas ou colunas
iii. Quando precisamos de utilizar o método bind_result no escopo de uma classe e não sabemos à partida quantas variáveis vão ser passadas. Problema analisado por Jeffrey Way @ NetTuts (http://net.tutsplus.com/tutorials/php/the-problem-with-phps-prepared-statements/)

addslashes vs mysql_real_escape_string vs Prepared Statements

As funções addslashes e mysql_real_escape_string não serão objecto de estudo neste artigo, será apenas faladas as vulnerabilidades que não acontecem com o uso de Prepared Statements de modo a mostrar que esta última alternativa é de facto a mais segura.

O Chris Shiflett (http://shiflett.org/archive/184) já analisou as vulnerabilidades das addslashes relativas ao abuso de caracteres multibyte.

A função mysql_real_escape_string não é muito diferente da addslashes ao nível do tipo de vulnerabilidade, na verdade a sua vantagem reside mesmo em ter em conta o character set a ser utilizado conseguindo determinar como analisar a informção passada. Contudo continuam a existir vulnerabilidades, por exemplo com a utilização da codificação GBK e da sequ?ncia 0xbf27 (¿’) que passada nesta função não terá o resultado pretendido de ¿\’ . (POC http://ilia.ws/archives/103-mysql_real_escape_string-versus-Prepared-Statements.html )

Prepared Statements em Uso

Vejamos então um exemplo bastante simples…

$login = $_GET['login']
$query = "SELECT * FROM registos WHERE login = '$login'";

em que /?login=’ OR 1′;

Assim sendo
A query ficará algo do género:

$query = "SELECT * FROM registos WHERE login = '' OR 1";

O que resultaria num retorno de todas as informações da base de dados.

Se neste caso especifico fosse utilizado o método de destaque deste artigo: Prepared Statements, teriamos de colocar um placeholder (para marcar o local onde serão inseridos os dados a introduzir / consultar na base de dados, isto faz com que nos locais onde estão colocados os placeholders não sejam feitos pedidos à base de dados ou alteração ao pedido em questão. É aqui que reside a força deste método.

Existem duas formas de usar placeholders tal como referido no Manual do PHP.net

Forma #1:

$stmt = $dbh->prepare("INSERT INTO REGISTRY (name, value) VALUES (:name, :value)");
$stmt->bindParam(':name', $name);
$stmt->bindParam(':value', $value);

Forma #2:

$stmt = $dbh->prepare("INSERT INTO REGISTRY (name, value) VALUES (?, ?)");
$stmt->bindParam(1, $name);
$stmt->bindParam(2, $value);

Voltando então ao exemplo anterior, a nossa expressão seria então:

$query = "SELECT * FROM registos WHERE login = ?";

Nota: Apesar da extensão MySQLi também suportar prepared statements é aconselhável a utilização da extensão PDO (PHP Data Objects)

$login = "joaoppereira";
$query = "SELECT * FROM registos WHERE login = ?";
 
$stmt = $pdo->prepare($query); 
$stmt->bindValue(1, $login, PDO::PARAM_STR);
$ok = $stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

A função bindValue dos PDOStatement permite simples validações de tipo de dados no terceiro parâmetro da função bindValue(parametro, valor, tipo_dado), com as seguintes opções:

- PDO::PARAM_STR
- PDO::PARAM_INT
- PDO::PARAM_BOOL
- PDO::PARAM_NULL

Este foi só um artigo introdutório a este tema, existe agora imenso material no Manual do PHP.net e um pouco por toda a internet relativamente a esta temática para os que quiserem, e bem, aprofundar os conhecimentos relativos a Prepared Statements e PDO.

Bibliografia:

- http://php.net/manual/en/pdo.prepared-statements.php
- http://www.php.net/manual/en/class.pdostatement.php
- http://www.php.net/manual/en/pdo.constants.php
- http://www.php.net/manual/en/pdo.drivers.php
- http://net.tutsplus.com/tutorials/php/the-problem-with-phps-prepared-statements/

English Version | Versão Portuguesa

It’s been a while since I’ve planned on developing a new platform for my work as Web Developer, and next to all Web Developers, and I started to develop some modules and this RSS Generator Class born to fulfill my needs.

Supported versions:
RSS 2.0

Download:
Download it

Features:
Generates RSS 2.0 feeds
All feeds are validated by feed validator
Supports all feed elements
Simple & easy to define channel proprieties
Simple & easy to define item elements
Enables usage of sub-tags and attributes

Example

It’s a minimum “how to” example needed to understand how to use this class. It’s part of the download package.

include( "feed.php" );
 
	//Create a new Feed
	$feed = new Feed( );
 
	//Setting the channel elements
	//Helper -> http://www.rssboard.org/rss-specification
	$feed->setFeedTitle( 'Demo - RSS Generator Class' );
	$feed->setFeedLink( 'http://joaopedropereira.com/blog/rss' );
	$feed->setFeedDesc( 'This is demo of generating a RSS feed. ONLY RSS Version 2.0 Supported' );
	$feed->setFeedImage( 'Oh, my photo...', 'http://joaopedropereira.com/projects/rss_gen', 'http://s3.amazonaws.com/twitter_production/profile_images/63969619/imagemresized.jpg' );
 
	//Is possible to use setChannelElm() function for setting other optional channel elements
	$feed->setChannelElm( 'language', 'en-us' );
 
	//Create a new Item
	$item1 = new Item( );
 
	//Setting the Item elements
	//Helper -> http://www.rssboard.org/rss-specification
	$item1->setItemTitle( 'Item nº 1' );
	$item1->setItemLink( 'http://joaopedropereira.com' );
	$item1->setItemDate( time( ) );
	$item1->setItemDesc( 'Bla, bla, bla, item nº 1.' );
	$item1->setItemEnclosure( 'http://www.beardodisco.com/beatelectric/music/Loverboy12Mix.mp3', '17121349', 'audio/mpeg' );
	$item1->setItemAuthor( 'contacto@joaopedropereira.com (João Pedro Pereira)' );
	//As in Channel is possible to use setItemElm() function for setting other optional item elements
 
	//Create another Item
	$item2 = new Item( 'Item nº 2', 'http://twitter.com/joaoppereira', 'Bla, bla, bla, twitter of the owner of the blog of a webdeveloper' );
 
	$item2->setItemDate( time( ) );
	$item2->setItemAuthor( 'contacto@joaopedropereira.com (João Pedro Pereira)' );
 
	//Adding both created items
	$feed->addItem( $item1 );
	$feed->addItem( $item2 );
 
	//Now we're ready to generate the Feed, Awesome!
	$feed->genFeed( );

Download | Demo

Download | Demo

EDIT

HOT NEWS, PHP XML-RSS Feed Generator Was Accepted on PHPClasses.org!!

Há já algum tempo que pretendo desenvolver uma nova plataforma para o meu trabalho como Web Developer, e numa fase posterior abrir como serviço para todos os Web Developers, e por isso comecei a desenvolver alguns módulos para essa plataforma, trabalho que deu, entre outros, no módulo de RSS Feed’s surgindo assim a RSS Generator Class para satisfazer as necessidades.

Versões Suportadas:
RSS 2.0

Download:
Download it

Funcionalidades:
Gera RSS Feeds versão 2.0
As feeds são válidas conforme o feed validator
Suporta todos os elementos quer dos channel’s quer dos item’s
É simples definir as propriedades do channel
É simples definir as propriedades dos items

É possível utilizar sub-tags e atributos

Exemplo

Um pequeno exemplo que mostra como se pode fazer uso desta classe. Faz parte do pacote disponível para download.

include( "feed.php" );
 
	//Create a new Feed
	$feed = new Feed( );
 
	//Setting the channel elements
	//Helper -> http://www.rssboard.org/rss-specification
	$feed->setFeedTitle( 'Demo - RSS Generator Class' );
	$feed->setFeedLink( 'http://joaopedropereira.com/blog/rss' );
	$feed->setFeedDesc( 'This is demo of generating a RSS feed. ONLY RSS Version 2.0 Supported' );
	$feed->setFeedImage( 'Oh, my photo...', 'http://joaopedropereira.com/projects/rss_gen', 'http://s3.amazonaws.com/twitter_production/profile_images/63969619/imagemresized.jpg' );
 
	//Is possible to use setChannelElm() function for setting other optional channel elements
	$feed->setChannelElm( 'language', 'en-us' );
 
	//Create a new Item
	$item1 = new Item( );
 
	//Setting the Item elements
	//Helper -> http://www.rssboard.org/rss-specification
	$item1->setItemTitle( 'Item nº 1' );
	$item1->setItemLink( 'http://joaopedropereira.com' );
	$item1->setItemDate( time( ) );
	$item1->setItemDesc( 'Bla, bla, bla, item nº 1.' );
	$item1->setItemEnclosure( 'http://www.beardodisco.com/beatelectric/music/Loverboy12Mix.mp3', '17121349', 'audio/mpeg' );
	$item1->setItemAuthor( 'contacto@joaopedropereira.com (João Pedro Pereira)' );
	//As in Channel is possible to use setItemElm() function for setting other optional item elements
 
	//Create another Item
	$item2 = new Item( 'Item nº 2', 'http://twitter.com/joaoppereira', 'Bla, bla, bla, twitter of the owner of the blog of a webdeveloper' );
 
	$item2->setItemDate( time( ) );
	$item2->setItemAuthor( 'contacto@joaopedropereira.com (João Pedro Pereira)' );
 
	//Adding both created items
	$feed->addItem( $item1 );
	$feed->addItem( $item2 );
 
	//Now we're ready to generate the Feed, Awesome!
	$feed->genFeed( );

Download | Demo

EDIT

HOT NEWS, PHP XML-RSS Feed Generator foi aceite no PHPClasses.org!!

O PHP-SimpleEventsSystem é uma simples classe em PHP que permite a qualquer programador criar uma aplicação orientada a eventos em PHP. Sendo assim, esta classe possibilita a criação mais facilmente de aplicações web com possibilidade de adicionar plugins, sem que estes tenham de mexer com o código interno da aplicação, permite que uma framework use internamente a classe PHP-SES e melhorando consideravelmente a interacção entre a framework e a aplicação. Mas permite muito mais, permite até onde a sua imaginação chegar.

Basic Overview

Quem quiser ver a documentação completa da framework, pode aceder aqui. No entanto, aqui vai ficar uma explicação da classe e de como ela funciona, que é bastante simples.

A classe cria um array multi-dimensional onde guarda as funções e o respectivo evento a que elas foram anexadas. Sempre que se anexa uma função, a classe pode ou não verificar se a função existe, conforme os parâmetros que o programador introduzir. Se passar nesse teste, verifica se a função já está anexada a esse mesmo evento, e só depois anexa a função (as funções caso seja um array).

Ao executar-mos um determinado evento, a classe verifica se este existe, e em caso afirmativo, percorre o array com as funções anexadas a esse evento, e executa-as a todas pela ordem com que forma anexadas. Caso a opção Auto_run esteja activa, a função vai ainda percorrer todas as funções definidas pelo utilizador (programador da aplicação, utilizador da classe entenda-se) e verifica se alguma coincide com a formatação obrigatória e com o nome do evento em questão (um_nome_qualquer_handles_nome_do_evento). Se essa função já estiver anexada ao array, e por consequente já tiver sido executada, a classe não a executa novamente. Se ainda não estiver anexada, a classe executa-a e, caso a opção Auto_index esteja activa, indexa a função ao array do respectivo evento.

Sugestões de sintaxe dos nomes dos eventos

Numa aplicação de grandes dimensões torna-se importante a sintaxe que usamos e a forma como organizamos os nomes dos eventos, para que não existam conflitos e seja mais fácil memorizar o grande número de eventos que uma aplicação possa ter. Para isso os nomes dos eventos necessitam de ter lógica, e apesar de serem um pouco compridos, serão óbvios. Primeiro teremos de ter em conta algumas considerações.
Os nomes dos eventos podem conter qualquer carácter, incluindo pontos, que podem servir de separador entre as várias “secções virtuais” do nome do evento. No entanto nomes de eventos com pontos não serão possíveis de aceder através da funcionalidade Auto-Index e Auto-Run pois as funções não suportam, obviamente, este tipo de caracteres no seu nome. Assim sendo, sugiro o uso do underscore como separador.
Em todas as aplicações há uma “secção” que deve existir em todos os eventos, que indica se o evento retrata alguma acção em PHP ou HTML. Ou seja, e apesar de todas as instruções em código PHP sejam de PHP, poderão existir eventos que retratam a impressão de texto para o browser, e assim sendo, o nome do evento deve começar por html_, senão, caso retratem acções PHP, como uma conexão a uma Base de Dados, a leitura de um ficheiro, o fim de um ciclo, a execução de uma qualquer estrutura de controlo, etc., deverão começar por php_.
Para a secção de HTML, podemos ainda destinguir se nos estamos a referir a alguma parte genérica do HTML, como por exemplo, um menu, que seja constituído por vários elementos HTML, deve-se adicionar um generic_ a seguir ao html_, ou seja, ficaria html_generic_menu, por exemplo.
Caso seja em PHP, deve-se adicionar o nome da “categoria” da acção que se está a utilizar. Por exemplo se for uma acção qualquer relacionada com a base de dados MySQL, como inserir um registo, coloca-se o mysq_ depois do php_, ficando, por exemplo, php_mysql_query_insert_user.

Nota: Isto é apenas um exemplo de nomenclatura dos eventos, nada de obrigatório.

Exemplos e Demos

Plugins

Actualmente, é quase obrigatório qualquer aplicação, seja ela Web ou Desktop, suportar plugins. Só que isto é muitas vezes uma fonte de dor de cabeça para quem programa em PHP, criar um sistema versátil suficiente para suportar plugins. O PHP-SES permite a criação de Aplicações Web que facilmente suportam plugins. Vamos ver o seguinte exemplo.

require("..\..\Events.php");
 
//Inicia a configuração
Events::setConf("Auto_run", true);
Events::setConf("Auto_index", true);
 
//Carrega os nomes ficheiros dos plugins.
$plugins = scandir("plugins");
 
//Percorre o array com todos os ficheiros de plugins
foreach ($plugins as $index=> $file_name){
        //Verifica se o index actual é um ficheiro e não uma pasta
        if (is_file("plugins/".$file_name)){
                //Inclui e executa o plugin
                require("plugins/".$file_name);
                //Por uma questão de segurança e para não comprometer o funcionamento da aplicação
                //Depois de se carregar um plugin deve-se sempre habilitar a classe
                //Para não se dar o caso de algum plugin a desabilitar e não a habilitar novamente.
                Events::Enable();
        }
}
 
 
echo '< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=iso-8856-16" />';
        //Declara uma variável que permitirá adicionar conteúdo dentro dos plugins para a página
        $content = "";
        //Corre todos os eventos anexados para quando os headers HTML são mostrados
        //Esta é apenas um exemplo da sintaxe para o nome dos eventos.
        Events::Run("html_headers");
        echo $content;
        echo '<title>';
 
        $content = "PHP-SES Plugins Example";
 
        Events::Run("html_show_title");
        echo $content.'</title>
</head><body>';
 
echo "<h1>Título</h1>";
 
$content = "<a href=\"#\">Link1</a><br />";
//Aqui corre os eventos que permitem alterar o menu
Events::Run("html_generic_body_menu");
 
echo $content;
echo '</body>
</html>
'

JavaScript Events

Muitas vezes torna-se cansativo estar a chamar vários exemplos por AJAX, ou até fazer a verificação no PHP através de QueryStrings. Assim sendo, e com este exemplo aplicado, basta, no evento JavaScript, chamar uma função, JavaScript também, o nome do evento em PHP, e depois é só ir adicionando funções PHP ao código PHP.

index.php

< ?php 
require("..\..\Events.php");
 
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=iso-8856-16" />
        <script type="text/javascript">
        function RunEvent(event_name){
 
                if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                } else {// code for IE6, IE5
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
 
                xmlhttp.onreadystatechange=function(){
                        if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                document.getElementById("count_number").innerHTML=xmlhttp.responseText;
                        }
                }
 
                xmlhttp.open("GET","run.php?event=" + event_name + "",true);
                xmlhttp.send();
        }
        </script>
        <title>JavaScript Buttons Example</title>
        </head>
        <body>
        <input type="button" name="btn_sample" id="btn_sample" onclick="RunEvent('html_buttons_click_btn_sample')"  value="Test me. Click me." />
        <div id="count_number">0</div>
        </body>
        </html>

run.php

 
require("..\..\Events.php");
 
if (!defined(IS_AUTH)){
        exit;
}
 
//Se a variável $_GET["event"] não estiver declarada, termina a execução da página.
if (!isset($_GET["event"])){
        echo "Não foi definido nenhum evento.";
        exit;
}
 
//Define algumas configurações para não ser necessário anexar a função.
Events::setConf("Auto_run", true);
Events::setConf("Auto_index", true);
 
//Declara uma função anexada ao clique do botão
function update_file_handles_html_buttons_click_btn_sample (){
        //Vai buscar o número de clicks que o botão já tem
        $number_clicks = file_get_contents("clicks.txt");
 
        //Escreve outra vez para o ficheiro adicionando um clique
        file_put_contents("clicks.txt", $number_clicks + 1);
        echo $number_clicks + 1;
}
 
//Corre todos os eventos associados ao clique do botão.
Events::Run($_GET["event"]);

Pode ver os exemplos em funcionamento, aceda aqui.

É provavelmente ainda um bocado cedo para falar do WordPress 3.0 pois o lançamento desta só está previsto para finais de Maio, mas tenho vindo a brincar um pouco com ele  e com as suas novas funcionalidades.

A versão 3.0 do WordPress promete um visual mais soft da página de administração, vai também introduzir uma nova default theme, a “Twenty Ten”, que permite personalizar o fundo e as opções do cabeçalho ( header ), possibilidade de criar os menus com categorias, tags, posts, links externos, etc., entre outras modificações que podem ver na página oficial.

Neste post vou dar realce a apenas duas características que surgirão na versão 3.0 do WordPress, ou pelo menos que estão prevista e que estão em desenvolvimento.

WordPress + WordPress MU == WordPress 3.0

O WordPress MU ou WordPress Multi-User era uma versão modificada do sistema WordPress para permitir redes de blogs numa só instalação.

Site: http://mu.wordpress.org

Create a Network of Multiple Sites on WordPress 3.0

É tão simples como adicionar no ficheiro wp-config.php a seguinte linha:

define ('WP_ALLOW_MULTISITE', true);

Seleccionar o menu Tools -> Network e seguir as instruções.

Este é o menu que vos espera depois de tudo configurado.

Ver artigo: http://codex.wordpress.org/User:Andrea/Create_A_Network

Custom Post Types on WordPress 3.0

Quem já teve de desenvolver uma theme para WordPress um pouco mais complexo provavelmente já teve de fazer uns quantos hacks de forma a conseguir ter estilos diferentes para categorias diferentes… Os developers do WordPress pensaram em nós e decidiram tornar a possibilidade de ter vários estilos para diferentes tipos de posts de uma forma mais simples na versão 3.0 do WordPress.

Para tirar partido desta funcionalidade é necessário adicionar o seguinte código no ficheiro wp-content/themes/yourtheme/functions.php :

register_post_type('testemunials', array(
    'label' => __('Testemunials'),
    'singular_label' => __('Testemunial'),
    'description' => 'Here goes my testemunials',
    'public' => true,
    'show_ui' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => false,
    'query_var' => false,
    'supports' => array(
        'title',
        'editor',
        'author',
        'excerpts',
        'comments'
    )
));

Tal como é possível definir vários tipos de posts também é possível utilizar esta funcionalidade para páginas diferentes alterando o parâmetro ‘capability_type’ para ‘capability_type’=>’page’.

Function Reference/register post type: http://codex.wordpress.org/Function_Reference/register_post_type

Para cada projecto que tenho desenvolvido ultimamente utilizando a linguagem de programação server-side PHP, tenho-me guiado por uma checklist de forma a não me esquecer  de nada evitando assim falhas graves nas aplicações que desenvolvo. Pois a segurança é uma das preocupações que tenho.

Esta checklist aborda diversas situações como, casos gerais, casos de input, file uploads, autenticação, entre outros.

Click on image to download

Recomendo vivamente a sua utilização e até sugestões de melhorias, apesar de ela não ser da minha autoria.

O que acham desta checklist? Conhecem alguma melhor? Como se guiam no desenvolvimento de aplicações web de forma  a manter a segurança da mesma?

No meio de época exames/frequências e muito trabalho arranjei um bocado de tempo para colocar aqui o último snippet que escrevi para fazer parsing de um ficheiro que contém uma lista de IP’s e portas onde correm serviços de proxy.
Isto porque ando a experimentar configurações mais avançadas em ferramentas como o proxychains que nas suas configurações exigem um esquema especifico para proxys.

Syntax necessária: http ip porta
Syntax do ficheiro: ip:porta

Snippet

$url = 'http://blackhatbootcamp.net/proxies/data/ultimate_proxies.txt';

	preg_match_all('/[0-9]{1,3}+\.[0-9]{1,3}+\.[0-9]{1,3}+\.[0-9]{1,3}+\:[0-9]{2}/', file_get_contents($url), $matches); 

	$size=sizeof($matches[0]);
	foreach($matches as $var) {
		for($i=0; $i< $size; $i++)
			echo preg_replace('/(\d{1,3}).(\d{1,3}).(\d{1,3}).(\d{1,3}):(\d{2})/', "http $1.$2.$3.$4 $5<br/>", $var[$i]);
	}

Sei que python e PERL têm uma grande capacidade de utilização de REGEX, se andarem por aí conhecedores do assunto podem partilhar os snippets aqui

Um dos projectos que estou a começar a desenvolver é um Twitter Bot que seja capaz de simular o comportamento de um utilizador durante um curto período de tempo, dependendo da configuração que o utilizador lhe quiser dar. Deve também ter todas as funcionalidades que possam ser úteis ou pensáveis para um programa deste género e por isso muito é necessário pesquisar e estudar.

Hoje surgiu-me a ideia de utilizar a pesquisa do Twitter para encontrar e-mails. Claro que não fui o primeiro a pensar nisto, então em vez de reinventar a roda fui alterá-la apenas para andar melhor.

ob_start();
 
function writemail($matches) {
	foreach($matches as $emails)
		foreach ($emails as $email) {
			echo $email.'
';
			ob_flush();
		}
 
}
 
for($id=1; $id< =20; $id++) {
	$file = proxify_my_connection("http://search.twitter.com/search?page=".$id."&q=gmail.com+OR+msn.com+OR+hotmail.com+OR+%22email+me%22&rpp=100");
 
	$file = strip_tags($file);
 
	preg_match_all(
		"([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b)siU",
		$file,
		$matches);
 
	writemail($matches);
 
}
ob_end_flush();

O que este código faz, basicamente, é ler a página de pesquisa do Twitter e utilizando Regular Expressions encontrar os e-mails existentes na página, e depois continua pelas páginas seguintes.

/search?page=”.$id.”&q=gmail.com+OR+msn.com+OR+hotmail.com+OR+%22email+me%22&rpp=100

page numero da página
q representa a query, a chave a pesquisar
rpp results per page sendo que o máximo permitido pelo twitter é 100

Como podem reparar no meu código existe uma função que não está presente nem faz parte do PHP, a proxify_my_connection, é uma ferramenta que eu próprio desenvolvi há algum tempo e que não a quero tornar pública. Mas é fácil de a substituir, mesmo utilizando funções que já vêm de raíz no PHP. Podem também ver aqui uma função com efeito semelhante à que eu desenvolvi, no entanto não tem nada a ver uma com a outra.

Em vez da função writemail() é mais produtivo ter uma base de dados onde quardar os e-mails e verificar se estes são repetidos ou não…

Podem dar uso à vossa imaginação, aumentar e desenvolver a query, aumentar a performance do script, etc. isto foi só um pequeno exemplo do que se pode fazer com a search do twitter.

Bibliografia

Regex utilizado no meu código: http://www.fromzerotoseo.com/twitter-email-grabber/

Contribua para este blog deixando

a sua opinião e um pouco do seu conhecimento

PHP é a linguagem de programação web server-side mais utilizada a nível Mundial e neste artigo vão ser retratados os aspectos que devem fazer parte do estudo, do caminho de um WebDeveloper que quer desenvolver em PHP. Entre eles Boas práticas, Frameworks, Segurança, Caching, Buffering e Environments.

O Melhor Amigo – PHP Manual

Antes de mais é necessário aprender a linguagem em si, e o PHP é uma linguagem com uma enorme comunidade por trás que desenvolveu o PHP Manual, neste manual encontra-se todo o conhecimento necessário para se dominar a linguagem PHP. E como se não chegasse a sua enorme qualidade este é, também, gratuito e pode ser acedido quer online quer offline.

De leitura fácil encontramos no PHP Manual a documentação de como proceder à sua instalação e configuração, a documentação da estrutura lógica da linguagem bem como de todas as funções que a compõe sem nunca faltarem imensos exemplos! A secção das notas dos utilizadores é riquissima em estudos e desenvolvimentos de cada função, não dispensem a sua leitura!

Aceder ao PHP Manual em Português

Montar um Ambiente de Teste

Para testar o PHP não é necessário apenas ter um editor de texto e um browser, é necessário um servidor que corra o interpretador de PHP.

Então para começarmos a desenvolver em PHP é necessário configurar um pequeno servidor ou então utilizar um host existente…

Existem soluções que não envolvem muito trabalho nas configurações, como o MAMP (Mac), WAMP (Windows), LAMP (Linux), estas ferramentas já trazem também incluido a SGBD (Sistema de Gestão de Base de Dados) MySQL.

Depois para desenvolver o código pode utilizar ferramentas de auxilio, os IDE’s. A SmashingMagazine realizou um estudo comparativo sobre IDE’s para PHP. Ver Estudo Comparativo de IDE’s para PHP Aqui

Para quem não quer editores tão pesados aconselho o Geany (Linux) ou Notepad++ (Windows).

Desenvolver Bom Código

Isto não é algo restrito ao PHP mas a todas as linguagens de programação.

Quando programamos algo deve ter, além de uma estrutura lógica e funcional correcta, uma boa identação, documentação e deve também ser auto-explicativa (variáveis, classes e funções com nomes que descrevam facilmente o que contêm / o que fazem).

Deve ser fácil de ler e entender quer pelo próprio programador daqui a uns anos ou por outro programador que tenha de modificar algo no código desenvolvido.

Manter Funções Fora de Ciclos

Manter sempre a declaração de funções fora de ciclos é um aspecto muito importante quando visamos a performance de uma aplicação desenvolvida em PHP pois num ciclo que se repete (imaginemos) 500 vezes, a função será declarada 500 vezes, uma perda de tempo.

Organização do Código por Ficheiros

Além da organização ao nível das linhas código em si temos a organização de código relativa à separação por ficheiros e categorias. Para facilitar o entendimento e a detecção e correcção de erros o código deve ser separado lógicamente.

Imaginemos que estamos a desenvolver um CMS (Content Management System). E então devido à grande quantidade de código que tem de ser desenvolvido vamos separar o código em vários ficheiros.

Má Prática

Boa Prática

Aprender Object Oriented Programming

Object-oriented programming (OOP) ou Programação Orientada a Objectos (POO) em Português utiliza objectos para representar partes da aplicação permitindo separar em secções lógicas o código, facilitando a sua modificação e organização.

Aprender a Utilizar uma Framework

Muitos defendem que se deve aprender a utilizar frameworks na iniciação ao PHP porque com elas se aprende a desenvolver código mais avançado, a organizar melhor o código, a torná-lo lógico, a fazer debbug de erros, etc.

Outros defendem que não se deve aprender a utilizar frameworks na iniciação ao PHP porque no inicio o que os utilizadores necessitam é fazer os seus erros, aprender a desenvolver o seu código de raíz, sem funções e classes prontas a utilizar (exceptuando aquelas que vêm de raíz no PHP claro).

Eu considero que o utilizador deve dar uma olhadela a algumas frameworks e decidir se as deve ou não utilizar, porque cada pessoa é unica e pode aprender de diversas formas. Frameworks que considero muito bem estruturadas: Kohana, CodeIgniter e CakePHP .

Nunca Confie nos Utilizadores

Um dos aspectos mais importantes ao nível da segurança de aplicações informáticas é nunca confiar nos utilizadores da aplicação que estamos a desenvolver.

E que implica isso? Validar tudo o que entra! URL’s, formulários, cookies, sessões e até headers dos browsers.

Vamos então ver alguns exemplos de validações pois seria impossível cobrir todas as validações possíveis.

Validar Dados

É muito importante validar e corrigir todos os dados que possam ser introduzidos pelo utilizador! Infelizmente tenho visto imensas aplicações web sem qualquer protecção contra ataques tornando-as completamente vulneráveis a ataques.

Imaginemos o seguinte URL: joaopedropereira.com/xpto.php?id=1245

Que falha pode ser explorada aqui? O parâmetro dado ao id que pode ser utilizado para um SQL Injection por exemplo. Como fazer esta validação? Através de Regex:

function is_natural($str){
return (bool)preg_match( '/^[0-9]+$/', $str);
}
 
if(is_natural($_GET['id'])) { /* código */ }
else die('Erro');

Outro exemplo também com URL: joaopedropereira.com/xpto.php?email=email@domain.tld

function is_email($str){
return (preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? TRUE : FALSE;
}
 
if(is_email($_GET['email'])) { /* código */ }
else die('Erro');

Também com formulários se deve proceder de uma forma semelhante a esta.

ID Cliente

Email

function is_natural($str){
return (bool)preg_match( '/^[0-9]+$/', $str);
}
function is_email($str){
return (preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? TRUE : FALSE;
}
if(is_email($_POST['email']) AND is_natural($_POST['id'])) { /* código */ }
else die('Erro');

Vimos então que se podem validar os dados através de Regex mas existem outras formas de o fazer.

Imaginemos que temos um formulário que envia um campo de texto. Não podemos criar uma função em Regex para o efeito, assim temos de utilizar outras funções mais ou menos complexas para fazer a limpeza destes dados (recomendo o estudo das funções de validação da Kohana ou CodeIgniter).

function proteger($str) {
$str = strip_tags($str);
$str = mysql_real_escape_string($str);
 
return $str;
}

Com esta função adicionamos alguma segurança ao nosso código limpando tags como as utilizadas em ataques XSS e limpamos os dados contra SQL Injection. (Atenção: esta função não inibe todos os ataques apenas os dificulta um pouco).

Existe também uma forma de melhorar a segurança que dá menos trabalho pois apenas com algumas linhas de código podemos limpar todos os dados passados por $_POST, $_GET, $_REQUEST, $_COOKIE, $_SESSION, etc.

Eu normalmente crio um ficheiro que incluo no inicio de cada página parecido com o seguinte:

foreach ($_POST as $key => $value) {
$_POST[$key] = proteger($value);
}
 
foreach ($_GET as $key => $value) {
$_GET[$key] = proteger($value);
}
 
foreach ($_REQUEST as $key => $value) {
$_REQUEST[$key] = proteger($value);
}
 
foreach ($_COOKIE as $key => $value) {
$_COOKIE[$key] = proteger($value);
}
 
foreach ($_SESSION as $key => $value) {
$_SESSION[$key] = proteger($value);
}

Ambiente de Teste vs. Ambiente Real

Um dos problemas com que me deparava quando me iniciei no desenvolvimento de aplicações web em PHP (como o tempo passa…) era a mudança de variáveis entre o ambiente de teste e o real, como por exemplo as configurações da base de dados…

Até ter adoptado uma metodologia que me permitia ao alterar apenas uma linha alternar entre os ambientes.

define('LIVE', true);
 
if(LIVE) {
error_reporting(0);
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'basededadosxpto');
} else {
error_reporting(E_ALL);
define('DB_HOST', 'joaopedropereira.com');
define('DB_USER', 'joao');
define('DB_PASSWORD', 'pedro');
define('DB_DATABASE', 'joao_basededados');
}

Com esta metodologia só preciso de modificar a linha que define a constante LIVE como true ou false conforme esteja a trabalhar num ou noutro ambiente, podem também verificar ali a alteração do error_reporting, enquanto no caso do Ambiente Real não quero que sejam mostrados nenhuns erros aos visitantes por questões quer de segurança quer de aspecto, no caso do Ambiente de Teste quero saber todos os pormenores.

Utilizar Output Buffering

Utilizar Output Buffering é uma excelente maneira de optimizar a performance de uma aplicação em PHP. Sem Output Buffering a sua aplicação só vai mostrar o HTML no fim de toda a página estar carregada, com o Output Buffering a sua aplicação mostra o HTML já carregado quando o programador ordena!

O Developer Brian Cray criou um artigo muito interessante sobre este assunto para a DevTips. Veja-o aqui.

Utilizar Sistemas de Caching

Os Sistemas de Caching são interessantes para aumentar a performance de uma aplicação em PHP. No entanto há que ter em atenção alguns aspectos como por exemplo numa amostragem de resultados em tempo real não se podem utilizar sistemas de caching ou então teremos dados desactualizados…

Existem sistemas prontos a usar mas também podemos desenvolver o nosso sistema de caching como por exemplo algo do género:

$cache_file = 'cache_files/' . md5($_SERVER['SCRIPT_URI']);
$cache_time = 1200 * 60; //60min*6 * 60 segundos (6HORAS)
 
if(file_exists($cache_file) AND is_readable($cache_file) AND (time() - $cachetime < filemtime($cache_file))) {
require_once($cache_file);
} else {
ob_start();
 
/* o código do ficheiro */
 
$file = fopen($cachefile, 'w');
fwrite($file, ob_get_contents());
fclose($file);
 
ob_end_flush();
}

Sistemas de Caching:

• Memcached
• APC
• XCache

Eu não mordo…

Não tenha medo de comentar, não tenha medo de perguntar, de criticar ou elogiar! Qualquer dúvida pergunte, qualquer reparo faça-o, todas as opiniões e comentários são bem vindos aqui no blog.

Pode também divulgar o artigo, eu não acuso ninguém que divulgue o meu artigo nas diversas redes sociais ou nos próprios blogs (mencionando a fonte ou autor) de plágio .

Um aspecto muito importante que é necessário ter em conta aquando do desenvolvimento de páginas web é a acessibilidade de uma página e do tempo que a página demora a estar pronta para ser utilizada, pois caso o tempo de carregamento (load time) seja elevado, os visitantes não vão gostar podendo até retroceder e não voltar a essa página, logo load times elevados correspondem quase que directamente a visitantes / utilizadores / membros / clientes perdidos.

Tempo de carregamento baixo = – tempo perdido = utilizador contente

Então podemos concluir que é necessário diminuir os tempos de carregamento das páginas e neste artigo vão ser abordadas várias formas de como reduzir os tempos de carregamento tendo em conta a optimização do JavaScript, do CSS, das imagens bem como optimização do lado do servidor nomeadamente com a utilização de PHP.

JavaScript

O JavaScript é uma linguagem que tem vindo, sucessivamente, a tornar-se cada vez mais popular entre os programadores de webservices pois tem aplicações desde a passagem de argumentos para o servidor sem ser necessário recarregar a página até aos efeitos que o JavaScript permite adicionar às páginas e seus elementos. Mas, infelizmente, todas estas funcionalidades e coisas boas que o JavaScript traz tem um preço… Muitas vezes os ficheiros JavaScript tornam-se muito pesados, quer por serem bibliotecas como a jQuery, MooTools, dojo, ExtJS, etc. ou mesmo porque desenvolvemos grande parte da interface recorrendo a esta linguagem, o que vai adicionar centenas de kilobytes de informação às páginas. E o utilizador é exigente, quer páginas com tempos de carregamento baixos, mas também gosta de todas as facilidades e das interfaces que o JavaScript lhe proporciona. Assim, torna-se necessário, para não causar descontentamento no utilizador, correlacionar estes dois aspectos, é importante encontrar um ponto de equilibro. Como encontrar um ponto de equilibro entre a utilização “massiva” de JavaScript e a exigência dos utilizadores?

Conteúdo duplicado para quê?

Sim, pode parecer óbvio que não se deve ter o mesmo script repetido na mesma página mas é algo que é muito comum e vai gerar dois pedidos HTTP por cada componente a descarregar e utilizar mais capacidade de processamento por parte do browser do utilizador, factores que levam a que a página demore mais tempo a ser carregada inutilmente. Verifique sempre se não tem conteúdo duplicado por acaso! Uma outra solução é utilizar PHP, ou outra linguagem server-side, para adicionar os ficheiros JavaScript ao HTML e verificar se já foi adicionado ou não, tornando assim o código mais profissional e menos susceptivel a falhas e/ou faltas de atenção / verificação.

Colocar os scripts no fundo da página

O grande problema com os scripts é que os browsers não permitem descarregar mais nenhum componente externo enquanto está a descarregar um script. Para optimizar o carregamento da página é então aconselhável que se movam os scripts para o fundo do body, no entanto, existem scripts que não podem ser movidos para o fundo pois passam conteúdo valioso para a página (por exemplo). Uma solução alternativa é utilizar o atributo defer.

“When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue parsing and rendering.” (ver aqui)

Assim ao utilizar o atributo defer estamos a dizer ao browser que pode continuar a carregar a página e carregar o script apenas no fim. O que vai reduzir substancialmente o tempo de carregamento, tal como é pretendido.

Descarregar ficheiros em paralelo

Caso façamos uma introdução “normal” na nossa página de ficheiros JavaScript isso vai fazer com que os ficheiros sejam descarregados um de cada vez, diminuindo assim o tempo de carregamento da página.

(...)
<script src="script1.js" type="text/javascript"><!--mce:0--></script>
<script src="script2.js" type="text/javascript"><!--mce:1--></script>
(...)

Utilizando a forma normal de inserir os scripts na página vai acontecer que o script2.js só começa a ser descarregado depois do script1.js estar completamente descarregado. Mas para quê esta espera se os acessos de hoje são de banda larga e suportam altas velocidades? Podemos descarregar ambos paralelamente, ao mesmo tempo.

Caso os ficheiros sejam descarregados de forma paralela o tempo de carregamento da página vai diminuir, e como podemos fazer isso? É tão simples como saber utilizar o document.write

(...)
<script type="text/javascript"><!--mce:2--></script><script src="script1.js" type="text/javascript"><!--mce:3--></script><script src="script2.js" type="text/javascript"><!--mce:4--></script>
(...)

Como podemos observar, o segundo exemplo permite que os ficheiros sejam descarregados mais rápidamente pois o download é efectuado ao mesmo tempo. Para mais informações sobre downloads em paralelo continue a ler o artigo e na secção Server-Side este tema será novamente abordado.

Ferramentas para a optimização de código JavaScript

• Javascript Compressor – compress code online for free
• YUI Compressor

CSS

Todas as páginas web utilizam folhas de estilo (CSS -Cascading Style Sheets) e dependendo do design e da estrutura da folha de estilo esta pode ser maior ou menor mas em ambos os casos leva tempo a carregar e esse tempo deve, tal como nos outros pontos abordados neste artigo, de ser diminuido ao máximo! Além da validação sempre necessária vão ser apresentadas algumas formas de optimizar o código CSS. (validar CSS aqui).

Folhas de estilo no topo

Colocar as folhas de estilo no topo da página faz com que as páginas possam carregar progressivamente e que o utilizador vá vendo o design a surgir. É muito importante dar aos utilizadores um feedback visual mal seja possível (ver estudo aqui), no caso de uma página web a estrutura da página é o nosso indicador de progressão no carregamento da página. Ao carregar a estrutura progressivamente da página (exemplo: header -> menu -> left sidebar -> contéudo) tudo isto vai servir como feedback visual para o visitante que está à espera da página. Caso as folhas de estilo aparecessem mais para o fim, o utilizador enquanto a página fosse carregando iria ter um visual sem estilo algum, sem uma ordem, e por isso pode facilmente desinteressar-se pela página. É também uma especificação HTML dada pelo World Wide Web Consortium (ver aqui

).

Optimizar o Código CSS

Existem várias formas de se optimizar o código CSS sem reduzir de forma alguma as suas capacidades tornando apenas o código mais pequeno e mais conciso. Exemplo:

#div_xpto {
padding-top:15px;
padding-bottom:10px;
padding-left:13px;
padding-right:0px;
}

Neste exemplo podem ser feitas duas alterações de forma a optimizar o código. Unir as componentes da propriedade padding na própria propriedade. A ordem é sempre  top, right, bottom, left (Menomónica possível: TR BL ou sentido dos ponteiros do relógio( Dica de: http://bit.ly/cY3W9G).

#div_xpto {padding: 15px 0px 10px 13px;}

Em vez de utilizarmos 6 linhas utilizamos 1 linha, obtendo o mesmo efeito. Neste exemplo existe ainda outra modificação que podemos fazer que é a de retirar caracteres desnecessários.

#div_xpto {padding: 15px 0 10px 13px;}

Como é possível verificar foi retirado depois do 0 os caracteres px porque 0 é uma medida igual quer em pt, px, em, etc. logo é tempo de carregamento (devido a ser um ficheiro menor) que ganhamos. Caso as medidas padding-top e padding-bottom sejam iguais é possível utilizarmos algo assim: (consideremos as medidas top e bottom de 15px)

#div_xpto {padding: 15px 0 10px; }

Ou seja combinar a componente top e a componente bottom na mesma. Também a nível do background (quase todos os websites utilizam esta propriedade) devem ser feitas optimizações:

div {
background-image:url("fundo.jpg");
background-color:#ffffff;
background-repeat:repeat-x;
background-position:top center;
}

Passa a:

div {
background:url("fundo.jpg") #fff top center repeat-x;
}

Neste exemplo fizeram-se duas alterações, passaram-se as várias componentes do background tudo para a propriedade sem particionamento e a cor passou de #ffffff a #fff. Esta útlima alteração das cores também pode ser utilizada de forma a optimizar o código. Se se definam cores utilizando o standard de 6 digitos este pode ser definido apenas por 3 digitos em certos casos. Como por exemplo: Preto #000000 passa para #000 Branco #ffffff passa para #fff Verde #99ff33 passa para #9f3 Orange #ffcc00 passa para #fc0 Vermelho #ff3300 passa para #f30 Mas por exemplo #930f14 já não pode ser simplificada. Esta técnica funciona para todas as cores seguras (ver aqui tabela). É também muito comum uma outra optmização a nível do código CSS que é combinar elementos. Se tivermos dois elementos que tenham certas caracteristicas iguais, então em vez de se definir duas vezes a mesma caracteristica define-se apenas uma vez englobando ambos os elementos o que torna o código mais limpo e mais leve. Exemplo:

p {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#000
}
.texto {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#360
}

Como podemos reparar as caracteristicas border, padding margin e font-size são idênticas quer na tag p quer na class .texto. Assim em vez de se definirem essas propriedades duas vezes podem ser definidas apenas uma:

p, .texto {
border:0;
padding:0;
margin:0;
font-size:13px;
}

Ferramentas para Optimização de CSS

• CSS Drive – CSS Compressor
• Cascading Style Sheets Optimization
• Clean CSS

Leitura complementar:

• CSS Sprites

JavaScript / CSS

JavaScript e CSS em ficheiros externos

Uma pergunta que se faz muitas vezes é se os ficheiros JavaScript e os ficheiros CSS devem estar em ficheiros à parte ou na própria página. Utilizar ficheiros externos torna as páginas mais rápidas porque os ficheiros ficam na cache do browser equanto que se estiverem na página são descarregados sempre que é feito um pedido do documento, assim, ao utilizar ficheiros externos, reduz-se o tamanho da página mas aumenta-se o número de pedidos HTTP, contudo, os ficheiros externos ficam na cache do browser, logo diminui-se os pedidos HTTP e o tamanho da página utilizando ficheiros externos. Além da optimização da página, utilizar ficheiros externos torna o código mais estruturado, mais fácilmente editável e mais limpo sendo então uma boa prática para manutenção da página.

Imagens

Os designs mais eye-candy com a utilização de vários icons para descrever serviços, os efeitos dos fundos, dos headers, dos footers, etc. utilizam bastantes imagens, maiores ou menores mas que, de qualquer modo, levam a que o tempo de carregamento da página seja maior. E o que há fazer? São só imagens… Há alguns truques que podem ser utilizados para aumentar a velocidade de carregamento de imagens.

Não redimensione imagens em HTML!

Este ponto é de facto importante, muitas vezes carregam-se imagens, imaginemos, de 500x500px e depois em HTML definem-se medidas menores, isto é desnecessário e vai obrigar a que uma imagem maior seja carregada em vez de uma menor. Ou seja, em vez de se fazer algo assim

<img src="image.png" alt="Imagem xpto" width="50px" height="50px" />

com a imagem image.png a ter um tamanho de 500x500px deve-se ter

<img src="image.png" alt="Imagem xpto" />

tendo a imagem image.png o tamanho de 50x50px.

É também importante manter sempre as dimensões da imagem mesmo quando ela é exacta, isto é, no caso anterior mesmo já tendo a imagem 50x50px como queremos devemos indicar width=”50px” height=”50px” porque deste modo o browser não tem de “medir” a imagem antes de a colocar na página ficando então da seguinte forma:

<img src="image.png" alt="Imagem xpto" width="50px" height="50px" />

Obrigado ao Sérgio Dinis Lopes pela dica.

favicon.ico pequeno e armazenável em cache

O favicon.ico é uma pequena imagem que se encontra na raíz do servidor (normalmente). É muitas vezes um problema porque mesmo não existindo o browser vai fazer um request à sua procura por isso é sempre bom ter uma para não se responder com um erro 404 Not Found. Esta pequena imagem interfere também com a sequência de carregamento da página por exemplo no browser Internet Explorer enquanto que os scripts, css, imagens, etc são pedidos no onload event o favicon é pedido antes. Sugestões:

• Pequeno, de preferência com um máximo de ~1K (exemplos: wikipedia 318 bytes; google 1150 bytes; twitter 1406 bytes; wordpress 1150 bytes);
• Defina o parâmetro Expires com um valor que ache mais correcto (4 meses é um valor aceitável tendo em conta que não se muda de favicon ferquentemente);

Escolher o Formato Correcto para as Imagens

Existem vários formatos de imagens utilizados na construção de páginas web, entre elas destacam-se os formatos gif, jpeg, png e é importante escolher para cada imagem qual o formato que melhor se lhe adequa fazendo com que imagens com menos pormenores, menos cores, etc. utilizem formatos mais leves (ver mais informações aqui).

Leitura complementar:

• Four Steps to File Size Reduction por Stoyan Stefanov
• Progressive JPEG…Hot or Not? por Stoyan Stefanov
• Alojar Imagens na Amazon por Amit Agarwal

Server-Side

Nos tempos de carregamento também interferem as acções do lado do servidor e por isso é necessário optimizar essas acções o máximo possível.

Descarregar o buffer de saída mais cedo

Quando uma página é pedida existe um intervalo de tempo em que o browser espera que o servidor junte o HTML e o envie para o browser. Durante este tempo o browser está inactivo à espera da resposta. A linguagem de programação PHP tem uma função chamada flush que permite que sejam enviadas respostas para o browser particionadas permitindo ao browser começar logo a carregar as informações recebidas enquanto o servidor continua a gerar o resto do HTML.

Downloads em Paralelo

(imagens utilizadas neste subcapitulo retiradas daqui)

A especificação HTTP/1.1 sugere que os browsers façam apenas dois downloads em paralelo de cada dominio assim caso todos os componentes estejam no mesmo dominio só poderão ser feitos dois downloads de cada vez aumentando muito o tempo que uma página demora a carregar.

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

Neste exemplo, estão representados 10 componentes extra na nossa página que precisam de ser descarregados, então se criarmos subdominios conseguimos optimizar o download dos componentes colocando-os a ser descarregados em paralelo. Apesar de se poderem adicionar quantos sub-dominios quiserem às páginas não se devem utilizar mais do que 2-4 dominios devido ao tempo que demora a fazer a correspondência nos DNS (hostname <-> IP) e esta demora, normalmente, entre 20 e 120 millisegundos, enquanto isto acontece o browser não descarrega nada do dominio em questão. E então como resolver a situação? O HTML fica no main-domain http://joaopedropereira.com/ e podem ser criados entre dois e quatro sub-dominios para as imagens content1.joaopedropereira.com e content2.joaopedropereira.com e (sub-dominios apenas com fins ilustrativos). Assim conseguimos optimizar o tempo de carregamento das imagens e scripts da página. Neste exemplo foi possível poupar algum tempo, quanto mais scripts e imagens existirem mais diferença se fará notar no tempo de carregamento da página.

Leitura Complementar

• Maximizing Parallel Downloads
• Alojar Imagens na Amazon por Amit Agarwal
• Optimize Parallel Downloads to Minimize Object Overhead

Utilizar o método GET ou POST em AJAX?

Ao utilizar XMLHttpRequest, o método POST consiste em dois processos separados de envio de informações, primeiro envia os cabeçalhos e só depois envia a informação enquanto que o método GET envia a informação de uma só vez (excepto se existirem muitos cookies). Existe também limite no envio de informações utilizando o método GET pois este não foi feito para enviar grandes quantidades de informações. Tal como os nomes indicam o método GET foi desenhado para pedir informações ao servidor enquanto que o método POST foi desenhado para enviar informações para o servidor. Então qual deles escolher? Na verdade não existe um melhor, existem dois métodos diferentes para situações diferentes e o que é melhor em determinada situação pode não o ser numa outra situação diferente. Então é necessário avaliar cada caso e escolher qual o método mais apropriado.

Leitura Complementar

• Ajax: Get or Post por Stephen Chapman

Quer saber mais?

Existem mais maneiras de optimizar um website mas que podem ser mais complexas ou mais dispendiosas, mas vou aqui deixar links para quem quiser estudar mais sobre este tema.

• High Performance Web Sites por Steve Souders
• How To Optimize Your Site With GZIP Compression