Top 3 - Mal uso do Photoshop em Blogs

Expressões Regulares

A intenção deste post é organizar num lugar as principais e mais simples características das expressões regulares. Desta forma serve tanto para quem está começando para quem deseja consultar.

Então, vamos lá!

O que são expressões regulares?

São conjutos de caracteres e símbolos que, quando agrupados corretamente, formam uma expressão.

"É como o brinquedo LEGO, várias pecinhas diferentes, cada uma com sua característica, que juntas compõem estruturas completas e podem ser arranjadas com infinitas combinações diferentes." guia-er

Para que servem?

Expressões regulares ajudam a você definir padrões mais específicos que te ajudarão a buscar e/ou alterar em um contexto mais abrangente.

Exemplo

[rpg]ato combinará com: gato, rato e pato.

Mas expressões vão muito além disto, no dia-a-dia seu uso é muito prática para manipular diversos dados como: data/hora, endereço de email, telefones, cpf, conteudos de , praticamente qualquer coisa!

Mãos a massa!

Metacaracteres

Representantes		Definição		Exemplos
.	ponto	Um caractere qualquer	Casa com qualquer coisa, inclusive com si próprio	n.o = não, nao, ... 13.15 = 13:15, 13 15, 13.15
[]	lista	[...] - Lista de caracteres permitidos	Casa quem quem conhece. Dentro da lista, todo mundo é "normal". - significa intervalo	[0123456789] = [0-9] n[ãa]o = não, nao a-z, A-Z pega "[\]^_" mas não pega os caracteres acentuados "aéóõç".
[^]	lista negada	[^...] - Lista de caracteres proibidos	Segue todas as regras de uma lista "comum" ^ não deve ser o primeiro item da lista. A lista negava deve casar algo	[^0-9] casa tudo que não for número, inclusive espaços em branco, símbolos, letras, qualquer coisa.
Quantificadores		Indicam o número de repetições permitidas para a entidade anterior		exemplos
?	opcional	zero ou um	Torna o caracter anterior opcional é util para procurar palavras no singular e pluar	carros? carro, carros
*	asterisco	zero, um ou mais	A entidade anterior pode aparecer em qualquer quantidade.	6*0 = 0, 60, 660, 6660, ..., 66666666666666660, ...
+	mais	um ou mais	Funcionamento idêntico ao *, a única diferença é que o + não é opcional. A entidade anterior tem que casar pelo menos uma vez.	6+0 = 60, 660, ..., 666666666660, ... bi+p = bip, biip, biiip, biiiip, ...
{n,m}	chaves	de n até m	Solução controlada para especificar exatamente quantas repetições se deseja da entidade anterior Você pode especificar um úmero exato, um mínimo, um máximo ou uma faixa numérica.	{1,5} = de 1 a 5 {5,} = pelo menos 5 {3} = exatamente 3
Âncoras		Caracteres que marcam uma posição específica na linha		Exemplos
^	circunflexo	Marca início de uma linha. ^Só tem esta função no começo da linha.		^[0-9] = O primeiro item da linha deve ser um número
$	cifrão	fim da linha	^$ Linha vazia ^.{10,20}$ = Linha que tenha entre 10 e 20 caracteres
\b	borda	início ou fim de uma palavra	O conceito "palavra" engloba letras, número e sublinhado	dia = dia, diafragma, melodia, bom-dia \bdia = dia, diafragma, bom-dia dia\b = dia, melodia, bom-dia \bdia\b = dia, bom-dia
Outros		Exemplos
\	escape	torna literal o caractere literal	\* = [*] = asterisco literal \. = . \\ = \
|	ou	um ou outro	.[php|html]
()	grupo	delimitador de um grupo	(ha!)+ ha!, ha!ha!, ha!ha!ha!, ... (super|hiper)mercado
\1	retrovisor	\1...\9 - Texto casado nos grupos 1...9	(quero-\1) quero-quero ([A-Za-z]+)-\1 (lenta)(mente) é \2 \1 lentamente é mente lenta

Todo conteúdo acima foi inspirado no livro e site abaixo. Quem se interessar corra atrás, compre o livre, porque vale muito a pena!
http://guia-er.sourceforge.net/

Usando jQuery para procurar no HTML

O que vamos fazer?

Como?

A estrutura HTML do exemplo

<div id="search">
            <input type="text" name="q" />
</div>

        <ul id="content">
            <li>Donec posuere lobortis urna, sit amet adipiscing purus blandit vel.</li>
            <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi.</li>
            <li>Praesent dapibus, neque id cursus faucibus. </li>
            <li>Phasellus ultrices nulla quis nibh. Quisque a lectus.</li>
            <li>Duis tempus turpis in neque sagittis at adipiscing. Nulla congue turpis ac turpis aliquet placerat.</li>
            <li>Pellentesque fermentum dolor.</li>
        </ul>

JS

$(function(){

        /**
        * Fix para desabilitar o case-sensitive
        **/
        $.expr[':'].icontains = function(obj, index, meta, stack){
            return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
        };

        $("div#search input[type=text]").keydown(function(e){
            var $input = $(this);
            if($input.val() != ''){
                $('ul#content li').hide();
                $('ul#content li:icontains('+$input.val()+')').show();
            }
        });
    });

CSS Opcional

body{
                margin:0;
            }

            div#search{
                background:#ddd;
                border-bottom:1px solid #bbb;
                padding:3px 10px;
            }

            div#search input[type=text]{
                border:1px solid #aaa;
                width:100%;
                font-size:16px;
            }

            ul#content{
                margin:0;
                padding:0;
                list-style:none;
            }

            ul#content li{
                background:#E0EDFF;
                border-bottom:1px solid #BACCE6;
                padding:3px 5px;
            }

Exemplo de uso

Um bom lugar parar usar esta técnica é numa lista de contatos de um chat, por exemplo. Você irá procurar automaticamente sem precisar atualizar ou enviar muitas requisições ajax. Apenas pergunte ao seu HTML! (:

Atalhos de Teclado com jQuery

O código Básico:

$(function(){
  $('body').keydown(function(e){
      e.preventDefault();
      if(e.keyCode==13){ // enter
        // ação
      }
  });
});

OBS: Você pode usar para um elemento específico ao invés do 'body', um input, por exemplo.

No final do post você vai ver como fazer o mesmo para atalhos "CTRL+TECLA".

Mas o que é um keyCode? E onde os encontro?

Aqui:

Tecla (key)	Código (Key Code)
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
;	186
=	187
,	188
-	189
.	190
/	191
grave accent	192
open bracket	219
back slash	220
close braket	221
'	222

Atalhos "CTRL + Key"

var isCtrl = false;
$(document).keyup(function (e) {
if(e.which == 17)
isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
 // executa código para CTRL+S return false;
 } 
});

MySql - Updating Duplicated Entries Made Easy

Our example table

CREATE  TABLE IF NOT EXISTS `mydb`.`Counter` (
  `idCounter` INT NOT NULL AUTO_INCREMENT ,
  `name` VARCHAR(30) NULL ,
  `hits` INT NULL ,
  PRIMARY KEY (`idCounter`)
);

Our SQL code

INSERT INTO Counter (idCounter,name, hits) VALUES (1,'myBlog',1) 
ON DUPLICATE KEY UPDATE hits=hits+1

As simple as that

CSS3 Cross-Browser

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3+, Chrome */
          border-radius: 12px; /* Opera 10.5, IE 9 */
}

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}

.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}

.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */
}

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */
               zoom: 1;
}
  
.box_transition {
     -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
} 

@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6+ */
  src: local('☺'), 
        url('myfont.woff') format('woff'),  /* FF3.6 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
}

Source: css3please.com/

Using label as place holder for input

This is what we will create

So.. now that you see it, let's do it!

CSS

div.form{
    margin:4px;
}

div.form div.simple{
    margin:15px 0px;
}

div.form div.simple input{
    background:transparent;
    min-width:400px;
    padding:7px;
    font-size:15px;
    border:1px solid #aaa;
}

div.form label{
    color:#aaa;
    position:absolute;
    margin-left:5px;
}

Html structure

<div class="form">
    <form action="" method="post">
        <div class="simple">
            <label for="nome">Nome</label>
            <input type="text" name="nome" value="" />
        </div>

        <div class="simple">
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>

        <div class="action">
            <input type="submit" value="Send" />
        </div>
    </form>
</div>

JS for hidding the label after user inserts a value

$('form input').focus(function(){
            $(this).parent().find('label').hide();
        }).blur(function(){
            if($(this).val()==''){
                $(this).parent().find('label').show();
            }
});

And there you go! As simple as that!

Atualização Automática de Conteúdo com jQuery

jQuery é uma das ferramentas mais poderosas hoje em dia para um desenvolvedor web.
É tão bom e ao mesmo tempo tão simples! Perfeito para nós :D

Então vamos mostrar para você como usar jQuery para criar um simple e eficiente autalizador automático de conteúdo.

Html:

<html>
    <head>
        <title>Conteúdo Automático</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="receptor"></div>
    </body>
</html>

Javascript:

<script type="text/javascript">
    $(function(){
        var tempoAtualizacao = 0;
        
        function atualiza(){
            $.get('refresh.php',{},function(resposta){
                $('#receptor').html(resposta);
                tempoAtualizacao = setTimeout(atualiza,15000); // we set the loop
            });
        }

        function cancelaAtualiza(){
            clearTimeout(tempoAtualizacao);
        }
        
        atualiza(); // chamamos pela primeira vez a atualização
    });
</script>

Agora vamos entender.
$.get() é uma função do jQuery que envia a requisição GET. $.get tem 3 parâmetros, o primeiro é a URL, o segundo são parâmetros a serem passados (se necessário) e o terceiro é a resposta.

Algo assim:

$.get(url, parametros,function(resposta){...});

A url deve redirecionar para seu arquivo .php (.html ou qualquer outra linguagem) que vai administrar a requisição, retornando a resposta.

A função setTimeout cria uma espécie de loop, chamando novamente a nossa função a cada 15000 ms.

Para cancelar a atualização automática basta simplesmente chamar a função cancelaAtualiza();

OBS: Você pode usar $.get, $.post ou até mesmo $.load.

Classe Formatadora com Expressões Regulares

Aqui está outra classe muito útil para formatar qualquer tipo de dado, usando expressões regulares!

A classe consiste em duas partes, a primeira é uma variável chamada $formats onde nós guardamos as expressões regulares e uma função chamada format, onde executamos tudo.

class Formater{
  public static $formats=array(
    'date2sql' => array("'^([0-9]{2}).([0-9]{2}).([0-9]{4})'","$3-$2-$1"),
    'sql2date' => array("'^([0-9]{4}).([0-9]{2}).([0-9]{2})'","$3/$2/$1"),
  );

  public static function format($string,$type) {
        if (!isset(self::$formats[$type])) return $string;
        $find = self::$formats[$type][0];
        $replace = self::$formats[$type][1];

        return preg_replace($find,$replace,$string);
   }
}


// Mode of use - Como usar
$date1 = Formater::format('2010-08-01','sql2date'); // returns 01/08/2010
$date2 = Formatter::format('01/08/2010','date2sql'); // returns 2010-08-01

Você pode usar para o que precisar! Tudo que você precisa fazer é adicionar sua regex na var $formats e pronto!

Este é o tipo de classe que você precisará em todo o projeto que você faça!

Simple $_GET and $_POST request manager

This is a really simple but extremally useful class/function.
Esta é uma função muito simples porém extremamente útil.

class Request{
  public static function getParam($name,$default = null) {
        return isset($_GET[$name]) ? $_GET[$name] : (isset($_POST[$name]) ? $_POST[$name] : $default);
    }
}

//mode of use - como usar
$var = Request::getParam('name','defaultValue');

Limpando seu HTML

Vejo na internet nque as pessoas não sabem muito bem como organizar sua linguagem de programação dentro das tags HTML.

As pessoas estão usando:

$html = "

 
 " . $var . "

";
echo $html;
?>

ao invés de:

 
<?php echo $var;?>

Outra situação comum é:

<table>
<?php
foreach($var as $k=>$v){
 echo "<tr>";
 echo "<td>".$v."</td>";
 echo "</td>";
}
?>
</table>

E como lidar com ela:

<table>
<?php foreach($var as $k=>$v):?>
<tr>
  <td><?php echo $v;?></td>
</tr>
<?php endforeach;?>
</table>

Outra situação muito útil é quando usamos o if

if($a==$b){
 //lot of codes here
} else {
 // more code..
}

alternativa:

<?php if($a==$b):?>
 // code
<?php endif;?>


// or


<?php if($a==$b):?>
// codes
<?php else: ?>
// codes
<?php endif;?>

Há uma outra alternativa para o if que é MUITO útil:

$a = $b==$c ? true : false ;

As situações descritas acimas são bem simples mas muito importantes. Se seu código está limpo tudo fica mais fácil, e é isto que queremos, certo?

Dê uma chance! É muito bom tirar vantagens dessas sintaxes alternativas:

for: endfor;
foreach: endforeach;
while: endwhile;
switch: endswitch;
if: endif;

Hi! My name is..

Luiz Eduardo! I'm a web developer from Brazil and I'm starting this new project called Rint.
But wait.. what's Rint?

Rint is an attempt to let internet easier at first for web developers.

Face the facts, today is really hard to search and find good sources where you can get anything else but a full (including stuff you do not want) and complex codes and concepts. That's not cool, that's not productive. That's not what we want.

What I want to bring you here is the simpliest code and concept to let you really understand how coding works and how you may adjust it to your own project. As simple as that.

Well, I hope you enjoy this!
And as a brazilian I will publish a portuguese version of all my posts too, as bellow!

Thanks,



Luiz Eduardo! Sou desenvolvedor web do Brasil e estou começando este novo projeto chamado Rint
Mas o que é Rint?

Rint é uma tentativa de deixar a internet mais fácil, a princípio para os desenvolvedores.

Encare a realidade, hoje é muito difícil procurar e encontrar boas fontes onde você pode conseguir algo além de códigos e conceitos complexos e completos (incluindo coisas que você não quer/precisa). Isso não é bom, não é produtivo. Não é o que queremos.

O que eu quero trazer aqui para vocês são os conceitos e códigos mais simples para que você realmente entenda como as coisas funcionam e como você pode adaptá-los para seu próprio projeto. Simples assim.

Espero que vocês gostem!
Todos os meus posts estarão disponíveis também em inglês!

Valeu,