Google lança Open Gallery para ajudar museus e galerias a criar exposições on-line

DestacadoGoogle lança Open Gallery para ajudar museus e galerias a criar exposições on-line

O Google Open Gallery pode ser usado por pequenas galerias locais ou grandes museus nacionais, ajudando-os a publicar alguns de seus artefatos físicos para a web. O Google hospeda o conteúdo no domínio /culturalspot.org e não cobra nada para o uso da tecnologia.

Continuar lendo “Google lança Open Gallery para ajudar museus e galerias a criar exposições on-line”

Anúncios

Uma visão geral sobre o Chrome DevTools

DestacadoUma visão geral sobre o Chrome DevTools

Inspecionar, depurar e otimizar aplicações web.

Visão Geral

O Chrome Developer Tools (DevTools para abreviar), é um conjunto de ferramentas para criação e depuração de páginas web inseridas no Google Chrome.

O DevTools permite aos desenvolvedores web acesso aprofundado na parte interna do navegador e sua aplicação web.

Esta visão geral do DevTools aponta os recursos mais populares e úteis.

Se você nunca usou o DevTools antes, comece aqui. Mesmo se você for um desenvolvedor web experiente, você pode pegar algumas dicas.

Nota: Se você é um desenvolvedor web e deseja ter a última versão do DevTools, você pode usar Google Chrome Canary.

Como acessar o DevTools

Para acessar o DevTools, abra uma página web ou um aplicativo web no Google Chrome. Em seguida, faça uma das seguintes ações:

  • Selecione o Chrome Menu  chrome-menu no canto superior direito da janela do seu navegador, a seguir selecione Ferramentas > Ferramentas do Desenvolvedor.
  • Clique com o botão direito em qualquer elemento da página e selecione Inspecionar Elemento.

Existem vários atalhos úteis para abrir o DevTools:

  • Use Ctrl+Shift+I (ou Cmd+Opt+I no Mac) para abrir o DevTools.
  • Use Ctrl+Shift+J (ou Cmd+Opt+J no Mac) para abrir o DevTools e trazer o foco para o Console.
  • Use Ctrl+Shift+C (ou Cmd+Shift+C no Mac) para abrir o DevTools em modo Inspecionar Elemento, ou alternar o modo Inspecionar Elemento se o DevTools já estiver aberto.

Para o fluxo de trabalho do dia-a-dia, conheça os atalhos que vão economizar o seu tempo.

A janela DevTools

O DevTools está organizado dentro de grupos de tarefas orientadas na barra de ferramentas no topo da janela.

Cada item da barra de ferramentas e painel correspondente, permitem que você trabalhe com um tipo especifico de informações da página ou aplicativo, incluindo os elementos DOM, recursos e fontes.

image03

Em geral, há oito grupos principais de ferramentas disponíveis vistas no DevTools: Elements, Resources, Network, Sources, Timeline, Profiles, Audits, Console e Storage.

Você pode usar as teclas de atalho Ctrl+[ e Ctrl+] para mover-se entre os painéis.

Inspecionando o DOM e estilos

O painel Elements permite que você veja tudo em uma árvore DOM, e permite inspeção e edição em tempo real de elementos DOM. Muitas vezes você vai visitar a aba Elements quando você precisar identificar trechos HTML para algum aspecto da página. Por exemplo, você pode estar curioso se uma imagem tem um atributo HTML id, e qual qual é o valor deste atributo.

image07

Leia mais sobre a inspeção do DOM e estilos (inglês).

Trabalhando com o Console

O Console JavaScipt fornece duas funções principais para desenvolvedores testarem páginas web e aplicações.

  • Um lugar para registrar informações de diagnóstico usando métodos fornecidos pela API do Console, como console.log(), ou console.profile().
  • Uma janela de comandos onde você pode inserir comandos e interagir com o documento e o Chrome DevTools. Você pode avaliar expressões diretamente no Console, e também pode usar métodos fornecidos pela API de Linha de Comando, como o $() comando para selecionar elementos, ou profile() para iniciar o CPU de gerador de perfil.

image06

Leia mais sobre como trabalhar com o console (inglês).

Depurando JavaScript

Com o aumento da complexidade de aplicações JavaScript, desenvolvedores precisam de uma poderosa ferramenta de depuração poderosa para ajudar a descobrir rapidamente a causa de um problema e corrigi-lo de forma eficiente.

O Chrome DevTools inclui uma série de ferramentas úteis para ajudar a fazer a depuração do JavaScript de forma menos dolorosa.

image14

Leia mais sobre como depurar JavaScript com o DevTools (inglês).

Melhorando o desempenho da rede

O painel Network fornece insights sobre os recursos que são solicitados e baixados pela rede em tempo real. Identificar e tratar as solicitações levando mais tempo do que o esperado é um passo essencial na otimização de sua página.

image09

Leia mais sobre como melhorar o desempenho da rede (inglês).

Audits

O painel Audit pode analizar uma página como ela carrega e fornecer sugestões e otimizações para diminuir o tempo de carregamento da página e aumentar a percepção (e real) de resposta.

Para uma visão mais aprofundada, recomendamos também a instalação da extensão PageSpeed.

Melhorando o desempenho de renderização

O painel Timeline oferece uma visão completa sobre onde o tempo é gasto quando sua página ou aplicativo web estão sendo usados ou carregados.

Todos os eventos, desde o carregamento de recursos para análise do JavaScript, cálculo de estilos, e redesenho são plotados em uma linha do tempo.

image04

Leia mais sobre como melhorar o desempenho de renderização (inglês).

Desempenho de JavaScript e CSS

O painel Profiles permite traçar o perfil de tempo execução e uso de memória da página web ou aplicativo web. O painel Profiles inclui alguns perfis: um perfil CPU, um perfil JavaScript e um perfil Heap. Eles ajudam você a entender onde os recursos estão sendo gastos, e assim ajudá-lo a otimizar o seu código:

  • O perfil CPU mostra onde o tempo de execução é gasto em funções de JavaScript da sua página.
  • O perfil Heap mostra a distribuição de memória por objetos JavaScript da sua página e nós DOM relacionados.
  • O perfil JavaScript mostra onde o tempo de execução é gasto em seus scripts

image11

Leia mais sobre como utilizar a forma de melhorar o desempenho de JavaScript e CSS (inglês).

Inspeção de armazenamento

O painel Resources permite que você inspecione os recursos que são carregados na página inspecionada. Ele permite que você interaja com o HTML5 Database, Armazenamento Local, Cookies, App Cache, etc.

image01

Leia mais sobre inspeção de recursos de armazenamento (inglês).

Em breve publicarei artigos específicos de cada ferramenta citada.

Continuar lendo “Uma visão geral sobre o Chrome DevTools”

Guia de Introduação ao WordPress

DestacadoGuia de Introduação ao WordPress
WordPress Logo
WordPress Logo (Photo credit: Phil Oakley)

WordPress para Iniciantes

Instalando o WordPress

O WordPress é bem conhecido por sua facilidade de instalação. Na maioria dos casos a instalação do WordPress é muito simples e leva menos de cinco minutos para ser concluída. Muitas hospedagens atualmente oferecem ferramentas (Fantástico) para instalar o WordPress automaticamente para você. No entanto, se você mesmo quiser instalar o WordPress, o guia a seguir irá ajudá-lo. Agora, com o Upgrade Automático, a atualização é ainda mais fácil.

O guia de instalação a seguir irá ajudá-lo, se você escolher o Famoso Guia de Instalação em 5 Minutos, ou se preferir o guia de instalação mais detalhado.

Coisas para saber antes de instalar o WordPress

Antes de começar a instalação, há algumas coisas que você precisa ter e fazer.

São elas:

  • Acesso ao seu servidor web (via shell ou FTP)
  • Um editor de texto
  • Um programa de FTP
  • Um browser de sua preferência

Coisas que você precisa fazer para instalar o WordPress

Comece a sua instalação por:

  1. Verificar para garantir que você e seu servidor web tenham os requisitos mínimos para rodar o WordPress.
  2. Baixar a última versão do WordPress.
  3. Descompactar o arquivo baixado para uma pasta no seu disco rígido.
  4. Estar preparado com uma senha segura para a sua Chave de Segurança.
  5. Imprimir esta página para que você a tenha acessível durante a instalação.

Famosa instalação de 5 minutos.

Aqui está a versão rápida das instruções para aqueles que já estão confortáveis com a realização desse tipo de instalação. Instruções mais detalhadas a seguir.

Se você não está confortável com a renomeação de arquivos, as etapas 3 e 4 são opcionais e você pode ignorá-las, uma vez que o programa de instalação criará o arquivo wp-config.php para você.

  1. Baixe e descompacte o pacote do WordPress se você ainda não o tiver.
  2. Crie um banco de dados para o WordPress no seu servidor web, bem como um usuário MySQL que tenha todos os privilégios para acessá-lo e modificá-lo.
  3. Faça o upload dos arquivos do WordPress para o local desejado em seu servidor web:
    • Se você quiser integrar o WordPress na raiz principal do seu domínio (por exemplo, http://www.exemplo.com.br), mova ou faça o upload de todo o conteúdo da pasta descompactada do WordPress para o diretório raiz do seu servidor web.
    • Se você deseja ter a sua instalação WordPress em um subdiretório próprio em seu web site (por exemplo, http://www.exemplo.com/blog), crie a pasta blog em seu servidor e faça o upload do conteúdo da pasta descompactada do WordPress para o diretória via FTP.
    • Nota: se o seu programa de FTP tiver a opção para converter os nomes dos arquivos para lower case, verifique se ela está desativada.
  4. Execute o script de instalação do WordPress acessando a URL em um navegador web. Esta deve ser a URL onde você fez o upload dos arquivos do WordPress.

    É isso aí. O WordPress agora deve estar instalado.

Destacado

Entendendo a declaração HTML !DOCTYPE

doctype

Suporte

A declaração <!DOCTYPE> é suportada pela maioria dos browsers.

Definição e Uso

A declaração <!DOCTYPE> precisa ser a primeira coisa em seu documento HTML, antes da tag <html>.

A declaração <!DOCTYPE> não é uma tag HTML; ela é uma instrução para o browser sobre qual versão a página HTML está escrita.

No HTML 4.01, a declaração <!DOCTYPE> faz referência a um DTD, por que o HTML 4.01 foi baseado no SGML. O DTD especifica as regras para a linguagem de marcação para que os navegadores renderizem o conteúdo corretamente.

HTML5 não é baseado no SGML, e, portanto, não necessita de uma referência para um DTD.

Dica: Sempre adicione uma declaração <!DOCTYPE> em seus documentos HTML, para que o browser saiba que tipo de documento esperar.

Diferenças entre HTML 4.01 e HTML 5

Existem três diferente declarações <!DOCTYPE> no HTML 4.01. No HTML5 existe apenas uma:

<!DOCTYPE html>

Elementos HTML e DOCTYPE

Veja na tabela todos os elementos HTML e em qual <!DOCTYPE> cada elemento aparece.

Dicas e Notas

Nota: A tag <!DOCTYPE> não tem uma tag de fechamento.

Dica: a declaração <!DOCTYPE> NÃO é case sensitive.

Dica: Use o validador W3C para checar se você escreveu um documento HTML / XHTML válido.

Declarações DOCTYPE Comuns

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

Este DTD é igual ao HTML 4.01 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;

XHTML 1.0 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

XHTML 1.0 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

XHTML 1.0 Frameset

Este DTD é igual ao XHTML 1.0 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

XHTML 1.1

Este DTD é igual ao XHTML 1.0 Strict, mas permite que você adicione módulos (por exemplo para fornecer suporte ao Ruby para idiomas do Leste Asiático).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;

Mantendo o seu código PHP bem documentado

Mantendo o seu código PHP bem documentado

Introdução

Praticamente todos os desenvolvedores PHP escrevem comentários juntamente com o código. Porém, a linguagem não impõe qualquer regra sobre a forma de fazer isso. Você apenas tem que colocar o comentário dentro de algumas tags específicas e, em seguida, você pode escrever qualquer conteúdo que desejar. Então, o que exatamente deve ser colocado nos blocos de comentários para fazê-lo com que seja útil? Quais partes do código devem ser documentadas e quais não precisam? Neste artigo será apresentado algumas regras importantes que poderá ajudá-lo a manter seu código PHP bem documentado e de fácil compreensão.

1. Escrever um código que explica a si mesmo

Antes de mais nada e mais importante, o código que você escreve poderá servir como boa parte da documentação, mesmo sem precisar adicionar um único bloco de comentário a ele. Enquanto estiver transformando a lógica em pedaços de código, você pode ir fazendo muita coisa para tornar o código limpo e claro. Aqui estão apenas alguns exemplos:

Nome de variáveis, funções e classes

Como você pode nomear trechos do seu código da maneira que quiser, você pode usar isso em seu favor em termos de manter o código compreensível. Apenas lembre-se de escolher nomes claros, não fazer qualquer abreviatura estranha ou usar nomes que podem ser ambíguo (que pode ter dois sentidos de entendimento). Se sua variável representa uma instância de uma classe como ClienteMuitoImportante, basta chamá-la de $clienteMuitoImportante, não de $cliente, nem de $ClieMtImp ou $clientetemporario. Não se preocupe com erros de digitação em nomes de variáveis mais longos. Seu IDE provavelmente irá avisá-lo se houver variáveis não utilizadas ou qualquer outra inconsistência em seu código. Eu tenho certeza de que o uso da nomenclatura adequada vai ajudar a descobrir o que está acontecendo em seu código. É uma regra simples, mas ela pode ser facilmente esquecida em seu trabalho diário.

Indução de tipo

O PHP permite a você coloque nome de classe ou array que pode ser chamado ao lado de um parâmetro de função. Isso impede que você faça chamadas de funções erradas, mas também serve como uma importante peça de informação para que qualquer um possa ler seu código. Você não precisa examinar o corpo da função para saber como chamar a função. Você também pode checar rapidamente como as diferentes funções e classes podem passar valores entre si. E lembre-se de que sua IDE provavelmente irá interpretar as induções de tipo e usá-las para descrever as funções em pop-ups ou sugestões que serão exibidas enquanto você está trabalhando.

Método de visibilidade

Outro conceito que vale a pena ser mencionado é o método de visibilidade. Atribuir a visibilidade correta para métodos de classes é tido como parte importante da escrita de qualidade de um código orientado a objeto. Por um lado, isso mostra qual o código representa a parte da lógica que deve ficar dentro da classe e não deve ser apresentada para outras classes na aplicação. E por outro lado, isso expõe determinados métodos da classe para acesso público, de forma que possam ser chamados de fora da classe e se comunicar com outras partes da aplicação.

Se você escreve um código que inclui a definição de visibilidade, outros desenvolvedores irão descobrir rapidamente como trabalhar com a classe que você desenvolveu. Eles vão perceber que existem alguns métodos públicos que eles podem fazer referência em seu código. Eles também notarão que parte da lógica que você escreveu são deixados para ser tratados por métodos privados de classe e, provavelmente, não devem ser tocados.

Mais uma vez, essas dicas estão sendo interpretadas por seu IDE. O editor que você usar provavelmente pode te mostrar uma lista de métodos de classe, juntamente com a sua visibilidade. Basta olhar para a imagem abaixo e observar os ícones de cadeados ao lado dos nomes dos métodos.

visibility

2. Mantenha o Equilíbrio

Claro que você pode sentir que o código em si nem sempre está suficientemente claro e de que precisa de uma explicação adicional. É especialmente verdade quando você está implementando uma parte complicada de uma lógica de negócios, realização de cálculos complexos ou apenas utilizando comandos que são difíceis de entender à primeira vista (como padrões de expressões regulares, transformações de arrays, etc.). Em muitos casos escrever um breve comentário, certamente ajudará a entender o que está acontecendo.

Por outro lado, blocos de comentários não devem ser feitos por causa de códigos mal escritos. Se o seu código contém muitos laços de repetição ou estruturas de controle, e você nunca sabe como ele funciona sem antes analisá-lo por alguns minutos, deixando-o assim uma com algumas linhas de comentários, não será a melhor opção. Você deve, antes, colocar algum esforço na refatoração do código ao invés de tentar explicá-lo nos comentários.

Além de blocos de códigos complexos, existem também partes do código que são claras e não representam nenhuma lógica complicada. Alguns desenvolvedores tendem a colocar blocos de comentários mesmo para essas partes de seus aplicativos, o que é desnecessário em minha opinião. Deixe-me mostrar um exemplo:

<?php
    class Deposito {

        /**
         * O dono do depósito.
         *
         * @var string
         */
        private $_dono;

         /**
         * The deposit amount.
         *
         * @var float
         */
        private $_amount;

        /**
         * The date when the deposit was opened.
         *
         * @var DateTime
         */
        private $_dateOpened;

        /**
         * Class constructor.
         *
         */
        public function __construct() {
            //...
        }

        /**
         * Sets the deposit owner.
         *
         * @param string $dono O nome do dono do depósito.
         */
        public function setOwner($dono) {
            $this->_dono = $dono;
        }
?>

Lembre-se de que a pessoa que geralmente lê o seu código é também um desenvolvedor (ou pelo menos eu acho que sim), então ele/ela vai ser capaz de descobrir que a propriedade _dono da classe Deposito representa o proprietário de um depósito. É por isso que eu penso que se colocar um comentário adicional a essas partes do código pode até torná-lo menos legível ao invés de ajudar o leitor de alguma forma.

Os comentários são também muitas vezes desnecessários em outras partes simples do seu código, não apenas em propriedades de definição da classe ou métodos típicos (como construtores, getters ou setters). Apenas veja o exemplo abaixo:

<?php

public function showUserDetails() {
    $userId = $this->Session->read('userId');
    $userData = $this->getUserData($userId);
    if(!$user->isActive()) {
        throw new Exception("The user account hasn't been activated.");
    }

    //...
}
?>

Tenho certeza de que você pode facilmente descobrir o que está acontecendo na parte do código apresentado acima. Mas se você quiser comentar o código, ele provavelmente ficará parecido com este:

<?php
/**
 * Exibe os detalhes do usuário que está 
 * conectado.
 *
 */
public function showUserDetails() {
    //checar usuário da sessão atual
    $userId = $this->Session->read('userId');   

    //carregar os dados do usuário do banco de dados
    $userData = $this->getUserData($userId);

    //verificar se o usuário tem uma conta ativa
    if(!$user->isActive()) {
        throw new Exception("The user account hasn't been activated.");
    }

    //...
}

?>

Na verdade, os comentários adicionados ao método contém praticamente as mesmas palavras como as usadas no código. Como nós dissemos anteriormente, a nomenclatura adequada torna o seu código compreensível e de fácil leitura. Na minha opinião, o método mostrado no exemplo acima não necessita de qualquer comentário adicional já que tudo é descrito pelo próprio código. Claro que eu incentivo você a escrever comentários nas partes do seu aplicativo que são mais complexas e que precisam de uma explicação adicional.

3. Lembre-se sobre os blocos doc

Como você pode ver nos exemplos de códigos acima, alguns blocos de comentários contém palavras-chaves específicas, que começam com o caractere @. Eu utilizei @var para descrever o tipo da propriedade da classe e @param para informar sobre o tipo de parâmetro do método. Você também pode usar a tag @return que informa sobre o tipo de valor que está sendo retornado por uma função. Outras tags podem ser empregadas para descrever alguma informação geral sobre a aplicação ou sua parte (como o autor, o pacote, o tipo de licença). Você pode ler mais sobre os blocos doc no artigo Introdução para o PhpDoc escrito por Moshe Teutsch (em inglês).

As tags blocos Doc contém informações que não podem ser incluídas no próprio código. Especificar o tipo de propriedade da classe ou valores de retorno da função é particularmente muito útil, pois ele pode ser analisado pela maioria das IDEs e mostrados nas dicas. Claro que você também pode inserir um texto customizado em um bloco doc que servirá como uma função ou documentação da classe. Isso pode ser especialmente importante se o seu projeto precisar ter sua documentação disponível de fora do código. Nesses casos, você pode fazer uso de aplicativos que analisam os blocos doc e geram a documentação de toda a aplicação baseando-se em seu conteúdo. Leia o artigo (em inglês) de Bruno Skvorc’s, Gerando a documentação com o ApiGen para saber mais sobre o assunto.

Se o código está fácil para entender and não precisa da produção de uma documentação extensa, basta manter as tags que fornecem informações sobre os tipos de variáveis e valores de retorno. Como resultado, o código não ficará excessivamente complicado:

<?php
    class Deposit {

        /**
         * @var string
         */
        private $_owner;

         /**
         * @var float
         */
        private $_amount;

        /**
         * @var DateTime
         */
        private $_dateOpened;

        //...

        /**
         * @param string $owner
         */
        public function setOwner($owner) {
            $this->_owner = $owner;
        }
?>

Sumário

Neste artigo eu apresentei algumas dicas sobre como manter a documentação em uma aplicação PHP. Eu penso que excesso de  comentários não são necessários se você produzir um código que é claro e se explica por si mesmo. O local adequado para inserir comentários é quando você implementa alguma lógica complexa ou utiliza comandos que não são tão legíveis para seres humanos. Também vale a pena lembrar de inserir tags em blocos doc que descrevam tipos de variáveis ou valores de retorno de funções, já que essas informações não podem ser inseridas no próprio código. Se você precisar manter uma documentação mais detalhada do projeto, tam22 de outubro de 2014, 15:43
bém poderá colocar as descrições apropriadas em blocos doc.

Sinta-se livre para colocar seus comentários sobre os pontos deste artigo ou entrar em contato comigo através do formulário de contato. Se você tiver uma opinião diferente ou utiliza regras diferentes em seu trabalho, conte-nos!

Fonte: sitepoint

Variáveis PHP

Variáveis PHP

Uma variável é usada em scripts PHP para representar um valor. Como o nome variável sugere, o valor de uma variável pode mudar (ou variar) durante o programa. Variável é uma das características que distingue linguagens de programação como o PHP de uma linguagem de marcação como o HTML.

Variáveis permitem que você escreva seu código de uma forma genérica. Para exemplificar isso, considere um formulário que peça aos usuários que insiram seu nome e cor favorita.

Toda vez que o formulário for preenchido, os dados serão diferentes. Um usuário pode informar que eu o seu nome é John e sua cor favorita é azul. Outro usuário pode dizer que seu nome é Susan e que sua cor favorita é amarelo. Precisamos de uma forma de trabalhar com valores que um usuário insere. A maneira de fazer isso é usando variáveis.

Existem algumas variáveis padrão que o PHP cria automaticamente, mas nas maioria das vezes as variáveis são criadas (declaradas) por você, o programador. Com a criação de duas variáveis chamadas $name e $color, você pode criar um código genéricos que pode ligar com todos os valores de entrada. Para o John, este código:

<?php
echo "Hello, $name. Your favorite color is $color.";

Irá mostrar:

Hello, John. Your favorite color is blue.

Por outro lado, Susan veria:

Hello, Susan. Your favorite color is yellow.

Vamos analisar os nomes de variáveis e exibir os valores de variáveis no restante deste artigo, mas o ponto importante agora é entender como o uso de variáveis genéricas pode tornar o processamento de dados mais fácil.

Criando Variáveis

Em PHP, basta simplesmente escrever o nome de uma variável pela primeira vez em um script para criá-la. Não há nada mais que você precisa fazer. Os nomes das variáveis precisam seguir algumas regras padrão:

  1. O nome começa com um sinal de $
  2. O primeiro caractere depois do $ precisa ser uma letra ou underline
  3. Todos os caracteres seguintes podem ser uma combinação de letras, números e underlines

$customerName é um nome de variável válida porque ele observa as três regras acima.

$123customer não é um nome válido porque ele viola a segunda regra. O primeiro caractere depois do sinal $ precisa ser uma letra ou um underline.

Um boa ideia é dar à variável um nome explicativo. Se o dado que você irá armazenar é o nome do cliente, um nome sensato para a variável pode ser $nomeCliente. Você também pode chamá-la de $abc123, mas espero que você concorde que a primeira sugestão é melhor.

Existem diferentes convenções que você pode seguir quando se escreve o nome de variáveis. Independente de qual você escolher, é importante ser consistente e seguir a convenção de todo o seu script. Por exemplo, você pode usar um underline para separar palavras (por exemplo, $nome_cliente), ou usar letras maiúsculas para diferenciar palavras, um estilo chamado Camel Case (por exemplo, $nomeCliente).

É permitido que você use tanto letra maiúscula quanto letra minúscula para nomear uma variável, mas esteja atento de que $NomeCliente não é o mesmo que $nomeCliente. O PHP irá tratar os dois como variáveis diferentes! Isso reforça a necessidade de se ater a uma convenção de nomenclatura.

Atribuindo Variáveis

Agora que você sabe que você pode criar uma variável em PHP a qualquer momento que você precisar escrevendo apenas um novo nome, vamos conferir um outro exemplo para aprender sobre atribuição de valores para elas (as variáveis).

<?php
$customerName = "Fred";
$customerID;
$customerID = 346646;
$customerName = $customerID;

Primeiro, a variável $customerName recebe o valor “Fred”. Isso é conhecido como a atribuição de um valor. E por esta ser a primeira vez que $customerName é usada, a variável é criada automaticamente. Toda vez que você escrever $customerName depois disso, o PHP vai saber que deve usar o valor “Fred” em seu lugar.

Em seguida, $customerID é escrita. Uma variável pode ser criada com nenhum valor atribuído a ela, embora isso geralmente não seja considerada uma boa prática. É melhor você atribuir um valor padrão só para você saber que ela tem um valor. Lembre-se, as variáveis são variáveis, então você sempre poderá alterar o valor depois. Em seguida é atribuído o valor 346646 a variável $customerID.

Por último, o valor de $customerID é atribuído para $customerName. Você pode atribuir o valor de uma variável para outra; neste caso o valor de $customerID (346646) sobrescreveu o valor em $customerName (“Fred”) de modo que ambas as variáveis agora representam 346646!

Observe como os tipos de dados referenciados por uma variável possuem diferentes “tipos”. Esta propriedade é chamada de tipo de dados dos dados. “Fred” é dado com aspas, então este tipo de dado é uma string (string é apenas um nome fantasia para texto). 346646 é obviamente um número (mais especificamente, um inteiro).

Aqui estão alguns exemplos de atribuição de valores com diferente tipos de dados:

<?php
$total = 0;                              // Integer
$total = "Year to Date";                 // String
$total = true;                           // Boolean
$total = 100.25;                         // Double
$total = array(250, 300, 325, 475);      // Array

Agora que você entende o básico de nomear variáveis e atribuição de valores, vamos conferir este exemplo e veja se você consegue trabalhar a resposta:

<?php
$firstNumber = 4;
$secondNumber = 6;
$result = $firstNumber + $secondNumber;

Os exemplos na seção acima mostra que os valores a direita do sinal = são atribuídos para o nome de variável a esquerda do sinal de =, de moro que o valor 4 é atribuído para $firstNumber.

Dê uma olhada mais atenta sobre a última linha. Embora eu não tenha explicado anteriormente, o sinal de + é um operador, neste caso, realizando uma adição. Então, qual você acha que será o valor de $result?

Se sua resposta é 10, então muito bem, está correta! Se não, de uma olhada no exemplo novamente e leia a explicação com atenção.

Exibindo os valores de variáveis

Como foi visto no início, você pode exibir os valores representados por variáveis usando echo. Você também pode utilizar o print se você preferir, já que há uma pequena diferença entre os dois neste ponto você escreve menos com echo.

<?php
echo $customerName;

Talvez você queira tornar o exemplo mais significativo adicionando algum texto entre aspas antes do conteúdo da variáveo:

<?php
echo "Customer name = " . $customerName;

O ponto entre o texto entre aspas e o nome da variável é o operador de concatenação. Ele une a string e o valor da variável.

Você pode fazer uso de interpolação do lugar da concatenação. Interpolação é quando o nome da variável aparece em uma string e é substituída pelo seu valor. Fazendo dessa forma, muitas vezes pode tornar o seu código mais fácil para ler.

<?php
echo "Customer name = $customerName";

PHP executa automaticamente a interpolação em strings que são fechadas por marcação de aspas duplas. Se você deseja exibir o nome da variável com o seu texto, você pode usar uma barra invertida imediatamente antes do nome da variável:

<?php
echo "\$customerName has the value: $customerName";

Alternativamente, PHP não irá executar a interpolação em strings que estão fechadas por marcação de aspas simples. Portanto, esta é uma declaração igualmente eficaz:

 <?php
echo '$customerName has the value: ' . $customerName;

Para mais informações sobre variáveis, consulte a documentação do PHP. Você vai rever tudo o que aprendeu aqui e conhecer mais sobre o quais variáveis especiais que o PHP define automaticamente e disponibiliza para seus scripts, como a variável está vinculada ao contexto que foi declarada e até mesmo como variáveis podem ser usadas como os nomes de outras variáveis.

Fonte: sitepoint

Snippets (trechos) HTML5 prontos para usar e super úteis

Snippets (trechos) HTML5 prontos para usar e super úteis

HTML-5-Logotipo-Oficial

HTML5 é super fácil de escrever, mas quando você cria páginas web, muitas vezes você precisa fazer tarefas repetitivas, como criar formulários. Neste artigo eu compilei os 10+ snippets HTML para agilizar a sua codificação front-end.

Template Inicial HTML5

Quando começar um projeto, você precisa de um template inicial. Aqui está um modelo conciso e limpo para servir como base para seus projetos HTML5.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled</title>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>	</body>
</html>

Fonte: http://snipplr.com/view/68539/plain-html5-starter-template/

Formulário para Obter Rotas (Google Maps)

Aqui está um código simples porém poderoso para criar um formulário onde o usuário pode digitar sua localização para obter a rota para um lugar especifico. Muito utilizado em páginas de contato.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Digite sua localização</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="Av. Paulista, 1578 - Bela Vista - São Paulo (MASP)" />
   <input type="submit" value="Obter Rota" />
</form>

Codificação Base64 de 1*1px para um gif de espaçamento

Não é recomendado o uso de gifs de espaçamento transparente, mas sabe-se, que mesmo em 2013, muitas pessoas ainda estão usando de vez em quando. Se você é uma delas, você provavelmente vai gostar desta codificação Base64  de 1*1px para um gif de espaçamento. Muito melhor do que usar uma imagem.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Fonte: http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Expressão Regular para validação de e-mail

O HTML5 permite, entre outras coisas, a validação de e-mails usando um padrão de expressão regular. Aqui está um campo input, pronto para usar, com o padrão de expressão regular para a validação de um endereço de e-mail.

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Fonte: >http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/>

Incorporador de Flash válido

Você inclui arquivos Flash em suas páginas com frequência? Se sim, é melhor você salvar o incorporador de flash abaixo para uso futuro.

Clique no link abaixo para visualizar o código.

Fonte: http://yoast.com/articles/valid-flash-embedding/

Vídeo HTML5 com retorno em Flash

Outra grande característica das novas especificações do HTML5 é, definitivamente, a tag video, que lhe permite incorporar com facilidade arquivos de vídeo. Mas infelizmente, alguns navegadores não conseguem lidar com vídeos embutidos com o HTML5. Então aqui está um código completo com o retorno em flash para navegadores antigos.

Clique no link abaixo para visualizar o código.

Fonte: http://camendesign.com/code/video_for_everybody

Link para chamada e sms para iPhone

Com o lançamento do iPhone, a Apple introduziu uma maneira rápida para criar links para chamadas e sms. Aqui está um exemplo do código para ter em sua biblioteca de snippets.

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Fonte: https://developer.apple.com/library/ios/featuredarticles…

Autocompletar com HTML5 Datalist

Usando o elemento datalist, o HTML5 permite você criar uma lista de dados para autocompletar um campo input. Super útil! Aqui está o código para você reusar em seus próprios projetos.

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Fonte: http://davidwalsh.name/datalist

Lista drop down de países para formulários web

Aqui está uma outra economia de tempo: uma lista drop down pronta para uso com todos os países.

Devido ao tamanho do código, consulte a fonte diretamente.

Fonte: http://codigofonte.uol.com.br/codigos/lista-de-paises (Português)

Fonte: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/ (Inglês)

Arquivo para downloads

HTML5 permite que você force o download de arquivos usando o atributo download. Aqui está o link padrão para o download de um arquivo.

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Fonte: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

Crash IE6

Em 2013, muitas pessoas têm, finalmente, atualizado o terrível Internet Explorer 6 que foi o pesadelo de todos os desenvolvedores front-end por anos. Mas algumas pessoas ainda o estão usando. Se você quer se livrar desse navegador pré-histórico para o bem de todos, aqui está um código muito divertido para incluir em suas páginas html.

Este código irá travar o IE6. Bam!

<style>*{position:relative}</style><table><input></table>

Fonte: http://www.catswhocode.com/blog/html5-code-snippets-to-take-your-website-to-the-next-level

Fonte do artigo: Cats who code