Posts da categoria: 'WEB Standards'

Melhores da semana #001 - Frameworks, produtividade, padrões, podcasts, miscelânia e más notícias

Frameworks

8 frameworks MVC que você pode usar em seu aplicativo Flex, se vc quer desenvolver em flex utilizando a metodologia MVC esse é o post ideal para você.

Produtividade

Produtividade pra programadores, é um post que fala sobre produtividade analisando o documento escrito pelo Élcio da Visie, vale a pena ler tanto o post quando o documento.

Padrões

KML agora é padrão de compartilhamento de mapas, noticiado pelo Henrique e UnderGoogle, para quem não sabe (ou não sabia assim como eu) KML (é, é baseado em XML) é um padrão criado pelo google para localização geográfica que acaba de ser reconhecido como um padrão propriamente dito.

Podcasts

Rails Podcast Brasil - Episódio #13, mais uma edição do melhor podcast sobre Rails do Brasil gravado por Carlos Brando e Fábio Akita sempre trazendo as novidades sobre Ruby, Rails, Git e muito mais.

Podcast Digital Paper - Episódio #13, gravado na quarta-feira com participação especial de Jonny Ken, Amanda e Nagueva, vai ao ar dia 21/04, ótima pedida para o feriado.

Miscelânia

Instant Messaging e Ruby, veja como criar um Instant Messager utilizando Ruby.

Relacionamento muitos-para-muitos com ActiveRecord no Rails, Entenda como funciona este tipo de relacionamento e como aplicar algumas técnicas melhoradas.

Domínios .com.br agora podem ser registrados somente com CPF, essa notícia foi a mais esperada durante anos, não se faz mais nece´´ario o uso de CNPJ para registrar-se dominios .com.br.

Más Notícias

Sun começa a fechar o MySQL, como nem tudo são rosas a Sun anuncia que vai dividir o MySql em uma versão para acomunidade e uma nova versão Enterprise fechada e comercial.

Porque adotar padrões WEB ?

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.

Microsoft Expression WEB - Primeiras impressões (minhas)

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.

Visual Studio 2005 + ASP .NET 2.0 + Componentes = Assassinos de WEBStandards

Esta semana começei a análise de um novo sistema aqui na empresa e os gerentes decidiram que a tecnologia a ser usada seria ASP .Net 2.0, tudo bem, já brinquei com ASP .Net + C# em um projeto para a faculdade, desta vez peguei sério para testar e olha só que decepção.

Criei um novo projeto no VS 2005 e arrastei um componente menu para a tela mandei rodar e minhas extensions do Firefox já saltaram da barra de status, olhem só:

Somente isto é mostrado:

Página de teste ASP .NET

E já retorna os seguintes erros:

Erros

Utilizando apenas um simples componentes todos esses warnings são gerados, imaginem uma tela inteira ou uma aplicação completa.

Isso me deixa indignado, vou tentar (porque o VS se mete em tudo) criar a interface em xHTML na unha para tentar manter o máximo possível o padrão.

Não sou contra a Microsoft e até gosto de C# e ASP.Net (que morra o VB), mas as ferramentas infelismente são sofriveis neste ponto, outra alternativa que me vem a cabeça é o Microsoft Expression Web que pretendo testar hoje a noite e posteriormente relato minhas experiências com o mesmo.

Será dificil para a Microsoft seguir os padrões? será dificil esquecer essa mania de dominar o mundo e impor padrões de mercado? ou eles mudam de visão ou continuaram ficando para trás.

Criação de layouts tableless com (X)HTML + CSS #Parte 3

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:

Estrutura básica do exemplo

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Layouts com (X)HTML + CSS</title>
<link type=”text/css” rel=”stylesheet” href=”css/layout.css” />
<link type=”text/css” rel=”stylesheet” href=”css/style.css” />
</head>

<body>
</body>
</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.

Criação de layouts tableless com (X)HTML + CSS #Parte 2

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.

Criação de layouts tableless com (X)HTML + CSS #Parte 1

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….