2008 junho | Guias e Dicas

jun 24

Projetando um site

Criar sites web é uma nova área de estudo.Ela deriva de disciplinas tão distintas quanto a Engenharia de Software e o Marketing.

Perguntas importantes para saber antes de iniciar o projeto do site:

Quais são os principais objetivos do seu site?
Quem é o seu público-alvo primário e secundário?
Qual é a capacidade dos usuários?
O site atrairá diferentes pessoas? Quais? Quais são as suas áreas de interesse?
Qual é o principal slogan do site?
O conteúdo do site é novo ou já existe em outro formato?
Que imagens já existentes estão disponíveis?
É necessário obter dados dos clientes? O quê é preciso saber? Porquê?
Que novas tecnologias serão utilizadas? Quais e, especificamente, porquê?
Que informação do site mudará? Com que freqüência e com que abrangência?
Qual é a posição do produto? (compare com os concorrentes)
Descreva o produto como se fosse uma pessoa.
Que áreas do site precisam de atualização? Quem se beneficia com esta atualização?
Pontos fortes e fracos do produto. (compare com os concorrentes)
Quando o site precisa estar pronto?
Quem aprovará o trabalho?
Quem hospedará e dará manutenção ao site?
O site funcionará durante quanto tempo?
Qual o orçamento para o site?
Quais são os planos para promover o site? Quem é responsável pela promoção?

As 13 armas secretas de quem constrói o site:

Segmentação do mercado;
Visão do negócio;
Saber dizer não;
Termo de compromisso;
Site do projeto;
Perfil do usuário;
Envolvimento do lider;
Comunicação;
Tratar clientes individualmente;
Prazo para “fechar” o conteúdo;
Número de projetos;
Gerenciamento do conteúdo x gerenciamento de projetos.

jun 23

Descobrindo CSS

CSS Sem Comentários »

CSS - Cascading Style Sheets

Uma folha de estilos consiste de uma ou mais definições de estilo (tamanho de fonte, estilo da fonte, alinhamento de texto, cor de texto e do fundo, margens, altura da linha, etc) para elementos HTML que podem ser linkados ou embutidos em documentos HTML.Esta funcionalidade foi criada para propiciar aos desenvolvedores e projetistas Web a possibilidade de contar com estilos e posicionamentos consistentes no documento.

Uso de estilos

<style> É uma das formas de se definir um estilo.Eles podem ser inseridos “inline”, usando o atributo style definido na seção <style> ou linkado, usando o comando <link>.

Definição de estilos

O comando <style> possui um atrubuto type que informa o browser qual tipo de estilo está sendo definido. Para CSS, o valor desse atributo é “text/css”.

Veja o exemplo abaixo usando o comando style. Para mostrar 4 diferentes tipos de estilos aplicados ao texto no corpo do documento:

<html>
<title>Minha página</title>
<head>
<style type="text/css">
<!--
h1{
color: green;
font-style: italico;
font-size: 12;
}
h1.especial{
font-size: 24;
}
.novotitulo{
color: yellow;
}
#caps{
font-variant: small-caps;
}
-->
</style>
</head>
<body>
<h1>Green,italico e tamanho 12</h1>
<h1 class="novotitulo">Yellow,italico e tamanho 12</h1>
<h1 class="especial">Tamanho 24</h1>
<p>
Aqui está alguns<span id="caps">exemplos</span> de textos.
</p>
</body>
</html>

<link> É utilizado se for preferível armazenar todos ou um conjunto de estilos em um único local para que as mudanças sejam globalmente aplicadas.Este elemento é usado para ligar estilos externos ao documento. Os atributos do elemento <LINK>, type e ref são usados para definir o tipo de link e a URL que contém o estilo desejado. Este elemento deve estar dentro da seção <HEAD> do documento em questão.

Veja este exemplo para incluir um arquivo de estilos chamado “amizade.css” :

8
9
10

<HEAD>
<LINK rel = "stylesheets type = "text/css href = "http://www.enviealegria.com.br/stylesheets/amizade.css">
</HEAD>

Aplicação de estilos

Para aplicar estilos usamos os atributos id ou class ou aplicá-los de forma global. Para aplicar o estilo globalmente, deve-se especificar o elemento e as mudanças de estilo correspondentes.

Veja o exemplo abaixo para mudar todas as instâncias do elemento <P> para serem exibidas em tamanho 16 e itálico :

<HEAD>
<style type = "text/css">
<!--
P{
font-style: italico;
font-size: 16pt;
}
-->
</style>
</HEAD>

Atributo id

Outra forma de se aplicar estilos é através do atributo id.

Veja exemplo que mostra a criação de um estilo “titulo” :

<html>
<head>
<title>Minha página</title>
<style type="text/css">
<!--
#novotitulo{
font-style-size: italico;
font-size: 24;
}
-->
</style>
</head>
<body>
<p id="novotitulo">
Bem vindo a minha página! Estilo italico e tamanho 24
</p>
<p>
Aqui está alguns textos normais
</p>
</body>
</html>

Atributo class

Estilos definidos por class, são explicitamente chamados com os elementos HTML que os utilizam. É uma forma de agrupar propriedades de estilos que serão utilizadas em varias partes do documento.

Veja o exemplo que define 2 classes de estilo e os aplica a diferentes instâncias do elemento <P> :

<html>
<head>
<title>Minha página</title>
<style type="text/css">
<!--
.novotitulo{
font-style: italico;
font-size: 24;
}
.indice{
font-size: 12;
}
-->
</style>
</head>
<body>
<p class="novotitulo">
Bem vindo a minha página! Estilo da fonte 24
</p>
<p class="indice">
Aqui está um texto com estilo da fonte 12
</p>
</body>
</html>

jun 21

Algumas formas de retirar acentos em PHP

PHP Sem Comentários »

Se você está precisando tirar acentos de uma string no PHP você pode utilizar uma das três formas que irei disponibilizar aqui.

1º Forma: Uma função com um array que retira os acentos pela chave do array

// Função para retirar os acentos de uma string
 
function RemoverAcentos($Msg)
{
 $a = array(
  ''/[ÂÀÁÄÃ]/''=>''A'',
  ''/[âãàáä]/''=>''a'',
  ''/[ÊÈÉË]/''=>''E'',
  ''/[êèéë]/''=>''e'',
  ''/[ÎÍÌÏ]/''=>''I'',
  ''/[îíìï]/''=>''i'',
  ''/[ÔÕÒÓÖ]/''=>''O'',
  ''/[ôõòóö]/''=>''o'',
  ''/[ÛÙÚÜ]/''=>''U'',
  ''/[ûúùü]/''=>''u'',
  ''/ç/''=>''c'',
  ''/Ç/''=> ''C'');
 
// Retira o acento pela chave do array 
return preg_replace(array_keys($a), array_values($a), $Msg);
}
 
// como usar
echo RemoverAcentos("Amanhã não irei caçar")

2º Forma: Uma função com dois arrays que troca uma chave pela outra

function tiracento($texto){
	$trocarIsso = array('à','á','â','ã','ä','å','ç','è','é','ê','ë','ì','í','î','ï','ñ','ò','ó','ô','õ','ö','ù','ü','ú','ÿ','À','Á','Â','Ã','Ä','Å','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ñ','Ò','Ó','Ô','Õ','Ö','O','Ù','Ü','Ú','Ÿ',);
	$porIsso = array('a','a','a','a','a','a','c','e','e','e','e','i','i','i','i','n','o','o','o','o','o','u','u','u','y','A','A','A','A','A','A','C','E','E','E','E','I','I','I','I','N','O','O','O','O','O','0','U','U','U','Y',);
	$titletext = str_replace($trocarIsso, $porIsso, $texto);
	return $titletext;
}
// como usar
echo tiracento($texto);

3º Forma: Uma classe em PHP que retira acentos

class tira_acento {
 
function strace($a)
{
    $a = eregi_replace("[àáâäã]","a",$a);
    $a = eregi_replace("[èéêë]","e",$a);
    $a = eregi_replace("[ìíîï]","i",$a);
    $a = eregi_replace("[òóôöõ]","o",$a);
    $a = eregi_replace("[ùúûü]","u",$a);
    $a = eregi_replace("[ÀÁÂÄÃ]","A",$a);
    $a = eregi_replace("[ÈÉÊË]","E",$a);
    $a = eregi_replace("[ÌÍÎÏ]","I",$a);
    $a = eregi_replace("[ÒÓÔÖÕ]","O",$a);
    $a = eregi_replace("[ÙÚÛÜ]","U",$a);
    $a = eregi_replace("ç","c",$a);
    $a = eregi_replace("Ç","C",$a);
    $a = eregi_replace("ñ","n",$a);
    $a = eregi_replace("Ñ","N",$a);
    $a = str_replace("´","",$a);
    $a = str_replace("`","",$a);
    $a = str_replace("¨","",$a);
    $a = str_replace("^","",$a);
    $a = str_replace("~","",$a);
 
  return $a;
  }
}
 
// como usar
$ob = new tira_acento;
echo $ob->strace("Avião Grandão!!");

Se você sabe de outra forma, não deixe de nos mandar!!!

jun 20

Aprendendo HTML

HTML Sem Comentários »

HTML é Hypertext Markup Language ou linguagem de marcação HiperTexto, uma linguagem simples compostas de marcações de formatação e diagramação de hipertexto/hipermídia.

O documento em HTML é um arquivo texto comum que pode ser escrito através de qualquer editor de texto comum e tem a terminação .htm ou .html.

Um site nada mais é que um conjunto de páginas HTML interligadas atrasvés de hyperlinks, de forma que a navegação constitui-se, basicamente, de “abrir” sas páginas do site.

Existem editores especificos, onde podemos citar o macromedia Dreamweaver, Quanta+, NVU, etc…

O que não é?

HTML não é uma linguagem de programação, consequentemente não tem acesso a banco de dados e nem a outros arquivos.

HTM, não diferencia MAIÚSCULA de minúscula.

HTML não permite conteúdo dinâmico, ou seja, somente os estáticos.O dinamismo fica por conta de outras linguagens, essas sim linguagem de programação, dentre as quais podemos citar: PHP, ASP, JAVA, JavaScript, etc…

Como são as marcações de HTML?

As marcações do HTML - tags - consiste nos sinais de < (menor que) seguidos pelo nome da marcação e fechada por > (maior que).De modo geral, as tags aparecem em pares, por exemplo <H1>Cabeçalho</H1>. O símbolo que termina uma determinada marcação é igual aquele que inicia, antecedido por uma barra (/) e precedido pelo texto referente.

Há algumas exceções como no caso do final do parágrafo <P>,ele não necessita de uma correspondente </P>. A marcação de quebra de linha <BR> também não precisa da correspondente </BR>.

Principais exemplos de marcações

<HTML>…</HTML> Tag inicial, todas as demais tags deverão estar entre esses pares.

<TITLE> Título principal da página </TITLE> Apenas para título.

<HEAD>…</HEAD> Envolve os comandos relacionados com a identificação da página, o título, por exemplo.

<BODY>…</BODY> Faz a marcação do corpo do documento da página HTML.

Veja um exemplo bem simples usando tags:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
Corpo do documento
</BODY>
</HTML>

Tags de texto, imagem, parágrafo e link

<Hn>…</Hn> Criar cabeçalho de diversos tamanhos (linha de texto para identificar um assunto). Para determinar o tamanho do cabeçalho usa-se um numero de 1 a 6 para substituir o “n”.

<P> Tem finalidade de quebrar parágrafo e incluir uma linha em branca entre eles.

<BR> Quebra uma linha, sem inserir uma linha em branco.

<IMG> Insere uma imagem.

<A>…</A> Cria um link para outra página HTML ou para outra parte da mesma.

<HR> Tem finalidade de traçar uma linha horizontal na posição desejada. Usada para separar uma informação da outra.

Veja um exemplo de código usando a tag para parágrafo com espaço em branco:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
O céu azul.<P>O mar verde.<P>A maçã vermelha.
</BODY>
</HTML>

Veja um exemplo de código usando a tag de parágrafo sem espaço em branco:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
Meu nome é<BR>João<BR>de Lima
</BODY>
</HTML>

Veja um exemplo usando tag com traço:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
João de Lima<P>
<HR>
Análise de sistema<BR>
Rio de Janeiro
</HR>
</BODY>
</HTML>

Formatação de texto

<B>…</B> Colocar em negrito.

<I>…</I> Colocar em itálico.

<U>…</U> Colocar o texto sublinhado.

<Big>…</Big> Aumenta o tamanho da fonte e coloca em negrito.

<Small>…</Small> Diminui o tamanho da fonte.

<Pre>…</Pre> Mantém a formatação original do texto.

Veja um exemplo usando a formatação de texto:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
Exemplos:<P>
<HR>
<B>Texto em negrito</B>
<I>Texto em itálico</I>
<U>Texto sublinhado</U>
<Big>Texto grande e em negrito</Big>
<Small>Texto com fonte pequena</Small>
<HR>
</BODY>
</HTML>

Alterando o tipo e tamanho da fonte

<Font>…</Font> Altera o tipo, tamanho da fonte e a cor.

Veja um exemplo de código usando fonte,tamanho e cor:

<HTML>
<HEAD>
<TITLE>Título principal</TITLE>
</HEAD>
<BODY>
Exemplos:<P>
<HR>
<Font size="4" Face="arial" Color="pink">Esta frase é tamanho 4,fonte arial e cor rosa</Font><BR>
<Font size="3" Face="time" Color="blue">Esta frase é tamanho 3,fonte time e cor azul</Font>
<HR>
</BODY>
</HTML>

Alinhamento

<Div>…<Div> Alinha um grupo de parágrafos.

<Blockquote>…</Blockquote> Adiciona uma margem com cerca de 1 centímetro.

Veja um código usando a tag para alinhar texto:

<HTML>
<HEAD>
<TITLE>Alinhamento</TITLE>
</HEAD>
<BODY>
<h4 align=center>Título centralizado</h4>
<h4 align=right>Título a direita</h4>
<h4 align=left>Título a esquerda</h4>
<hr width=50% align=center>Traço centralizado com 50% do seu tamanho</hr><P>
<p align="center">Parágrafo centralizado</p>
<p align="right">Parágrafo a direita</p>
<p align="left">Parágrafo a esquerda</p>
<p align="justifv">Texto justificado</p>
</BODY>
</HTML>

jun 20

Iniciando: Afinal, o que é PHP?

PHP Sem Comentários »

PHP (um acrônimo recursivo para “PHP: Hypertext Preprocessor”) é uma linguagem de script open source de uso geral, muito utilizada para gerar conteúdo dinâmico na Web.

É uma linguagem de fácil aprendizagem porém pode ser utilizada tanto para pequenos e simples scripts quanto para aplicações complexas. O PHP é uma poderosa linguagem orientada a objetos.

A melhor coisa em usar PHP está no fato de ele ser extremamente simples para um iniciante, mas oferece muitos recursos para o programador profissional.

O que diferencia o PHP de linguagens como o Javascript é que enquanto o Javascript é executado no lado do cliente o PHP é executado no servidor, gerando HTML que é então enviado para o cliente. O cliente recebe apenas o resultado da execução do script e não tem acesso ao código fonte.

Para construir seus scripts você poderá utilizar um editor de textos comum, como por exemplo o bloco de notas, ou pode ir atrás de soluções mais interessantes. Ferramentas como o Dreamweaver também podem ser utilizadas.

Veja um exemplo de um script em PHP:

<?php
 
require_once('qualquer_arquivo.php'); // incluir e executar uma vez
 
require('qualquer_arquivo.php'); // incluir e executar
 
include('qualquer_arquivo.php'); // executar e incluir
 
echo 'abc'; /* Escrever abc */
 
print 'abc';         /* Realiza a mesma coisa que 'echo'  */
$res = print 'abc';  /* retorna se foi executado com sucesso saída ou não (0 ou 1) Coisa que o echo não faz. */
 
$x = 2; # Variáveis
 
if ($x == "2" || $--> "2") // se a variavel $x igual a 2 OU maior que 2
{
    echo 'Olá mundo!'; // escreve "Olá mundo!"
} else {  // Se não.
    print('Adeus mundo!'); // escreve 'Adeus mundo!', print pode ser usado com ou sem parênteses.
}
 
?>

Algumas características:

Velocidade e robustez
Estruturado e orientação a objeto
Portabilidade - independência de plataforma - escreva uma vez, rode - em qualquer lugar;
Tipagem fraca
Sintaxe similar a Linguagem C/C++ e o PERL

Uma das vantagens em relação aos seus “concorrentes” é que ela é open source, ou seja, de utilização livre e gratuita.

Você encontra uma enorme variedade de documentos sobre o PHP na própria internet. Um exemplo é nosso blog. Alias, nosso blog roda o WordPress que é feito utilizando o PHP.

Bibliografia:
http://pt.wikipedia.org/wiki/PHP
http://br.php.net/manual/pt_BR/introduction.php

Guias e Dicas

Como criar listas em HTML?