Menu horizontal com CSS

Um dos pontos importantes de nosso site de pré-lançamento é o menu horizontal.

Fizemos tal menu utilizando somente CSS. Gostaríamos de dar um simples exemplo de como fazer um menu horizontal utilizando CSS.

Arquivo CSS:

#menu {
display: table;
background-image: url(/images/menu.gif);
background-repeat: no-repeat;
width: 628px;
text-align: left;
margin:0 auto;
position:relative;
height: 24px;
}

#menu ul {list-style:none;}
#menu ul li {display:inline}
#menu ul li a {
font: 10px Verdana, Arial,tahoma, sans-serif;
color: white;
text-decoration: none;
padding:5px 15px 10px 15px;
background-image: url(/images/background_menu.jpg);
background-repeat: repeat-X;
height:24px;
margin-left: 12px;
margin-right: 12px;
letter-spacing: 1px;
}

#menu ul li a:hover {
background-image: url(/images/background_menu_hover.jpg);
background-repeat: repeat-X;
height: 24px;
}

Arquivo HTML:

<div id="menu">
<ul>
	<li><a href="/">HOME</a></li>
	<li><a href="http://blog.schoolofnet.com" target="_blank">BLOG</a></li>
	<li><a href="/treinamentos">TREINAMENTOS ONLINE</a></li>
	<li><a href="/faq">FAQ</a></li>
	<li><a href="/fale">FALE CONOSCO</a></li>
</ul>
</div>

Qualquer dúvida ou sugestão, comente esse post.

Utilizando Zend_Db_Table_Abstract do Zend Framework

Em nosso site de pré-lançamento, queremos pegar a maior quantidade de emails para notificarmos o usuário quando tudo estiver pronto. Para isso utilizaremos no ZF a Zend_Db_Table_Abstract para gravar um simples registro no banco de dados, o email. Esse exemplo parece ser muito simples, mas acredito que muitas variações podem ser feitas através do mesmo.

Vamos definir uma entidade chamada “Prospects” (possíveis membros da SON – School of Net) e então tal prospects acabará virando um modelo no zend framework, como segue código super simples a seguir:

models/prospects.php

<?php
class Prospects extends Zend_Db_Table_Abstract  {
protected $_name = 'prospects';
}

Partimos do princípio que você já configurou o seu ZF conforme nosso post de introdução, com isso, as seguintes linhas já estarão fazendo a configuração com o banco:

parte do html/index.php (bootstrap ou arquivo de configuração):

// load configuration
$config = new Zend_Config_Ini('../application/config.ini', 'general');
$registry = Zend_Registry::getInstance();
$registry->set('config', $config);

// setup database
$db = Zend_Db::factory($config->db);
Zend_Db_Table::setDefaultAdapter($db);

Nesse ponto criamos uma action. Ops..Action??!! O que é isso?
As actions são ações executadas através de um controller.

Exemplo: www.seusite.com.br/index/inscrever

Nesse caso, o controller é o IndexController.php e a action é a inscrever que nada mais é do que uma função que foi criada no IndexController.php, conforme exemplo abaixo:

OBS: Se nenhuma action for chamada (www.seusite.com.br/index), o ZF entende que você está executando a IndexAction().

controllers/IndexController.php

<?php

class IndexController extends Zend_Controller_Action {

public function indexAction() {}

public function inscreverAction() {

if ($this->_request->isPost ()) {
$formData = $this->_request->getPost ();
$prospects = new Prospects ( );
try {
$row = $prospects->createRow ();
$row->email = $formData ['email'];
$row->save ();
}
catch ( Exception $e ) {
$this->view->error = $e;
}
}
}
}

Veja que no código acima, criamos um objeto chamado $row fazendo parte da classe extendida “prospects” (model) e a partir disso, setamos para o $row criar uma nova linha, preenchendo o campo email a partir do dado que veio do formulário e logo após, gravar no banco com o save();

Espero que tenham entendido o conceito. Qualquer dúvida, comentem esse post.

Roteiro da animação – Lei dos 9×1

Pretendemos colocar em produção o site de pré-lançamento. Conforme nosso post anterior sobre o assunto, iríamos fazer uma animação que resumisse, rapidamente, o projeto da SON (School of Net).

Primeiramente antes de criamos qualquer coisa, temos que optar, querendo ou não pela “Lei dos 9×1″.

Ou você desenvolve 9 ou 90 minutos e pensa 1 ou 10, ou você pensa 9 ou 90 e desenvolve em 1 ou 10.

Ou seja, pense muito mais, para evitar retrabalho e se desgaste menos colocando a “mão na massa”. Nesse caso, utilizamos de um pequeno roteiro para fazer tal animação:

Roteiro das frases:

Requisitos:

• Todo instante da animação estar escrito “pré-lançamento”.
• Utilizar elementos com perspectiva (profundidade, etc)
• Possuir um pré-loading verde com linha de 0-100%.

Passo-a-passo (Frases):

1. O maior centro de treinamento de alta tecnologia está para nascer
2. tudo Online
3. Apoio pedagógico e metodologia exclusiva
4. Assista, Entenda, Desenvolva e Teste
5. A cada mês um novo treinamento
6. tudo para Web
7. Alta qualidade e valores acessíveis
8. todas as formas de pagamento…e parcelamento
9. Acompanhe em nosso Blog cada etapa de nosso desenvolvimento
10. Indique amigos e ganhe treinamentos.
11. Garanta 25% de desconto, cadastrando-se abaixo.
12. School of Net – Aprender, é na prática. A Work in progress

Animação:

• Um flash, como um estrobo de luz e risquinhos como se fosse começar um filme
• Entrada do Logo e Frase 1 e logo abaixo do Logo, Frase 2.
• Frase 3 chegando e frase 4 como um grafico 3D pizza como um ciclo mostrando nossa metodologia
• Pegar ícones de todas as tecnologias web colocar, efeito de espelho, como no logo da SON, e embaixo frase 5. Representar que cada mês, cada uma daquelas tecnologias (que tem o ícone) vão estar disponíveis como treinamento (selecionando ou contornando, ícone por ícone, sugerindo que cada seleção será o tempo de um mês.
• Depois dar opacidade em todos os icones das tecnologias e escrever a frase 6.
• Cifrões em perspectiva no fundo e vem a frase 7.
• Fade out nas frases e mostrar icones com efeito espelho de todas as formas de pagamento e nos cartoes de crédito colocar (12x) e frase 8.
• Frase 9 com screenshot do blog com efeito espelho e em perspectiva lateral.
• Mostrar o computador enviando mensagens ou eails (cartinhas como gmail) para outros computadores e quando chegarem aos computadores eles dão Ok (de alguma forma, ex: sinal de joia, piscam, etc..) e frase 10.
• Depois da um crop no footer do hotsite apontando para o campo de texto e clicando em GO com a mãozinha do mouse e frase 11. Quando a mãozinha clicar em Go. Aprece um tipo de um balãozinho (25% de desconto).
• Finaliza aparecendo o Logo da SON sem o efeito espelho e logo abaixo frase 12 e um ícone de reload (como os dos banners da adobe para a pessoa assistir novamente a apresentação).

Colocando favicon no site

Depois de publicarmos uma grande quantidade de posts, fomos lembrados de algo que muitos webmasters esquecem. O famoso Favicon.

O Favicon é aquele pequeno iconizinho que aparece do lado esquerdo da sua barra de navegação. Veja o nosso:

A grande perguta é? Como funciona? Tenho que saber alguma coisa de pixelart?
Nada disso, é muito mais simples. O favicon, normalmente, é um arquivo png com sua extensão renomeada para .ico, porém, nada impede de que você faça a chamada com um arquivo .gif, .png, etc.

Dica:
Acesse: http://www.html-kit.com/favicon/ e esse site gera automaticamente vários modelos, inclusive, animados de seu favicon; basta fazer o upload de seu logo (em qualquer formado. Ex: .jpg, etc.).

Como inserir isso em meu site?
Simples basta fazer o upload de seu arquivo .ico ou com a extensão desejada e fazer a chamada dentro das tags <head> da seguinte forma:

<link rel="icon" href="/favicon.png" />
<link rel="SHORTCUT ICON" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png" />

Na verdade, a primeira linha é a principal responsável, porém, há muitos sites que utilizam da segunda e terceira para garantir que isso irá funcionar em todos os navegadores. Na dúvida, utilizamos as 3.

OBS: Lembrando que é atributo href que faz a chamada do arquivo que você deve fazer o upload.

Introdução ao Zend Framework

É muito simples instalar o ZF, você apenas precisa baixá-lo em framework.zend.com e copiar a pasta principal para um nível abaixo do seu htdocs.

Ex:

/var/www/zf (arquivos do zend framework)
/var/www/htdocs/ (arquivos que são visíveis e acessíveis a quem acessará sua aplicação)

O conceito principal é: Tudo que for chamado pelo index.php (aka bootstrap), descerá um nível e acessará sua aplicação via o ZF.

Outro ponto é: ZF é baseado no conceito MVC (models, views, controllers), então ele necessita de uma estrutura de pastas um pouco diferente do que quem não utiliza esse padrão. Veja abaixo um exemplo:

Nesse post, vamos exemplificar qual é a funcão do index.php com um exemplo de configuração:

error_reporting(E_ALL|E_STRICT); // Exibe todos os errors
ini_set('display_errors', 1);

// configura a localização de onde está a pasta com os arquivos do ZF
set_include_path('.' . PATH_SEPARATOR . '../../zf/'
. PATH_SEPARATOR . '../application/default/models'
. PATH_SEPARATOR . get_include_path());

require_once "Zend/Loader.php";
Zend_Loader::registerAutoload();

// load configuration
$config = new Zend_Config_Ini('../application/config.ini', 'general');
$registry = Zend_Registry::getInstance();
$registry->set('config', $config);

//Setup auth Session
Zend_Session::start();

// setup database
$db = Zend_Db::factory($config->db);
Zend_Db_Table::setDefaultAdapter($db);

// setup controller
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('../application/default/controllers');
$layout = Zend_Layout::startMvc(array('layoutPath'=>'../application/default/layouts'));

// run!
$frontController->dispatch();

Neste exemplo acima fizemos o seguintes passos:

1. Como estamos supondo que estamos em um ambiente de desenvolvimento, configuramos o php para exibir todos os erros e eventos fora do padrão (notices).
2. Configuramos o include_path, ou seja, sempre quando dermos uma include em Zend/ ele buscará os arquivos do ZF que está em uma pasta a dois níveis abaixo chamada “zf”
3. Utilizamos uma API do zend para que le possa ler arquivos de configuração nesse caso é um arquivo “.ini” com os parâmetros para fazer a conexão em um banco de dados.
4. Iniciamos uma sessão, para conseguirmos diferenciar os acessos, ou seja, cada usuário, quando acessa o site ganha uma sessão para ele e então podemos identificá-lo.
5. Configuramos a conexão com o banco de dados a partir do objeto config que carregou os dados do arquivo config.ini
6. Criamos um dos objetos principais do ZF FronController (faz o intermédio entre os models e as views). Essa configuração foi: Criar o objeto (getInstance()), mostrar os “erros” – No caso de um ambiente em produção o $frontController->throwExceptions(true); seria false e setamos em qual diretório o ele irá buscar os arquivos de controllers.
7. Também utilizamos o suporte para layouts do ZF, ou seja, quando ele for carregar qualquer página, primeiramente ele busca uma página Mestre chamada layout.pthml na pasta determinada pela aplicacão.
8. Dispach! ou seja, Rodar programa!!

Sei que de certa forma esse exemplo foi um pouco superficial para quem nunca tinha mexido com o ZF, mas aos poucos vamos postando e vocês entenderão a cada dia mais sobre esse framework. Fora que, com certeza, a SON (School of Net), futuramente, oferecerá cursos de ZF. Tudo na prática.

Qualquer dúvida, é só comentar.

Por que o Zend Framework (ZF)?

Primeiro conceito, que em nossa opinião, já está até banalizado, porém, não podemos deixar de citá-lo:

“NÃO VAMOS REINVENTAR A RODA”

Logo, todos que trabalham na área de desenvolvimento, mas desenvolvimento de qualquer coisa. Jamais tentem “reinventar a roda”, ou seja, fazer algo que já está pronto.

Não escolhemos o ZF (Zend Framework) simplesmente, porque o logo dele é bonito, e sim porque:

1. Possui uma grande quantidade de códigos prontos, pré-configurados para você sair usando.
2. Esquecer problemas como: if($login=$user) { … }
3. Saber que há profissionais muito capacitados trabalhando nisso e que há uma grande comunidade também colaborando pelo projeto.
4. (Opinião pessoal) – Ele não sai gerando códigos para você. Muitas vezes isso atrapalha (muitos frameworks fazem isso, eu particularmente, não gosto).
5. O ZF é seguro. Quem visita seu site, tem a possibilidade de executar somente um arquivo: index.php, pois todos os outros ficam um nível abaixo do Document Root, ou htdocs como vocês preferirem.
6. Há um belo manual explicando todas as APIs

Na primeira vez que testei o ZF, fiquei um pouco assustado com o arquivo de configuração, mas depois percebi que: Praticamente esse arquivo é a chave de tudo, o resto é código para o seu modelo de negócio e depois de entendido o famoso bootstrap ou o index do ZF, tudo fica claro, simples e bem orientado.

Há muitos outros frameworks de desenvolvimento como: cakephp, symfony, rails, etc. Nesse caso, depois de muitos estudos, escolhemos e preferimos o ZF e vamos nessa linha, mantendo o foco, o que é mais importante.

Em meus próximos posts, trarei exemplos mais práticos sobre o ZF, inclusive, porque a SON (School of Net) o aprender é na prática, mas não pude resistir em falar sobre isso.

Logo, nunca, independente, da área, partam do Zero (0). Sempre alguém já fez algo muito parecido com o que você precisa. Não seja orgulhoso e não deixe que o famoso Prazer tecnológico tome conta de você!

Bordas arredondadas com CSS sem usar imagens

Estamos terminando o site de pré-lançamento. Quem chegou ver o Screenshot, pode perceber que todo o conteúdo é baseado em um box com bordas arredondadas sem utilizar imagens.

Lá vai nossa pergunta: Qual é a melhor forma de se fazer isso? Há muitas maneiras.  Nesse caso, utilizamos essa, postado no site: códigofonte.com.br pelo Gabriel Fróes.

Vamos lá:

CSS:

.bordaBox {background: transparent; width:98%;padding-left:4px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}
.bordaBox .b1 {margin:0 5px; background:#eff7e0;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:0px 10px 0px 10px;display:block; background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}

HTML

<div class="bordaBox">
<strong class="b1"></strong><strong class="b2"></strong><strong class="b3"></strong><strong class="b4"></strong>
<div class="conteudo">Conteúdo do site.</div>
<strong class="b4"></strong><strong class="b3"></strong><strong class="b2"></strong><strong class="b1"></strong>
</div>

Podem testar, funciona! Testamos com firefox, ie7 e ie6. Atestamos que realmente é uma forma bem elegante.

Qualquer dúvida, fiquem a vontade.

Gerando Template – Tableless or not tableless?

Enquanto nossa animação de apresentação está sendo desenvolvida, começaremos a gerar o HTML para o site do pré-lançamento.

Temos que definir o seguinte: Vamos utilizar o máximo possível de webstandards e microformats, porém, nossa opinião sobre isso é a seguinte:

Acreditamos que a utilização de webstandards nos dá vários diferenciais como:

• Redução no código fonte
• Site mais leve, utiliza menos tráfego no caso de portais com muitos acessos
• Site mais fácil de ser localizado nos sites de busca
• Seguir algo que diz ser um padrão para todos os sites na Internet

Existe um grande ponto que gostaríamos de ressaltar. Hoje em dia muita gente fala: O seu site tem que ser tableless!!

Sim, realmente, é algo melhor por algumas das vantagens que coloquei acima, por outro lado temos que pensar o seguinte:

• Isso não se aprende de uma hora para outra, você terá que dispor de muitos dias para praticar
• Já vi muitos projetos sendo atrasados porque os profissionais falaram agora tudo que faço é em Tableless e outras coisas desse tipo.

A posição da Schoo of Net é: Todos têm que ter um tempo para se adptar a tudo isso. É claro, tudo isso não é novidade, quem não aderiu ainda a essa prática, realmente está um passo atrás, porém, NENHUM DESENVOLVEDOR QUE NÃO UTILIZAR TABLELESS OU SEGUIR A RISCA AOS WEBSTANDARDS NÃO ESTÁ CONDENADO. ISSO NÃO É CRIME!

Recomendamos fortemente que:

• Quem possui um projeto com prazo de entrega
• Quem não possui tanta prática com padrões web
• Quem precisa de algo para ontem e não se adaptou ainda aos webstandards

Não fiquem com peso na consciência, nenhum crime, ou anomalia está sendo criada. Faça do jeito que saiba fazer, porém, NUNCA deixe de estudar, pois isso é o futuro e traz muitos diferenciais, principalmente, quando trata-se de sites grandes com muita quantidade de acessos, onde performance, utilização de banda são requisitos super importantes.

Nosso comprometimento é em que cada passo que estamos dando nesse projeto você aprenda e veja diversos pontos de vista. Quando lançarmos o site de pré-lançamento, você poderá acessar o código fonte que estará totalmente comentado que possam entender um pouco mais, na prática, como esses pontos são utilizados.

Enquete para o Layout do site de pré-lançamento

Finalmente terminamos o layout do hotsite de pré-lançamento.

Criamos algo bem clean para dar destaque a uma animação principal, que ficará localizada na região central.

Agora, nosso próximo desafio é roteirizar tal animação, e criá-la com o impacto desejado.

Layout site pré-lançamento, clique para ampliar

Aguardamos vossos comentários!

Planejando o hotsite de pré-lançamento

Depois de definido nossa plataforma de desenvolvimento, chegamos em um ponto “complexo”.

Planejar!

Nossa idéia é: Queremos um site de pré-lançamento com os seguintes objetivos:

• Trazer anseios aos futuros aos membros da SON (School of Net) de que uma nova época está chegando. A época dos treinamentos em alta tecnologia com ótima qualidade, Online.
• Captar a maior quantidade de emails e nomes possíveis para que quando a SON for lançada, possamos lembrá-los.
• Fazer com que cada pessoa que cadastre seu email, nos ajude convidando o maior número de amigos possívels a ser um futuro membro.
• Dar descontos para as pessoas que mais indicarem.
• Fazer uma pesquisa para priorização de ordem de lançamento de cada curso.

Reamente isso é um grande desafio, pois nosso hotsite, tem que apresentar, naturalmente, do que estamos falando e queremos! Criar o maior centro de Treinamento em Tecnologia, Online.

Para isso, há alguns requisitos básicos:

• O hotsite deve ser totalmente clean e não pode desviar a atenção do usuário para nada além de nosso foco.
• Quando o visitante acessar, ele terá de entender, em poucos segundos, nosso objetivo: Apresentar nossa idéia e que por curiosidade, vontade, etc, ele nos deixar seu contato.
• Opss. Não podemos esquecer de apresentar nosso Blog, pois lá ele poderá acompanhar como andam as coisas, dar sugestões construtivas, comentando nossos posts, e ainda ver um projeto “nascer”.

Estamos pensando seriamente em fazer um hotsite super simples, porém com um trailer com grande impacto. O que você acha de tudo isso? Como você imagina nosso hotsite de apresentação com os objetivos acima?

Aguardamos sua colaboração com vossos comentários.