Boteco Digital » Web

HTML5 novos elementos de estrutura

Rodrigo Aramburu — Sat, 14 Jan 2012 18:09:19 +0000

O HTML5 vem para ser a atualização da linguagem HTML. Ela cria várias novas tags na linguagem para que o CSS e o Javascript fazerem melhor seu trabalho sem precisar da instalação de vários plugin, compromentendo o desempenho, e trazer mais semântica ao código HTML.

Embora o padrão não esteja terminado e plenamente suportado, podemos começar a utilizar alguns de seus recursos já que ele esta sendo disponibilizados em módulos. Uma das mudanças que já podemos utilizar é a estrutura da página, que foram criadas tags novas para representar semanticamente a estrutura da página.

Antigamente(HTML4/XHTML) utilizávamos a seguinte estrutura:

Para deixar mais semântica a estrutura da página foram adicionadas as tags: section , article, aside e nav, header e footer.

Utilizando estas nova tags podemos criar a seguinte estrutura:





	
		Exemplo de estrutura de site em HTML5
		
		
	

	
		
			
				Titulo do site
			

			
				
					Link 1
					Link 1
					Link 1
					Link 1
					Link 1
					Link 1
				
			
			
				
					Titulo do artigo
					12/12/2012
				

				

				
				
					Por Fulano
				
				

			

			
			
				Boteco Digital

Veja o exemplo

Para começar o DOCTYPE foi bastante simplificado, bem como a metatag charset. Eu particularmente agradeço já que nunca consegui decorá-las, sempre tive que abrir um arquivo e copiar.

Vamos a uma breve descrição das novas tags.

section

A tag section define uma nova seção do site, uma área genérica do site. Por exemplo a home pode ser dividida em destaque, novidades, chamada para conteúdo completo.

header

O elemento header representa uma área de introdução. Pode ser utilizado para agrupar índices de conteúdo, campos de busca, cabeçalho do site com titulo ou logo.

footer

A tag footer representa o rodapé do site, ou de uma seção.

nav

O elemento nav é utilizado para representar uma seção da página que contém links para outras partes do site. Este elemento deve ser utilizado para grupos de links importantes do site tipicamente menus de navegação.

article

O elemento article é utilizado para representar o conteúdo do site propriamente dito, como posts, artigos e outros textos em geral.

aside

A tag aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside.

Porém vários navegadores, principalmente os mais antigos, não reconhecem devidamente as novas marcações. Para mantermos a compatibilidade é necessário estilizar algumas tags usando a seguinte regra CSS.

header , footer , article , aside , nav , section {display:block}

Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr (http://www.modernizr.com/) que é uma biblioteca de detectação que lhe permite verificar o suporte da maioria das características do HTML5 e CSS3. O Modernizr roda automaticamente assim que você o adiciona no head do documento fazendo funcionar as novas tags em navegadores mais antigos(IE8).

Posts Relacionados:

Instalando LAMP no Ubuntu

Rodrigo Aramburu — Tue, 08 Feb 2011 18:21:11 +0000

Para para começar vamos logo dizendo que LAMP é uma abreviação para os seguintes software Linux, Apache, MySQL e PHP que juntos formam o ambiente que necessitamos para desenvolver e hospedar nossos sites.

1. Instalar o MySQL

sudo aptitude install mysql-server mysql-client

Durante a instalação a senha do usuário root do MySQL será pedida.

2. Instalar o Apache 2

sudo aptitude install apache2

Depois instalado verifique se esta funcionando acesse http://localhost se aparecer um “It works!” está funcionando.

3. Instalar o PHP 5

sudo aptitude install php5 libapache2-mod-php5

Não se esqueça de instalar também o modulo PHP do MySQL.

 apt-get install php5-mysql

Bom já temos o básico agora. É só reiniciar o Apache que deve estar tudo funcionando.

/etc/init.d/apache2 restart

4. Habilitando o mod_rewrite

O mod_rewrite é utilizado por vários CMS, Framework e etc. Então é sempre uma boa idéia habilitá-lo. Para você que não sabe o que é o mod_rewrite veja o post sobre URLs amigáveis

a2enmod rewrite

E altere o seguinte trecho de código no arquivo /etc/apache2/sites-enabled/000-default:

        
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all

por:

        
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Order allow,deny
                allow from all

Agora reinicie o Apache e tome uma cerveja! T++

[UPDATE]
Pessoal para quem precisar usar o PostgreSQL (LAPP?):

 apt-get install php5-pgsql

[/UPDATE]

Posts Relacionados:

CSS3 – text-shadow

Rodrigo Aramburu — Sun, 07 Nov 2010 22:10:55 +0000

O CSS3 está vindo ai certo, alguns browser já estão implementando algumas coisas legais que irão nos livrar de muitos “POGs” que somos obrigados a fazer e poupar bastante trabalho.

Hoje gostaria de apresentar a propriedade text-shadow que é simplesmente a sombra do texto, e já esta disponível para a maior parte dos navegadores.

seletor{
	text-shadow: medida1 medida2 medida3 cor;
}

Onde:

Medida 1: é o deslocamento a direita(com valores negativos a sobra irá para esquerda).

Medida 2: é o deslocamento para baixo(com valores negativos a sombra irá para cima).

Medida 3: é o raio para o efeito de blur na sombra.

Cor: é a cor da sombra.

Para ficar mais claro veja o exemplo das propriedade text-shadow.

Se você não está utilizando um navegador com suporte a propriedade veja abaixo como deve ser mostrado.

Um recurso que também é interesssante é a possibilidade de colocar várias sombras em um texto apenas adicionando mais valores separados por virgula.

seletor{
	text-shadow: 10px -10px #CCC, 20px -20px #F00, 30px -30px #00F;
}

Deve ser visualizada assim:

[Baseado no artigo do Maujor]

Posts Relacionados:

Implementando um Layout simples

Rodrigo Aramburu — Sat, 09 Oct 2010 16:46:51 +0000

Este foi um Layout que passei como um pequeno trabalho para os alunos do módulo web do Técnico em Informática do SENAC semestre passado e tinha ficado de postar no blog. Bom promessa é divida e a minha já estava bem atrasada mas vamos lá.

Para quem quiser em uma melhor resolução pode baixar aqui. E para quem quiser os arquivos do layout esta aqui

Posts Relacionados:

Criando um CAPTCHA em PHP

Rodrigo Aramburu — Mon, 12 Apr 2010 20:12:11 +0000

Um problema comum para quem fornece um formulário de contato ou disponibiliza algum sistema de comentário em um site é o aumento de spam enviados por bots(robos) que lêem os campos do formulário e enviam as informações de spam via POST.

Uma maneira muito comum de se proteger deste tipo de ataque é diferenciar se quem está enviando as informações é uma pessoa ou um bot. Isso pode ser feito criando um código que seja de fácil leitura para o usuário humano e difícil para máquinas e pedir para o usuário digitar este código junto com as outras informações do formulário.

Este sistema é muito comum hoje em dia e recebe o nome de CAPTCHA(Completely Automated Public Turing Test to Tell Computers and Humans Apart ou Teste Público Totalmente Automatizado para Diferenciar Humanos de Computadores) e vamos agora apreender com fazer um simples.

Começaremos criando uma imagem com um fundo um pouco bagunçado, quanto mais bagunçado melhor, isso dificulta a leitura por bots.

O CAPTCHA vai funcionar da seguinte forma, vamos gerar um código baseado na hora do sistema e armazená-lo em uma sessão, após isso iremos criar uma imagem com o fundo que criamos acima e escrever o nosso código gerado sobre ele.

Vamos então aos código

session_start();

$codigoCaptcha = substr(md5( time() ) ,0,9);

$_SESSION['captcha'] = $codigoCaptcha;

$imagemCaptcha = imagecreatefrompng("fundocaptch.png");

$fonteCaptcha = imageloadfont("anonymous.gdf");

$corCaptcha = imagecolorallocate($imagemCaptcha,255,0,0);

imagestring($imagemCaptcha,$fonteCaptcha,15,5,$codigoCaptcha,$corCaptcha);

header("Content-type: image/png");

imagepng($imagemCaptcha);

imagedestroy($imagemCaptcha);

Na linha 3 geramos nosso código “aleatório” começamos pegando o timestamp através da função time e aplicamos sobre ele a função md5 deste código md5 pegamos os 9 primeiros caracteres(se você quiser pode pegar mais ou menos) através da função substr.

Na linha 5 salvamo nosso código na sessão para que possamos compará-lo mais tarde.

Na linha 7 criamos uma imagem a partir da imagem de fundo que criamos.

Na linha 9 carregamos uma fonte através da função imageloadfont que carrega define a fonte que será utilizada para escrever nosso código de captcha na imagem criada na linha 7.

Na linha 11 utilizamos a função imagecolorallocate para gerar uma cor para o código que iremos inserir na imagem.

Na linha 13 utilizamos a função imagestring para “desenhar” o código gerado na linha 3 na imagem criada na linha 8, utilizando a fonte definida na linha 9.

Na linha 15 mudamos o cabeçalho do arquivo para ele ser um arquivo do tipo imagem no formato png, isso faz com que o navegador mostre a imagem e não o código binarios em forma de texto.

Na linha 17 enviamos a imagem gerada para o navegador. Na linha 19 desalocamos o espaço utilizado pela imagem criada.

Para utilizar o captcha precisamos de um formulário e dentro dele exibiremos a nossa imagem através da tag IMG e também precisaremos de um campo para o usuário inserir o código captcha.


    

    Digite o código

Agora basta compara o valor passado por POST no input captcha com o valor armazenada em sessão.

if( $_SESSION['captcha'] == $_POST['captcha']){
        echo "Ok - Código Correto";
    }else{
        echo "Erro - Código digitado errado";
    }

Aqui você pode visializar o exemplo

Download do exemplo.

Posts Relacionados:

PDO – PHP Data Object – Trocar de banco de dados já não é dor de cabeça

Rodrigo Aramburu — Wed, 24 Mar 2010 16:25:50 +0000

Se você desenvolve com PHP há algum tempo e necessitou trocar de banco de dados sabe que o PHP pode causar um certo problema, pois possui funções com nomes diferentes para conectar a banco de dados diferentes. O que muitas vezes inviabiliza o processo.

Aqueles que já trabalharam com Java sabem que existe algo chamado JDBC que resolve este problema, fornecendo uma camada de abstração de dados através de interfaces, bastando carregar o driver correto e utilizar sempre os mesmos métodos para acessar qualquer banco de dados.

Para os desavisados o PHP possui, desde a versão 5, algo parecido que se chama PDO – PHP Data Objects, permitindo o acesso a vários bancos de dados chamando sempre as mesmas funções.

Os drivers PDOs devem ser carregados pelo módulo PHP então temos que habilita-los e isso é feito dentro do arquivo php.ini.

extension=pdo.so
extension=pdo_mysql.so
extension=pdo_pgsql.so
extension=pdo_sqlite.so

Normalmente não temos acesso ao arquivo php.ini pois contratamos um serviço de hospedagem, então para ver os drivers que estão habilitados na hospedagem que contratamos devemos executar o código abaixo:

foreach(PDO::getAvailableDrivers() as $driver){
    echo $driver.'
';
}

Como o próprio nome do recurso “PHP Data Objects” a conexão e a manipulação dos dados é feita utilizando uma classe do PHP chamada PDO – que deve ser instanciado com as informações de conexão ao banco.

Exemplo:


$conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');

Como podemos notar o construtor do objeto PDO aceita três parâmetros, o primeiro é uma string contendo o driver a ser utilizado mysql, o local onde o banco esta rodando localhost, a porta que o banco esta escutando 3306 e o nome do banco de dados teste. O segundo parâmetro é o usuário de acesso ao banco de dados e o terceiro é a senha de acesso.

A partir de agora podemos utilizar o objeto armazenado em $conn para manipular os dados no banco de dados.

Como sabemos quando estamos trabalhando com banco de dados vários erros podem acontecer como o banco de dados estar indisponível entre outra coisas. O PDO pode ser configurado para gerar exceção quando algum erro destes ocorrem sendo capturados com um bloco try{…}catch(){…} sendo lançada a exceção PDOException.

Abaixo um exemplo de inserção utilizando a classe PDO:

try{

    //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');

    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    //executa as instruções SQL
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('rodrigo', '123456', 'rodrigo')");
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('thiago', '654321', 'Thiago')");
    $conn->exec("INSERT INTO usuarios (login,senha,nome) VALUES ('maria', '654123', 'Maria')");

    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: " . $i->getMessage() . "";
}
?>

Como vemos nas linha 10,11,12 utilizamos o método exec para executar comando SQL no banco de dados.

Agora veremos como consultar utilizando a classe PDO:

try{
        //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');
    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    //executa a instrução de consulta
    $result = $conn->query("SELECT senha,login FROM usuarios");
    if($result){
                //percorre os resultados via o laço foreach
                foreach($result as $linha){
                        //exibe o resultado
                        print $linha['login'] . " - " . $linha['senha'] . "
\n";
                }

        }
    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: " . $i->getMessage() . "";
}

Como vimos para executar uma consulta utilizanos a função query que retorna um objeto de resposta PDOStatement que pode ser percorrido utilizando um laço foreach(linha 11).

Também é possível percorrer um objeto PDOStatement utilizando o método fetch dele tratar cada linha da consulta como um objeto.

Exemplo:

try{
        //instancia o objeto PDO, conectando com o banco mysql
    $conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '123456');

    //configurando para utilizar exceções
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    //executa a instrução de consulta
    $result = $conn->query("SELECT login, senha FROM usuarios");

    if($result){
                //percorre os resultados via o fetch()
                while ($linha = $result->fetch(PDO::FETCH_OBJ)){
                        //exibe resultado
                        print $linha->login . " - " . $linha->senha . "
\n";
                }

        }

    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: " . $i->getMessage() . "";
}
?>

Na linha 13 chamamos o método fetch que recebe a constante PDO::FETCH_OBJ que é responsável por definir que o retorno será um objeto. Também podemos passar as constantes PDO::FETCH_ASSOC que retorna um array com os indices sendo os nomes das colunas da consulta e PDO::FETCH_NUM que retorna um array com os indices numéricos.

Outra funcionalidade interessante que ameniza muitos erros é os famosos do prepared statements. Veja o exemplo abaixo:

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

	//prepara a consulta
	$result = $conn->prepare("INSERT INTO usuarios (login,senha,nome) VALUES (?, ?, ?)") ;

	//insere os valores nas ?
    $valores = array('rodrigo', '123456', 'rodrigo');

	//executa o comando SQL
    $result->execute($valores);

    //fecha a conexão
    $conn = null;
}catch (PDOException $i){
        //se houver exceção, exibe
        print "Erro: " . $i->getMessage() . "";
}
?>

Com o uso dos prepared statements não precisamos ficar nos preocupando em concatenar várias variaveis, ou nos preocuparmos com escape de aspas e tudo mais, basta colocar os valores no array que será passado por parâmetro para o método execute.

Espero que tenham gostado. Para mais infomações consulte a documentação da classe PDO

Posts Relacionados:

UruguaianaTech

Thiago Finardi — Mon, 30 Nov 2009 01:27:42 +0000

Chegamos ao fim do 1º Uruguaiana Tech, foram três dias de evento onde podemos colaborar de alguma forma com a nossa comunidade. Fiquei extremamante satisfeito com o resultado do evento, era muito prazeroso conversar com os participantes após as palestras, podendo assim os conhecer melhor e principalmente constatar que muitas pessoas estão testando softwares livre. Várias pessoas elogiaram a iniciativa e principalmente a qualidade do evento como um todo.

A idéia da realização do UruguaianaTECH surgiu a partir da necessidade de eventos na área de tecnologia da informação em nossa região, e principalmente para difundir a utilização do Software Livre em todos os setores de nossa comunidade.

O constante crescimento da utilização do software livre nas organizações nos últimos anos, demonstram que o reconhecimento dos benefícios é algo concreto, nosso país é considerado um dos maiores utilizadores desta tecnologia, onde também existem diversos colaboradores e mantenedores de aplicativos Livres.

Vemos na fronteira oeste, um mercado a ser explorado pois muitas organizações locais não fazem o uso de um Software Livre pelo fato de desconhecerem suas vantagens e benefícios.

Cabe a nós profissionais e estudantes da área de TI mudar este cenário, pois a evolução esta acontecendo, é nossa obrigação contribuir para que ela aconteça também em nossa cidade.

As vezes pensamos que em nossa cidade não há um mercado para os profissinais de TI, isto faz com que muitos estudantes recém formados acabem saindo de nossa cidade em busca de oportunidades, com isso nossa comunidade acaba perdendo qualidade nos serviços prestados. Com esta iniciativa esperamos demosntrar a nossa comunidade que dentro dela mesmo é possível encontrar profissionais qualificados e preparados para os desafios da área de TI.

Gostaria muito de agradecer a participação dos Professores Cidão e Humberto Moura que trouxeram um brilho a mais em nosso evento, a área de TI do Senac Uruguaiana, aos colaboradores voluntários que nos ajudaram na organização e principalmente aos nossos apoiadores, pois sem eles esta edição do Uruguaiana Tech não seria possível.

Agora fica a saudade dos bons momentos compartilhados durante o evento, o conhecimento que foi recebido e retribuido, pois como mencionei no evento: “O conhecimento é universal, nós aprendemos com alguém e é nossa OBRIGAÇÃO ensinar alguém”.

Nós nos comprometemos em levar esta causa adiante e faremos o que for necessário para alavancar nossa área de TI em nossa cidade, o sol nasce para todos e juntos faremos com que esta mudança aconteça.

#galeria pasta=”uruguaianatech”#

Posts Relacionados:

1º UruguaianaTech

Thiago Finardi — Wed, 18 Nov 2009 02:50:35 +0000

Com a missão de educar para o trabalho em atividades do comércio de bens, serviços e turismo, o SENAC Uruguaiana promove nos dias 26, 27 e 28 de novembro o 1° UruguaianaTech, evento que visa difundir a utilização do Software Livre nos diversos setores de nossa comunidade.

Sempre conectado às inovações do mercado e atento às novas tendências em tecnologia, o núcleo de TI do Senac Uruguaiana, ministrará palestras sobre os temas: Linux, Servidores, Segurança, Desenvolvimento de Aplicações Web e Móvel.

Esta edição contará com a presença de profissionais de destaque no mercado da Tecnologia da Informação, com ampla experiência na utilização de Software Livre em ambientes corporativos, educacionais e domésticos.

O evento será realizado no auditório do Colégio Marista Sant’Ana. As inscrições podem ser realizadas através do site ou na unidade do Senac, mediante a colaboração com um alimento não-perecível. Aos interessados na emissão do certificado, o investimento será de R$10,00.

Vejam abaixo a programação do evento. Destaque para o 1º e 2º dia onde os editores deste blog, Thiago Finardi e Rodrigo Aramburu, ministrarão palestras no evento.

Vamos lá pessoal, participem e ajudem no crescimento da área de TI em nossa cidade.

http://www.uruguaianatech.info

Posts Relacionados:

Listando arquivos de um diretório em PHP

Rodrigo Aramburu — Fri, 14 Aug 2009 23:50:23 +0000

Mostrei no meu último artigo como criar uma galeria de fotos utilizando JQuery e o plugin PrettyPhoto, mas ele tinha um problema, ou melhor uma dificuldade, para adicionar uma nova foto tínhamos que abrir o arquivo e acrescentar o código HTML para a nova foto. Para não termos esse tipo e trabalho que inventaram a informática .

Vamos ver então um simples script que lê um determinado diretório e monta a tag HTML para a imagem:

$dir = "fotos";
$d = opendir($dir);
$i = 0;

$nome = readdir($d);
while( $nome != false ){
	if( !is_dir($nome) and ($nome != 'Thumbs.db') ){
		$arquivos[$i] = $nome;
                $i++;
	}
	$nome = readdir($d);
}
sort($arquivos);

foreach($arquivos as $arq){
	echo ' ';
}

Na linha 1 definimos o diretório que será lido e armazenamos em uma variável para facilitar a manutenção do código, na linha 2 abrimos um manipulador de diretório com a função opendir() que nos retorna um ponteiro para ser utilizado em funções posteriores.

Bom agora podemos percorrer o diretório, mas antes vamos iniciar um contador (linha 3) para podermos armazenar em um array os nomes dos arquivos para poder entre outras coisas ordená-los.

Na linha 5 começamos a ler os arquivos e fazemos isso utilizando a função readdir() que retorna o nome do próximo arquivo do diretório aberto com a função opendir. Na linha 6 entramos em um laço que executa enquanto o nome do arquivo retornado pela função readdir() não for falso, ou seja não tenha listado todos os arquivos do diretório.

Dentro do laço (linha 7) fazemos um teste, se o nome retornado não for um diretório ( com a função is_dir()) e se o nome for diferente de “Thumbs.db”, aqueles arquivos chatos e miniaturas do windows que as vezes upamos sem querer

Na linha 8 armazenamos o nome do arquivo no array e na linha 9 incrementamos nosso contador. fora do if lemos o próximo arquivo do diretório para o teste do while.

Na linha 13 utilizamos a função sort() para ordenar nosso array onde estão armazenados os nomes das imagens. Isto é muito útil principalmente se os nomes dos arquivos sejam seqüênciais e correspondem também a uma miniatura em outro diretório como é o mais indicado caso queiram utilizar esse script para criar uma galeria com o PrettyPhoto.

Agora basta juntar os nomes do arquivos do array com as tags para exibir as fotos como é feito na linha 16, utilizando um foreach para percorrer array.

Este script facilita bastante a vida principalmente se s galerias criadas forem grandes ou precisar adicionar fotos frequentemente, espero que tenham gostado quem quiser baixar o exemplo clique aqui.

Posts Relacionados:

Youtube deixará de suportar IE6

Rodrigo Aramburu — Fri, 17 Jul 2009 12:57:59 +0000

Já sem tempo o Youtube decidiu não gastar o tempo de seus desenvolvedores corrigindo erros causados pelo Internet Explore 6, um browse antigo com muitos problemas e que é responsável por muitas das dores de cabeça dos desenvolvedores web.

O Youtube está recomendando que seus usuario troquem de navegador para o Internet Explore 8(ultima versão) Firefox 3.5 ou Google Chrome.

Mais um grande passo para a campanha Internet Explorer 6.0, nunca mais!.