Rascunho é no papel e ponto final.

Rascunho

Caderno para anotações - Rascunho

Poxa muitas vez tive problemas com caras, as vezes novatos as vezes marmanjos barbudos e peludos(como diria meu padastro) dizer que sabe tudo de cabeça dai sempre falo: “é melhor anotar pra garantir, em uma empresa imprevistos acontecem”, dai o telefone toca e puft, já era, a criatura esquece, dai pra variar fico “tranquilin”.

Então é simples, você teve ou ta tendo alguma idéia brilhante que vai melhor seu código, design, ou seja lá o que for, faz o favor aos seus amigos/colegas de trabalho e a si próprio, ANOTA A BENDITA IDÉIA, principalmente pois algumas vezes nem  podemos nos desconcentrar do que estamos fazendo.

Eu foco em fazer os rascunhos no papel pois eu tenho uma parada na cabeça que nao lembro o nome que faz com que qualquer coisa que veja fica “salvo” por muito tempo, muito mesmo(nota ainda lembro até hoje o que uma coleguinha da 3ª seria escreveu pra mim antes de terminar o ano, “eu te amo”, muito mal escrito, mas tava afim dela que adorei, kkkk).

Alias para notas no desktop o windows 7 tem umas troços HORRIVEIS, eu sugiro que tanto quem usar Rwindows X quanto Vista, 7, e outros lixos que sou obrigado a usar também, use o Stickies ( http://www.baixaki.com.br/download/stickies.htm ) eu gosto muito dele, pra quem usa Linux, nem precisa de nada disso, já tem no gnome se você não usa o Gnome, boa sorte(rsrs), sem brigas sobre o assunto.

Resumindo, anote, seja no computador, no papel, anote em algum lugar, por isso sempre tenha, papel e caneta/lapis a sua disposição a idéia para o meu novo portfolio surgiu do nada.  Espero que façam-nos esse favor, a comunidade de trabalhadores Zen irá ter chance de crescer e se ‘reproduzir’.

abraços

vlw

Pôneis Malditos dos Programadores

Praticamentes, todos os programadores ou desenvolvedores web, já passaram ou irão passar por isso, eu já passei por isso VÁRIAS vezes, eu vi essa tirinha no vida de programador, onde ele associou o video promocional da Nissan com nosso dia a dia, fica ai a dica.

URL: http://vidadeprogramador.com.br/2011/08/01/poneis-malditos/

Pôneis Malditos

Pôneis Malditos dos programadores

Caso ainda não tenha visto o video promocional da Nissan veja abaixo:

 

abraços e até a próxima

Dica: WordPress exibindo varios conteudos numa pagina

Eu tenho usado o WordPress como um CMS e dai as vezes tenho páginas que carregando tantos conteudos diferentes que quando chega ao final de processar a página a variavel global $post ainda esta com um valor do começo, ou seja, embaralhando tudo, o pior é quando queremos saber qual é a pagina atual e já mudamos o valor trilhões de momentos na página/post/categoria, uma pequena solução é sempre que usar qualquer valor que altere uma variavel global faça o seguinte:

<?php

global $post; // chama a variavel global
$tmp_post = $post; // coloca o valor dela em uma outra ate voce terminar
query_post(…); // dai voce faz o que precisar
$post = $tmp_post; // depois volta com o valor padrao

?>

Claro que existem outras alternativas, mas em alguns momentos essa é ótima e ajuda pacas, espero que lhe ajude também.

abraços

Diferença entre ID e Class

CSS Code

CSS Code

Estou querendo fazer esse post tem tempo, porém sempre deixei passar, porém peguei o código de um cara aqui na agência que me torturou, sem falar do problema que isso ta me trazendo, sendo assim é de extrema importância que todos entendam a diferença entre ‘id’ e ‘class’.

Basicamente, ‘id’ (abreviação de indentificador), é algo que descreve o objeto de forma única, e a ‘class’ já é o contrário, podemos ter vários objetos com a mesma class.

Vejamos, se tivermos o seguinte em uma código html:

[sourcecode language=”html”]</code>
<html>

<body>
..
<div id="titulo">Sta Wars – O Império contra-ataca</div>

<div id="titulo">Como se fosse a primeira vez</div>

</body>
</html><code>[/sourcecode]

Esse código está errado, pois o gerenciador de script do navegador irá procurar por somente um objeto com o id ‘titulo’ tento 2 ou mais, qualquer css ou javascript não irá funcionar, sendo assim  a melhor alternativa é o class vejamos um exemplo usando o class:

[sourcecode language=”html”]</code>
<html>

<body>
..
<div>Guerreiro do futuro tenta ajudar matar o pai do pai do filho do neto de um grande compositor…</div>

<div>Anjo enviado por Deus para ajudar jovem a ler a bíblia e mudar o que …</div>

</body>
</html><code>[/sourcecode]

O código acima está correto quando um css ou script for executado ele irá atuar sobre todos os elementos class, pois o class pode se repetir inúmeras vezes no código, porém se você estiver usando um class que só aparece uma vez na página e nunca mais de 1 é aconselhavel usar o ‘id’, pois usando o class o gerenciador de script/objetos(ou DOM) do navegador irá perder tempo procurando uma ‘class’ no código o que é processamento desnecessário.

Conclusão

Quando você tiver uma div, span, ou qualquer outro elemento que não se repete você deve usar o ‘id’, porém se for um elemento que se repete, obrigatoriamente terá que usar o class.
Alias, Pelo amor que Deus tem por todos nós, nunca mais cometa esse erro, mesmo se você estiver fazendo algo que use alguma linguagem de programação, pensei bem no que esta fazendo, na dúvida, deixe como class, pois no máximo irá consumir um pouco mais de processamento, mas pelo menos irá funcionar.

Para maiores informações sobre a diferença você pode acessar:

http://www.w3schools.com/css/css_id_class.asp

No próximo post tentarei falar sobre a diferença do ‘span’ para a ‘div’, mas veremos.

Abraços

CSS Reset – O que é, qual melhor e por que usar?

CSS Reset - Pressione o Botão

CSS Reset - Pressione o Botão

A idéia de CSS Reset é show, que nada mais é que um arquivo CSS que é iniciado antes de todos os outros e define as propriedades padrões para cada elemento da página, pois como você já devem saber, fazer um código funcionar em todos os navegadores é um sacríficio único e torturante, é ai que entra o CSS Reset para tentar ajudar um pouco nesse processo.

Diferenças

Cada projeto tem uma proposta, as vezes é ser mais leve, as vezes mais bonito, as vezes ser mais funcional e por ai vai, então cada projeto você terá uma necessidade especial, o que estou querendo dizer é que existem vários modelos de CSS Reset prontos na internet(logo citarei alguns), porém pode não ser o melhor para você em determinado projeto, pois poderá lhe dá até mais trabalho.

Problemas

Utilizar a técnica de CSS Reset irá exigir alguns sacrificios, abaixo irei citar alguns que achei[1] quando lia sobre, no final desse artigo/post você irá encontrar referencias para cada citação minha aqui, mas então vejamos:

– Consumo de processamento, como você irá redefinir o elemento você estará fazendo processamento desnecessário;
– Consumo maior de banda, já que você terá que colocar mais alguns KBs no seu código;
– Como visto nos itens anteriores, irá acarretar em uma demora maior para carregar a página;

Você pode ver mais detalhes e ver algumas alternativas em http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ [Em Inglês]

Modelos de CSS Reset

Como já falei cada projeto irá exigir uma necessidade, pensando nisso, vários desenvolvedores, criaram seus próprios CSS Resets e disponibilizaram ao público e acredito que o mais usado é o do Eric Meyer[4], porém mesmo assim vou citar alguns que podem ser achados no blog do Pinceladas da Web[2].

Eric Meyer
A mesma que os templates padrões do WordPress usam, eu tenho usado e muitos outros usam também.

[css]
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
[/css]

Rudeworks
Técnica sugerida por Rudeworks:

[css]
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
font-size: 100%;
font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

[/css]

Regra Básica
Esse é praticamente padrão, porém deve ser o mais consome processamento, por ter que processar todos os elementos:

[css]
* {
padding: 0;
margin: 0;
border: 0;
}
[/css]

Ateneu Popular CSS Reset
Regra Sugerida pelo site Ateneu Popular

[css]
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table {    border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

[/css]

Veja mais técnicas em [Pinceladas da Web] 10 Técnicas para Reset CSS.

Conclusão

Gostaria muito de me alongar mais nesse assunto, porém também tenho que trabalhar, mas com isso podemos ver que existem técnicas que concerteza irão nos ajudar a desenvolver mais rápido e/ou melhor, porém temos que avaliar se é realmente vantajoso, pois pode ser prejudicial o uso em determinados projetos.

Outra coisas que tiramos de bom, pelo menos pra mim é que devemos conhecer muito bem os clientes poderão acessar, mas principalmente conhecer todos os browser e sistemas operacionais que possível, eu por exemplo nunca testei um site que já tenha feito no Safari(MacOS X), espero ter oportunidade um dia.

Novamente espero que esse post tenha lhe ajudado a ter uma visão mais ampla e melhor sobre CSS Reset e como melhorar seu desenvolvimento, até a próxima.

Abraços

Fontes:
[1] http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
[2] http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/
[3] http://developer.yahoo.com/yui/examples/reset/reset-simple.html
[4] http://meyerweb.com/eric/tools/css/reset/
[5] http://edsonjunior.com/por-que-usar-css-reset/