Posts da categoria: '(X)HTML'

Microsoft ASP.Net Virando Rails?

Pois é, vi no blog do Ben Scheirman e o Mamude confirmou, parece que a Microsoft e o time de desenvolvimento do ASP.Net cairam na real e perceberam que WebControls não colou muito, de volta ao HTML para a criação de interfaces e utilizando MVC o ASP.Net fica muita mais simples de se usar.

Não estou certo se esse modelo vai implacar, mas é bem provável que sim na versão 3.5, o Ben deixou um exemplo de código no blog dele e o Mamude publicou também, segue versão do Mamude:

C#:

C#:
  1. public class ProdutosController : Controller
  2. {
  3. [ControllerAction(DefaultAction = true)]
  4. public void List()
  5. {
  6. ViewData = Produto.FindAll()//utilização do Castle ActiveRecord
  7. RenderView("List");
  8. }
  9.  
  10. public void SomethingSecret()
  11. {
  12. //método não processado  pela  url
  13. //porque não está marcado com o atributo
  14. }
  15. }

HTML

HTML:
  1. <h1>Produtos</h1>
  2. <th>Nome</th>
  3. <th>Valor</th>
  4. <th>Disponível?</th>
  5. </tr>
  6. <td>&lt;%=c.Nome%&gt;</td>
  7. <td>&lt;%=c.Valor.ToString("c") %&gt;</td>
  8. <td>&lt;%=c.Disponivel? "sim" : "nao" %&gt;</td>
  9. </tr>
  10. </table>

Como da pra ver o código fica muito mais limpo sem aquele monte de controles do ASP, e a utilização com JavaScript volta a ser normal, sem uso dos controles também.

Esperamos que a Microsoft continue nesse passo.

Teste seus conhecimentos em HTML

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:

Mingle2 - Free Online Dating63

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.

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