Para quem ainda não sabe o Carlos Eduardo da e-Genial teve a brilhante idéia e iniciativa de promover uma maratona de palestras online através do TreinaTOM, sistema de treinamento online desenvolvido por ele e sua empresa. As palestras vinham acontecendo toda sexta-feira a noite e agora graças a Deus foram transferidas para o sábado. Dia 18/08 é um dia especial com palestras o dia todo. Confira a grade abaixo:

Manhã

09:00 às 10:00

Título : Web Semântica com Ruby on Rails
SubTítulo : Aplicações e Sites mais Inteligentes, aprenda como ela está
mudando os processos de indexação, editoração e recuperação da informação.
Palestrante: Charleno Pires
Tempo para perguntas e respostas: 10 minutos

10:10 às 11:10

Titulo: XP + Rails = produtividade ao extremo na web
SubTítulo: Projeto Lucidus: Desenvolvendo aplicacoes web com maxima
produtividade usando Extreme Programming e Ruby on Rails
Palestrante: Vinícius Manhães Teles
Tempo para perguntas e respostas: 10 minutos
11:20 às 12:20

Título: Ruby off Rails - O outro lado da moeda
SubTítulo: Um overview da aplicabilidade da linguagem em ambiente de
telefonia IP(VoIP), desempenho, restrições, padrões, deploy, etc.
Finalizando com estudo de casos dos projetos abertos RubyGhostEngine(rghost)
- Document Builder, RailsTree, JsDOMenu e outros projetos futuros.
Palestrante: Shairon Toledo
Tempo para perguntas e respostas: 10 minutos

Tarde

13:30 às 14:30

Título: O que há de novo no Flex 3?
SubTítulo: Veja todas as novas funções que o Flex 3 pode oferecer e tire
proveito disso.
Palestrante: Igor Costa
Tempo para perguntas e respostas: 10 minutos
14:40 às 15:40

Título: Desenvolvimento orientado a componentes
SubTítulo: Entenda o modelo de desenvolvimento de componentes do Adobe Flex
Palestrante: Beck Novaes
Tempo para perguntas e respostas: 10 minutos

15:50 às 16:50

Título: Flex nas empresas
SubTítulo: Uma nova roupagem para o velho
Palestrante: Rogério Oliveira (Sócio Diretor da Zellen)
Tempo para perguntas e respostas: 10 minutos

17:00 às 18:00

Titulo: Rails Stand-Alone
SubTítulo: Introdução a Slingshot e acts_as_replica
Palestrante: AkitaOnRails
Tempo para perguntas e respostas: 10 minutos

18:10 às 19:10

Título: Linguagens de programação: passado, presente e futuro
Subtítulo: O que você deve saber sobre linguagens de programação e como
elas impactam o seu desenvolvimento e carreira; quais são as prováveis
linguagens do futuro e como fazer as melhores escolhas; ambientes
multi-linguagem e produtividade; o passado no futuro: ressurgência de
temas; paradigmas e produtividade; a próxima grande revolução.
Palestrante: Ronaldo Ferraz
Tempo para perguntas e respostas: 10 minutos

Como podem ver a grade é bem preenchida por assuntos muito bem escolhidos e apenas feras no elenco de palestrantes, já sou presença confirmada e não perco por nada, se você se interessa por algum dos assuntos citados acima não pode perder.

Aqueles que acham que dominam completamente a mais popular linguagem de marcação sintam-se a vontade para colocar a prova seus conhecimentos com este quiz muito legal e bem bolado:

Mingle² - Free Online Dating63

Nos primórdios de 2003 visitando vários sites através de conexão discada (54Kbps que na verdade conectava a 36Kbps devido a péssima qualidade da linha telefônica) eu me deparei com um pensamento, como esses sites são feitos?

aquele tempo sendo eu muito pouco experiente com informática ainda fazendo curso básico um professor me apresentou a algo que futuramente iria contribuir para uma mudança radical na minha vida, o Google, e foi justamente nele que pesquisei sobre como sites são feitos e descobri que se usava uma linguagem de marcação chamada HTML.

Mais uma pesquisa sobre HTML e cheguei até o apostilando.com com várias apostilas sobre o assunto, algo dentro de mim dizia: isso é legal, vale a pena estudar. Depois de um sábado inteiro estudando já conseguia colocar titulo na página, criar listar ordenadas, links, tabelas, campos de formulários, checkboxes, comboboxes e mais alguns elementos básicos. Já me sentia expert em HTML, mal sabia eu o que me aguardava.

Logo comecei a trabalhar como estagiário num provedor de hospedagem onde começei a desenvolver em PHP e aprendi a criar meus primeiros layouts com tabelas. Uma tabela com 759 X 480, uma linha para o cabeçalho, e duas colunas logo abaixo uma para o meu vertical e outra para o conteúdo. Simples, porém resolvia meu problema. Com o tempo fui sentindo novas necessidades e as tabelas iam resolvendo meus problemas. Depois de 8 meses no provedor como estagiário e não muito satisfeito com o salário resolvi procurar outro emprego.

Sem sucesso nesta nova empreitada consegui um sistema para desenvolver como freelancer mesmo com pouca experiências. Neste tempo participei do 9° Encontro de WebDesigners onde assisti uma palestra do Fred sobre Tableless, foi ai que minha vida mudou, já conhecia CSS e um pouco sobre xHTML, mas depois desta palestra conheci de vez os Webstandards.

Modifiquei o projeto que estava em andamento, alterando toda a interface, recriei todas as telas com o layout baseado em divs estilizadas com CSS, achei aquilo fantástico, muito mais fácil sendo que só tinha que incluir o arquivo .css e criar 6 divs com seus respectivos Id’s para cada nova tela, minha produtividade foi muito maior. Claro que tive problemas (e tenho) com relação a compatibilidade com browsers.

Desde então todo meu desenvolvimento tem sido baseado em padrões e técnicas politicamente corretas (semântica?) de progração e criação de interfaces. Muitas vezes fico 2 horas em cima de um problema que resolveria com tabelas em 2 minutos, porém tenho a conciência que o resultado será melhor, mais leve, mais correto e muito mais flexível do que as tabelas.

Lendo o post do Diego e do Ronaldo sobre padrões vs. tabelas fico ainda impressionado de saber que “desenvolvedores” e “webdesigners” ainda defendem o uso de tabelas para desenvolvimento de layouts, além de não serem padrões as tabelas usadas para desenvolvimento de layouts ferem a semântica, tabelas foram criadas para apresentar dados tabulados e não para criar layouts.

Tableless é um termo que pode ser traduzidos como “Sem Tabelas” porém Webstandards são muito mais do que isso. Hoje vemos muito de padrões na web como o RSS e os microformatos ainda em desenvolvimento.

Padrões são desenvolvidos para manter as coisas compativeis desde que sejam seguidos ao pé da letra, infelismente não é o que aconteçe muito com os browsers apesar do IE7 ter evoluído bastante neste quesito ainda falta muito para uma integração perfeita.

Padrões estão ai para serem usados e seguidos, infelismente quem não segui-los pode ter certeza que ficara para trás.

Bom, devido ao meu problema com Visual Studio resolvi testar o trial do Microsoft Expression WEB. Até que estou satisfeito, tem o que preciso e gosto, até melhor que o Dreamweaver se não fosse a falta de suporte a PHP, pois o MEW é para desenvolvimento de interfaces, não para programação (mesmo que fosse acho que só suportaria linguagens Microsoftianas).

O software tem tudo que os outros tem, ou seja: Folder List, Tag Properties, CSS Properties, ToolBox e uma coisa legal que gostei muito, o Aplly Styles, uma janelinha que te mostra como está ficando seu estilo CSS e mostra todo o código com tooltip.

O recurso de intellisense é muito bom, muito melhorado e bem semelhante ao Dreamweaver, atualizado para xHTML e CSS padronizados, muito diferente do VS. Isto realmente ajuda na hora do desenvolvimento tableless e WEBStandards.

Suporte a documentos HTML e ASPX são um diferencial também, enfim a Microsoft lhe permite escolher que formato quer usar e possibilita o uso de componentes HTML e controles especificos do ASP .NET, porém com as mesmas falhas que citem ontem.

Resumindo: Se eu não preferisse PHP ou a ferramenta tivesse suporte a ele, migraria com certeza, apesar que faço tudo na mão e dificilmente uso algo mais da ferramenta além do intellisense para autocompletar e me mostrar a lista de parâmetros dos métodos. Não é nada novo e espetacular, porém acho que para a Microsoft é um grande passo já que a ferramenta é otimizada para desenvolvimento semântico e padronizado.

Vale a pena conferir.

Pois é, depois da introdução vem a produção e nada melhor do que meter logo a mão na massa para ir aquecendo os neurônios, então….. vamos lá.

Utilizaremos a seguinte estrutura:

Dentro de um diretório teremos o arquivo (x)html com nossa estrutura que por sua vez utiliza-se dos arquivos layout.css para definir o layout e o arquivo style.css para estilização de fontes, cores e menus.

index.html

A estrutura inicial do arquivo index.html deve ser igual a esta, claro que você não precisa digitar tudo na mão, o Dreamweaver por exemplo faz isso pra você ao criar uma nova página HTML, a unica coisa que adicionamos foram os links para os arquivos .css, tendo esses links a página HTML “enxerga” os estilos e propriedades criadas para nossa implementação.

Nosso próximo passo é criar a separação do layout em partes onde serão contidos o cabeçalho, menu, conteúdo principal e um rodapé, mas este é assunto para um outro post que em breve estará no ar.

Obrigado pela atenção de todos e continuem a acompanhar esta jornada.

Apesar da discussão entre o uso de HTML e XHTML eu prefiro XHTML, concordo que o que usamos é apenas HTML, porém mantenho meu XHTML válido para minizar futuros problemas, definiremos todo o layout e estilos em CSS utilizando somente a estrutura da linguagem de marcação.

Para essa nossa jornada criaremos um template de blog semelhante a este aqui que uso com um modelo que podemos chamar de elástico (olhe aqui), sendo assim ele se adapta de acordo com o tamanho da janela sem quebrar ou distorcer conteúdo.

A idéia é simples e não utilizaremos imagem nenhuma, apenas texto estilizado e posicionado de acordo com o proposto, é hora de colocar em prática alguns conceitos que ja tinha no subconciente mas só fui me dar conta no curso online de design web do Bruno Ávila (recomendo).

Eu particularmente construo meus layouts na mão, linha por linha, sem utilizar modo gráfico, claro que utilizo editores com coloração de sintaxe e até auto-complete, prefiro assim pois tenho total controle e conciência de como está meu código, um pouco trabalhoso concordo, mas vale a pena na hora da manutenção ou alterações.

Bom pessoal no nosso próximo capitulo entraremos de cabeça na confecção do layout criando a estrutura dos arquivos.

Até a próxima.

Criar layouts para a web pode parecer simples e intuitivo quando utilizamos um software de edição HTML em modo gráfico como Dreamweaver, MVU, etc. Porém existem pessoas que se preocupam com a quantidade de código (lixo) gerada desnecessáriamente e completamente sem padrão ou ainda com as dúzias de tabelas geradas quando fatiamos um layout no Photoshop ou Fireworks, muito prazer sou uma delas.

Em meus projetos tento refletir algo que não tenho na vida real (organização) e sou extremamente chato neste ponto, principalmente quanto a validação dos padrões (W3C) utilizados (quase obrigatóriamente), se padrões existem é porque há uma tendência de segui-los e confesso que fico muito feliz vendo meu trabalho pronto e validado corretamente.

Pensando nisso decidi começar esta jornada onde o foco é a criação de layouts, passando pela teoria do design aplicado, aplicação de conceitos, estruturação do formato, cores, bordas, links, estilizações css, semântica e validações. Não sou designer, minha atuação é como desenvolvedor, e justamente por ser desenvolvedor me obrigo muitas vezes a me virar sozinho e estas situações são grandes escolas onde se aprende muita coisa.

Nas próximas partes desta jornada muita ação e porque não diversão, afinal eu relaxo dos momentos de stress de programação gerando meus css’s.

Em breve mais….