fevereiro – 2012 – WebCodeFree

JOOMLA

Posted on 29 de fevereiro de 2012 by Paulo R. Marinho

CMS JOOMLA

Joomla! (pronuncia-se djumla) é uma plataforma ou CMS (Content Management System) que permite a criação e gestão de sites web dinâmicos. Criado em 2006, o Joomla! tornou-se o CMS em maior expansão sendo provavelmente o CMS mais procurado, com a maior comunidade e mais recursos disponíveis.

A grande vantagem do Joomla é a diversidade de extensões disponíveis e criadas por inúmeros programadores e distribuídos de forma gratuita ou comercial mas sempre sob a norma do código aberto. Componentes, módulos e plugins são atualizados constantemente e possuem grande valor para criadores web interessados num site bem elaborado pois adicionam funcionalidades específicas permitindo adequar-se às necessidades dos clientes. O aspeto visual do sítio é controlado por modelos gráficos que permitem uma configuração ao gosto do seu cliente.

Exemplo de Site gerado pelo Joomla:

Fonte: Comunidade Joomla PT

Variáveis em Javascript

Posted on 29 de fevereiro de 2012 by Paulo R. Marinho

Variáveis no Javascript

As variáveis são endereços de memórias capazes de armazenar informações. Uma variável só pode armazenar um valor por vez, esse valor pode ser alterado durante a execução do script. As variáveis são usadas para armazenar valores ou expressões.

CRIANDO UMA VARIÁVEL

Podemos criar uma variável utilizando a declaração da linguagem o comando var, ou podemos também omitir o comando var e cria-la de uma forma direta.

Sintaxe:

<script type="text/javascript">

var VARIAVEL;

VARIAVEL = "valor";

</script>

var VARIAVEL;

VARIAVEL = "valor";

</script>

No javascript podemos omitir o tipo de dados da variável, o mesmo é definido na hora da atribuição de um valor, exemplo se a variável recebe um texto entre aspas ela é um string, mas se caso a mesma variável receber um valor numérico inteiro as mesma é um int.

Exemplo:

<script type="text/javascript">

var VARIAVEL;

VARIAVEL = "valor";

VARIAVEL = 13;

</script>

var VARIAVEL;

VARIAVEL = "valor";

VARIAVEL = 13;

</script>

VARIÁVEIS LOCAIS

Um variável local é uma variável que é declarada dentro de uma função, tornando-se local a função em que foi declarada, as variáveis locais só são reconhecidas dentro de sua função.

Exemplo:

<script type="text/javascript">

   function Funcao(){

         var VARIAVEL; // Variável Local

    }

</script>

function Funcao(){

var VARIAVEL; // Variável Local

}

</script>

VARIÁVEIS GLOBAIS

Um variável global é uma variável que é declarada fora de qualquer função, e todos os scripts e funções contidas na página web pode acessa-la. Se declararmos uma variável sem o uso do var, automaticamente a variável se torna global.

Exemplo:

<script type="text/javascript">

nome_pessoa = "Ana Maria"; // Variável Global

   function Funcao(){
        var VARIAVEL; // Variável Local
   }

</script>

nome_pessoa = "Ana Maria"; // Variável Global

function Funcao(){

var VARIAVEL; // Variável Local

}

</script>

ATRIBUIÇÃO DE VALORES

Para atribuirmos valores a uma variável utilizaremos o sinal de = (igual) para passar o valor para a devida variável.

Exemplo:

<script type="text/javascript">

   num1 = 50;      // Valor Inteiro

   num2 = 36.2;    // Valor Real

   nome = "Sony";  // Valor String

</script>

num1 = 50; // Valor Inteiro

num2 = 36.2; // Valor Real

nome = "Sony"; // Valor String

</script>

EXIBIÇÃO DE VALORES

Para exibirmos o valor de uma variável usaremos a função document.write(), que é uma função responsável pela escrita de uma informação no navegador.

Exemplo:

<script type="text/javascript">

   num1 = 50;      // Valor Inteiro

   num2 = 36.2;    // Valor Real

   nome = "Sony";  // Valor String

   document.write(nome);

   document.write("<br>");

   document.write(num1);

   document.write("<br>");

   document.write(num2);

</script>

num1 = 50; // Valor Inteiro

num2 = 36.2; // Valor Real

nome = "Sony"; // Valor String

document.write(nome);

document.write("<br>");

document.write(num1);

document.write("<br>");

document.write(num2);

</script>

ARITMÉTICA COM VARIÁVEIS

Uma variável também pode receber uma operação aritmética.

Exemplo:

<script type="text/javascript">

   num1 = 6;      

   num2 = 3;    

   soma = num1 + num2;

   mult = num1 * num2;

   divi = num1 / num2;

   subt = num1 - num2;

</script>

num1 = 6;

num2 = 3;

soma = num1 + num2;

mult = num1 * num2;

divi = num1 / num2;

subt = num1 - num2;

</script>

Sintaxe e Implementação Javascript

Posted on 29 de fevereiro de 2012 by Paulo R. Marinho

Sintaxe e Implementação Javascript

Para implementarmos scripts javascript em nossas páginas web necessitamos basicamente de um editor de texto e um navegador compatível com Javascript. Existem alguns editores de códigos mais sofisticados que exibem uma ajuda na hora de criarmos o nosso script, tais como poder trabalhar com diversas páginas ao mesmo tempo, colorir a sintaxe da linguagem destacando possíveis erros no código. Fica a critério do usuário a utilização do editor, particularmente utilizo o notepad ++ portátil pela praticidade e portabilidade.

Os scripts podem ser inseridos em uma página HTML ou em arquivos individuais contendo somente as declarações javascript. Em um primeiro momento criaremos os scripts em páginas HTML.

Para inserir um javascript em uma página HTML, devemos inseri-lo dentro de um delimitador chamado <script> como no exemplo abaixo:

<head>
<title>Minha página HTML</title>
   <script>
   // Conteúdo Javascript
   </script>
</head>
<body>

<head>

<title>Minha página HTML</title>

// Conteúdo Javascript

</script>

</head>

<body>

Podemos fazer o uso de scripts em toda páginas desde que estejam entre o seu delimitador <script> e podemos inseri-lo também dentro de alguns atributos do HTML.

SINTAXE

O javascript apesar de não ser igual ao java como vimos no post anterior possui uma sintaxe semelhante ao mesmo pois foi baseado em java e também tem suas semelhança com a linguagem C.

Uma das semelhança com o java é que o javascript também é Case Sensitive, ou seja ele diferencia o uso de letras maiúsculas e minusculas na hora da criação de seus scripts, por isso fica atento ao uso do mesmo.

Exemplo de código:

<head>
<title>Minha página HTML</title>
   <script>
   document.write("Olá Mundo em Javascript");
   </script>
</head>
<body>

<head>

<title>Minha página HTML</title>

document.write("Olá Mundo em Javascript");

</script>

</head>

<body>

O java script faz uso de um ponto e virgula no final de cada linha de código como um delimitador para a separação e quebra de linha das linhas de código, se torna essencial o uso de ponto e vírgula já que a maioria da linguagens fazem o uso do mesmo para quebra de linha de seu código.

Introdução a Linguagem HTML

Posted on 29 de fevereiro de 2012 by Paulo R. Marinho

Introdução a Linguagem HTML

O HTML (HYPERTEXT MARKUP LANGUAGE) é uma linguagem dedicada a modelagem de páginas web. Um arquivo HTML consiste de um texto comum de códigos especias chamados tags, essas tags representam as marcações da linguagem HTML. O HTML é bastante simples e tem como finalidade formatar o texto exibindo em um navegador e criar ligações entre documentos web, por isso é conhecido com HyperText ou seja hipertexto.

AS TAGS DA LINGUAGEM HTML

As tags HTML são especificadas em pares e tem como finalidade a formatação de textos, criação de hyperlinks, inserção de vídeos e imagens, e etc. Além dos pares de tags existem algumas que possuem uma especificação individual é o caso da tag, utilizada para inserir uma quebra de linha. As tags são especificadas entre o sinal < > para representar o inicio da marcação e do sinal < / > para representar o fim de uma marcação.

Sintaxe de um elemento(TAG):

Sintaxe de um Documento HTML:

<html>
<head>
<title></title>
</head>
<body>
Minha Página HTML
</body>
</html>

<html>

<head>

</head>

<body>

Minha Página HTML

</body>

</html>

Definição:

<HTML> : Delimita o inicio e fim de uma página ou documento HTML.
<HEAD> : Delimita o inicio e fim do bloco de cabeçalho de uma página HTML.
<TITLE> : Delimita o texto a ser exibido na barra de títulos da janela do navegador.
<BODY> : Delimita o inicio e fim do corpo do documento HTML. É nele que a maioria das tags da linguagem HTML são definidas.

Estrutura Básica do HTML

A estrutura básica de um documento HTML é especificada através do uso de pares de tags, para delimitar o conteúdo que sofrerá alguma alteração. Além da definição de pares de tags o HTML também trabalha com algumas tags individuais.

Os pares de tags devem obedecer a seguinte estrutura:

<NOME DA TAG> TEXTO </NOME DA TAG>

1	<NOME DA TAG> TEXTO </NOME DA TAG>

As tags dever ser endentadas, ou seja, uma não deve atrapalhar o fechamento da outra. O HTML não diferencia o uso de letras maiúsculas ou minúsculas. As tags são interpretadas independente do tamanho, tipo, cor ou efeitos aplicados a sua fonte durante a digitação do código fonte da página.

Implementação do HTML

Para construirmos páginas HTML precisamos de um Editor de texto (exemplo, bloco de notas, notepad ++, Nvu, Adobe Dreamweaver) e de um navegador (exemplo: Google Chrome, Mozilla Firefox, Opera, Safari e pra quem é adepto ao mundo microsoft o Lixonet Explore).

Os arquivos criados no editor de texto deverá ser salvo com a extensão .html ou .htm . Salve os seus arquivos em um diretório de sua preferência e para abri-los basta um duplo clique.

O padrão da linguagem HTML é mantido pelo W3C – World Wide Web Consortion, que é orgão que mantêm os padrões de algumas linguagens web.

DOWNLOAD DE ALGUNS EDITORES DE TEXTO

NOTEPAD ++ 5.9.8

Download

NVU

Download

NOTEPAD GNU

Download

Diferenças entre Java e Javascript

Posted on 27 de fevereiro de 2012 by Paulo R. Marinho

Diferenças entre Java e Javascript

java != javascript

Uma das maiores confusões que acontecem quando se fala em Javascript é a inevitável comparação com a linguagem de programação “Java”. É importante frisar, contudo, que Javascript NÃO TEM NADA A VER COM JAVA. Estas são duas técnicas diferentes de programação e portanto não guardam entre si mais relação que a sintaxe e poucas coisas mais. Java é uma linguagem de programação. Javascript é basicamente uma linguagem de hiper-texto. É útil pois muitas vezes precisa-se, por exemplo, utilizar algum recurso que torne a página mais dinâmica e mais bonita, sem ter de se incomodar com a programação. É útil também pois é bastante simples e foi projetada para fazer as coisas com rapidez.

Abaixo segue algumas diferenças entre Javascript e Java:

A programação Java requer um kit de desenvolvimento e um compilador. Entretanto, Javascript não é uma linguagem que necessite que seus programas se compilem. Estes são interpretados pelo browser quando ele lê a página;
Java é uma linguagem de programação fortemente tipada, ou seja, ao declarar uma variável é necessária a indicação de seu tipo e, então, não é permitida a mudança de seu tipo automaticamente. Por sua vez, Javascript não tem esta característica, e pode-se alocar em uma variável a informação que se deseja, independentemente de seu tipo. Ademais, pode-se mudar o tipo de informação de uma variável quando for necessário;
Java é muito mais potente que Javascript, pois Java é uma linguagem de propósito geral, com a qual pode-se fazer aplicações para variadas funções. Javascript, entretanto, permite somente a escrita de programas que sejam posteriormente executados em páginas web;
Os miniaplicativos Java são compilados em arquivos de classe para serem utilizados em uma página da web. JavaScript, porém, utiliza comandos simples de texto, que podem ser incluídos no próprio documento de HTML;
Os miniaplicativos Java geralmente são exibidos em uma caixa dentro do documento de Web. Já scripts de JavaScript podem afetar qualquer parte do próprio documento da Web.

Apesar de diferentes e úteis para diferentes coisas, as duas linguagens podem até serem utilizadas em conjunto para combinar suas vantagens.

JavaScript Introdução

Posted on 27 de fevereiro de 2012 by Paulo R. Marinho

Introdução

O Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga de processamento é o navegador) e é utilizada para criar pequenos programas que realizam ações em páginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem do lado cliente mais utilizada.

Com Javascript podemos criar páginas mais “inteligentes”, inserindo efeitos especiais e recursos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de um formulário está correto, dentre outras interatividades com o usuário. Como já foi dito, o responsável por interpretar e conseqüentemente executar essas instruções Javascript é o browser, que é, portanto, o maior (para não dizer o único) com que esta linguagem conta.

Algumas linguagens de programação para web são muito complexas, mas as linguagens de script são geralmente simples por possuírem sintaxes fáceis de entender, além de permitirem a combinação de script com HTML para deixar as páginas Web interativas. Outra facilidade do Javascript é que ela é uma linguagem interpretada e não compilada. O que acontece é que navegador executa cada linha de script como as recebe. Por este motivo é importante saber que a sintaxe Javascript é case sensitive, ou seja é sensível ao tipo de letra, sendo necessária atenção na escrita dos comandos. Caso contrário o Javascript interpretará, por exemplo, o que seria um comando como sendo o nome de uma variável. Coisas como essas são o que diferem Javascript de outras linguagens de programação em que os códigos devem ser compilados ou traduzidos em código de máquina antes de serem executados.

Exemplo de código em JavaScript:

Tipos de Css

Posted on 27 de fevereiro de 2012 by Paulo R. Marinho

Tipos de Css

As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas:

Externas (Importadas ou linkadas);
Internas (Incorporadas);
Inline.

Folhas de Estilos Externas (Importadas ou Linkadas)

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css.

Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).

O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir:

&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;estilo.css&quot;&gt;
&lt;/head&gt;

<head>

</head>

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.

&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
@import url(&quot;estilo.css&quot;);
&lt;/style&gt; 
&lt;/head&gt;

<head>

@import url("estilo.css");

</style>

</head>

Folhas de Estilos Incorporadas ou Internas

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.

As regras de estilo incorporadas e válidas para o documento são declaradas na seção <head> do documento com a tag de esti

&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
&lt;!--
body {
background: #000;
url(imagens/minhaimagem.gif);
}
h3 {
color: #f00;
}
p {
margin-left: 15px;
padding:1.5em;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

<head>

<!--

body {

background: #000;

url(imagens/minhaimagem.gif);

}

h3 {

color: #f00;

}

p {

margin-left: 15px;

padding:1.5em;

}

-->

</style>

</head>

Folhas de Estilos InLine

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.

Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.

A sintaxe para aplicar estilo inline é mostrada a seguir:

&lt;p style=&quot;color:#000; margin: 5px;&quot;&gt;
Aqui um parágrafo de cor preta e com 5px nas 4  margens.
&lt;/p&gt;

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

</p>

INSTALAÇÃO E CONFIGURAÇÃO DAS FERRAMENTAS DO PHP

Posted on 22 de fevereiro de 2012 by Paulo R. Marinho

INSTALAÇÃO E CONFIGURAÇÃO DAS FERRAMENTAS DO PHP – PARTE 2

INSTALAÇÃO DO APACHE SERVER

Para dar inicio a instalação do apache, clique no arquivo “apache_x.x.xx-win32-x86.msi“, onde x.x.x.x é o número da versão do servidor apache. Após clicar no arquivo aparecerá a seguinte janela de dialogo:

Para iniciar o processo de instalação e configuração clique em Next.

Após clicar em NEXT será exibida a seguinte janela:

Clique na seguinte opção: I accept the terms in the license agreement, para concordar com os termos de licenciamento da ferramenta e logo após clique em Next.

Esta parte da instalação é a mais importante pois aqui você vai configurar os endereços do Servidor. Em Network Domain coloque o endereço do servidor, no nosso caso utilizaremos uma rede local, no Server Name colocaremos “localhost“, logo após verifique se a opção for All Users, on Port 80, as a Service… está marcada, caso contrário marque-a. Por fim clique em Next.

A janela acima lhe dá a escolha de alterar o diretório do Apache, porém deixaremos o mesmo para evitar dor de cabeça na hora salvar nossos arquivos. Por fim clique em Next para finalizarmos nossa instalação.

Após concluir o processo de instalação, abra o Aplicativo Apache Service Monitor, verifique se o Service Status está com o botão Start desabilitado, caso esteja o seu Servidor Web está configurado e rodando, caso contrario clique na opção Start.

Após dar Start em seu Servidor Web, abra o navegador de sua preferência e digite o endereço de seu servidor local: http://localhost, caso apareça a janela abaixo sua instalação foi concluída sem nenhum erro.

Caso você não tenha conseguido sucesso na hora de dar Start no Servidor Web siga os seguintes passos:

Clique no menu Iniciar e procure pelo atalho do servidor Apache. Depois de encontrado, clique em Configure Apache Server e clique em Edit the Apache httpd.conf Configuration File. Veja esta imagem para não ter dúvidas.

Logo após abrirá o seguinte arquivo:

Altere a linha destacada por: ServerName localhost:8080, e logo após salve o arquivo e feche-o.

Após a alteração abra o navegador e digite o endereço do seu servidor local seguido da porta que você acabou de configurar: http://localhost:8080, caso apareça a imagem abaixo a configuração foi realizada com exito.

INSTALAÇÃO E CONFIGURAÇÃO DAS FERRAMENTAS DO PHP

Posted on 22 de fevereiro de 2012 by Paulo R. Marinho

INSTALAÇÃO E CONFIGURAÇÃO DAS FERRAMENTAS DO PHP - PARTE 1

O PHP é uma linguagem de script para desenvolvimento de sites dinâmicos e acesso a banco de dados. Para que se possa desenvolver em PHP, é necessário ter instalado no computador uma série de ferramentas que permitirão criar páginas em PHP. Para que possamos rodar nossas aplicações em PHP, precisamos um servidor web, o interpretador do PHP e um SGBD para executar nossas rotinas de banco de dados.

DOWNLOAD DAS FERRAMENTAS

Para iniciarmos as nossas instalação deveremos baixar as seguintes ferramentas.

(Clique nas imagens para efetuar o Download das ferramentas)

Servidor Web : Apache Server

Interpretador da Linguagem : PHP 5.3

SGBD : MYSQL 5.1

Sintaxe Css

Posted on 21 de fevereiro de 2012 by Paulo R. Marinho

css

Sintaxe Css

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

1	seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p/>, < h1/>, <form/>, .minhaclasse, etc…) ;

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc…).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc…).

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

Exemplo:

p {
font-size: 12px; }

body {
color: #000;
background: #fff;
font-weight: bold;
}

p {

font-size: 12px; }

body {

color: #000;

background: #fff;

font-weight: bold;

}

Comentários no Código Css

/* este é um comentário*/
p {
font-size: 14px;       /* este é outro comentário*/
color: #000;
font-family: Arial, Serif;
}

/* este é um comentário*/

p {

font-size: 14px; /* este é outro comentário*/

color: #000;

font-family: Arial, Serif;

}

Agrupamento de Seletores

Os seletores pode ser agrupados e receberem o mesmo estilo.

Exemplo:

h1, h2, h3, h4, h5, h6 {
color: #0f0;
}

h1, h2, h3, h4, h5, h6 {

color: #0f0;

}