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.

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!

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!

Aula 17/08 Introdução ao HTML

O propósito da aula de hoje é dar início ao desenvolvimento de sites através da introdução ao básico do HTML.
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.
Basicamente, o que vamos fazer é utilizar marcações, chamadas de "tags" para definir como queremos que seja o nosso site.

O começo de tudo
O início de qualquer página que vamos criar, deve começar com algumas tags básicas, veja abaixo:

<!DOCTYPE html> 
<html>
  <head>
    <title>
      O título da página
    </title>
  </head>
  <body>
    O conteúdo da página
  </body>
</html>

Este é conteúdo padrão de uma página vazia, ainda sem conteúdo, de onde, a partir dela iremos continuar nosso site e inserir conteúdo. Mas vamos analisar com calma as tags deste bloco padrão:
<!DOCTYPE html> Indica que estamos criando um documento do tipo html, página de web.
<html> Indica aonde começa nossa página no arquivo
<head> Indica aonde começa o cabeçalho de nosso arquivo, no cabeçalho estão algumas informações de identificação da página e outras características que serão faladas futuramente.
<title> Indica o início do título de nossa página.
</title> Indica o fim do título de nossa página.
</head> Indica o fim do cabeçalho da página.
<body> Indica o início do corpo de nossa página, no corpo é aonde colocaremos nosso conteúdo, textos, imagens, etc.
</body> Indica o fim do corpo de nossa página.
</html> Indica o fim de nosso documento.

Um pouco mais das tags
Como podemos perceber no exemplo acima, as tags sempre possuem o sinal de maior e menor delimitando seu nome, exemplo:
<body> <title> <a> <b> <img> etc
Quando a tag tem início e fim, a tag do fim possui uma barra depois do sinal de menor, exemplo:
</body> </title> </a> </b> etc
Atenção: se a tag não possuir início e fim, ela precisa de uma barra antes do sinal de maior, exemplo:
<br /> <img /> <hr /> etc

Ok? Então não se esqueçam de decorar a sequência básica do início de uma página:
Incio do documento + Inicio do cabeçalho + Título + Fim cabeçalho + Corpo + Fim do documento.
Façam uma colinha do exemplo citado aqui para ficar fácil.

Aula 10/08 Apresentação

Bem vindos ao primeiro dia de aula!

Esta aula tem o carácter apenas de apresentar a escola e o curso, bem como conhecer os alunos e o professor do curso.

Eu, o professor, Willian Soares vou estar com vocês nesse um ano de curso para passar um pouco do meu conhecimento e espero que possam aprender tudo e termos um grande sucesso!

Um pouco de mim:
Trabalho com desenvolvimento de softwares e sites há 12 anos passando por algumas empresas aqui da região. Sou formado em Sistemas de Informação pela Unimep em Piracicaba, me formei em 2005.

Alguns dados de contato importantes para manter contato com meus alunos:
Email: wsoares@portalqi.net
Messenger: wildsoares@hotmail.com
Skype: willian_zt
Twitter: @wildsoares
Facebook: www.facebook.com/wildsoares
Meu site pessoal: zttecnologias.com.br

Sobre o HTML:

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral.

SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Sobre o PHP:

PHP (um acrônimo recursivo para "PHP: Hypertext Preprocessor", originalmente Personal Home Page) é uma linguagem interpretada livre, usada originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no lado do servidor, capazes de gerar conteúdo dinâmico na Internet. Figura entre as primeiras linguagens passíveis de inserção em documentos HTML, dispensando em muitos casos o uso de arquivos externos para eventuais processamentos de dados. O código é interpretado no lado do servidor pelo módulo PHP, que também gera a página web a ser visualizada no lado do cliente. A linguagem evoluiu, passou a oferecer funcionalidades em linha de comando, e além disso, ganhou características adicionais, que permitiram o seu uso em outras aplicações, não relacionadas a web sites.

Para instalar:
Inicialmente nós vamos trabalhar com duas ferramentas principais durante o curso:
EasyPHP: é um aplicativo que irá "simular" o ambiente da web na sua máquina, executando o PHP e o servidor de internet para que possamos desenvolver e testar nossos sites.
O download do EasyPHP por ser feito clicando aqui.
RJText-Ed: Será nosso editor, o local aonde vamos programar nossos sites, é um editor leve e fácil de usar, será muito útil durante o curso.
O download do RJText-Ed por ser feito clicando aqui.
Para instalar é só rodar o programa após você baixar e ir clicando no "Avançar" ou no "Next", se estiver em inglês. Não se esqueçam de concordar com os termos de uso do instalador.

Bom, na próxima aula vamos começar pra valer a colocar código e criar nossos primeiros sites, começando pelo HTML Básico, que é a estrutura inicial de qualquer site.

Até mais!

Sobre o curso

Curso: PHP para Web.
Atualmente a Internet se tornou um ambiente essencial na vida de todos, tanto para pessoas quanto para empresas, e segundo pesquisas no Brasil 50% das empresas ainda não possuem um site, o que representa um mercado muito bom para quem busca uma carreira de sucesso.
Este curso irá capacitar você à desenvolver, testar e implantar um website institucional, para divulgar um negócio ou uma página pessoal na Internet.

Basicamente o curso irá focar nos seguintes tópicos:

• O básico de uma página virtual
• Formatação e Design
• Funções especiais
• Scripts
• Banco de Dados
• Segurança

Duração do curso: o curso se iniciou dia 10/08/2012 terminando em meados de Julho 2013.

Período de férias: de 22/Dez até 06/Jan.

Plano de Ensino:
O plano de ensino do curso, com todos os dias de aula e propostas do curso pode ser baixado clicando aqui.

Curso PHP Gestão

Este blog irá reunir todos os dados das aulas do Curso de PHP da Escola Gestão.
Assim ficará fácil para os alunos do curso acompanharem as aulas e terem acesso aos materiais e exemplos utilizados em sala de aula.

Boa sorte a todos os alunos e um bom curso!!!