Curso PHP Gestão: 2012

sexta-feira, 23 de novembro de 2012

Aula 23/11 Include e Require

Olá,

Hoje a aula de PHP será das mais simples, aprenderemos um conceito básico de programação em PHP e que ajuda muito quando se precisa criar um site grande, com várias páginas.
Nós vamos aprender a reaproveitar "pedaços" de código PHP para montar nossas páginas, ou seja, coisas que repetem em muitas páginas só precisarão ser escritos uma única vez.

Mas antes de continuar vamos recapitular rapidamente os conteúdos das aulas anteriores:

Delimitar o espaço do php com <?php e ?>
Gerar textos na página com o echo "texto qualquer";
Criar variáveis com $variavel = "conteudo";
Imprimir variáveis com echo $variavel;
Receber informações de outra página com $_GET["campo"] e $_POST["campo"];
Utilizar "arrays" para agrupar informações iguais em uma única variável.

Bom, agora dando sequência aos aprendizados, vamos aprender o conceito de reaproveitamento de funções e arquivos do PHP.

Imagine o cenário:
Temos um site com 10 páginas, de diversos conteúdos, mas todas elas tem um menu principal, que dá acesso as demais páginas.

O código do menu é descrito abaixo:
echo "<p>";
echo "<a href='index.php'>Inicial</a> -";
echo "<a href='alunos.php'>Alunos</a> -";
echo "<a href='escola.php'>Escola</a> -";
echo "<a href='cursos.php'>Cursos</a> -";
echo "<a href='ajuda.php'>Ajuda</a>";
echo "</p>";

Pronto, agora para que esse código funcione em todas as páginas, eu teria que escreve-lo em todos os arquivos .php do meu site certo? Errado! Utilizando a propriedade "include" podemos resolver isso.

Include
O comando include permite que você adicione à sua página atual o conteúdo vindo de outro arquivo de seu site.
Para testar na prática vamos salvar o html que vimos no exemplo acima em um arquivo chamado "menu.php" ok?
Agora com o arquivo já salvo em sua pasta, observe o exemplo abaixo:
<html>
<body>
<h1>Bem vindo!</h1>
<p>Esta é a página principal do site</p>
<?php
include "menu.php";
?>
</body>
</html>

Salve este arquivo como "index.php" na mesma pasta do anterior e execute pelo EasyPHP.
Note que logo abaixo do título da página e da descrição vai aparecer o menu que haviamos criados no arquivo menu.php. Agora podemos utilizar este include em todas as páginas de nosso site.

Require
O comando require faz quase a mesma coisa que o include, porém este não é utilizado para unir pedaços de códigos, e sim para fornecer funções úteis.
Vamos imaginar que nosso código de exemplo do menu fosse o seguinte:
function criaMenu() {
echo "<p>";
echo "<a href='index.php'>Inicial</a> -";
echo "<a href='alunos.php'>Alunos</a> -";
echo "<a href='escola.php'>Escola</a> -";
echo "<a href='cursos.php'>Cursos</a> -";
echo "<a href='ajuda.php'>Ajuda</a>";
echo "</p>";
}

Note a diferença: agora colocamos o menu dentro de uma função reaproveitável chamada criaMenu().
Então em nossa página oficial, nós não usamos o include, nesse caso colocamos o require no começo do código e no local de nosso menu apenas chamamos a função certa. Veja:
<?php
require "menu.php";
?><html>
<body>
<h1>Bem vindo!</h1>
<p>Esta é a página principal do site</p>
<?php
criaMenu();
?>
</body>
</html>

sexta-feira, 16 de novembro de 2012

Aula 16/11 Utilizando arrays

Olá,

Na aula de hoje, dando continuidade ao nosso curso de PHP iremos aprender um pouco sobre arrays, mas antes de entrar em detalhes vamos dar uma relembrada nos conteúdos apresentados nas aulas passadas?

Aprendemos de PHP até aqui:

Delimitar o espaço do php com <?php e ?>
Gerar textos na página com o echo "texto qualquer";
Criar variáveis com $variavel = "conteudo";
Imprimir variáveis com echo $variavel;
Receber informações de outra página com $_GET["campo"] e $_POST["campo"];

Então já aprendemos a criar variáveis, que são espaços que armazenam informações para nós, agora vamos aprender um novo tipo de variável: os arrays.

Arrays

Você já teve aula de Matrizes na escola? Nas aulas de matemática do ensino fundamental nós aprendemos a criar matrizes numéricas [2,4; 5,6; 7,0]. Quem se lembra desse assunto vai se familiarizar com os arrays.

Organizando diversas varáveis do mesmo tipo de forma: imagine que você precisa criar variáveis para armazenar informações sobre o a idade de cada um dos alunos da sala de aula, normalmente você teria que criar um número enorme de variáveis né, algo como:

$idade_joao = 28;

$idade_pedro = 13;

$idade_jose = 15;

E por aí vai, não dá pra saber quantas seriam necessárias, pois a quantidade de alunos muda de aula para aula. Então, o array, que podemos traduzir como "vetor" ou "matriz" facilita a nossa vida neste sentido, ou seja, ele permite que possamos guardar a idade de todos os alunos em uma única variável!

Não é fantástico? Criando uma única variável podemos ter quantos alunos for necessário e todas as suas idades.

Tudo em uma única variável

Então chega de teoria, vamos ver como incluir todas as idades dos alunos em uma única variável do tipo array, há duas formas de fazer, vou demonstrar as duas e depois entro nas explicações:

Forma 1:

$idades = array("João"=>28,"Pedro"=>13,"José"=>15);

Forma 2:

$idades = array();

$idades["João"] = 28;

$idades["Pedro"] = 13;

$idades["José"] = 15;

Deu pra sacar? Na primeira forma, nós usamos um único comando para determinar quem são nossos alunos e sua respectiva idade. Na segunda forma, nós fazemos linha a linha, incluindo um aluno de cada vez.

Dependendo da situação ou do programador, uma forma pode ser mais preferível do que outra.

Visualizando as informações de um array:

Para visualizar na página os dados de um array, inicialmente, vamos utilizar uma função chamada print_r().

Exemplo:

<?php

$idades = array("João"=>28,"Pedro"=>13,"José"=>15);

print_r($idades);

Outras formas legais de criar um array:

Sem os nomes, apenas os valores:

$idades = array(28,13,15);

(Neste caso, o índice do array é numérico, começando no zero).

$idades = array();

$idades[] = 28;

$idades[] = 13;

$idades[] = 15;

Esta forma também elimina os nomes mantendo um índice numérico automático.

$idades = array();

$idades[2] = 28;

$idades[3] = 13;

$idades[4] = 15;

Neste exemplo por sua vez, forçamos um índice numérico começando pelo número 2.

sexta-feira, 9 de novembro de 2012

Aula 09/11 Criando Funções

Olá,

Nas últimas duas aulas iniciamos nosso aprendizado da linguagem PHP, aprendemos como utilizar a sintaxe PHP em meio ao nosso HTML, como imprimir conteúdos, utilizar variáveis e transferir informações de outra página com get e post.
Vamos dar uma pequena revisada, resumindo nosso caminho até aqui:

Delimitar o espaço do php com <?php e ?>
Gerar textos na página com o echo "texto qualquer";
Criar variáveis com $variavel = "conteudo";
Imprimir variáveis com echo $variavel;
Receber informações de outra página com $_GET["campo"] e $_POST["campo"];

Agora vamos dar um passo a mais em nosso aprendizado para melhorar nossos sites com PHP.
Na aula de hoje iremos aprender como criar funções, e como utilizá-las para resolver problemas propostos.
Também vamos conhecer algumas funções prontas do PHP e aprender como pesquisar as funções existentes na internet.

Função
Funções são blocos de código criados para serem reaproveitados em nosso site, estes pequenos espaços podem conter qualquer programação em PHP e ser chamada várias vezes, conforme necessário.
Algumas funções são criadas para resolver problemas específicos, como uma fórmula ou um tipo de cálculo.

Para criar uma função para usar a palavra function seguido do nome da função e de parênteses "()". O espaço destinado ao código deve ser delimitado com chaves "{}".
Veja o exemplo:
function dizMeuNome() {
echo "Willian Soares";
}

Para chamar essa função, fazendo ela funcionar basta usarmos o seu nome, digitando dizMeuNome(); em nosso código.

Note: a palavra function criando a função, o nome da função (segue a mesma regra do nome de variáveis, ou seja, nada de caracteres especiais), os parênteses e as chaves.
Dentro das chaves, vemos o nosso código, no caso o comando echo.
Simples? Vamos complicar um pouco, nós podemos passar informações para nossa função, para que ela faça algo com isto, e então apresente um resultado.
Chamamos de "parâmetros" os dados que passamos para uma função, estes parâmetros devem ser declarados como variáveis e separados por vírgulas.

Exemplo de como uma função imprimir o resultado de uma conta de multiplicação:

function vezes($valor1, $valor2) {
echo ($valor1 * $valor2);
}

Bacana né? Para fazê-la funcionar podemos fazer como no exemplo abaixo:

vezes(25, 10);

Isto deve imprimir o resultado "250".

Nós podemos usar o resultado de uma função sem precisar imprimir isto, ou seja, a função apenas devolve para uma variável o resultado de seu cálculo. E então o programador usa esse resultado como achar melhor, vamos melhorar nosso exemplo:

function vezes($valor1, $valor2) {
return ($valor1 * $valor2)
}

Note que temos uma palavra nova "return". Isto significa retorno, ou seja, nesse momento a função irá retornar seu resultado.

Uma forma de fazer uso da função desta forma pode ser vista abaixo:

$calc = vezes(25, 10);
echo "O resultado de 25 x 10 é " . $calc;

Vamos recapitular alguns pontos importantes sobre funções:

Trechos de blocos que podem ser reaproveitados
Poder efetuar e devolver resultados de cálculos
Seu nome deve possuir letras ou números ou "_" apenas
Entre parenteses podemos declarar parâmetros
As chaves delimitam o espaço de nosso bloco de código.

Funções do PHP
Da mesma maneira que usamos funções que criamos, podemos usar funções já existentes no PHP, e são miliares!
Vou listar aqui abaixo algumas funções interessantes para manipulação de texto:
strlen(): diz a quantidade de caracteres de um texto.
strtolower(): transforma o texto em minúsculo.
strtoupper(): transforma o texto em maiúsculo.

Vamos testar? Veja um exemplo de como aplicar estas funções no código.

$nome = "Willian Soares";
echo $nome . " possui " . strlen($nome) . " letras<p>";
echo "<p>Em minusculo: " . strtolower($nome);
echo "<p>Em maiusculo: " . strtoupper($nome);

Bacana né? Existem alguns sites aonde podemos pesquisar muitas funções legais do php:
Acessem:
http://www.php.net/manual/pt_BR/book.strings.php

sexta-feira, 26 de outubro de 2012

Aula 25/10 Sobre o GET e POST.

Olá,

Hoje teremos a nossa segunda aula de PHP, dando continuidade ao nosso estudo sobre como criar páginas web para a Internet.

Uma pequena revisão, na última aula nós aprendemos:

Códigos em PHP se misturam ao HTML básico através das tags <?php e ?>;
O comando "echo" exibe qualquer conteúdo do php direto no código HTML;
Para textos usamos aspas (") no início e fim;
Para números usamos apenas os números, sem aspas;
Para números com valores decimais (como dinheiro), usamos ponto e não vírgula para separar;
Variáveis são espaços no programa que usamos para guardar qualquer informação para reutilizar depois.
Variáveis devem começar com $ (cifrão), em acentos, espaços ou caracteres especiais.
Para usar o nome da variável, o símbolo "igual " (=) e o conteúdo que queremos armazenar.
Podemos usar um único comando "echo" com diversos conteúdos impressos unidos pelo símbolo "ponto" (.);
Ponto-e-vírgula no fim de cada linha de comando PHP.

Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Meu primeiro programa PHP
</title>
</head>
<body>
<?php
$nome = "Pedro Calcanhar";
echo "<p>Nome: " . $nome . "</p>";
?>
</body>
</html>

Quando o internauta envia informações para a página
É comum em uma página de internet o internauta digitar alguma informação que é enviada para o site, fazendo com que outra página seja acessada com suas informações.
Exemplos de informações que costumamos enviar nas páginas que entramos:

Login
Nosso Email
Nossa Senha
Nome
Documentos
Idade
Dados de busca (como o do Google)
Etc

Como vemos, isto é muito comum. E muito fácil de ser feito por PHP.
Para ensinar e testar este tipo de operação em nossos estudos, preparei um cenário no qual vamos poder utilizar esta tecnologia e ainda se divertir de maneira muito interessante.
Calculadora: vamos criar duas páginas em nosso site: a principal (index.php) será um formulário aonde o internauta informa dois números e um tipo de operação. A segunda página (calc.php) irá receber os dados da primeira (como vamos aprender a seguir) e efetuar o cálculo, exibindo-o na página via comando echo que já aprendemos aqui antes.

Duas maneiras de atingir o mesmo resultado
Quando um internauta envia seus dados para o site, há duas maneiras do site fazer isso: GET e POST.
Basicamente, podemos entender como o seguinte: uma das formas é digamos, mais pública e simples, enquanto a outra é mais privada e segura.

GET
Este método é utilizado com mais frequência, pois é muito útil e simples para o envio de informações simples e não exigem um grau de segurança elevado, como por exemplo: campos de busca e parâmetros de busca.
É muito simples de perceber os dados sendo enviados e recebidos por GET, basta olhar para o endereço da página lá no navegador, tudo que vem após o ? (interrogação) são dados enviados por GET.
Exemplo, olhe este endereço:
https://www.google.com.br/?q=escolagestao

Veja que a informação "q=escolagestao" é um dado que foi enviado para a página por este método.

POST
O Post já é um método mais utilizado para enviar dados que exigem um nível de segurança um pouco maior, como login e senhas por exemplo ou uma quantidade de informações muito grande. Estes dados não aparecem no endereço da página e por isso não são fáceis de serem percebidos pelos internautas.

Formulários
Lembram da aula de formulários?
Olha o link: http://cursophpgestao.blogspot.com.br/2012/08/aula-3108-formularios.html

Cada campo do formulário é enviado para a página de destino por get ou por post.
Iremos testar com as duas opções.
Veja um exemplo de um formulário que envia o login e senha por post:

<!DOCTYPE html>
<html>
<head>
<title>
Meu primeiro programa PHP
</title>
</head>
<body>
<form name="envio" action="destino.php" method="POST">
<input type="text" name="login" />
<input type="password" name="senha" />
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Simples não?
Note em verde alguns dados especiais, o endereço da página de destino, o método de envio, POST no caso, e o nome dos campos, o login e a senha neste caso.

Lendo o GET e POST pelo PHP
Agora que já vimos como enviar estas informações para a página de destino, vamos aprender como ler seu conteúdo em variáveis do PHP, lembram das variáveis? Na aula anterior falamos bastante sobre isso.

Vamos supor que temos duas informações recebidas, uma por GET e outra por POST, vou chamá-las de "nome", enviado por GET e "idade", enviado por POST.
Vou obter estes conteúdos e depois imprimí-los via comando echo. Vejam:
<?php
$nome = $_GET["nome"];
$idade = $_POST["idade"];

echo $nome;
echo $idade;
?>

Simples não? Ou seja, basta usar as expressões $_GET[""] e $_POST[""] colocando entre as aspas o nome dos campos que foram enviados.

Agora é só acompanhar a aula presencial para ver como utilizamos isto tudo para gerar uma calculadora show de boa!

Se quiser se adiantar, pode conferir este exemplo funcional baixando ele neste link.
A imagem de fundo utilizada no exemplo pode ser conseguida logo abaixo:

sexta-feira, 19 de outubro de 2012

Aula 19/10 Usando e Exibindo Variáveis

Continuando nosso curso de PHP vamos começar a aprender os primeiros comandos desta linguagem maravilhosa. A aula de hoje será sobre como declarar e usar variáveis, imprimindo seu conteúdo em seu site em HTML.

Variável
Variáveis são utilizadas em qualquer linguagem de programação, o tempo todo! Mas o que são variáveis? É fácil de entender, varáveis vocês podem entender como qualquer informação que você precisa utilizar em seu programa, em seu código, e que pode ter seu valor, seu conteúdo manipulado e alterado no tempo. Por exemplo, um nome de uma pessoa, é uma variável, pois podemos ter qualquer nome, diversos nomes diferentes, uma idade para esta pessoa, também é uma variável, pois pode ser qualquer idade, em resumo, qualquer informação dinâmica que você precisa utilizar em seu site, pode ser uma variável.

Na prática:

Toda variável em PHP tem seu nome composto pelo caracter $ e uma string, que deve iniciar por uma letra ou o caracter “_”. PHP é case sensitive, ou seja, as variáveis $php e $PHP são diferentes. Por isso é preciso ter muito cuidado ao definir os nomes das variáveis. É bom evitar os nomes em maiúsculas, pois como veremos mais adiante, o PHP já possui alguma variáveis pré-definidas cujos nomes são formados por letras maiúsculas.

Exemplos de nome de variáveis corretos:
$pessoa
$idade
$salario
$resposta
$_teste

Exemplos de nome de variáveis errados:
$250 - Não pode iniciar por números
$salário - Não pode ter acentos ou outros símbolos
idade - Não pode esquecer do $ no começo

Quando você for criar uma variável é interessante já criar dando a ela seu primeiro valor, ou seja, seu primeiro significado, exemplos:
Uma informação que representa um número (inteiro), como uma idade por exemplo:
$idade = 28;
Uma informação que representa um valor quebrado (decimais) como um salário por exemplo:
$salario = 1400.25;
Uma informação que representa um texto como um nome por exemplo:
$nome = "José da Silva";

Detalhes: notem que para atribuir o valor das variáveis usamos um simbolo "=" (igual), para textos usamos aspas "" entre o texto e para números apenas digitamos os numeros, separando as decimais com ponto (.) isso mesmo, ponto! Não use vírgula!

Exibindo as variáveis na página
Para exibir as variáveis basta usarmos um comando do PHP chamado "echo", e na frente o nome da variável.
Podemos também usar o echo para exibir qualquer texto que não esteja em uma variável, até comandos HTML. Assim:
echo "<p>Paragrafo aqui</p>";

Vamos conferir na prática como isso funciona?

<!DOCTYPE html>
<html>
<head>
<title>
Meu primeiro programa PHP
</title>
</head>
<body>
A parte abaixo está rodando em PHP:
<p>
  <?php
$nome = "Pedro Calcanhar";
$idade = 28;
$salario = 2400.36;

echo "<p>";
echo "Nome: ";
echo $nome;
echo "<br>";
echo "Idade: ";
echo $idade;
echo "<br>";
echo "Salário: ";
echo $salario;
echo "</p>";
  ?>
</p>
</body>
</html>

Executem este exemplo em seu computador, notem que o nome, a idade e o salário são exibidos na página em HTML, mas foram gerados por nosso PHP.

Juntando tudo
Podemos programar de uma maneira bem mais simples esse código que foi exibido, ao invés de termos 10 linhas de "echo" podemos reduzir concatenando, ou seja, juntando as informações em uma única linha.
Concatenação:
Para concatenar textos e variáveis, vamos usar o ponto ".", basta colocar um ponto entre as informações e pronto, veja o exemplo reformulado:

<!DOCTYPE html>
<html>
<head>
<title>
Meu primeiro programa PHP
</title>
</head>
<body>
A parte abaixo está rodando em PHP:
<p>
  <?php
$nome = "Pedro Calcanhar";
$idade = 28;
$salario = 2400.36;

echo "<p>" . "Nome: " . $nome . "<br>";
echo "Idade: " . $idade . "<br>";
echo "Salário: " . $salario . "</p>";
  ?>
</p>
</body>
</html>

Bem melhor né?

Aula 19/10 Introdução ao PHP

Finalmente chegamos ao objetivo principal do curso.

PHP - Hypertext Preprocessor, ou processador de hiper-texto. PHP é uma linguagem de programação que permite gerar páginas de web de forma dinâmica e eficiente.

Tudo que aprendemos até aqui, ou seja, formas de criar uma página de internet através de comandos HTML, será utilizado, porém de uma forma diferente.

Quando criamos uma página em HTML simples, ela é estática, ou seja, sempre igual, não sofre alteração até que o programador altere novamente o HTML.

Em PHP podemos criar uma página HTML que se altera dinamicamente no tempo, conforme a necessidade, por exemplo: podemos criar uma página que mostra a data e hora corretos, que exibe fotos de forma aleatória, permita a inclusão de novas fotos e até uma página de mensagens e email pode ser feita em PHP.

Algumas características do PHP:

Velocidade e robustez.
Estruturado e orientação a objetos.
Portabilidade - independência de plataforma - escreva uma vez, rode em qualquer lugar.
Tipagem dinâmica.
Sintaxe similar a C/C++ e o Perl.
Open-source.

Para usar códigos da linguagem PHP dentro de uma página feita em HTML, teremos que escrevê-los dentro de uma TAG específica para o PHP (parecido com o que já vimos em javascript).
Para iniciar um programa PHP usamos a tag <?php e para encerrar usamos a tag ?>
Vejamos um exemplo:

<!DOCTYPE html>
<html>
<head>
<title>
Meu primeiro programa PHP
</title>
</head>
<body>
A parte abaixo está rodando em PHP:
<p>
<?php
echo "Meu primeiro programa em PHP funciona";
?>
</p>
</body>
</html>

Note: dentro de <?php e ?> escrevemos nosso primeiro comando em PHP.
A partir da próxima aula aprenderemos muitos comandos e funções para tornar o desenvolvimento de sites muito mais interessante!

Atenção: qualquer página que você faça usando PHP salve o arquivo com .php na extensão ok? Exemplo: index.php

sexta-feira, 21 de setembro de 2012

Aula 21/09 IFrames

Hoje a aula será sobre iframes.

No começo pode parecer um pouco confuso mas logo você verá como eles são legais e podem ser bem aproveitados em alguns sites.

IFrames são quadros que podemos colocar em nossa página da internet, este quadro tem a capacidade de carregar um conteúdo de outro site ou página dentro dele.

Vou mostrar um exemplo com algumas imagens:
Construí uma página simples com o texto "E aqui abaixo você tem o UOL rodando dentro da minha página".
Veja o exemplo:

Bem, agora vou mostrar o que acontece quando colocamos um IFrame dentro da página e programamos ele para acessar a página do UOL. Veja:

Bacana né, vamos ver como isso fica em códigos.

IFrame
Para criar um IFrame basta usar a tag <iframe> fazendo uso de três propriedades básicas:
src: o local aonde você indica que nome de página ou site irá abrir.
width: a largura (dimensão) do seu iframe dentro da página.
height: a altura do seu iframe dentro da página.

Exemplo:
<iframe src="http://facebook.com" width="400" height="250"></iframe>

Simples não?
Então vamos ao que interessa:

Primeiro, veja como ficou o código da página simples, sem o IFrame:

Agora, note quando adicionamos o comando do iframe na página que faz aparecer uma página dentro da outra.

Fantástico né?

Bons exercícios e até mais.

quinta-feira, 13 de setembro de 2012

Aula 14/09 Javascript

Esta aula ensinará como adicionar alguns códigos e comandos especiais a sua página na internet, permitindo criar alguns efeitos dinâmicos e interessantes.
Para tal, utilizaremos uma linguagem de programação, no caso, o javascript.

Mas o que é JavaScript?
JavaScript é uma linguagem de script padronizada pela Ecma international nas especificações ECMA-262 e ISO/IEC 16262 e é atualmente a principal linguagem para programação client-side em navegadores web. Foi concebida para ser uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta ordem comumente indisponíveis em linguagens populares como Java e C++.

O que dá pra fazer com JavaScript?
Em uma página web, podemos apresentar mensagens, solicitar informações, fazer perguntas, validar formulários e movimentar elementos da página de forma dinâmica!

Como inserir um script na página?
É simples, basta utilizar a tag script para dar início e fim ao seu javascript. Veja:
< script >
// Aqui dentro vai a programação em javascript
</ script >

Alguns comandos básicos
Agora vamos aprender a incrementar nossa página com alguns comandos básicos.

Mensagem
Podemos dar uma mensagem de boas vindas ao entrar na página que tal?

<script>
// Mensagem de boas vindas
alert("Bem vindo ao meu site! Aproveite.");
</ script >

Pergunta
Também é possível solicitar a resposta à uma pergunta, veja como:

< script >
// Faz uma pergunta para responder OK ou Cancela.
var respondeu = confirm("Este site está em desenvolvimento, ok?");
</ script >

Interpretando a pergunta
Dá para usar a resposta da pergunta para alguma coisa, que tal?
Para isso precisamos de verificar se o internauta respondeu a pergunta, ou seja, inserir uma condição ao nosso código, SE ele respondeu, nós damos uma mensagem, SE NÃO, não fazemos nada.

< script >
// Faz uma pergunta para responder OK ou Cancela.
var respondeu = confirm("Este site está em desenvolvimento, ok?");
// Se respondeu
if (respondeu) {
// Responde ao internauta
alert("Muito bem, obrigado por concordar.");
}
</ script >

Solicitando informações para o internauta
Também podemos solicitar que o internauta nos informe qualquer coisa, por exemplo, vamos solicitar a sua idade. Veja como:

< script >
// Solicita a idade do internauta
var idade = confirm("Digite a sua idade por favor:");
// Confirma a idade do internauta
alert("Ok, você informou que sua idade é " + idade);
</ script >

- Texto em negrito
<b> e </b>

- Texto em itálico
<i> e </i>

- Texto em sublinhado
<u> e </u>

- Alterando a fonte (letra) do texto
<font face="nome da fonte" size="tamanho da fonte" color="cor da fonte"> e </font>
Ex: <font face="arial" size="3" color="blue">Texto azul</font>

- Inserindo uma imagem na página
<img src="caminho imagem" width="largura" height="altura">
Ex: <img src="foto.jpg" width="100" height="100">

- Criando uma tabela
<table border=1> e </table>

- Inserindo uma linha na tabela
<tr> e </tr>

- Inserindo uma coluna (célula) na tabela
<td> e </td>

- Criando um link para outra página
<a href="endereço da página"> e </a>

- Inserindo um bloco javascript (programação) na página
<script> e </script>

- Inserindo uma linha divisória na página
<hr />

quinta-feira, 30 de agosto de 2012

Aula 31/08 Formulários

Hoje o conteúdo da aula será sobre formulários e seus elementos.

Mas o que são formulários?
Em um site, formulários são aqueles espaços aonde algumas informações são solicitadas para preenchimento do internauta, por exemplo: um espaço aonde há um campo de texto para informar o seu email para receber novidades, é um formulário. Ou então, aquelas páginas de contato solicitando seu nome, telefone, e uma mensagem, estas informações constituem um formulário.

Um exemplo de um formulário de contato em uma página

Para criar um formulário em uma página nós utilizamos a tag FORM. É muito simples, veja:
<form>
Tudo aqui dentro é meu formulário
</form>

Dentro de um formulário nós podemos inserir diversos tipos de campos, podemos solicitar uma informação textual, ou então uma opção, ou uma lista de opções, etc.
Vamos conhecer abaixo alguns tipos de informações para formulários.

Campo de Texto
Para solicitar que o internauta informe um texto, nós usamos a tag INPUT com a propriedade type = "text". Veja a seguir:
<form>
Nome: <input type="text" name="nome" size="60" />
</form>

Lista de opções
Outra ferramenta igualmente útil é a possibilidade de criar uma lista de opções para a escolha do internauta, para tal utilizamos a tag SELECT, informando cada opção com a tag OPTION. Segue:
<form>
Escolha um estado:
<select>
<option>SP</option>
<option>RJ</option>
<option>ES</option>
</select>
</form>

Campo de confirmação
Quando você quiser solicitar uma informação cuja resposta é apenas "sim" ou "não", como por exemplo "Você é casado?", a melhor opção é um INPUT com o type = "checkbox". Veja:
<form>
<input type="checkbox" checked="false" /> Concordo com o conteúdo da aula.
</form>

Botão de envio
Botões de envio também são criados pela tag INPUT, com type = "submit", é bem simples, veja:
<form>
<input type="submit" value="Enviar dados" />
</form>

Outros botões
Demais botões podem ser criados com a tag BUTTON, a diferença erá explicada nas próximas aulas.
<form>
<button>Limpar</button> <button>Sair</button>
</form>

Fácil? Só decorar qual tipo é mais apropriado para qual necessidade e praticar bastante!
Nas próximas aulas aprenderemos a interagir com o formulário via javascript e PHP.

quinta-feira, 23 de agosto de 2012

Aula 24/08 Hiperlinks

Olá,

Neste post será ensinado a como inserir links na sua página, seja para uma outra página de seu próprio site, seja para um outro site diferente.

Links são nada mais do que um vínculo, que com o clique do mouse faz com que a outra página abra no seu navegador.
A tag que cria links é a tag <a>, mas não é só isso, é necessário informar o endereço do link na propriedade "href",
Veja o exemplo abaixo:

<p>
Link para <a href="http://www.google.com">Google</a>
</p>

O exemplo citado cria um link que abre o site do google, o link se chama no caso "Google". Se você copiar este exemplo e executá-lo em seu site verá o seguinte resultado:

Link para Google

Clique para conferir!

É bem fácil né? Se fosse para apontar o link para uma página de seu site, não precisaria do endereço completo, apenas do nome do arquivo, exemplo:

<p>
Link para <a href="outrapagina.php">Outra página</a>
</p>

Ok? Agora é só praticar e começar a criar menus e outras conexões em seu site.

Aula 24/08 Tabelas

Olá,
Neste tópico o conteúdo da aula será como criar e apresentar uma tabela de dados em seu site.

Mas o que é tabela?
Se você já fez curso de excel vai estar familiarizado com o termo, tabela é uma grade de informações dispostas em linhas e colunas. Por exemplo: podemos ter uma tabela de alunos que informe o nome e a idade dos alunos.

Exemplo de uma tabela, atenção para a disposição das linhas e colunas:

Legal né? Para criar uma tabela como esta é necessário um pouco de atenção com as Tags necessárias, basicamente são três tags principais:
TABLE: Cria e termina a tabela, é usada no início e no fim da tabela apenas.
TR: Cria e encerra uma linha, é usada toda vez que uma nova linha é inserida na tabela.
TD: Cria e encerra uma célula (coluna), é usada toda vez que uma nova informação é inserida na tabela.

Para entender melhor:

Na prática:

<table border="1" cellpadding="5" cellspacing="1">
<tr>
<td><b>Marca</b></td><td><b>Modelo</b></td><td><b>Valor</b></td>
</tr>
<tr>
<td>Gibson</td><td>Les Paul</td><td>R$ 6.852,32</td>
</tr>
<tr>
<td>Ibanez</td><td>J. Custom</td><td>R$ 2.653,32</td>
</tr>
<tr>
<td>Fender</td><td>Stratocaster</td><td>R$ 4.999,99</td>
</tr>
<tr>
<td>Yamaha</td><td>RGx</td><td>R$ 2.300,02</td>
</tr>
</table>

Legal? Vejam que na tag TABLE adicionei as propriedades border, cellpadding e cellspacing.
Elas representam respectivamente:
border: a largura da borda
cellpadding: a margem do texto em relação a borda
cellspacing: o espaço entre as bordas.

Agora é só praticar bastante!

quinta-feira, 16 de agosto de 2012

Aula 17/08 Imagens

Agora que já sabemos como preparar nossa página, dando cor e imagem para o fundo e formatando os textos de maneira bem eficiente, vamos aprender a inserir imagens em meio ao nosso texto, dando um conteúdo mais vivo e vibrante ao site.

A tag IMG
A tag responsável pelas imagens é a tag img, é uma tag super fácil de usar pois possui poucas propriedades, elas são:
src: o nome e caminho da imagem (caminho somente se não estiver na mesma pasta).
alt: o texto que aparece enquanto a imagem não é carregada.
height: altura em pixels
width: largura em pixels

Vamos praticar?
Considere que existe uma imagem "teste.jpg" na pasta de seu site.

<img src="teste.jpg" width="250" />

No exemplo acima mostramos a imagem com 250px de largura.

PS: Vejam que a tag img não precisa de inicio+fim, basta uma tag com barra antes do sinal de maior.

Mais exemplos:
Uma imagem que está em outro caminho:
<img src="http://www.teste.com.br/teste.jpg" />

Uma imagem com altura definida em 300px:
<img src="teste.jpg" height="300" />

Exercício:
Agora já estamos prontos para criar uma página completa e bem formatada com textos e imagens.
Já preparei uma pasta com um documento vazio e algumas imagens, também possui alguns textos que podem ser usados.
Baixe esta pasta clicando aqui.

Analisem o conteúdo dela e tentem trabalhar um documento html que ao final se pareça com o abaixo:

Aula 17/08 Formatação da página e textos

Formatando a página
Para dar vida a nossa página, nós podemos dar cor ao fundo, cor as letras, inserir uma imagem de fundo e alterar as margens. Tudo isso é feito alterando as propriedades da tag <body>, que como vimos anteriormente é a tag que define o "corpo" da nossa página ok?

Propriedades?
Isso mesmo, para cada "tag" podemos definir propriedades com valores diferentes, a maneira de fazer isso é simples, veja o exemplo:
<tag propriedade1="valor1" propriedade2="valor2">
Basta colocar o nome da propriedade dentro da tag com o valor entre aspas. Simples né?

Exemplos para formatar o corpo da página:
Alterando a cor de fundo para azul:
<body bgcolor="#0000cc">
PS: Não se esqueça de conferir a tabela de cores na apostila do curso!

Inserindo uma imagem de fundo:
<body background="meufundo.jpg">
PS: a imagem tem que estar na mesma pasta da sua página neste exemplo.

Alterando a margem esquerda do texto em nossa página:
<body leftmargin="50">
Este número está em pixels.

Alterando a cor da letra de nossa página para branco:
<body text="#FFFFFF">

Podemos usar tudo junto:
<body text="#FFFFFF" bgcolor="#0000cc" background="meufundo.jpg" leftmargin="50">

Tags para a formatação de textos:

Tag “p”: cria um novo parágrafo. Exemplo:
<p>Qualquer tecnologia suficientemente avançada é indistinguível
de magia.</p>
Tag br: quebra a linha sem alterar o parágrafo, exemplo:
<p>
Qualquer tecnologia suficientemente avançada é indistinguível de
magia
<br/>
Arthur C. Clarke
</p>
Tags “h“: fornecem um tamanho de fonte variável para títulos de parágrafos, exemplo:
<h1>Tamanho 1, muito grande</h1>
<h2>Tamanho 2, grande</h2>
<h3>Tamanho 3, tamanho normal</h3>
<h4>Tamanho 4, razoável</h4>
<h5>Tamanho 5, pequeno</h5>
<h6>Tamanho 6, bem pequeno</h6>

Tag “b”: Negrita o texto, exemplo:
<p>Texto normal, com texto <b>Negrito</b></p>
Resultado: Texto normal, com texto Negrito
Tag “i”: Torna o texto itálico, exemplo:
<p>Texto normal, com texto <i>Itálico</i></p>
Resultado: Texto normal, com texto Itálico
Tag “u”: Torna o texto sublinhado, exemplo:
<p>Texto normal, com texto <u>Sublinhado</u></p>
Resultado: Texto normal, com texto Sublinhado
Tag font: Esta tag permite escolher o nome da fonte (letra), tamanho e cor da letra. Alguns
exemplos:
<font face=”Verdana” size=3 color=#0000ff>Texto azul</font>
Resulta: Texto azul
<font face=”Arial” size=2 color=#00ff00>Aqui um texto verde em
Arial</font>
Resulta: Aqui um texto verde em Arial
<font face=”Verdana” size=2 color=#ff0000>E aqui um texto
vermelho</font>
Resulta: E aqui um texto vermelho

Não se esqueçam de conferir todos estes exemplos na apostila e praticar bastante variando os detalhes da página e a formatação dos textos!