Da20web

Funções jQuery prepend() e append()

Da20web — Tue, 31 Jan 2012 14:50:25 +0000

jQuery é sempre uma mão na roda, e em específico gostaria de falar de duas funções que me salvaram esses dias, prepend() e append(), ambas criam elementos direto em sua página, para mim foi muito útil para alterar a estrutura de um CMS.

A diferença entre os dois é que que o .prepend() cria um elemento ou apenas texto antes de outro elemento pré-estabelescido. Veja o exemplo:

// A biblioteca JQuery deve ser chamada

texto.

…

No navegador aparecerá concatenado a frase completa “Isto é um texto.”

A função append() cria um elemento ou apenas texto antes de outro elemento pré-estabelescido, veja:

Texto,

…

No navegador aparecerá de forma concatenada a frase “Texto, isto é um!”

Este foi mais um post, espero que tenha ajudado, os próximos deverão demorar menos, abraços!

Sistema Simples de Notícias em PHP

Da20web — Thu, 20 Oct 2011 15:27:25 +0000

Segue nas próximas linhas um sistema de notícias bem simples para incrementar seu site. O script busca informações em páginas com RSS disponíveis, basta alterar os links com os arquivos XML pelo do site que deseja, bem legal!

Segue abaixo a estrutura da função:

function mostraNoticia(){
// Na linha abaixo altere pelo arquivo que deseja,
// no exemplo há um link do RSS das nossas notícias
     $xml = simplexml_load_file("http://feeds.feedburner.com/da20web");
// No 'for' abaixo limitei para aparecer apenas 3 notícias,
// Pode alterar o número de visualizações para o que deseja
     for($i=0; $i < 3; $i++) {
// São capturados através do script o título, o link e a data das notícias
          $title = $xml->channel->item[$i]->title;
          $link = $xml->channel->item[$i]->link;
          $pubDate = $xml->channel->item[$i]->pubDate;
          $data = date('d/m - h:i', strtotime($pubDate));
// Abaixo segue uma sugestão de formatação para exibir as notícias,
// pode alterar da maneira que quizer
          echo "$title |
          $data \n";
     }
}

Uma outra dica é acrescentar ao script mais de um arquivo de RSS/XML fazendo-os aparecer de forma aleatória, basta acrescentar o código abaixo:

// A função rand() do PHP escolhe um número aletório seguindo a
// sintaxe rand( início , fim ), poderá aumentar o número de
// arquivos a serem chamados alterando o valor de 'fim' para o
// número de arquivos que quizer.
$aleat = rand(1,2);
if($aleat=="1"){
     $xml = simplexml_load_file(" Link do arquivo / página de RSS ");
}else{
     $xml = simplexml_load_file(" Link do arquivo / página de RSS ");
}

A função poderá ficar num arquivo separado, e deverá ser chamado na página de seu site com

Lembre-se, se usar o arquivo separado, fazer menção a esse arquivo em sua página com algo como

Os arquivos completos podem ser baixados aqui. Espero que tenham gostado, mais dicas em breve!

Meta Tags – Adicionando informação aos seus sites

Da20web — Tue, 11 Oct 2011 13:00:05 +0000

Os elementos meta servem para adicionar informações que depois serão usadas por sites de busca e alguns dispositivos de acesso, facilitando sua visibilidade na web. Sua utilização faz parte das boas práticas de SEO [Search Engine Optimization], assunto que abordarei mais profundamente em outro post.

Exemplos de ajuda que podem ser usadas pelas meta tags são a autoria do site e ou código, descrição dos mesmos e palavras que podem ajudar suas páginas serem mais facilmente indexadas, ‘achadas’ pela web. As metas tags devem ser inseridas entre as tags e

>> Meta Tags mais utilizados

ou

>> Meta Tag Refresh

Em sites dinâmicos que geram sempre novas páginas com informação, imagem, banners, sites de jornais, é muito comum a utilização da meta tag refresh, ela define o tempo [em segundos] para recarregar a página novamente, de forma automática.

>> Meta Tag Robots

Por padrão os sites de busca tem liberdade para indexar, ou seja, colocar seus sites e páginas da web em suas listas de busca, facilitando que os usuários possam lhe encontrar.

Mas e se você está construindo uma extranet e quer restringir as informações que coloca lá? Simples, basta usar as meta tags robots, limitando sua visibilidade.

Basta para isso variar o valor de indexação da página inicial entre index e noindex, e também os valores de visitação das páginas referenciadas na página principal entre follow e nofollow na meta tag robots, veja os exemplos:

Uma Revolução chamada AJAX!

Da20web — Wed, 05 Oct 2011 13:00:52 +0000

Quem nunca se admirou ao escrever parte de alguma palavra na busca do Google e ter um segundos sugestões para ela? Ou mesmo acessar o Google Docs e ter editores de texto, planilhas, apresentadores de slides e muitos outros recursos online e como se estivesse usando um programa desktop?

Esses são alguns dos ilimitados recursos que o AJAX é capaz. O AJAX não é uma tecnologia propriamente dita e sim um conceito que reúne várias tecnologias como o HTML, o CSS, o JavaScript, o PHP e muitas outras linguagens e tecnologias.

>> Revolucione você também!

Para começar, deve entender um pouco de HTML, JavaScript e alguma linguagem que seja interpretada pelo servidor, usaremos o PHP.

Vamos criar um arquivo HTML simples com um pequeno formulário que terá os campos Nome e Hora, ao digitarmos algo em Nome a hora será automaticamente preenchida no campo Hora.



Da20web



Nome: 
Hora:

No exemplo de código acima, o evento onkeyup do JavaScript fará com que ao soltar a tecla a função que fará todos os requisitos do AJAX seja chamada.

O uso do objeto XMLHttp é imprescindível, é ele que fará os pedidos HTTP via JavaScript. Como seu uso é constante, o interessante é ter uma função que faça isso, ela por sua vez pode estar num arquivo .js externo, veja um exemplo para esta função:

var xmlHttp;
function FuncaoAjax() {
try {
// Opera 8.0+, Safari,Firefox
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Seu browser não suporta AJAX!");
return false;
}
}
}

A função acima cria uma variável que receberá o objeto XMLHttp, depois identifica o navegador, vemos que no caso do IE ele tenta verificar mais de um objeto, isso ocorre por, ainda hoje, o navegador padrão da MicroSoft ter problemas de compatibilidade com os padrões do W3C.

Ao identificar o navegador, a função instância o objeto na váriável xmlHttp, é principalmente apartir dela que faremos todos as requisições ao nosso servidor.

Agora vamos definir onde o retorno da informação solicitada ficará, para isso a propriedade onreadystatechange será usada toda vez que houver mudança em readyState, veja o exemplo:

xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState == 4) {
document.getElementById("hora").value = xmlHttp.responseText;
}
}

Existem quatro valores possíveis: 0 = Não iniciado / 1 = Carregando / 2 = Carregado / 3 = Parte da resposta enviada / 4 = Completo. O mais comumente usado e que evita problemas de compatibilidade entre navegadores é o 4.

Em seguida a propriedade getElementById do objeto document pesquisa pelo Id ‘hora’, será essa propriedade value da tag que tem esse Id que ficará a informação enviada pelo servidor.

É necessário agora definir o tipo de post [GET ou POST], o arquivo chamado e se o envio será assíncrono ou não [true ou false, respectivamente], isso é feito através do método open() veja o exemplo:

xmlHttp.open("GET","hora.php",true);

E por último, mas não menos o importante, o envio propriamente dito, isso é feito pelo método send(), esse método aceita um único argumento, uma string, senão houver null deve ser enviado:

xmlHttp.send(null);

Para nosso teste criaremos um arquivo que chamará a hora do servidor, nomei-o como hora.php e coloque as linhas:

Se fez tudo certo, um pequeno formulário com os campos nome e hora aparecerão, sempre que digitar algo no campo nome, a hora no campo seguinte mudará, isso, segundo a segundo.

O nosso teste poderia ser usado por exemplo, para o preenchimento de um formulário de cadastro, onde a hora desse cadastro seria enviada também. Mas o uso do AJAX tem o limite de sua imaginação ou necessidade, procure mais exemplos nos sites de busca, verá que um mundo novo se abrirá para você!

Os arquivos completos podem ser baixados aqui.

Saca de CSS? Já ouviu falar de Tableless?

Da20web — Tue, 27 Sep 2011 12:00:33 +0000

Tableless numa tradução livre seria menos tabela ou sem tabela, na verdade tableless é um conceito onde tenta-se [e consegue-se!] retirar aquele monte de tags html … o famoso ‘tabelão’! Esse novo conceito vem ajudar em muito um outro, o da acessibilidade, falo desse último depois. Com tableless os códigos de suas páginas ficam muito mais clean, limpinhos, dentre outras vantagens depurar erros neles fica muito mais fácil.

CSS é a sigla para Cascading Style Sheets, algo como linguagem de estilo em cascatas, veio para substituir a inserção de formatação de textos, imagens, bordas e demais elementos direto nas tags desses elementos. É altamente recomendado pela W3C, um órgão mundial que tenta padronizar a forma com os sites e sistemas devem ser apresentados na web.

>> Unindo o útil ao agradável!

Há duas formas de se colocar CSS nas suas páginas, uma delas e setando direto em cada arquivo, como no exemplo abaixo:



da20web



...

Mas vamos pensar, se o código do estilo acima fosse setado em cada uma de suas páginas e você tivesse 300 páginas e tivesse que alterar o fundo de cada uma dessas páginas? Melsdels! É por isso que a segunda forma de se colocar CSS deve ser feita, consiste em chamar um arquivo, por exemplo estilo.css, através de um link em cada página, com isso você altera uma linha e 300 páginas mudam!

Veja,



da20web



...

E no arquivo estilo.css, basta ter as linhas:

body{
    background: #a0a0da;
}

JavaScript, Primeiros Passos – Parte 1

Da20web — Fri, 23 Sep 2011 13:00:58 +0000

O JavaScript é uma linguagem de programação de scripts, poderosa, que você pode usar para aumentar a interatividade de suas páginas web. Os códigos são visíveis pelo navegador, você poderá testar vários apenas copiando e colando, com um mínimo de esforço conseguirá entendê-los e criar os seus próprios.

>> Como inserir os scripts?

Existem duas maneiras, uma é chamando direto na página onde deseja que o script atue, essa forma pode ser inserida dentro das tags e com a seguinte chamada:

ou ainda

Sendo esse último mais usado para evitar incompatibilidade com um ou outro navegador. Nos três exemplos anteriores a chamada foi feita direta na página, porém é possível chamar um arquivo externo de extensão .js, veja:

Se deseja a inserção de um script que vá atuar apenas em determinada parte de seu site, a chamada direta na página é o ideal, mas deseja que um mesmo código atue em várias páginas de uma vez, arquivos externos devem ser a pedida!

>> Primeiros Passos!

Vamos a um pequeno exemplo do poder da linguagem, vamos fazer algo para ver se a função JavaScript está habilitada no navegador:



Da20web

No exemplo acima uma caixa do tipo prompt do windows aparecerá com a mensagem “JavaScript habilitado!”, senão uma mensagem para habilitar será exibida.

A tag