Rodrigo Zandonadi - Web Design, Programação e afins...: 2011

quarta-feira, 14 de dezembro de 2011

BRUSH PACK 02

BRUSH PACK 02

Ótimo brush para Photoshop. Explorem mais brushes no http://freebrushes.net, ótimo site!!!

segunda-feira, 31 de outubro de 2011

Curso de Desenvolvimento Web - PHP aula 1

Blog Rodrigo Zandonadi - rodrigozandonadi.freetzi.com/blog

Fala pessoal!!!

Começamos hoje nossa primeira aula de PHP – vamos criar uma conexão entre o PHP e o banco de dados Mysql. Esta aula exige um conhecimento basico da linguagem PHP, então, pra quem não tem, acesse esta aula aqui – tutorial para iniciantes em PHP, do Balala do fórum webmasters. Para acessar a página do curso de PHP clique aqui.

Vamos lá!!!

Para começar, certifique-se que seu servidor está on line. Se você não tem um servidor instalado, precisa de um para visualizar suas paginas PHP no navegador. Eu utilizo o Wamp Server. Acesse este link para baixa-lo.

Abra seu editor de html preferido, pode ser o Dreamweaver, bloco de notas, PHP Editor, tanto faz. Acesse este link, para fazer download do Dreamweaver ou do PHP Editor.
Crie um arquivo e salve em uma pasta com nome Curso de PHP, com nome de aula1_conexao.php.

Vamos fazer nossa conexão. Para isso, usamos uma função do mysql, a mysql_connect.
Ela faz a conexão entre o PHP e o Mysql. A sintaxe da função é a seguinte:

mysql_connect (“servidor”, “usuario”,”senha”);

Se você está usando um servidor instalado no micro, como meio do Xampp ou Wamp, ou o próprio Apache instalado direto, no lugar de servidor você deve usar “localhost”. Se você não alterou as informações na instalação do servidor, no lugar de usuário deve colocar “root”, e no lugar de senha coloque a senha que você colocou. Aqui usaremos “123456″.

Olhe como fica a nossa conexão:

$conexao = mysql_connect (“localhost”, “root”, “123456″) or die (“problemas na conexão”);

É importante criarmos uma variavel para abrigarmos nossa sintaxe, senão não da certo. Por isso criamos a variavel $conexão. Uma variável não pode começar com um número, mas pode ter um número nela. É importante, na hora de criar uma váriavel, usar um nome que tenha a ver com a função que será desempenhada. No nosso caso, a váriavel tem o nome conexão.

Se acontecer algum problema para conetar a função or die mostrará a mensagem “problemas na conexão”.

Vamos agora criar o banco de dados. Vá no seu navegador e digite localhost/phpmyadmin/.

Crie um banco de dados com o nome de teste_conexao. Crie uma tabela com nome tb_conexao. No campo número de arquivos, digite 2.

Agora no primeiro campo digite nome e no segundo digite email. Escolha Tipo Text para os dois e clique em salvar.

Agora vamos voltar no arquivo aula1_conexao.php. Vamos selecionar o banco de dados que acabamos de criar, usando a função mysql_select_db. Digite na 2ªlinha da página:

mysql_select_db (“teste_conexao”) or die (“problemas na conexão”);

A função mysql_select_db conecta a pagina com o banco de dados “teste_conexao”. Se acontecer algum problema para conetar a função or die mostrará a mensagem “problemas na conexão”.

Nosso arquivo de conexão ficará assim:

<?php
$conexao = mysql_connect (“localhost”, “root”, “123456″) or die (“problemas na conexão”);
mysql_select_db (“teste_conexao”) or die (“problemas na conexão”);
?>
Vamos testar para ver se está tudo certo? Crie um arquivo na mesma pasta com o nome de teste_conexao.html.

Crie um pequeno formulário:

<form action="recebe_dados.php" method="post">
nome:<input name="nome" type="text" /><br />
email:<input name="email" type="text" /><br />
<input name="enviar" type="submit" value="Enviar" />
</form>

Salve as alterações. Se quiser brincar um pouco com o layout, pode mudar a fonte, cor e cor de fundo da pagina.
Sua pagina HTML ficara assim:

<!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=utf-8" />
<title>Curso de desenvolvimento web/title>
<style type="text/css">
body {
 background-color:#F2F2F2;
}

#formulario {
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 color:#600;
 font-size:12px;
}

h3 {
 background-color:#CCC;
}
</style>

</head>

<body>

<div id="formulario">

<h1><strong>Curso de desenvolvimento web - PHP aula 1</strong></h1>

<h2><strong>Conexão PHP com banco de dados Mysql</strong></h2>

<h3><strong>Teste de conexão PHP/Mysql</strong></h3>

<form action="recebe_dados.php" method="post" >
<table>
<tr><td>nome:</td><td><input name="nome" type="text" /></td></tr><br />
<tr><td>email:</td><td><input name="email" type="text" /></td></tr><br />
</table>
<input name="enviar" type="submit" value="Enviar" />
</form>

</div><!--fecha a div formulário-->
</body>
</html>

Vamos criar a pagina que recebera os dados do formulário. Crie uma nova pagina e salve como recebe_dados.php.

Digite o seguinte:

<?php

     include "aula1_conexao.php";
  $nome = $_POST['nome'];
  $email = $_POST['email'];
  $inserir = ("INSERT INTO tb_conexao (nome, email)VALUES('$nome', '$email')");
     mysql_query($inserir)or die (mysql_error());

         echo "Cadastro realizado com sucesso."

         echo "para visualizar as informações <a href='exibe_dados.php'>clique aqui."</a>

?>

A função include chama o arquivo aula1_conexao.php na pagina. Criamos uma variavel $nome que recebe o valor do campo nome e uma variavel $email que recebe o valor do campo email.

A variavel $inserir chama os valores pra dentro da nossa tabela tb_conexao.

Vamos exibir as infomações. Crie um arquivo e salve como exibe_dados.php.

Digite o seguinte:

<!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=utf-8" />
<title>Curso de desenvolvimento web</title>
<?php

    include "aula1_conexao.php";
 $a = mysql_query("SELECT * FROM tb_conexao");
 $arr = mysql_fetch_array($a);
 echo $arr['nome'] . "<br>";
 echo $arr['email'] . "<br>";

?>

</body>

</html>

As informações que você digitar no formulario da pagina teste_conexao.html devem aparecer na pagina exibe_dados.php.

É isso pessoal, até a próxima!!!

sábado, 17 de setembro de 2011

Blogs & Sites: 4 Metas + 10 Dicas Para inspirar, conectar e alcançar Resultados

Novo blog - rodrigozandonadi.freetzi.com
Blogs & Sites: 4 Metas + 10 Dicas Para inspirar, conectar e alcançar Resultados

quarta-feira, 14 de setembro de 2011

10 diferenças entre HTML4 e HTML5

Este artigo de Georgieva Tsveti ressalta algumas diferenças entre HTML4 e HTML5, importante fonte de estudo para desenvolvedores que trabalham ou querem trabalhar com HTML5. O artigo original você encontra no developerdrive.com, em inglês.

HTML5 é a nova versão do padrão HTML e mais cedo ou mais tarde todos os desenvolvedores web vão encontrar-se trabalhar com este novo padrão e muitos de nós pode achar que é mais fácil construir um site a partir do zero do que para migrar o código da HTML4 para HTML5 por causa de todos as diferenças entre as duas versões.

Na verdade, não é uma grande reformulação HTML5 de HTML4 existem muitas semelhanças entre os dois.

No entanto, existem também algumas diferenças essenciais que você precisa estar ciente. Aqui estão algumas (mas não todos, porque lista todos eles não será possível) dessas grandes diferenças entre HTML4 e HTML5:

1. HTML5 ainda é um trabalho em andamento

A primeira diferença é bastante óbvio, mas uma vez que é muito importante, precisamos começar por aí. Você poderia estar lendo em todos os lugares sobre como HTML5 é legal, mas isso não muda o fato de que HTML5 é um trabalho em andamento. HTML4 pode ser superior a 10 anos de idade, mas é um padrão acabado que não vai mudar.

Pelo contrário, HTML5 ainda está em seus estágios iniciais e muitas mudanças podem ser esperadas. Você deve levar isso em conta, porque quando você projeta sites de novos elementos e atributos são adicionados / modificados várias vezes por ano, muito em breve você poderá encontrar-se gastar mais tempo atualizando o site para refletir as novas mudanças que você gostaria. É por isso que, por enquanto, é mais seguro usar HTML4 para a produção e HTML5 apenas experimentalmente por agora.

2. Sintaxe simplificada

A declaração doctype mais simples é apenas uma das muitas novidades em HTML5. Agora você precisa escrever somente: e isto é o <doctype html>. A sintaxe do HTML5 é compatível com HTML4 e XHTML1, mas não com SGML.

3. Um elemento <canvas> New Em vez do Flash

Flash tem sido tanto uma frustração e um deleite para os usuários da Web, então não haverá muitos desenvolvedores que não estão satisfeitos com a forma como HTML5 trata Flash. Mas para todo mundo que é simplesmente farto de vídeos em Flash inchado que ter idade para carregar e executar, o elemento <canvas> novo para renderização de gráficos é um sonho tornado realidade.

Por enquanto o elemento <canvas> não oferece todas as regalias do Flash, mas a suposição é que, mais cedo ou mais tarde ele vai fazer o Flash obsoleto na web. Vamos viver e vamos ver se isso vai acontecer, porque muitos profissionais são céticos sobre isso.

4. <header> Novo e Elementos <rodapé>

HTML5 se destina a refletir melhor a anatomia novo de sites web. É por isso que existem alguns elementos novos, como <header> e <rodapé>, que são projetados especificamente para marcar essas partes do site.

Este desenvolvimento na linguagem torna desnecessário para identificar estes dois elementos com a tag <div>.

5. Nova <section> e Elementos <article>

Da mesma forma que os elementos <header> e <rodapé>, o <section> novas e elementos <article> introduzido em HTML5 permitem que os desenvolvedores para marcar essas áreas da página como tal.

Presumivelmente, além de tornar o código mais estruturado, este também terá um efeito positivo sobre seus esforços de SEO para os motores de busca terá um tempo mais fácil ranking de suas páginas.

6. <menu> Novo e Elementos <figure>

O elemento novo <menu> pode ser usado para menus convencionais, mas também para barras de ferramentas e menus de contexto, embora na verdade estes não são os itens mais utilizados em uma página.
Da mesma forma, o elemento <figure> nova é mais uma forma de organizar o texto e imagens em uma página de uma forma profissional. É verdade que você pode definir os dois menus e figuras em uma folha de estilo, mas ainda é bom que você pode usar o no-build elementos HTML5.

7. Nova <audio> e Elementos <video>

O <audio> novas e elementos <video> são provavelmente dois dos acréscimos mais úteis novo HTML5. Como o nome indica, são utilizados para a incorporação de arquivos de áudio e vídeo.
Há também alguns novos elementos multimídia e atributos, como <track>, que fornece pistas de texto para o elemento de vídeo. Com estas adições HTML5 está definitivamente ficando mais e mais Web 2.0-friendly. O problema é que até o HTML5 tempo torna-se amplamente aceito, a Web 2.0 pode ser notícia velha.

8. Um nível novo inteiro para Formulários

O <form> e elementos <forminput> viu uma grande quantidade de revisão e agora eles têm muitos atributos novos (e os modificados, também). Se você é freqüentemente usando formas tomar o tempo para rever as novidades com mais detalhes.

9. No More <b> e <font>

Bem, esta é mais uma mudança que eu pessoalmente não entendo (ainda). Eu não acho que a remoção do <b> e elementos <font> vai ajudar muito. Eu sei que as diretrizes oficiais dizem que estes elementos são melhor tratados em CSS, mas ainda de vez em quando você precisa usá-los no texto e definir um estilo separado apenas por uma ou duas ocorrências é uma espécie de desajeitado, mas provavelmente vamos acostumar a ele.

10 <frame> No More, <center>, <big>

Na verdade, eu não consigo me lembrar quando a última vez que usei esses elementos foi assim que eu não vou chorar por eles, com certeza. Ainda assim, eles se foram para sempre, juntamente com alguns outros elementos - isso não é ruim, porque cada tag inúteis que é expulsa da especificação é bem-vinda.

Estes 10 diferenças entre HTML4 e HTML5 são apenas uma pequena fração do que há de novo na especificação. Além dessas grandes mudanças, eu também poderia citar uns poucos menores, tais como o novo atributo do elemento revertida <ol> que permite que uma lista a ser classificada em ordem decrescente, ou o uso do elemento modificado <u> .
No entanto, todas essas pequenas alterações são numerosos demais para ser descrita aqui. Mudanças são adicionados novos com bastante freqüência isso, se você quiser manter o seu conhecimento atual, você precisa verificar a diferença entre HTML4 e HTML5 página com bastante freqüência. Se você está impaciente e quer usar os novos elementos e atributos em seu trabalho, a minha recomendação é fazê-lo apenas a título experimental, porque como eu já expliquei, os elementos e seus atributos são obrigados a mudar um pouco no futuro, se não estiver constantemente modificando seu código para segui-los poderia se tornar desatualizados.

Mesmo que a maioria das novas versões de navegadores populares HTML5 apoio, eles não suportam todos os (alterado ou modificado) novos elementos e / ou atributos apenas ainda assim você está correndo o risco de que suas páginas podem ter uma aparência inconsistente em toda a sua telas dos usuários, que é tudo, mas profissional. Basta ter paciência e esperar até o momento em que HTML5 está pronto para o horário nobre uso. Por enquanto não é.

segunda-feira, 12 de setembro de 2011

65 pacotes de icones para designers e desenvolvedores

65 pacotes de icones para designers e desenvolvedores. Os pacotes incluem icones de redes sociais - trabalhados de diversas formas, icones web, icones de navegadores, icones dos transformes (acreditem, é o transformers mesmo), e os chamados cute icons, entre outros.