HTML + JavaScript + CSS    

Olá pessoal!

Continuando nossa série de posts introdutório sobre Asp.Net MVC, vamos falar hoje das linguagens básicas a serem utilizadas para o desenvolvimento de sites.

Acho importante abordar esse assunto porque com a facilidade que o WebForm deu ao desenvolvedor de clicar e arrastar controles, e configurar as visibilidades dos controles via Code-Behind, muitos desenvolvedores Asp.Net desconhecem totalmente a razão de ser do HTML, do JavaScript e do CSS.

Muitas pessoas quando precisam editar alguma coisa do código fonte ficam totalmente perdidas, ou se ocorre algum erro no JavaScript, ou a exibição de um controle não fica como o esperado em um determinado navegador: Pronto! “Isso não dá pra fazer”, “Isso é impossível”, “Isso vai levar muito tempo”, etc; É comum ouvir esse tipo de argumento para substituir “não sei como fazer isso”. A credibilidade dos desenvolvedores Asp.Net (e do próprio Asp.Net) caiu muito há alguns anos devido a esse tipo de desenvolvedor preguiçoso, sem o menor interesse de fazer as coisas certas.

É óbvio que o modelo de desenvolvimento do WebForm incentiva esse tipo de pessoa a pensar assim, mas com o Asp.Net MVC isso é diferente! Para fazer uma boa aplicação em Asp.Net MVC, você deve conhecer como a Web funciona, e hoje vamos entender como controlar a experiência do usuário ao navegar no seu site.

No primeiro post, falei de separação de interesses (SoC), mostrando a importância de se separar as coisas de acordo com o seu contexto. No desenvolvimento de um Site também, esse conceito também deve ser respeitado, não no que tange a interação de objetos, mas na responsabilidade de cada linguagem. As três linguagens básicas para desenvolvimento de um site têm uma razão de ser, foram criadas com um objetivo, e esse objetivo deve ser conhecido e respeitado.

A Web, quando foi pensada, não foi pensada apenas para fazer as aplicações serem acessadas de qualquer lugar, através de um navegador, ela não tem a intenção de trazer as possibilidades de uma aplicação desktop para uma aplicação que roda sobre o Browser. A Web também tem a intenção de prover informações, de ter significado, não apenas ser uma aplicação, portanto, quando dizemos que vamos fazer um site, devemos saber quais informações queremos exibir, e como queremos nos expressar com essas informações.

Para saber como expressar o que queremos dizer na web, devemos saber que em um site, o desenvolvimento é dividido em três momentos, em três definições:

  • Definir o que e como dizer (semântica);
  • Definir como usuário deve ver o que queremos dizer (layout)
  • Definir o comportamento do site para exibir o que queremos dizer e como responder ao que o usuário quer ver (behavior)

Entendendo essas três definições, devemos saber qual linguagem utilizar para cada uma delas, então vamos lá!

HyperText Markup Language – HTML (Semântica)

Nos primórdios das Web, o HTML foi criado para o desenvolvedor poder se expressar. As primeiras páginas basicamente eram textos lineares com texto corridos e eventualmente ligações entre uma página e outra, os navegadores liam o HTML e sabiam o que ele queria dizer, e essa foi a intenção do criado do HTML, se expressar.

Para isso, ele criou tags que têm significados claros e que devem ser usadas para aquilo que elas foram criadas, por exemplo:

  • Se você quiser criar uma parágrafo, você utiliza a tag P (Paragraph).
  • Se você quiser criar uma lista não ordenada, você utiliza uma UL (Unordered List)
  • Se você quiser criar uma lista ordenada, você utiliza uma OL (Ordered List)
  • Se você quiser criar itens de uma lista, ordenada ou não, você utiliza uma LI (List Item)
  • Se você quiser exibir dados de forma tabular, você utiliza uma TABLE.

E assim por diante, conhecendo cada tag do HTML, veremos que cada uma tem um significa para cada necessidade de se expressar.

E para que isso serve? Como diz anteriormente, o HTML faz a Web se expressar, um site que se expressa bem, ou seja, que tem boa semântica, pode ser navegado por um deficiente visual.

Por exemplo: Um programa narrador qualquer vai conseguir ler todo o site para uma pessoa que não consiga ler, e ele vai conseguir diferencia cada texto da página, vai conseguir falar para o usuário: “Título – Lista de Receitas”, se ele encontrar um HTML da seguinte forma “<h1>Lista de Receitas</h1>”, pois a tag H1 significa “Header (Título) de nível 1”, ou vai saber falar para o deficiente “Lista: Pudim, Bolo de Cenoura…” se encontrar um HTML assim: ”<ul><li>Pudim</li><li>Bolo de Cenoura</li></ul>”.

Não é só para leitores de texto que o HTML ajuda, para motores de busca também, como o Google. Esses motores de busca processam o HTML e indexa pelo que ele percebe que é importante na página, por exemplo H1, ou listas.

Se você já ouviu falar de Web Semântica e não sabia o que queria dizer, agora já sabe: Web Semântica é usar o HTML de acordo com o que cada TAG quer dizer. Para isso é muito importante conhecermos cada TAG do HTML, e sabermos que elas servem para organizar informação, e não layout.

Estou falando isso, porque há alguns anos atrás ficou na moda um termo chamado Tableless (sem tabelas em inglês), e de onde veio esse termo?

Entendendo Tableless

Quando o desenvolvimento Web começou a se tornar popular, poucas pessoas sabia para que servia o HTML, e começaram a utilizar as tags conforme bem entendiam, e perceberam que era muito fácil criar divisões na página utilizando tabelas (Tag Table). Mas espera aí, TABLE não é para exibir informações tabulares? Sim, então utilizar tabelas para criar divisões é um erro. Algumas pessoas então resolveram disseminar boas práticas do HTML e criaram esse termo, e mostram para o mundo que divisões em páginas, se criavam com tags DIVs.

Div é uma das poucas tags que não têm semântica de informações, serve apenas para criar blocos de códigos dentro de uma página. Deve ser usada após criar toda a semântica da página, iniciando o processo de design, mas apenas pensando em divisões de informações, e não em divisões de layout. O que quero dizer com isso? Quero dizer que se você sabe que uma informação pode não ser seqüência de outra, você pode utilizar um DIV, pois o designer futuramente pode querer dispor essa informação em um lugar diferente, sem fazer a exibição perder o sentido.

O termo Tableless muitas vezes é mal interpretado, pois as pessoas pensam que é proibido utilizar a tag TABLE, mas não é isso, é não utilizar TABLE para criar layout, divisões, dispor informações e isso estar errado, mas se você quiser em algum momento mostrar realmente uma tabela, mostra dados tabulares, você DEVE utilizar uma tag TABLE, pois semanticamente esse é o correto.

Já presenciei absurdos como utilizar infinitas DIVs para criar uma tabela, e isso está redondamente errado. Lembre-se: Tableless é a aplicação de Web Semântica! E uma coisa não pode contradizer outra!

Se você já ouviu falar de WebStandards saiba que nada mais é do que basicamente a aplicação de Web Semântica, no que tange a HTML.

Tentei mostrar basicamente para que serve HTML, caso você pense que vale a pena falar um pouco mais sobre isso, me fale, que posso falar em outro post. É importante saber que devemos conhecer o maior número de TAGs, para sabermos quando e para que usá-las. É interessante visitar o site da W3C para estudar um pouco sobre as tags e seus atributos, para que nossas páginas fiquem sempre mais inteligentes.

Cascading Style Sheet – CSS (Layout)

O CSS é uma linguagem de estilo ou design. É o CSS que define cor, posição e tamanho dos objetos em uma página Web, ela trabalha em cima da estrutura do HTML, portanto, é muito importante que o HTML esteja bem formado para que o layout seja facilmente manipulado. No Asp.Net, técnicas conhecidas como Tema são aplicados utilizando CSS.

Este blog utiliza a engine BlogEngine.Net. Você já deve ter lido vários Blogs que utilizam a mesma engine, porém, com layouts totalmente diversificados. Isso é possivel com a aplicação de CSSs diferentes. O HTML sempre continua o mesmo, porém a disposição das informações na tela é diferente. O HTML é o mesmo porque a informação que se deseja exibir é a mesma, portanto, a semântica é a mesma, para um deficiente visual, a ordem da informação será a mesma, independente do Layout, apenas o estilo (Layout) da informação variará, o que não altera em nada a semântica do site.

Para a utilização do CSS você pode definir sua implementação dentro de uma tag STYLE ou do atribulo style de uma TAG, porém, o mais comum, e mais recomendado, é a utilização em um arquivo separado, onde o mesmo código pode ser utilizado em várias páginas diferentes, além do arquivo individualmente poder ser utilizado a partir do cache do navegador, tornando o carregamento da página muito mais rápido. Utilizando um arquivo externo para programar o estilo da página, você deve referenciar o arquivo através da tag LINK, normalmente colocada dentro da tag HEAD.

Neste post, o objetivo não é mostrar as características a fundo do CSS, como o objetivo desta série de post é te preparar para o Asp.Net MVC, quero deixar claro que o CSS tem o objetivo de definir o estilo, ou design, da página, e toda configuração nesse sentido deve ser controlado pelo CSS.

Sempre que ao desenvolver uma página você sentir a necessidade de fazer a página ficar mais bonita, pense em CSS. Mesmo que você conheça alguma tag ou configuração HTML que resolva o seu problema, evite utilizá-la. Lembre-se, o CSS é o responsável pelo Design e o HTML pela semântica.

Caso você tenha maior interesse em conhecer CSS, poderá visitar também o site da W3C, ou visitar o ótimo site do Moujor, onde você encontrará muitas informações sobre WebStandards e Tableless.

JavaScript – Comportamento

JavaScript foi criada em 1995 pela Netscape. Sua intenção original era realizar validações em formulários e realizar interações com a página. Através do JavaScript é possível mudar informações do HTML, inclusive informações relacionadas com o CSS, o que é conhecido como DHTML.

Devido a essa capacidade de alterar informações do HTML que ao JavaScript é dado a responsabilidade de controlar o comportamento da página.

Como linguagem, o JavaScript tem algumas características:

  • Apensar de inspirada no Java, mas o conceito é bem diferente.
  • É interpretada e não compilada, ou seja, os erros ocorrerão apenas em tempo de excução.
  • Quanto ao tipo:
    • É fracamente tipada, tem o tipo mutável.
    • É dinâmica, ou seja, o tipo de uma variável muda durante a execução da aplicação.
    • É implícita, ou seja, a variável são declaradas sem tipos.

Como o CSS, o javascript pode definido em uma TAG dentro da página, sendo esta a tag SCRIPT, em um atributo de um tag, sendo este qualquer atributo que leve o nome de um evento, como onclick, ou onblur ou em um arquivo externo, também através da TAG SCRIPT, valorizando o atributo SRC com o endereço do arquivo. Essa técnica tem o mesmo benefício de CSS externos à página, ou seja, ganha desempenho com Cache do navegador e pode ser utilizado em várias páginas.

Para estudar JavaScript, um ótimo site seria o W3Schools, onde você poderá entender como funciona cada características da linguagem, desde a objetos à Garbage Collector.

Uma boa página, com boa interação com o usuário, deve sempre fazer bom uso do JavaScript. O Asp.Net utilizada Javascript onde você imaginar, e framework .Net, com Ajaxtook kit vivem a custa disso.

Com a popularização do JavaScript e do conceito Web 2.0, a necessidade de páginas cada vez mais interativas fez sugir diversas bibliotecas baseadas em JavaScript, que facilitam muito a vida de um desenvolvedor Web, que todos deveriam conhecer ao menos uma. Segue uma pequena lista:

Cada biblioteca JavaScript tem sua característica específica e muitas vezes uma finalidade específica, estude cada uma delas e veja qual é a melhor para o seu problema.

Conclusão

Este post teve a intenção de mostrar qual é o objetivo de cada linguagem de Browser da Web. É importante conhecer a divisão delas, para saber como usar. Quanto melhor a utilização dessas três linguagens, maios rápido vai ser o desempenho da sua página e melhor o tempo de desenvolvimento e manutenção.

Sem essas três linguagens a Web não existiria (Internet não é Web, caso não saibam), e o mal uso dela pode tornar a Web insustentável.

Para um bom desenvolvimento Web, e sem dúvida para um bom desenvolvimento em Asp.Net MVC, o conhecimento delas é impresindível.

Dei mais foco ao HTML (apesar de que ainda é pouco), porque é o que as pessoas mais dizem que sabem, sem nunca terem se questionado se sabem mesmo ao menos o conceito, é o que o eu aviso: Estude, aprenda HTML!

Espero que esse post tenha servido para entender um pouco mais como funciona o desenvolvimento de páginas Web, e te ajude a saber o que estudar para começar com Asp.Net MVC.

Abraços e até o próximo.

18. outubro 2010 07:36 by Frederico | Comments (3) | Permalink

Comments

Ótima explicação!
Uma verdadeira aula de Web!
20/10/2010 03:05:00 #
Pqnolucas
cara muito massa teu templayte fiquei de boca acertou em cheio no jogo de cores!!!!!!!

Obs.
Com todo o respeito quando olhei tua foto pensei que era u Luiz fabiano...jogador futebol vc é igual cara
kkk
falo grande abraço!!!!!
19/12/2010 14:42:11 #
A plataforma Asp.Net

A plataforma Asp.Net
19/08/2014 20:11:06 #
Comments are closed

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  novembro 2017  >>
seteququsedo
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET