[Tool] Validador de XHTML W3C

Boa noite caros leitores! Hoje venho-los trazer o compartilhamento de uma ferramenta que pode ser muito útil na produção de seus código-fontes. Sim, um validador do seu código-fonte feito pela própria W3C. Se você não sabe ou não lembra todas as regras de nosso famoso XHTML, é de ótimo uso e aprendizado!

A  funcionalidade do mesmo é ótimo: você pode exportar de três maneiras diferentes seus arquivos (browser, envio de arquivo e por URL) para leitura, assim, é fácil/prático. Ele também mostrará quando houver e aonde houver (replicará a linha e uma breve solução, dica!) erros em seu código-fonte.

Eu já utilizei e utilizo em todas as criações dos meus websites, apesar dele SEMPRE retornar um erro no código do Google Analytics, eu encontrei uma maneira de se fixar este problema, apenas clique aqui.

O link para você desfrutar da ferramenta é este e divirtam-se!

Apenas para conhecimento publico: existem outros validadores da própria W3C, mas para aplicações diferentes (linguagens).

[Off] Alterações em nossas estruturas

Bem, após um bom tempo sem compartilhamento de conhecimento, estaremos de volta e desta vez com muito mais força, sim, mas postagens. Com as alterações em nossas estruturas, não será exatamente postadas apenas tutoriais e códigos-fonte, utilizarei e tomarei uma área especial para a postagem de meus trabalhos feitos em quaisquer que seja o software (desde que seja voltado mais a Web), por tanto, não estranhem se notarem diferentes frequências em nossas postagens.

Também, com o mesmo texto, gostaria de pedir para que vocês se tornassem mais ativos em nossas redes sociais (curtissem, seguissem, compartilhassem), ajudando assim, em nossa divulgação.

Em questão do site que foi prometido algum tempo atrás, ele está sob "manutenção", pois estamos com alguns probleminhas com a nossa empresa de host. Pedimos desculpas pela demora e continuaremos com o link alternativo até que o problema seja fixado em nosso novo servidor.

Segue nossas redes sociais abaixo:

Facebook: [Clique aqui]
Twitter: [Clique aqui]
Deviantart: [Clique aqui]

[Tool]Google Web Fonts

Na postagem anterior eu expliquei o uso de uma grande nova ferramenta disponível na CSS3, mas existem outras maneiras de chamar uma fonte sem o visitante tê-la em seu sistema operacional. A outra maneira conhecida como Google Web Fonts, é uma maneira versátil e um tanto quanto interessante.

Vejamos, ambos são funcionais, mas imaginemos, você quer fazer o uso de uma fonte designada pelo designer, mas não a encontra na lista de fontes do Google? Como proceder? Sim, faça uso da maneira anterior, utilizada neste post. Deixando a parte teórica de lado, vamos partir para a parte prática.

Primeiramente, você deverá acessar o site do Google Web Fonts, você pode ter acesso ao mesmo, clicando aqui. Após o primeiro passo, prossiga escolhendo uma fonte na qual você tenha interesse em ser utilizada e clique em "Add to Collection"; note que uma nova barra será inicializada na parte inferior de seu navegador, procure pela opção de "Use".

Você será redirecionado para uma nova página, desça a mesma e procure pela opção na qual você pretende utilizar, @import, css ou por javascript, por início, estarei utilizando a com css; copiem o código e coloque o código do mesmo no mesmo local que você linka seus arquivos css.

Prosseguiremos para o seu arquivo css; chame sua fonte de maneira padrão, ou seja, utilizando o comando font-family, conforme o exemplo abaixo.:

h1 {
 font-family: font-family: 'Skranji', cursive;
}

Mal feito, feito! Apenas chame o seu h1 e pronto, sua fonte será vista por seu visitante sem ao menos tê-la instalada.

Terminando, você chamará a fonte por meio de um link do Google e seu visitante poderá visualizar a fonte normalmente.

Download do código-fonte: Upado no Media Fire
Scan para segurança: Utilizado Virus Total

[CSS]@font-face, novo mecanismo muito útil.

Após um longo tempo sem postar nenhum tipo de conteúdo para os vocês, leitores, trago-lhes uma novidade muito interessante de se fazer uso. Ela foi implementada na última versão de nosso famoso e bom CSS, o CSS3.

Sua função é simples e prática, você quer fazer uso de uma fonte customizada? Sim, aquelas fontes que precisam ser instaladas no sistema operacional de seu visitante, mas não sabe se ele há tem? Então, essa é a função dela, você a chama por meio de um arquivo normal, por tanto, não se esqueça de envia-lo ao seu servidor.

Eu já fiz isso do mesmo, no meu antigo web site, totalmente funcional, por tanto, é indispensável o uso desta nova ferramenta. Mas chega de papo e vamos ao código?

 @font-face { // Aqui chamamos o início da fonte, indicamos que estaremos usando a ferramenta de font-face.
   font-family: 'scarface';  // Aqui indicamos o nome da fonte que você está fazendo uso, no caso desta, é a fonte scarface.
   src: url('scarface-webfont.eot'); // Aqui indicamos que se caso a fonte já esteja instalada no sistema operacional de seu visitante, ele a carregará, ao invés de carregar a que você colocou em seu servidor  
   src: local('scarface'), url('scarface-webfont.ttf') format('truetype'); // Aqui indicamos para que caso o seu visitante não tenha a fonte instalada em seu sistema operacional, a fonte seja carregada de seu servidor até a tela de seu visitante, assim, ele poderá visualiza-la normalmente  
 }  

Download do código-fonte: Upado no Media Fire
Scan para segurança: Utilizado Virus Total

Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!

[Open-source]Codigo-fonte de meu ultimo projeto

Acabo de produzir um breve projeto utilizando a função do próprio PHP (sigla de Hypertext Preprocessor), a função de capturar o IP (Internet Protocol) do visitante e coloca em uma determinada variável. Eu utilizei poucas coisas em questão do PHP, foram mais utilizados o HTML (sigla de Hypertext Mark-up Language) e CSS (sigla de Cascating Style Sheet).


Em questão da funcionalidade do projeto, eu posso garantir que ele está funcionando no máximo de percentual que eu tive quando tive a ideia básica de cria-lo; mas, é claro, alguns pontos ainda podem e devem ser atualizados, eventualmente se tornando mais complexo e interativo com seu visitante.


Certo, vamos dar início a explicação do código - baixe o código no final do post - de qualquer maneira, com o projeto já baixado, abra todos os arquivos (ambos, .css e .php); note que na seção de variáveis (linha de número dez e onze) temos duas funções básicas do php, uma captura o endereço de ip e a outra pega a data do sistema, são elas: $ip = $_SERVER["REMOTE_ADDR"]; em nosso caso, está função está setada para pegar o valor de endereço de ip de seu visitante e coloca-lo na variável ip e eventualmente exprimi-la browser de seu visitante (na linha vinte e seis); $data=date("d/m/Y"); em nosso caso, está função está setada para pegar a data do sistema (no caso, é o servidor que você usa, por exemplo, o meu servidor de hospedagem está localizada lá nos Estados Unidos, ou seja, ele vai pegar a data desse mesmo local) e atribui-la a variável data.


Note que temos um texto meio sem nexo na div content, o motivo de eu estar utilizando este texto, é porque eu ainda não terminei o texto a ser colocado (seria a descrição do protocolo ip) e eventualmente, apenas coloquei-o para expressar como deveria parecer seu layout. Em questão da programação do código-fonte, posso lhe garantir que há maneiras mais organizadas de se produzi-lo e também, podendo correr erros em tags, divs e outras coisas no arquivo de cascata, ou seja, sinta-se livre para aperfeiçoa-lo e atualiza-lo.


Em questão dos créditos que estão na div footer, seria apenas para testar esse tipo de informação nos direitos autorais de meu website, pois irei atualiza-lo... Mas, não será necessário o uso dessa div, sendo assim, você pode alterar os direitos autorais para SUA autoria se preferir; mas é claro, eu agradeceria se meu nome estivesse incluso nele e se você pudesse mantê-lo em seu projeto (a menos que você tenha-o re-feito completamente), isso vem de cada um.


Download do código-fonte: Upado no Media Fire
Scan para sua segurança: Utilizado Virus Total


CRÉDITOS AO MEU AMIGO, PAULO P. SERGIO PELA PRODUÇÃO DE LOGO E FAVICON.ICO, SENDO ASSIM, VOCÊS PODEM E DEVEM ALTERAR O LOGOTIPO E FAVICON.ICO!


Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!

[Open-source]Algoritmo de medias com o metodo POST

Acabo de produzir o algoritmo como ideia que vocês poderiam fazer com o primeiro algoritmo de médias deixado por mim: basicamente, de uma maneira mais interativa, o uso escrevia suas notas e o próprio servidor fazia a operação lógica e exprimia o resultado, foi isso que eu fiz. Utilizando o método POST aprendido posteriormente, eu criei um simples "formulário" com duas notas e a página de recebimento desses valores.


Na página de recebimento, existem quatro variáveis: as duas primeiras indicam que os valores digitados pelo visitante irão ser "encaixados" nas variáveis $nota_A e $nota_B; a terceira variável faz a operação lógica de somar as duas primeiras variáveis e a dividir por dois, pois são duas variáveis (notas); a quarta variável exprime o resultado da soma das notas em sua página.


Note que também foi utilizado um código semelhante ao primeiro postado, utilizando o if e elseif; resumidamente, se a média for maior que dez, exprime a mensagem "Por favor, escreva os valores de sua nota em até dez unidades, sem mais!"; caso se a média for igual a cinco e menor que sete, exprime a mensagem "Você está de recuperação! Revise os conteúdos apresentados por seu professor, sem mais!"; caso a média for superior a sete, exprime a mensagem "Parabéns, você teve sua nota satisfatória, ou seja, acima da média, que foi setada como sete, sem mais!"


Neste algoritmo utilizamos o que aprendemos nos posts anteriores, método post mesclado com if e elseif; resumidamente, a página que recebe os valores é a infoget.php e a que envia os valores por meio do método post, é a get.php, simples e fácil!


Download do algoritmo: Upado no Media Fire
Scan para sua segurança: Utilizado o Virus Total


Você também pode visualizar o resultado do algoritmo clicando aqui

Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!

[Tool]Google Analytics

Hoje venho para compartilhar uma ferramenta muito importante e útil para ter um "controle" de seu website; sabendo qual sistema operacional seus visitantes usam; qual navegador seus visitantes usam; qual o tempo eles ficam conectados simultaneamente; quantos visitantes estão online no momento; as páginas que são mais procuradas; e até mesmo um gráfico representativo, indicando quando as "ações" (número de visitantes) caí em seu projeto.


Eu já a tornei a utilizar faz algum tempo (em torno de um ou dois meses atrás) quando fui informado sobre a ferramenta por meio de meu professor. E por sem algo bem útil e de fácil instalação, decidi utiliza-la em todos os meus projetos que tiveram como fim, receber algum retorno em troca (como este blog, eu estou utilizando o Analytics nele, se vocês notarem, apertar Ctrl + U em nossa página principal e perceberá que o código foi colocado nas tags de cabeçalho).


Sendo assim, vamos aprender como instalar essa grande e inusitada ferramenta: primeiramente, acesse este link; agora com o index carregado, vá até a caixa de texto (no topo) escrito "Acesse ao Google Analytics"; você deverá entrar com sua conta do google; agora que você entrou em sua conta, vá na caixa de texto escrito "Sign Up"; complete as informações conforme o exemplo a baixo:


Account name: XenoProductions
Website URL: http://xenoproductionsofc.blogspot.com
Timezone: Brazil - (GMT -3:00 São Paulo)
Your country...: Brazil


Clique em "Criar conta" e pronto, você terminou essa parte; você foi direcionado para uma nova página, apenas desça-a e note que foi deixado um código em javascript "var _gaq = _gaq || [];..." copie esse código e cole-o antes do fechamento das tags head de seu site.


Mal feito, feito!


Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!

[Open-Source]Metodo POST

Acabo de produzir um código em php (sigla de Hypertext Preprocessor), utilizando o método de envio de informações POST. Em minha humilde opinião, é a maneira mais segura e lógica de se usar (o método GET deixa as informações expostas na URL do browser, eu vejo isso como uma desvantagem). O código feito por mim é um breve formulário em HTML, utilizando os códigos básicos e necessários, apenas com alguns campos (nome, empresa e telefone, sinta-se livre para adicionar novos, note que eu não irei explicar como adicionar novos campos). 

O método POST é e deve ser muito utilizado em formulários de cadastros, no qual pode passar informações de uma página a outra, interagindo de uma maneira mais efetiva com o usuário. Eu acredito que se eu fosse fazer um site com o meu conhecimento atual e fosse necessário a escolha entre o método GET e POST, eu teria como resposta rápido e fácil: POST. Eu vejo uma simples desvantagem no uso de GET, os dados serão transmitidos por meio de URL, ou seja, é muito fácil de seu usuário ser hackeado por esse meio.

Com o meu conhecimento atual, eu não posso dizer que não é possível o seu usuário ser hackeado com o método POST (sendo que: nada na web é totalmente protegido!). De qualquer maneira, vamos começar?

Primeiramente, faça o download dos arquivos compactados no final do post. Abra o arquivo com o nome denominado como "get.php" em seu Dream Weaver ou bloco de notas. Sinta-se livre para alterar o título do documento, que foi setado como "Introdução ao metodo POST, faça bom uso!" entre as tags de título. 

Note que o primeiro arquivo está em HTML puro, no qual, o usuário adiciona suas informações, como: nome, sua empresa e seu telefone. Note também, que eu denominei a página que o arquivo deve mandar essas informações no form, a string <form action="infoget.php" method="post"> é aonde é denominado o este arquivo, especificamente, na função, action. 

Se você percebeu, eu deixei dois arquivos, um com é o que você está trabalhando e o outro é "infoget.php", este é o arquivo que recebe as informações, e que você viu, ele está setado na função action. Agora, abra o arquivo infoget.php e note que este arquivo está em PHP puro.

$nome = $_POST['nome']; esta string faz com que o valor digitado na primeira página seja setado na variável nome, e assim fazem o mesmo com as outras duas variáveis.

Note que, eu adicionei um texto básico mostrando que os valores foram adquiridos e exprimidos de maneira correta nas variáveis. Parabéns, você conseguiu!

Você pode adicionar mais informações, campos com o seu conhecimento em HTML (caso possuir, é claro). Você também pode adicionar novas formatações de textos, básicas do HTML, ou se preferir, mescle com CSS.


Download do código:  Upado no Media Fire
Scan para sua segurança: Utilizado o Virus Total


Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!

[Open-Source]Algoritmo de medias em PHP

Acabo de produzir um algoritmo na linguagem de programação PHP (sigla de 
Hypertext Preprocessor), no qual ele calcula a soma de três ou mais notas, definidas pelo usuário (você) e eventualmente as divide, fazendo um esquema parecido com o da média de notas escolares. O algoritmo ainda não é muito complexo, você pode utiliza-lo para calcular suas médias escolares (apesar de eu não achar a maneira mais plausível, pois você tomaria um bom tempo até ajeitar o código conforme suas notas e necessidades), caso você já tenha conhecimento em programação, poderia acrescentar mais algumas funções e deixar isso mais complexo, talvez, deixando-o de uma maneira mais interativa, fazendo um "formulário", aonde você inseriria o valor de suas notas, e o próprio algoritmo faria essa conta pro você (essa é minha ideia no momento, e deixar disponível o código para uso público e também coloca-lo em meu site oficial! Ainda não tenho conhecimento o suficiente em questão disso, mas acredito que em poucos meses vocês verão o sistema disponível aqui no blog e no site).


Caso você seja um aprendiz/iniciante em programação, assim como eu, estarei explicando detalhadamente como alterar a sintaxe básica do código deixado por mim (no final do post), sendo que, eu não explicarei como deixar o código mais complexo e nem como coloca-lo em um domínio, apenas explicarei o que você deve fazer para alterar os valores das notas e adicionar novas variáveis.


Primeiramente, você deverá baixar o código (deixado por mim no final do post, como já dito anteriormente) e abri-lo em seu DreamWeaver, bloco de notas ou outro qualquer meio de editar seus códigos. Sinta-se livre para alterar o título do documento, que está como o padrão, deixado por mim: "Aprendendo um algoritmo de média de notas, faça bom uso!", entre as tags de título. 


Note que existem três variáveis alojadas no topo do algoritmo, caso você queira alterar o nome de uma ou de todas as variáveis, lembre-se de fazer o mesmo no decorrer do código. Vamos supor que você queira alterar o valor da primeira variável, que está setada com um valor alojado de dez unidades, ou seja, um valor inteiro, apenas troque esse valor para o valor desejado.


Supondo que você queira adicionar mais variáveis (notas) ao algoritmo, apenas coloque em uma nova linha (no campo de variáveis, no topo do código) com o texto: $nota_D = 10;
Agora com a nova variável e novo valor adicionado, teremos de editar a última variável, a responsável por fazer a operação lógica de somar e dividir todas as variáveis (notas), e exprimir o resultado, caso necessário. Note que temos a seguinte operação lógica $resultado = ($nota_A + $nota_B + $nota_C)/3; que também pode ser definida como 10 + 10 + 10, segundo os valores padrões do algoritmo. Basta você adicionar mais um símbolo representando a soma e o nome da quarta variável, adicionada por você e também aumentar uma unidade na parte de divisão da operação. Note que teremos a seguinte operação lógica $resultado = ($nota_A + $nota_B + $nota_C + $nota_D)/4;


Você pode adicionar mais formatações de textos, próprias básicas do HTML, ou se preferir, mescle com CSS.


Download do algoritmo: Upado no Media Fire
Scan para sua segurança: Utilizado Virus Total

Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!