Neste artigo Tutorial: Como Instalar Magento vamos-lhe demonstrar como instalar o Magento Commerce num servidor próprio, e passo-a-passo você irá conseguir aquilo que se pretende, uma loja Magento instalada no seu próprio servidor. Depois de instalado o sistema, você provavelmente irá pretender alterar o aspecto da sua loja online, e para isso recomendamos-lhe a leitura dos artigos 25 Templates Magento para criar uma loja de E-Commerce incrível e 10 Templates para Magento sensacionais!

1. REQUERIMENTOS

Os requerimentos para que possa utilizar Magento no seu alojamento resumem-se basicamente a 3 itens:

• Linux x86 ou x64
• PHP 5.2.13 ou superior
• MySQL 4.1.2 ou superior

2. DOWNLOAD

Para fazer a instalação de Magento você necessita obviamente dos ficheiros. Para obter os mais recentes ficheiros para a instalação dirija-se à página de download e baixe os arquivos no formato que pretender. Para este tutorial escolhemos o ficheiro .zip, mas você poderá escolher aquele que melhor se adaptar ao seu gosto. À data de criação deste artigo a versão disponível para download é a 1.6.2.0, datada de 11 de Janeiro de 2012.

3. CARREGAR FICHEIROS PARA O SERVIDOR

Agora que já tem em sua posse os ficheiros para proceder à instalação do Magento, é necessário enviá-los para o seu servidor. Neste artigo vamos utilizar um cliente FTP gratuito chamado Filezilla que pode ser baixado aqui. Antes de mais extraia os ficheiros do ficheiro compactado para uma pasta no seu ambiente de trabalho por exemplo. De seguida abra o cliente FTP e conecte-se ao seu servidor:

Para este tutorial criámos uma pasta “magento” dentro do directório public_html que é onde deverá colocar os seus ficheiros:

Já dentro da pasta “magento” é altura de começar o envio dos ficheiros para o servidor. Para isso, na arvore de ficheiros local vá até à pasta onde estão os ficheiros descompactados e arraste o conteúdo para dentro da pasta “magento” no servidor:

Tendo em conta que são mais de 17,000 ficheiros, o processo de envio pode ser demorado. Depois de concluído o envio, avance para o passo 4.

4. DEFINIR PERMISSÕES DE FICHEIROS

É necessário alterar a permissão de ficheiros da pasta app. Para isso vamos utilizar o cliente FTP, dê um clique com o botão direito do rato sobre a pasta e clique em Permissões do ficheiro:

De seguida seleccione todas as checkbox de modo a fixar as permissões de ficheiro em 777:

Clique em OK e está concluído este passo!

5. CRIAR BASE DE DADOS SQL

Para concluir este passo, é necessário você fazer login no cpanel da sua conta, geralmente situado em oseudominio.com/cpanel. Depois do login efectuado, dirija-se ao separador Bases de dados e clique em Guia MySQL:

De seguida basta seguir os passos apresentados a seguir:

Avance e a seguir irá criar um usuário e uma password para esse usuário – guarde estas credenciais pois irá necessitar delas mais tarde!

Clique em Criar Usuário e no ecrã seguinte dê todas as permissões aos usuário que criou:

Clique em Próximo Passo e está concluída esta tarefa!

6. CORRER A INSTALAÇÃO

Para correr a instalação basta você abrir o seu navegador favorito e navegar até www.oseudominio.com/magento. Irá abrir o processo de instalação e no ecrã inicial seleccione a checkbox para aceitar os termos (caso aceite) e clique em continue:

Para esta instalação escolhemos o idioma Português, a hora GMT/Lisboa e a moeda o Euro – você seleccione de acordo com aquilo que necessita para a sua loja online! De seguida clique em Continue:

No próximo ecrã você irá introduzir as definições que são realmente importantes nesta altura, como a ligação á base de dados o URL da instalação e o diretorio de administrador:

Preencha estas informações de acordo com o que criou no passo 5. Introduzimos um prefixo mg_ para as tabelas da base de dados, pode optar por não inserir nenhum prefixo ou escolher um do seu agrado.

Nesta secção optámos por não alterar nada, mas se souber o que pretende poderá alterar de acordo com a sua necessidade. Clique em Continue para avançar.

Insira o seu nome e email, e crie um utilizador e respectiva password para fazer login na área de administração. De seguida clique em Continue.

E já está, concluímos a instalação de Magento no servidor!

Este é o aspecto da sua loja recém criada:

Se pretender alterar o aspecto da sua loja online recomendamos-lhe a leitura dos artigos 25 Templates Magento para criar uma loja de E-Commerce incrível e 10 Templates para Magento sensacionais!

Abraço e até já!

Artigos Recomendados

• 10 Aplicações Web para anotar tudo o que encontra
• Como criar o seu primeiro template HTML5
• 10 Dicas SEO para melhorar o seu Web Design
• Como carregar mais conteúdo na barra lateral quando existe espaço
• Como passar informação entre páginas em PHP (Parte I)
• Promoção: 84% de desconto em 3 Templates Premium Themify!

Na parte VI deste Guia Dreamweaver vamos-lhe mostrar como tirar partido das funcionalidades para a utilização de CSS no Adobe Dreamweaver. As técnicas e métodos que lhe vamos apresentar neste capítulo permitir-lhe-ão ser um perito no web design, juntamente com as funcionalidades oferecidas pela ferramenta da Adobe que o vão tornar um profissional eficiente e competente.

• Guia Dreamweaver – Como Começar? (Parte I)
• Guia Dreamweaver – Como Começar? (Parte II)
• Guia Dreamweaver – Como Começar? (Parte III)
• Guia Dreamweaver – Como Começar? (Parte IV)
• Guia Dreamweaver – Como Começar? (Parte V)

É relativamente fácil utilizar selectores CSS como tag, class e ID. Os selectores são como instruções que dizem aos navegadores quais as regras de estilização que devem ser aplicadas, e onde devem ser aplicadas. Por exemplo, um selector tag informa o navegador para aplicar a estilização a qualquer instância “tag” na página. Assim a título de exemplo, o navegador irá aplicar a regra de estilização definida para <h1> a todos os <h1> presentes na página. Por outro lado, são aplicados os selectores por “class” quando o nome de uma classe está agregada a um elemento de uma página. Assim, os navegadores aplicarão os estilos de um selector ID a uma tag com o nome correspondente. Tag, class e ID são apenas 3 dos muitos selectores existentes em CSS, e se está realmente interessado em aprender esta matéria, sugerimos uma leitura cuidada aos nossos artigos:

• Programação CSS para iniciantes (Parte I)
• Programação CSS para iniciantes (Parte II)
• Programação CSS para iniciantes (Parte III)
• Programação CSS para iniciantes (Parte IV)
• 15 Selectores CSS que nunca deverá esquecer!

1. DESCENDENT SELECTORS

Enquanto que uma estilização para a tag <p> executa a estilização para todos os parágrafos existentes na página, você pode não querer fazê-lo. Imaginemos que no seu blog tem uma barra lateral e a área de conteúdo, e na sidebar quer que o tamanho do texto seja menor. Ao alterar a estilização da tag <p> e diminuir o tamanho do texto, este será alterado também na área de conteúdos do seu blog. A primeira ideia que certamente lhe surgirá é criar duas classes diferentes para aplicar estilos diferentes à mesma tag, como <p class=”conteudo”> e <p class=”barralateral”>, mas e se lhe dissermos que pode poupar tempo e evitar fazê-lo? Aquilo que procura é uma tag “inteligente” que aplique a estilização adequada dependendo da localização na página – isto são os descendent selectors. Em termos básicos, você utiliza os descendent selectors para estilizar qualquer tag de uma maneira idêntica, tal como os selectores por tag, mas desta feita a estilização irá ser feita de acordo com a localização na página. Esta diferenciação é feita de acordo com a relação existente com outras tags no documento.

Abra a ferramenta de criação de novo estilo CSS no Adobe Dreamweaver:

E de seguida faça alguns testes para perceber como funciona realmente a diferenciação e como é feita a relação entre as tags:

Note que alterámos o tipo de selector para Composição (com base na sua selecção) e no nome do selector introduzimos algumas tags para testarmos a ferramenta. Mais abaixo podemos confirmar que os estilos daquele selector irão ser aplicados a todos os elementos <a> que estejam dentro de qualquer tag <li>, <ul> ou <body>. Desta forma você poderá poupar imenso tempo evitando criar classes desnecessáriamente para aplicar a estilização em certas áreas dos seus documentos.

Uma particularidade desta ferramenta prende-se com o facto de que se você estiver seleccionado no documento. Imagine que tem uma frase seleccionada no documento e abre esta ferramenta: a ferramenta irá sugerir-lhe um descendent selector para você utilizar. Extremamente útil!

2. ESTILIZAR GRUPOS DE TAGS

Por vezes existe a necessidade de aplicar a mesma estilização a diferentes elementos no documento. Imaginemos que você quer aplicar a mesma estilização aos cabeçalhos existentes nos documentos, utilizando o mesmo tipo de letra e cor. Criar uma regra de estilização para todos os cabeçalhos é trabalho desnecessário e em vão, e além disso se mais tarde você quiser alterar o estilo dos cabeçalhos, teria de os alterar todos um a um. Então utilizamos a estilização por grupos de tags, que permite aplicar a mesma estilização a diferentes tags, ao longo dos documentos. Para criar uma regra de estilização, siga os passos utilizados para criar uma nova regra de estilização utilizados no ponto 1. deste artigo, e de seguida no campo Nome do selector, insira os cabeçalhos que deseja estilizar:

A partir deste ponto você terá um selector para estilizar todos os cabeçalhos do seu website, em apenas um sítio, evitando trabalho desnecessário de criar múltiplas regras de estilo iguais, para elementos diferentes.

3. EDIÇÃO RÁPIDA DE ESTILOS

A janela de criação de regras de estilo pode por um lado ser um método chato de criar e editar estilos, embora seja fácil de utilizar, mas por outro lado oferece a possibilidade de termos acesso ás propriedades das regras de estilo num só sitio. Aqui, você tem acesso ás propriedades do elemento seleccionado, bem como uma lista de outras propriedades que nada têm a ver com CSS,

Para editar uma propriedade de um elemento basta seleccioná-lo a partir da lista de regras e em baixo alterar, remover ou adicionar propriedades à regra de estilização através dos ícones presentes no fundo da caixa:

No entanto esta funcionalidade do Adobe Dreamweaver nao cobre todas as propriedades CSS, que para os utilizadores avançados é uma necessidade. Ainda assim, certamente que quem necessita de ir ao background introduzir regras de estilização CSS à mão no ficheiro de estilos irá reconhecer esta funcionalidade muito útil e interessante, pois é capaz de poupar imenso tempo e trabalho durante a criação de um website inteiro. Assim podemos concluir que Adobe Dreamweaver prova ser cada vez mais uma ferramenta completa para todos os utilizadores, sejam eles novatos ou experientes na área. Para os novatos a introdução a esta ferramenta pode ser um pouco confusa, mas com o tempo e com a prática todos podem tirar todo o proveito das funcionalidades oferecidas por Adobe Dreamweaver!

ESTÁ A ACOMPANHAR?

Não perca a continuação deste artigo, deixe o seu feedback com um comentário, subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email.

Abraço e até já!

Artigos Recomendados

• Guia Dreamweaver – Trabalhando com Tabelas (Parte V)
• Guia Dreamweaver – Como Começar? (Parte IV)
• Guia Dreamweaver – Como Começar? (Parte III)
• Guia Dreamweaver – Como Começar? (Parte II)
• Guia Dreamweaver – Como Começar? (Parte I)
• Como passar informação entre páginas em PHP (Parte II)

1. KITCHEN STORE

2. HOME ZONE

3. MERCADO

4. FASHION ZONE

5. SIMPLESTORE

6. TIENDA

7. FASHION

8. SNEAKERS

9. LINGERIE STORE

10. LOTUS STORE

11. APPAREL

12. FURNITURE

13. HIGHTECH

14. JEWELRY STORE

15. MEDICAL STORE

16. CLOTHES STORE

17. ACCESSORIES – CAR

18. SHOP ‘TIL YOU DROP

19. WOMAN’S APPAREL

20. ELLIPSOID

21. CAMERA MAGENTO

22. CLASSISHOP

23. MOBILE STORE

24. OH MON DIEU!

25. MAGENTO MAYA

Abraço e até já!

Artigos Recomendados

• 10 Templates para Magento sensacionais!

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte IV) vamos finalizar os selectores e dar-lhe a conhecer algumas dicas valiosas, bem como um pequeno resumo sobre aquilo que abordámos até agora.

Não perca os artigos anteriores:

• Programação CSS para iniciantes (Parte I)
• Programação CSS para iniciantes (Parte II)
• Programação CSS para iniciantes (Parte III)

7. SELECCIONAR ATRIBUTOS PARCIAIS

As regras de estilização podem seleccionar elementos HTML para estilização ao corresponder valores parciais de atributos. Isto permite ao selector definir qual o elemento baseado na presença de uma palavra nos atributos que tenham uma lista de palavras separadas por um espaço. Geralmente esta técnica é utilizada para corresponder com uma das palavras utilizadas no atributo class de um elemento HTML.

A sintaxe para corresponder a uma palavra numa lista contém um “~” no selector para corresponder todos os elementos que tenham um atributo class com uma palavra atribuída. ( [class~="palavra"] ). Para complementar, um selector de uma regra de estilização pode seleccionar um elemento HTML para estilizar correspondendo ao início de um valor de um atributo do elemento.

Normalmente esta técnica é utilizada para corresponder a valores inseridos num elemento HTML no atributo “lang”. A sintaxe css para corresponder ao início de um valor de um atributo adiciona um “|” ao selector, de forma a definir que está a corresponder a todos os elementos que tenham o atributo “lang” com o inicio definido no selector.

1. Crie um documento HTML e insira o código abaixo:

   <ol>
   <li class="reptil">Crocodilo</li>
   <li class="animal">Cavalo</li>
   <li class="animal">Cão</li>
   <li class="ave">Caturra</li>
   <li class="peixe">Bacalhau</li>
   </ol>
   
   <ul>
   <li lang="pt">Olá Portugal</li>
   <li lang="pt-br">Olá Brasil</li>
   <li lang="en-us">Hello America</li>
   </ul>

2. De seguida crie um ficheiro de folha de estilos e insira o seguinte código para seleccionar e colorir os animais que estiverem na class “animal”:

   *[class~="animal"] {background: red}

   

3. Agora adicione uma nova regra de estilos para seleccionar de acordo com o atributo lang:

   *[lang|="pt"] {color: white; background: blue}

   

4. Agora dê asas à sua imaginação e altere o código CSS para criar diferentes regras de estilização de acordo com a sua preferência. A melhor maneira de ficar a conhecer e aprender estas técnicas é meter mãos à obra e experimentar, errando e corrigindo os erros. Assim você irá ganhar a experiência e o conhecimento necessários para efectuar estas operações sem necessitar de consultar conteúdo para relembrar como é feito!

8. AVALIAR A IMPORTÂNCIA

Os navegadores avaliam a importância das regras de estilo presentes na folha de estilo em cascata, determinando qual o “peso” de cada regra e determinando quais têm mais importância e deverão ser aplicadas. A importância de cada regra de estilo pode ser definida inserindo uma declaração “!important” para aumentar a sua importância.

A título de exemplo, a regra “h2 {color: blue !important}” tem superioridade sobre esta regra “h2 {color: red}”, sendo assim a cor azul aplicada aos headings h2. Embora as folhas de estilo de autor tenham superioridade sobre as demais, uma regra de utilizador que contenha a declaração !important tem superioridade sobre uma regra de autor com a mesma declaração. Então a hierarquia é determinada desta forma:

1. Declaração de utilizador !important
2. Declaração de autor !important
3. Folha de estilo de autor
4. Folha de estilo de utilizador
5. Folha de estilo do navegador

Quando mais que uma regra de estilização têm a mesma importância e estão a estilizar o mesmo elemento, o navegador irá avaliar qual a especificidade do selector em cada uma das regras de estilização, atribuindo mais valor aquela que for mais específica. A avaliação de especificidade atribui “pontos” por cada selector, que são guardados para mais tarde ser feita a comparação.

Então, a especificidade pode ser expressada em uma lista de números separados por virgulas, em que 0,0,0,0 é considerado valor zero na especificidade. Considere alguns itens importantes a ter em conta:

• Por cada elemento e pseudo elemento no selector, adiciona 0,0,0,1.
• Por cada valor no atributo class, selecção por atributo ou pseudo class adiciona 0,0,1,0.
• Por cada atributo id no selector adiciona 0,1,0,0.
• Por cada declaração de estilo em linha adiciona 1,0,0,0.

No processo da comparação da especificidade dos valores, os registos são examinados individualmente da esquerda para a direita até que seja encontrada uma diferença. A regra de estilizaçao com o mais valor no registo é então aplicada. Vamos ver um exemplo:

1. Crie um documento HTML contendo três cabeçalhos:

   <h2>Primeiro cabeçalho</h2>
   <h2 id="heading2">Segundo cabeçalho</h2>
   <h2 class="header">Terceiro cabeçalho</h2>

2. De seguida crie uma folha de estilos e linke-a ao documento. Insira o seguinte código:

   h2 {color: yellow !important}
   h2 {color: red }

3. Agora adicione as seguintes regras de estilização que irão estilizar individualmente o fundo dos elementos de maneiras diferentes:

   h2 {background: aqua}
   body h2{background: blue}
   
   #heading2{background: maroon}
   h2#heading2{background: red}
   
   h2.header{background: olive}
   body.h2.headers{background: green}

4. Agora guarde os ficheiros e observe o resultado:
   
5. Agora é a altura em que você pega no código que já tem e vai experimentar alterar valores, introduzir e remover atributos nas regras de estilização e observar o resultado – lembre-se: a melhor maneira de aprender é sempre praticar, onde cometemos erros e aprendemos com os mesmos.

9. RESUMO

• Um selector por tipo selecciona todos os elementos do tipo especificado e múltiplos elementos podem ser especificados numa lista.
• O selector universal * pode ser utilizado para seleccionar todos os elementos.
• O selector de class . selecciona todos os elementos que contenham um atributo class ao qual tenha sido atribuído um valor.
• O selector ID # selecciona todos os elementos que contenham um atributo ID com um valor atribuído.
• Um selector descendente especifica tanto o tipo de elemento como elemento do qual é descendente, separado por um espaço.
• Um selector por atributo pode corresponder a uma palavra numa lista utilizando a sintaxe que inclui “~”.
• Um selector por atributo pode corresponder ao inicio de um valor de um atributo utilizando a sintaxe “|”.
• Uma regra de estilo pode ganhar superioridade sobre outra ao utilizar a declaração !important.

Esta foi a última parte da série Programação CSS para Iniciantes, mas não vamos ficar por aqui relativamente ao CSS, fique atento e não perca os próximos conteúdos!

Abraço e até já!

Artigos Recomendados

• Programação CSS para iniciantes (Parte II)
• Programação CSS para iniciantes (Parte III)
• O que são selectores CSS? (Parte II)
• O que são selectores CSS? (Parte I)
• 15 Selectores CSS que nunca deverá esquecer!
• Começando com CSS – Dê os primeiros passos em segurança

• $GLOBALS: Variáveis disponívels globalmente (Já abordado na Parte I)
• $_SERVER: Informação acerca do servidor (Já abordado na Parte I)
• $_GET:  Dados utilizados durante o método HTTP GET (Já abordado na Parte I)
• $_POST: Dados utilizados durante o método HTTP POST
• $_REQUEST: Dados utilizados durante um pedido HTTP
• $_FILES: Dados utilizados durante a introdução de um ficheiro HTML
• $_SESSION: Dados relativos à sessão actual do utilizador
• $_COOKIE: Dados guardados no navegador do utilizador como cookie

Não perca alguns dos nossos conteúdos relacionados com PHP:

• Comentários e Operadores em PHP
• Javascript para desenvolvedores PHP
• 75+ Ferramentas PHP extremamente úteis
• Diversos Truques e Dicas para PHP
• Como funciona o PHP?
• Tutorial: Introdução ao PHP

$_POST

PHP fornece uma segunda opção para enviar dados, o POST. O envio de informação através de formulários web, como formulários de contacto ou de registo, necessita de utilizar o método POST para enviar a informação contida no formulário para ser processada. Em termos estruturais, o método POST é similar ao método GET, e os seus valores podem ser acedidos da mesma forma: utiliza-se a superglobal $_POST e define-se o nome da variável como uma chave do array. Na maioria das vezes, o valor do POST é enviado por um formulário web que é feito em HTML. Veja o exemplo abaixo e crie um documento HTML com o seguinte código:

<form action="teste.php" method="post">
    <input type="text" name"username" />
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

O atributo “name” define a chave no array que poderá utilizar para aceder à informação lá guardada com a submissão do formulário. E título de exemplo, poderá utilizar $_POST['username'] para aceder ao nome de utilizador. De seguida crie o ficheiro teste.php e insira o seguinte código:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST'){
	echo "Obrigado por se registar! <br />",
	"Utilizador: ", htmlentities($_POST['username']), "<br />",
	"Email: ", htmlentities($_POST['email']), "<br />";
}else{

?>
<form action="teste.php" method="post">
	<label for="username">Utilizador: </label>
    <input type="text" name"username" />
    <label for="email">Email: </label>
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

<?php } ?>

Quando carregar o ficheiro teste.php o script irá verificar se já foram submetidos dados através do método POST. Se já tiverem sido submetidos dados, o script envia a mensagem de agradecimento pelo registo e mostra o nome de utilizador escolhido e o endereço de email. Se nada foi submetido, o script põe à disposição o formulário de registo novamente.

$_REQUEST

A superglobal $_REQUEST é um array que contém os conteúdos das superglobais $_GET, $_POST e $_COOKIE. Se modificar o seu formulário no ficheiro teste.php  para enviar para teste.php?submit=true com um nome de utilizador e um email, poderá aceder aos dados submetidos utilizando o código abaixo:

Primeiro altere o seu ficheiro html, adicionando ?submit=true ao action do seu formulário:

<form action="teste.php?submit=true" method="post">
    <input type="text" name="username" />
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

De seguida altere o seu ficheiro teste.php:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST'){
	foreach($_REQUEST as $chave => $val) {
		echo $chave, " : ",$val, "<br />";
	}
}else{

?>
<form action="teste.php" method="post">
	<label for="username">Utilizador: </label>
    <input type="text" name"username" />
    <label for="email">Email: </label>
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

<?php } ?>

E o resultado será este:

$_FILES

Outra das funcionalidades dos formulários HTML tem a ver com a habilidade de permitir aos utilizadores o envio de ficheiros. Numa website como um blog, é necessário que você seja capaz de aceitar o envio de imagens para incluir com as entradas do blog. Para aceder a um ficheiro enviado, é necessário utilizar a superglobal $_FILES. Esta superglobal funciona de forma ligeiramente diferente quando comparada com o $_GET e o $_POST, em que cada ficheiro cria um array de elementos relacionados que fornecem informação acerca do ficheiro enviado. Essa informação inclui:

• name – o nome do ficheiro.
• type – o tipo do ficheiro (ex image/jpeg).
• tmp_name – a localização temporária do ficheiro.
• error – Um código de erro correspondente ao erro ocorrido no envio do ficheiro (0 se não forem encontrados erros).
• size – Tamanho do ficheiro em bytes

Cada ficheiro é guardado como um array multidimensional na superglobal $_FILES, que é acedida usando primeiro o campo “name” como a chave do array seguido do nome do campo que deseja saber – ex $_FILES['envio1']['nome']. Para perceber como funciona o $_FILES vamos criar um envio de ficheiro no ficheiro teste.php. Siga o exemplo do código abaixo:

No ficheiro HTML insira o código:

<form action="teste.php" method="post"
	enctype="multipart/form-data">
	<label for="photo">Imagem: </label>
    <input type="file" name="photo" />
    <input type="submit" value="Enviar imagem" />
</form>

No ficheiro teste.php insira o código:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST'){
	if(isset($_FILES['photo'])
	&& is_uploaded_file($_FILES['photo']['tmp_name'])
	&& $_FILES['photo']['error']==UPLOAD_ERR_OK) {
		foreach($_FILES['photo'] as $chave => $valor) {
			echo "$chave : $valor <br />";
		}
	}else{
		echo "O ficheiro não foi enviado";
}

}else{

?>
<form action="teste.php" method="post"
	enctype="multipart/form-data">
	<label for="photo">Imagem: </label>
    <input type="file" name="photo" />
    <input type="submit" value="Enviar imagem" />
</form>

<?php } ?>

E o resultado será o seguinte:

$_SESSION

Quando você necessitar de guardar um valor durante uma visita de um utilizador, a superglobal $_SESSION fornece uma solução fácil e prática. Quando uma variável $_SESSION é declarada, permanece na memória até que seja apagada de forma pretenciosa, o tempo de sessão acabe (o tempo de sessão por defeito é de 180 minutos) ou o navegador seja fechado. Um dos usos mais comuns para a superglobal $_SESSION é para guardar os dados de login de um utilizador. Desta forma você poderá criar o seu próprio formulário de login para um utilizador que já esteja registado. Durante o processo que irá concluir neste item, o seu script irá realizar as seguintes tarefas:

• Apresentar um formulário de registo
• Agradecer o registo do utilizador após o registo com sucesso
• Informar o utilizador que ele já está registado quando necessário (ex. caso ele refresque a página de registo)

Primeiro altere o seu ficheiro HTML e insira o seguinte código:

<form action="teste.php" method="post">
	<label for="utilizador">Utilizador: </label>
    <input type="text" name="utilizador" />
    <label for="email">Email: </label>
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

De seguida altere o seu ficheiro teste.php e insira o seguinte código:

<?php

session_start();

if(isset($_SESSION['utilizador'])){
	echo "Já está registado como $_SESSION[utilizador].";
}

else if($_SERVER['REQUEST_METHOD'] == 'POST'){
	$trimutilizador = trim($_POST['utilizador']);
	$trimemail = trim($_POST['email']);
	if(!empty($trimutilizador)
	&& !empty($trimemail)){
		$uname = htmlentities($_POST['utilizador']);
		$email = htmlentities($_POST['email']);

		$_SESSION['utilizador'] = $uname;

		echo "Obrigado por se registar! <br />",
			"Utilizador: $uname <br />",
			"Email: $email <br />";
	}
	else {
		echo "Por favor preencha ambos os campos! <br />";
	}

}else{

?>
<form action="teste.php" method="post">
	<label for="utilizador">Utilizador: </label>
    <input type="text" name="utilizador" />
    <label for="email">Email: </label>
    <input type="text" name="email" />
    <input type="submit" value="Registar" />
</form>

<?php } ?>

E o resultado será o seguinte:

$_COOKIE

Os Cookies comportam-se de forma similar à sessões, mas eles permite-lhe guardar informação no equipamento do utilizador durante um maior período de tempo. A informação guardada nos cookies permanecem disponíveis mesmo que o utilizador feche o navegador, isto se assumirmos que a duração do cookie está definida por um longo período de tempo. Pode utilizar os cookies para fazer com que as visitas dos utilizadores ao seu website sejam mais apelativas, ao manter informações pertinentes mas não vitais. Este tipo de informações podem incluir definições que personalizam a experiência do utilizador no seu website, realizar tarefas repetitivas de forma automática ou permitir que o utilizador permaneça com o login efectuado durante mais tempo, evitando que seja necessário efectuar o login todas as vezes que visita o seu website. Em PHP, a superglobal $_COOKIE é utilizada para aceder aos valores dos cookies. No entanto, definir um cookie necessita que você utilize a função setcookie(). Para aprender, nada melhor que praticar a partir de um exemplo.

Abra o seu ficheiro teste.php e insira o seguinte código:

<?php

if(isset($_COOKIE['utilizador'])){
	echo "Bem-Vindo Novamente, ",
		htmlentities($_COOKIE['utilizador']),
		"<br />";
}

else if($_SERVER['REQUEST_METHOD']=='POST'
	&& !empty($_POST['utilizador'])){
		$uname = htmlentities($_POST['utilizador']);

		$expires = time()+7*24*60*60;
		setcookie('utilizador', $uname, $expires, '/');

		echo "Obrigado pelo seu registo, $uname! <br />";
}else{

?>
<form method="post">
	<label for="utilizador">Utilizador: </label>
    <input type="text" name="utilizador" />
    <input type="submit" value="Registar" />
</form>

<?php } ?>

O resultado é o seguinte – Página de registo:

Registo efectuado com sucesso:

Se actualizar a página, irá receber a informação de que já está registado e como tal irá ver uma mensagem de boas vindas:

E concluímos assim os 8 métodos para passar informação entre páginas em PHP!

Abraço e até já!

Artigos Recomendados

• Variáveis e Tipos de Dados em PHP (Parte I)
• 16 Estruturas de Controlo em PHP (Parte II)
• Como enviar Dados para o Browser com PHP
• Como funciona o PHP?
• Javascript para desenvolvedores PHP
• Guia Dreamweaver – CSS Avançado (Parte VI)

1. SPOON5

2. JAMES CHARLICK

3. ERIK ASHLEY

4. TIME WILL TELL

5. DELICIOUSLY CREATIVE

6. JACOB LEE

7. ALAN MARCOS

8. ALEX COLEMAN

9. HM ANDREI

10. ARAN DOWN

11. DMOTT CREATIVE

12. INK BYTE

13. MEDIO CORE

14. DAVID HELLMANN

15. KZX XTREME

16. BUNTON

17. ICREON DESIGN STUDIO

18. VASJEN KATRO

19. SUPER USER STUDIO

20. TRUF CREATIVE

21. SICK DESIGNER

22. GERYIT

23. KENNY MEYERS

24. LUCIA SOTO

25. I AM DOCTO

26. JAYME BLACKMON

27. FULLY ILLUSTRATED

28. I AM BROM

29. ANDRÉ GONÇALVES

30. MATT BROWN

Abraço!

Artigos Recomendados

• 20 Logomarcas profissionais para usar nos seus trabalhos criativos
• Guia de Comparação entre Fireworks e Photoshop – Parte III

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte III) vamos-lhe continuar a mostrar como seleccionar os elementos de um documento HTML para estilizar ao seu gosto.

Não perca os artigos anteriores:

• Programação CSS para iniciantes (Parte I)
• Programação CSS para iniciantes (Parte II)

4. SELECCIONAR POR DESCENDENTES

Um selector descendente pode ser utilizado numa regra de estilo para seleccionar elementos HTML por referência a um outro elemento do qual são descendentes. Por exemplo, um elemento span dentro de um parágrafo é descendente do elemento parágrafo – então podemos utilizar um selector descendente para seleccioná-lo e aplicar estilização:

1. Crie um documento HTML com uma lista não ordenada e uma lista ordenada dentro de um container div:

   <div id="menu">
   <ul>
   <li>Primeiro</li>
   <li>Segundo</li>
   <li>Terceiro</li>
   </ul>
   <ol>
   <li>Computador</li>
   <li>Mouse</li>
   </ol>
   </div>

2. Crie uma folha de estilos com as regras de estilização abaixo:

   ul li {color: red}
   ol li {color: green}

3. Guarde ambos os ficheiros e observe o resultado:
   
4. Edite o ficheiro de estilização e substitua pelo seguinte código:

   #menu li {color: green}

5. Guarde o ficheiro e observe o resultado:
   

5. SELECCIONAR POR RELAÇÃO

As regras de estilização podem seleccionar elementos para estilização utilizando a estrutura do documento HTML em si. Os elementos em todos os documentos HTML são ordenados hierarquicamente, descendendo do elemento <html>. O próximo nível contém o <head> e <body>. Cada um destes contém elementos que poderão conter elementos, e assim continuará a hierarquia. No código abaixo, as relações que introduzimos são em criadas a partir do <body>.

1. Crie um documento HTML contendo o seguinte código:

   <body>
   <h3>Cabeçalho - filho</h3>
   <p>parágrafo - filho</p>
   <p>parárafo - filho
       <span>Span - neto</span></p>
   <ul>
   <li>Lista 1 - neto</li>

   <li>Lista 2
       <span>Span - bisneto</span></li>
   </ul>
   </body>

2. Crie uma folha de estilos e linke-a ao documento. Introduza o seguinte código:

   h3 + p {background: yellow}

3. De seguida adicione o seguinte código para estilizar o “Span – neto”:

   p > span {background: lime}

4. Adicione o seguinte código para seleccionar cada elemento descendente na lista, atribuindo diferentes estilizações:

   body > ul {background: fuchsia}
   body > ul > li {background: aqua}
   body > ul > li > span {background: orange}

5. Guarde os documentos e observe o resultado:
   

6. SELECCIONAR POR ATRIBUTO

As regras de estilização podem seleccionar elementos HTML para estilizar através de um atributo que esse elemento contenha. O selector neste caso especifica o nome do atributo dentro de parêntesis rectos [ ]. A título de exemplo, o selector *[src] seleccionaria todos os elementos que tivessem o atributo “src” , independentemente dos valores associados a esse atributo. Além disso, o selector por atributo pode especificar múltiplos atributos para seleccionar apenas os elementos que contenham todos os atributos especificados. A título de exemplo, o selector *[src][alt] seleccionaria todos os elementos que contivessem ambos os atributos, mais uma vez independentemente dos valores associados a esses atributos.

1. Crie um documento HTML e insira o seguinte código:

   <div><a id="top">Âncora</a></div><hr />
   <div><a href="http://www.escolacriatividade.com/">Hiperligação</a></div><hr />
   <div><a href="http://www.escolacriatividade.com/" title="Escola Criatividade">Hiperligação com Título</a></div><hr />
   <div><a href="#top" title="Topo da página">Hiperligação de página</a></div><hr />
   <div><a id="bottom">Âncora</a></div>

2. De seguida crie uma folha de estilos e linke-a ao documento HTML. Insira o seguinte código para estilizar o fundo de todas as âncoras contento um atributo id:

   a[id] {background: red}

3. Adicione uma regra de estilização ao seu ficheiro CSS para colorir o texto nas hiperligações que contenham o atributo href:

   a[href] {color: orange}

4. Agora adicione outra regra de estilização que vai colorir o fundo de todas as hiperligações que contenham o atributo href e o atributo title:

   a[href][title] {background:green}

5. Por último, adicione esta regra de estilização para desenhar um limite à volta das hiperligações que tenham um atributo href com o valor “#top”:

   a[href="#top"] {border: 0.3em solid black}

6. Guarde os documentos e observe o resultado:
   

Não perca a continuação deste artigo com a Parte IV onde iremos continuar a abordagem aos selectores em CSS!

Abraço e até já!

Artigos Recomendados

• Programação CSS para iniciantes (Parte IV)
• Programação CSS para iniciantes (Parte II)
• O que são selectores CSS? (Parte II)
• Programação CSS para iniciantes (Parte I)
• O que são selectores CSS? (Parte I)
• CSS para Tótós!

Mas produzir em casa não tem apenas benefícios e tenho lidado com alguns problemas neste meu dia-a-dia de blogueiro a tempo inteiro. Apesar de considerar mais simples a conclusão das tarefas ou mesmo o cumprimento do que tenho planejado para o longo do dia, existem alguns fatores que ainda fogem do meu controle. Por pouco tempo, mas acredito que para quem começar este estilo de vida como o meu atual, terá sempre que se confrontar com estes problemas.

A principal é mesmo a parte da manhã. Isto porque o fato de não termos efetivamente horário para começar a trabalhar, acaba por nos deixar um pouco mais expostos a podermos ficar mais uns minutos na cama ou demorar um pouco mais no café da manhã. Para quem sente estas dificuldades, hoje vou-lhes deixar alguns conselhos do que tenho feito para ter uma manhã mais produtiva.

DEFINA UMA HORA PARA ACORDAR

Acho este ponto crucial. Nos primeiros tempos tentei acordar sem despertador. Uma tarefa sem êxito, visto que o meu corpo nem sempre se mostrou disposto a despertar à mesma hora, acabando por condicionar o resto do meu dia. E não adiante ter aquele pensamento de compensar o tempo perdido pela manhã com mais trabalho pela noite dentro. Simplesmente não resulta.

Por isso, defini um horário pela manhã para acordar e, de um modo bastante disciplinado, levanto-me religiosamente à hora que tocar o meu despertador.

TENHA UMA ROTINA

Outra das táticas que comecei a utilizar foi ter uma rotina pela manhã. Ou seja, todas as vezes que me levanto a minha prioridade é fazer a minha corrida matinal. É um modo de despertar o meu corpo para o dia de trabalho e ficar mais ativo. Depois de um bom banho, parto para o café da manhã, começando apenas depois a escrever para os meus sites. Não diga que esta tenha de ser necessariamente a sua rotina, mas é importante você conseguir encontrar alguns princípios que o ajudem a ganhar hábitos. Compre um jornal, verifique alguns sites que lhe interessam ou faça um passei na praia. A forma como faz não interessa, o importante é mesmo ter uma rotina matinal.

FAÇA UMA LISTA DE TAREFAS

Trabalhar em casa como freelancer acaba por ser algo confuso quando não sabemos efetivamente por onde começar. Vou responder aos emails ou verificar as visitas no dia anterior? A melhor forma que encontrei foi fazer uma pequena lista, de modo a priorizar aquilo que era mais importante e começar por esses pontos durante a manhã. Conforme vou terminando as tarefas, risco-as do meu Moleskine. Também é uma boa opção registarmos ideias de negócio que venham surgindo.

DEFINA UM LOCAL PARA TRABALHAR

Escrever os meus textos na sala foi algo que não resultou comigo. Isto porque me sentia tentado a ligar a televisão ou abrir o frigorífico cada vez que uma tarefa me parecia mais complexa, acabando por adiar constantemente esses trabalhos. Tentei vários locais. Por fim e fazendo uma pequena análise, considerei o meu pequeno escritório como o melhor local para ficar pela manhã. Durante a tarde, vou para a varanda.

AUMENTE A SUA CONCENTRAÇÃO NAS PRIMEIRS HORAS

Quando comecei a trabalhar em casa, verifiquei que as outras pessoas têm dificuldade em ver isso como um trabalho normal, pensando que estamos disponíveis a qualquer hora para ir beber um café ou almoçar num restaurante. Para evitar isso, defini que o meu celular e o Facebook estão desligados durante a parte da manhã, não permitindo desconcentrações e para que fique focado neste período essencial, que são as primeiras horas do dia, aumentando consideravelmente a produtividade.

Adiantar o seu trabalho nas primeiras horas é uma tarefa árdua, mas deixar que ele se acumule para a tarde é algo que acontece facilmente. Depois, o seu dia fica bem mais complicado. As tarefas acumulam, o stress aumento e o trabalho fica sem a qualidade habitual.

TRABALHE EM SILÊNCIO

Uma das coisas que tenha tentado alterar na minha rotina é a música. Antes, ligava o meu Itunes e deixava a minha playlist tocar enquanto escrevia. No entanto, reparei que esse hábito provocava alguma desconcentração. Os erros nos meus artigos eram maiores e a construção das frases não era a melhor. Por isso, decidi experimentar escrever em silêncio. Os resultados foram impressionantes. Além de conseguir fazer as tarefas em menos tempo, os erros diminuíram consideravelmente.

É claro que esta dica por funcionar para um escritor, mas talvez não seja tão útil para um web designer ou para um fotógrafo, por exemplo. Existem profissões em que o ruído por incomodar um pouco mais do que em outras. Mas se vir que os erros no seu trabalho têm sido muitos, considere desligar a música.

PREPARE-SE NA NOITE ANTERIOR

Para começarmos um dia da melhor forma, é essencial que a noite anterior termine da melhor maneira. Para isso, também defini uma hora para me deitar, de modo a que consiga dormir oito a nove horas, pois o tempo de duração do meu sono acaba tendo grande influência na minha produtividade. Músicas para relaxar e desligar o celular durante a noite podem ajudar muito neste caso.

Sei que definir todos estes pontos pode parecer que não tenho controle sobre o que devo ou não devo fazer. Mas para quem começa trabalhando em casa, sabe que é muito fácil ceder à tentação de ir bater um papo com os amigos ou ficar um pouco mais de tempo  na frente da televisão. E esses momentos não devem fazer parte do seu dia-a-dia. Ou pelo menos de um modo tão rotineiro como acontece com alguns aspirantes a trabalhadores na internet a tempo inteiro.

Ter os seus princípios e definir uma rotina é essencial, principalmente para quem quer viver a longo prazo através de um computador e de uma ligação à internet. Fazer as tarefas no momento em que devem ser feitas, acaba garantindo mais tempo livre para fazer outras coisas que podem ser positivas para o seu crescimento pessoal, como a leitura de um livro ou um curso de línguas. Considere experimentar algumas das nossas dicas se estiver a ter dificuldades em melhorar a sua produtividade.

E você, como costuma ser a sua manhã de trabalho? Tem problemas com a sua produtividade? Que rotinas tem?

Abraço

Artigos Recomendados

• Como ser produtivo e criativo trabalhando em casa?

@1stwebdesigner (Dainis Graveris)

@smalonedesign (Stephanie Malone)

@ronicadesign (Veronica Domeier)

@mlane (Mike Lane)

@mayhemstudios (Calvin Lee)

@jasonsantamaria (Jason Santa Maria)

@gracesmith (Grace Smith)

@artistech (Artistech Newmedia)

@anthonywoods (Anthony Woods)

@abduzeedo (Abduzeedo)

@boagworld (Paul Boag)

@bokardo (Joshua Porter)

@cjgraphix (Collin Robinson)

@clagnut (Richard Rutter)

@davidlano (David Lano)

@DesignerDepot (Webdesigner Depot)

@DesiznTech (Desizn Tech)

@idesignstudios (Selene M. Bowlby)

@jophillips (Jon Phillips)

@leonfernandes (Leon Fernandes)

@RussAdams (Russ Adams)

@simonashley (Simon Ashley)

@tonychester (Tony Chester)

@AisleOne (Antonio Carusone)

@arronlock (Arron Lock)

@imjustcreative (Graham ‘Logo’ Smith)

@snookca (Snook)

@jasonwalz (Jason Walz)

@zeldman (Jeffrey Zeldman)

@blogdesignblog (Vinh Le)

Abraço e até já!

Artigos Recomendados

• 15 Designers Brasileiros Super Talentosos
• Entenda a Validação HTML5 de uma vez por todas!
• 10 Dicas SEO para melhorar o seu Web Design
• Tutorial: Criar uma Logomarca em Photoshop
• 10 Extensões Google Chrome para Desenvolvedores
• 20 Templates Web em PSD

• $GLOBALS: Variáveis disponívels globalmente
• $_SERVER: Informação acerca do servidor
• $_GET:  Dados utilizados durante o método HTTP GET
• $_POST: Dados utilizados durante o método HTTP POST
• $_REQUEST: Dados utilizados durante um pedido HTTP
• $_FILES: Dados utilizados durante a introdução de um ficheiro HTML
• $_SESSION: Dados relativos à sessão actual do utilizador
• $_COOKIE: Dados guardados no navegador do utilizador como cookie

Não perca alguns dos nossos artigos anteriores relacionados com PHP:

• Comentários e Operadores em PHP
• Javascript para desenvolvedores PHP
• 75+ Ferramentas PHP extremamente úteis
• Como funciona o PHP?
• Diversos Truques e Dicas para PHP
• 16 Estruturas de Controlo em PHP (Parte II)

VARIABLE SCOPE

Na programação, o scope refere-se ao contexto em que declara uma variável. A maioria das variáveis em PHP têm um único scope: global. A utilização deste significa que uma variável estará disponível no script que a declara, bem como em qualquer script que seja incluído após a declaração da variável.

<?php

$teste = "teste";
include_once 'extras.php'; // $teste estará disponível no extras.php
$teste2 = "teste2"; // $teste2 não estará disponível no extras.php

echo "teste é $teste e teste2 é $teste2.";

?>

$GLOBALS

O PHP fornece uma opção para acessar as variáveis no scope global: o array superglobal $GLOBALS. Todas as variáveis no global são carregadas para o array $GLOBALS, permitindo o acesso ás mesmas utilizando o nome da variável como a chave do array:

<?php

$x = "um texto qualquer";

funcion test()
{
    echo $GLOBALS['x'];
}

test();
?>

Normalmente deve-se evitar a utilização de globals quando possível. O método preferido para aceder às variáveis globais dentro de funções é utilizá-las como argumentos. Isto torna os seus scripts mais simplificados e simples de ler e compreender, o que por si só simplifica a manutenção do mesmo ao longo do tempo.

$_SERVER

A superglobal $_SERVER guarda informação acerca do servidor e do script actual, ao mesmo tempo que tem também funcionalidades que lhe permitem aceder ao endereço IP de um visitante de um website, qual o site que o levou ao seu site, a outro tipo de informações interessantes. Uma das funcionalidades mais interessantes é utilizar a superglobal $_SERVER no nome do host do site, que é guardado em HTTP_HOST. O nome é útil porque permite-lhe criar um simples template que poderá utilizar em diferentes projectos sem necessitar de alterar qualquer código. Utilizando o código abaixo, poderá dar as boas vindas a um visitante do seu website:

<?php
    echo "<h1> Bem-Vindo ao $_SERVER[HTTP_HOST]! </h1>";
?>

Correndo este pequeno script no seu computador, iria retornar “Bem-Vindo ao localhost!” pois o seu script está a ser rodado localmente. Se utilizar este script online, irá retornar “Bem-Vindo ao seusite.com!”. Ao longo do tempo e explorando as opções você irá encontrar vários usos para o HTTP_POST nos seus scripts. Aqui ficam alguns:

<?php

// Caminho para o ficheiro actual (por ex. /site/index.php)
echo $_SERVER['PHP_SELF'];

// Informação acerca do navegador do utilizador
echo $_SERVER['HTTP_USER_AGENT'];

// Endereço da página que enviou o utilizador
echo $_SERVER['HTTP_REFERER'];

// Endereço IP do utilizador
echo $_SERVER['REMOTE_ADDR'];

?>

Correndo este script irá retornar todas estas informações citadas.

$_GET

Este método é um dos dois métodos mais utilizados para passar informação entre páginas. Os dados através do $_GET são passados através do URL, e essas informações são inseridas após o endereço actual do website – http://www.escolacriatividade.com?var1=valor1&var2=valor2. A sintaxe é fácil, começa com um ponto de interrogação, de seguida vem a variável seguida de um sinal de igual e do valor da variável. Para adicionair mais que uma, utiliza-se um “&” a separar. Felizmente para facilitar este processo, PHP contém uma função de encurtamento do URL, que pode ser utilizada para preparar os valores para serem passados através de um URL.

Esta função é utilizada em parelha com o urldecode() e juntas permitem-lhe passar valores complexos através do url:

<?php

relatorio_erro(E_ALL);

$var = "Este é um valor complexo e necessita de ser codificado.";

//saída da string original
echo $var, "<br /><br />";

//Codificar a string
$ext = urlencode($var);

//Dar o Output da string codificada
echo $ext, "<br /><br />";

//Descodificar a string e o output
echo urldecode($ext);

?>

Espero que tenha compreendido todos os passos. Este é o primeiro de vários artigos sobre esta temática relacionada com PHP. Se tive dúvidas, questões ou pretender simplesmente dar o seu ponto de vista, deixe um comentário!

Abraço e até já!

Artigos Recomendados

• 16 Estruturas de Controlo em PHP (Parte II)
• Como passar informação entre páginas em PHP (Parte II)
• Comentários e Operadores em PHP
• Como enviar Dados para o Browser com PHP
• Variáveis e Tipos de Dados em PHP (Parte I)
• Como funciona o PHP?