As mensagens de alerta do tema possuiam a seguinte marcação:

<p class="alert"><span class="success"></span><span class="success_text">Success! Your item has successfully been added.</span></p>

Para produzir um resultado como este:

Até aí, visualmente, nada de demais. Mas olhando a marcação, existem algumas tags desnecessárias ali. O que é aquele “span” vazio com a classe “success” e por que o texto está dentro de um outro “span”? Pra responder a estas perguntinhas, basta uma olhadinha rápida nos estilos destes elementos:

p.alert {
	width: 652px;
	height: 39px;
	background: url("images/alert_bg.png") no-repeat;
}

.success {
	width: 24px;
	height: 24px;
	padding: 10px 0px 0px 15px;
	margin: 6px 0px 0px 15px;
	background: url("images/success.png") no-repeat;
	float: left;
}

.success_text {
	margin: 11px 0px 0px 5px;
	float: left;
	color: #73ae0b;
}

O resultado é bonito? Sim! Mas a lambança também é bem bonita! Como você pode ver o ícone que indica sucesso ou erro esta contido dentro do “span” vazio, e possui um float. Já o texto está num outro “span” que possui um outro float para ficar ao lado do ícone! Que bangunça, isso é realmente necessário? Eu creio que não!

Utilizar uma marcação destas é péssima pois não oferece nenhuma flexibilidade. A altura e a largura dos elementos estão definidas e qualquer texto que extrapole estas definições não ficará bem no elemento. Sentindo o cheiro de problema no ar, resolvi tentar consertar esta marcação e os estilos. Veja como ficou o html depois do tapinha:

<p class="alert success">Success! Your item has successfully been added.</p>

Uh! Bem mais simples não? Olha o resultado visual disso:

E como ficou o css? Dá só uma olhada aí:

p.alert {
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#EEEEEE;
	padding: 10px 10px 10px 40px;
}

.success {
	background: url('../../img/adm/success.png') no-repeat 8px;
	color: #73ae0b;
}

O que foi feito? Primeiro eu retirei as limitações de tamanho do elemento. Assim eles podem expandir e se reduzir de acordo com o conteúdo do elemento. Depois removi a imagem de background que dava as bordas arredondadas ao elemento. Existem muitas maneiras de se conseguir bordas arredondadas sem imagens no seu layout, mas a maioria é com javascript. A galera do blog Perishable Press criou um artigo recentemente mostrando como é possível conseguir bordas arredondadas apenas com css! E foi isso que eu fiz. Você pode dizer “Ah, mas isso não é suportado em todos os browsers, apenas nos mais recentes”, daí eu te respondo com este link AQUI! O importante é ter consciência das formas que este elemento vai tomar em browsers que não suportam estes comandos ainda.

Coloquei como cor de fundo a cor da imagem e defini alguns paddings. Depois ficou fácil, foi só colocar a imagem de background na classe “success” e posicioná-la a 8 pixels das bordas do elemento, definir uma cor para a fonte e pronto! Não ficou tudo mais lindo e flexivel e sem tags desnecessárias?

Com um pouco mais de raciocínio, a gente consegue fazer coisas muito boas com css, é só experimentar!

O próximo desafio será utilizar a técnica de “sliding doors” para os botões de submit, que também possuem um background fixo! Quando eu fizer isto, posto aqui como foi que fiz

Esta deve ser a quarta ou quinta vez que tento fazer o tal do sono polifásico. Sempre achei a idéia de ter mais horas no dia facinante, mas nunca tive a oportunidade (e a coragem também) de realmente colocar esse esquema em prática.

E uóterél é sono polifásico

Eu não vou explicar muito mas, basicamente, você espalha suas horas de sono pelo dia, dormindo mais mas ficando igualmente descansado após um período muito chato de adaptação. Você pode ler mais sobre isso no Wikipedia.

Como os primeiros dias são muito chatos e cansativos, escrever aqui talvez me ajude a manter o ritmo e não desistir tão cedo.

E como foi esse primeiro dia?

Comecei meu experimento ontem, fazendo minha primeira soneca às 15h. Eu estou tentando fazer o esquema de 6 sonecas de 30-40 min. a cada 4 horas (também chamado de überman ou qualquer coisa assim), ou seja, vou pra cama às 7h., 11h., 15h., 19h., 23h., 3h. e 7h. novamente. Aparentemente este horário parece se encaixar bem nos meus afazeres. No início, durante o dia foi tudo tranquilo. A coisa começa a pegar mesmo quando entra a madrugada. Primeiro porque eu fiquei muito tempo trabalhando [e a madrugada foi muito produtiva!] o que fez mal pras minhas costas. Após a soneca das 7h. eu fiquei um bagaço. Não tinha como me concentrar em nada que os olhos já pesavam, por isso optei por fazer algum trabalho mais corporal. Dei uma limpada e arrumada no meu armário, mas se eu quiser me manter acordado, preciso arranjar alguma coisa pra fazer neste horário amanhã com urgência. Alguma sugestão? Esse horário eu escolhi nem encostar no computador e, estranhamente, é o período de tempo que demora mais pra passar.

Neste momento meus olhos ardem um pouco. Não diria que é sono, mas é um cansaso grande nos olhos. Não vejo a hora de chegar 15h. e descansar um pouco. Dizem que a primeira semana é horrivel, mas que com o passar do tempo tudo vai se normalizando. Minha grande duvida é saber se realmente o sofrimento vale a pena!

Outra coisa curiosa é que nas primeiras sonecas eu mal dormi. Acho que era porque não estava cansado o suficiente pra pegar no sono em questão de 5-10 min. Depois das 3h. o sono veio mais rápido, mas em compensação, acordar também se tornou muito dificil. Uma coisa que me ajudou um pouco a cair no sono foi ouvir este arquivo de audio. Um barulhinho de fundo que aumenta de volume e se transforma numa música quando se completam 30 minutos de sono. Nesta página existem outros arquivos pra download também.

Isso parece interessante, onde eu posso aprender mais?

Bom… Se você quiser se informar mais, eu sugiro entrar no grupo do google sobre este assunto. É em inglês, mas é muito legal e as pessoas ajudam bastante, além de contar uma lista muito boa de sites falando mais a respeito dessa técnica e dicas preciosas.

Se você ficou curioso, espere eu me ferrar pra ver se realmente vale a pena Seria legal conhecer outras pessoas que praticam o sono polifásico! Vou ficando por aqui. Abraços!

Demorei mas não esqueci de fazer as video aulas não. Depois de algum tempinho estou de volta com mais uma video aula pra vocês aí.

Hoje a aula é sobre os tipos de dados booleanos e null. Pra entender melhor o que são essas coisas esquisitas, assista o vídeo, não é nenhum bicho de sete cabeças!

Queria agradecer aos comentários que tenho recebido. É sempre bom ter um estímulo pra continuar! As sugestões são ótimas! Valeu! E se você tiver alguma dúvida, não deixe de enviar aí nos comentários que eu tento responder ok?

Agora, vamos a aula:

Valeu povo! Até a próxima!

Aqui está o 4º video da série infitinita de vídeos do meu cursinho de PHP. Desta vez a gente continua falando de tipos de dados, aqui especificamente sobre Arrays. Hã? Arra what? Então vê o vídeo ae pra tirar as dúvidas.

Não sei se eu consegui me expressar direito no vídeo, mas tá valendo. Espero que alguém aprenda alguma coisa com isso daqui:)

P.S.: como eu digo no vídeo, primeiro estamos dando uma olhada geral em todos os tipos de dados, pra que eles servem e como construí-los. Depois nós vamos dar uma boa olhada no que podemos fazer com eles ok? Não se preocupem! Boa aula!

Dúvidas, sugestões, críticas e etc… Comentários, please

Aqui vai o terceiro vídeo do nosso cursinho de PHP. Desta vez vamos dar prosseguimento ao estudo dos tipos de dados falando um pouco mais de dados numéricos. O vídeo de hoje é um pouco mais curto porque não quis colocar muita coisa num vídeo só [ia ficar muito grande].

Aguardem pelo próximo vídeo que será maior e com introdução ao tipo de dado array! Diversão pura! Enquanto isso, não deixem de ver este vídeo que é muito importante!

É isso aí galera! Não esqueçam de comentar [tem alguém por aqui?]! Abraços!

Nesta segunda parte a gente começa a falar um pouco sobre variáveis e strings, que é um tipo de dado que pode ser manipulado no PHP! Espero que gostem!

Não sei se eu fui muito rápido ou qualquer coisa assim, mas qualquer coisa, é só comentar galera! Não deixem de dizer as suas necessidades!

Clique aqui para baixar o Komodo Edit 5 direto!

E agora, veja o vídeo:

Valeu galera! Até a próxima!

O espirito do bom samaritano caiu sobre mim e resolvi fazer uma série de screencasts ensinando como programar em PHP a partir do básico! Aqui, nesse primeiro vídeo, a gente fala sobre como preparar o seu computador pra começar a desenvolver com PHP.

Aí vai o link do aplicativo que utilizaremos na video aula: VertrigoServ.

Eu não sou o melhor professor do mundo nem sou tão ultra mega bom em PHP. Talvez por isso eu saiba um pouco da dificildade de se aprender uma linguagem de programação quando você nunca teve contato com nada disso. Essa é uma tentativa de ajudar pessoas que tem o desejo de aprender mas acham as apostilas e todo aquele linguajar estranho muito difíceis.

Espero que eu realmente consiga alcançar meu objetivo e se eu não estiver sendo claro o suficiente, pode escrever, perguntar. Se eu não souber, vou me esforçar pra aprender e te falar, ok?

Agora, veja o vídeo aí:

No Videolog, mais rápido:

Mais uma vez quero lembrar que qualquer duvida, critica ou sugestão, é só falar heim galera. Até com relação ao video, se a qualidade ta legal, o som ta bacana, pode falar que eu tento melhorar no próximo Um abraço pra todos e aproveitem!

FalaFreela vai ao ar toda segunda-feira (eu acho) e conta com a participação do Mauro Amaral (aqui e aqui) Humberto Oliveira (aqui) e Carol Vigna-Maru (aqui e aqui). Se eu fosse você, assinava o feed e ouvia toda semana

A exatamente um mês atras eu resolvi sair do meu emprego para me dedicar à vinda de freelancer e empreendedor (cof, cof) e a criação deste layout é um dos passos para que essa escolha possa dar certo! Eu gostei bastante dele. Eu achei que ficou bonito e apresenta alguns conceitos bem legais a respeito das possibilidades do desenvolvimento de websites na internet de hoje. Vou colocar aqui alguns pontos que eu acho legais de serem apontados:

• Antes de mais nada, queria dizer que pra fazer este layout eu abandonei por completo o IE6. É uma pratica recomendável? Particularmente, eu acho que não. Mas se você quiser fazer coisas realmente legais pra web hoje em dia, sem ficar careca, essa é a melhor escolha que você pode fazer. O IE6 atrasa demais a utilização de coisas super simples e super legais, como a utilização de imagens com transparência (coisa que eu usei e abusei aqui no Cor Cinza), dentre outras como suporte a seletores especiais no css e assim por diante.
• Geralmente, pra se utilizar custom fonts no seu documento de forma dinâmica e não obstrutiva, as pessoas usam o sIFR, que é ótimo. Pro Cor Cinza eu resolvi experimentar o Facelift. Uma alternativa ao sIFR que não utiliza flash e usa um pouco de código server-side com PHP. Reconheço que o sIFR é mais rápido e tudo mais, mas agora estou altamente inclinado a tentar isso daqui!
• Os ícones todos dos sites sociais são de autoria da galera do Quake 9 Design, o pacote, chamado Aquaticus Social Icons pode ser baixado aqui!
• Eu coloquei algumas coisas poquinhas em javascript e usei o meu inseparável framework jQuery
• Particularmente, minha parte favorita do site é a área de comentários… Olha como ficou legal aqui.
• [jabá mode]O sistema do portfolio não é do Wordpress, isso porque eu criei uma ferramenta bem legal que me deixa criar um portfolio de forma muito mais simples, por isso o portfolio está por conta do designUp[/jabá mode]
• E é isso aí…

Acho que é a primeira vez que faço um layout para Wordpress mais complicado assim. E nossa… eu sei que existem templates muito, mas muito mais complexos. O que eu fiz não foi nada se comparado a alguns templates irados que aparecem aí e que, sozinhos, já são verdadeiras máquinas. Mas este é um pequeno passo no aprendizado desta ferramenta maravilhosa que, tenho certeza, pode me render ótimos frutos. Então podem esperar por algumas diquinhas de Wordpress enquanto eu aprendo por aqui.

Acho que é isso galera! Adoraria saber a opinião de vocês sobre o novo design e se acharem algum problema por aí, por favor, me avisem Abraço para todos! Tchau!

<img src="thumb.php?src=imagem.jpg&amp;w=50" alt="" />

O código esta todo comentado e espero que vocês gostem, comentem, sugiram e etc!

[edit]
Galera, não consegui postar o código aqui no blog… Não sei porque… Então aí vai o link pro código se vocês quiserem: AQUI! Aguardo o comentário de vocês Abraços!
[/edit]