de volta ao php

27 02 2008

Hoje tive que voltar, depois de muito tempo, a fazer alguma coisa em php. Depois de 5h em vão, sem conseguir tirar um mísero crudzinho decidi investir em algum framework.

Comecei pelo symfon, porque tinha ouvido falar muito bem dele. Depois de ler um pouco do book, fui dar uma olhada num tutorial que eles tem com toda a criação de uma aplicação. Na parte 2 de 24, percebi que você não escolhe o symfony, ele escolhe você. Um erro misterioso apareceu aqui, e depois de 2h, muito google e nenhum crud, desisti.

Aí fui pro CodeIgniter. Me apaixonei. Recomendo mesmo dar uma fuçada. Em 1h eu já tinha bastante (eu sei, geralmente se leva bem menos que isso. é que eu sou iniciante…). Gostei pacas.

Fica a dica: se você tem ou quer trabalhar com php, dá uma olhada no CodeIgniter, mesmo que seu atual framework te deixe satisfeito (você não usa um framework? no donuts for you).

Anúncios




Tutorial Iniciante de HTML: Tabelas

24 02 2008

Exemplo de Tabela

De um lado a outro da web, usava-se a abusava-se das tabelas HTML pra fazer o layout das páginas. Nós veremos como criar um layout sem tabelas, no Tutorial Avançado de CSS. O uso correto das tabelas é fazer exatamente o que você espera que uma tabela faça – estruturar dados tabulares, tais como descrição de dados estatísticos em geral, agendas, calendários, planilhas em geral e etc.

Existem várias tags usadas em tabelas, e entender completamente como elas funcionam é provavelmente a parte mais difícil do Tutorial Iniciante de HTML.

Adicione o código seguinte à tag “body” em seu documento HTML e então nós veremos o que cada tag está fazendo:

<table>
    <tr>
        <td>Linha 1, Célula 1</td>
        <td>Linha 1, Célula 2</td>
        <td>Linha 1, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 2, Célula 1</td>
        <td>Linha 2, Célula 2</td>
        <td>Linha 2, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 3, Célula 1</td>
        <td>Linha 3, Célula 2</td>
        <td>Linha 3, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 4, Célula 1</td>
        <td>Linha 4, Célula 2</td>
        <td>Linha 4, Célula 3</td>
    </tr>
</table>

O elemento table define a tabela.

O elemento tr define uma linha da tabela.

O elemento td define uma célula. Elas precisam estar contidas em tags tr, como foi mostrado acima.

Se você imaginar uma tabela 3×4, que tem 12 células, devem existir quatro elementos tr pra definir as linhas e três elementos td em cada linha, totalizando 12 elementos td.

Páginas Relacionadas

  • Próxima Página: Formulários
  • Página Anterior: Imagens
  • Tabelas (Tutorial Intermediário de HTML) – um pouco mais detalhado, incluindo como unir células.

Exemplos

Referência

BlogBlogs Tags: , , , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Imagens

24 02 2008

Imagem numa página HTML

As coisas podem parecer um pouco chatas e paradas com toda esta formatação de texto. Mas, é claro, a web não é feita só de texto, ela é multimídia e a forma de mídia mais comum é a imagem.

A tag img é usada pra inserir uma imagem num documento HTML e sua sintaxe é essa:

<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="Logo do HTML Dog" />

O atributo src diz ao navegador onde encontrar a imagem. Como na tag a, esse atributo pode ser absoluto, como o exemplo acima demonstra, mas geralmente é relativo. Por exemplo, se você criar sua própria imagem e salvar com o nome “minhaimagem.jpg” numa pasta chamada “imagens”, o código seria <img src="imagens/minhaimagem.jpg"...

Os atributos width (largura) e height (altura) são necessários porque se eles forem removidos, o navegador vai tentar calcular o tamanho da imagem enquanto ela carrega, ao invés de depois que a página carrega, o que significa que o layout do documento pode ficar se mexendo enquanto a página está carregando.

O atributo alt é uma descrição alternativa. Ele é usado por pessoas que não podem ou escolheram não ver as imagens (como deficientes visuais). É obrigatório na última versão do HTML.

Perceba que, como a tag br, a tag img não possui uma tag de fechamento, e fecha a si mesma, terminando com “/>”.

Tipos de Imagens

A construção de imagens pra web está um pouco fora do escopo desse minicurso, mas não custa nada explicar algumas coisas…Os formatos de arquivo mais usados para imagens são GIF, JPEG e PNG. Todos eles são formatos comprimidos, cada um feito pra uma situação diferente. GIFs não podem ter mais que 256 cores, mas elas mantém as cores da imagem original. Quanto menos cores você tiver na imagem, menor será o tamanho do arquivo.

Gifs devem ser usadas em imagens simples, com cores sólidas.

Exemplo de imagem gif

JPEGs usam um algoritmo matemático para comprimir a imagem, o que vai distorcer levemente o original. Quanto menor a compressão, maior o tamanho do arquivo, mas maior a qualidade da imagem. Uma imagem JPEG normalmente perde qualidade cada vez que a imagem é salva.

Jpegs devem ser usadas em imagens como fotografias, com muitas cores.

Paisagem

(foto por ecstaticist)

O PNG surgiu pra ser uma alternativa ao GIF melhor que ele – e é. O PNG consegue trabalhar com muitas cores e possui uma compressão eficiente (tanto quanto o JPEG) – e o arquivo não perde qualidade cada vez que é salvo. Além disso, o formato PNG suporta transparência.

Pngs são adequadas pra qualquer tipo de imagem.

Mesmo com todas essas vantagens, o ainda PNG não é tão comum quanto seus rivais, e o motivo disso é o Internet Explorer, que até a versão 6 não suportava corretamente PNGs transparentes, o que atrasou sua adoção.

Imagens provavelmente vão ser os maiores arquivos que um webdesigner principiante vai usar. É um erro comum ignorar o tamanho do arquivo das imagens, que pode ser extremamente grande. Páginas web devem carregar o mais rápido possível, e se você lembrar que muitas pessoas ainda usam modems que fazem download a menos de 7kb por segundo (na verdade menos de 5kb), você vai ver como um arquivo grande pode deixar mais lento o carregamento de uma página. E ninguém gosta de ficar esperando uma página. Você precisa encontrar um equilíbrio entre qualidade e tamanho do arquivo. A maior parte dos programas de manipulação de imagem permite a você comprimir imagens e o melhor jeito de descobrir qual a melhor solução pra você é tentativa e erro.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , ,

Esse material é uma tradução do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Links

24 02 2008

Link em uma página HTML

Até agora você veio construindo uma página web individual, que é bem legal e divertido, mas o que faz a internet tão especial é que ela está toda interligada – linkada.

O ‘H’ e o ‘T’ em HTML significam ‘hipertexto‘, que é um sistema de texto interligado. Leia mais sobre hipertexto.

Uma tag âncora (a) é usada para definir um link, mas você também precisa adicionar algo mais à tag âncora – o destino do link.

Adicione isso ao seu documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Minha primeira página web</title>
</head>

<body>
<h1>Minha primeira página web</h1>
<h2>O que é isso?</h2>
<p>Uma página simples feita usando HTML</p>
<h2>Por que isso?</h2>
<ul>
<li>Para aprender HTML</li>
<li>Para exibir
<ol>
<li>Pro meu chefe</li>
<li>Para os meus amigos</li>
<li>Pro meu gato</li>
<li>Pro pequeno pato falante na minha cabeça</li>
</ol>
</li>
<li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
</ul>
<h2>Onde encontrar esse tutorial</h2>
<p><a href="https://codando.wordpress.com">Codando</a></p>
</body>

</html>

O destino de um link é definido no atributo href da tag a. O link pode ser absoluto – você indica o endereço completo do destino, como “https://codando.wordpress.com&#8221;, ou pode ser relativo à página atual.

Então se, por exemplo, você tivesse um outro arquivo chamado “gramadoverde.html”, aquela linha de código poderia ser simplesmente <a href="gramadoverde.html">O milagre de um gramado verde</a> ou alguma coisa parecida.

Um link não tem que se linkar a um outro arquivo HTML, ele pode se linkar a qualquer arquivo em qualquer lugar da web.

Links também podem enviar o usuário para outra parte da página em que eles estão. Você pode adicionar um atributo id pra qualquer tag, por exemplo <h2 id=”grama”>Grama</h2>, e então criar um link pra ele usando alguma coisa assim: <a href=”#grama”>Vai para a grama</a>. Clicar nesse link vai levar a página direto pro elemento com aquele id.

Usando o atributo “target”, você pode fazer com que o link abra numa nova página, ao invés de substituir a página em que o usuário está.

Isso pode até parecer uma boa idéia, já que não leva o usuário pra fora de seu site. Porém, existem inúmeros razões pelas quais você não deve fazer isso.

Do ponto de vista da usabilidade, esse método quebra a navegação. A ferramenta de navegação mais usada em um navegador é o botão “voltar“. Abrindo uma nova janela desabilita essa função.

De um ponto de vista mais amplo, usuários não querem que novas janelas fiquem aparecendo em todo lugar. Se eles querem abrir um link em uma nova janela eles podem escolher fazer isso no navegador.

Páginas Relacionadas

Exemplos

  • Âncoras – linkando partes de uma página

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Listas

23 02 2008

Lista em HTML

Existem três tipos de listas: listas não ordenadas, listas ordenadas e listas de definição. Nós vamos ver as duas primeiras aqui, e listas de definição no Tutorial Intermediário de HTML.

Listas ordenadas e não ordenadas funcionam da mesma maneira, exceto porque a primeira é usada para listas seqüenciais, geralmente precedidas por números incrementais, e a segunda para listas não-seqüenciais com os itens geralmente precedidos por marcadores.

A tag ul é usada para definir listas não ordenadas e a tag ol é usada para definir listas ordenadas. Dentro das listas, a tag li é usada para definir cada item.

Mude seu código para o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    <h1>Minha primeira página web</h1>
    <h2>O que é isso?</h2>
      <p>Uma página simples feita usando HTML</p>
    <h2>Por que isso?</h2>
      <ul>
        <li>Pra aprender HTML</li>
        <li>Para exibir</li>
        <li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
      </ul>
    </body>

</html>

Se você olhar para seu navegador, vai ver uma lista com marcadores. É só mudar as tags ul para ol e você vai ver que a lista se torna numerada.

Listas também podem ser incluídas em listas formando uma hierarquia estruturada de itens.

Troque o código da lista acima pelo seguinte:

<ul>
  <li>Para aprender HTML</li>
  <li>Para exibir
    <ol>
      <li>Pro meu chefe</li>
      <li>Para os meus amigos</li>
      <li>Pro meu gato</li>
      <li>Pro pequeno pato falante na minha cabeça</li>
    </ol>
  </li>
  <li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
</ul>

Et voilà. Uma lista dentro de uma lista. E você podia colocar uma outra lista dentro dela. E outra dentro dela. E quantas mais você quisesse.

Páginas Relacionadas

Exemplos

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Cabeçalhos

22 02 2008

Exemplos de Cabeçalho numa página HTML

A tag p é só o começo da formatação de texto.

Se você tem documentos com cabeçalhos verdadeiros, use as tags HTML feitas especialmente pra isso.

Elas são h1, h2, h3, h4, h5 e h6. h1 é o todo poderoso imperador dos cabeçalhos e h6 é a mais baixa ralé.

Mude seu código para o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    <h1>Minha primeira página web</h1>
    <h2>O que é isso?</h2>
    <p>Uma página simples feita usando HTML</p>
    <h2>Pra quê isso?</h2>
    <p>Pra aprender HTML</p>
  </body>

</html>

Note que a tag h1 só é usada uma vez – ela é o cabeçalho principal de uma página e não deve ser usada múltiplas vezes.

h2 até h6 no entanto, podem ser usadas quantas vezes você desejar, mas devem sempre ser usadas numa ordem lógica da maior (h1) até a menor (h6), que é o modo como elas foram pensadas. Por exemplo, um h4 deve sempre ser o sub-cabeçalho de um h3, que deve ser o sub-cabeçalho de um h2.

Algumas páginas do tutorial têm links pra exemplos no final. Abra esses exemplos e veja seu código fonte, saiba o que cada tag está fazendo.

Páginas Relacionadas

Exemplos

  • Cabeçalhos – h1 até h6 em seu estilo default.
  • Tamanho não importa – você pode fazer cabeçalhos do tamanho que você quiser usando CSS (que você vai aprender mais à frente).

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Parágrafos

22 02 2008

Trecho de código HTML 

Agora que você já conhece a estrutura básica de um documento HTML, você pode mexer um pouco com o conteúdo. Volte pro seu editor de texto e adicione a linha seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    Essa é minha primeira página web.
    Que excitante.
  </body>
</html>

Olhe para o documento no seu navegador.

Você deve ter esperado que o documento aparecesse como você digitou, em duas linhas, mas ao invés disso você vai ver alguma coisa como:

Essa é minha primeira página web. Que excitante.

Isso acontece porque navegadores web não fazem noção de que linha o seu código está. Ele também não tem noção da quantidade de espaços (você conseguiria o mesmo resultado se digitasse “Essa é minha primeira página web. Que excitante.”).

Se você quer que o texto apareça em muitas linhas, você tem que dizer isso explicitamente.

Edite suas duas linhas de código para que elas fiquem assim:

<p>Essa é minha primeira página web.</p>
<p>Que excitante.</p>

A tag p quer dizer parágrafo.

Olhe o resultado disso. As duas linhas agora aparecem em duas linhas.

Pense no HTML como se fosse um livro – com parágrafos aonde for apropriado.

Ênfase

Você pode enfatizar texto num parágrafo usando em (ênfase) e strong (ênfase forte). São dois jeitos de fazer praticamente a mesma coisa, e geralmente os navegadores mostram em em itálico e strong em negrito.

<p>Sim, foi <em>isso</em> que eu disse. É <strong>tão</strong> excitante.</p>

Quebras de linha

A tag de quebra de linha também pode ser usada para separar linhas como isso:

Essa é minha primeira página web.<br />Que excitante.

No entanto, esse método geralmente é usado em excesso. Ele não deve ser utilizado se dois blocos de texto devem estar separados um do outro (porque se é isso que você quer fazer você provavelmente quer a tag p).

Note que, como não há nenhum conteúdo envolvido pela tag de quebra de linha, não há tag de fechamento. Ela se fecha com uma “/” depois do “br”.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.