Desvendando padrões para desenvolvimento web, base para o sucesso

DESVENDANDO PADRÕES PARA

DESENVOLVIMENTO WEB, BASE PARA

O SUCESSO Prof. Esp. Ubiratan Zakaib do Nascimento

[email protected]

http://www.onucleo.com Twitter: @birazn

@onucleo

This work is licensed under a Creative Commons Atribuição-Uso não-comercial-Vedada a criação de obras derivadas 3.0 Unported License.

http://creativecommons.org/licenses/by-nc-nd/3.0/

















AGENDA DO TREINAMENTO

• Apresentação do facilitador

• Apresentação das ferramentas

– NetBeans versão X

– Navegador X

• Conhecendo WebStandards

2 Técnicas e Padrões de Projeto Web

AGENDA DO TREINAMENTO

• Treinamento “mão na massa”

– Implementação de Códigos XHTML

– Validação XHTML

– Implementação de Códigos CSS

– Validação CSS

– Implementando com Framework AJAX

– Implementando Galeria de Fotos


HTML e XHTML

Conhecendo e começando

Web Standards Projects

Como tudo começou

• A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

• Localizador Uniforme de Recursos (URL)

• Linguagem de Marcação de Hipertexto (HTML)

• Protocolo de Transferência de Hipertexto (HTTP)

• Navegador Web (Browser)


A Bagunça

• A Web cresce comercialmente, e veem a necessidade de publicação de conteúdo diagramado, como em revistas e jornais (algo para o qual o HTML não possuía recursos).

• Há então a adaptação da linguagem de forma equivocada, com uma preocupação unicamente visual, esquecendo da qualidade do código.


A Guerra dos Browsers

• Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores.

• Além de não darem suporte aos padrões do recém criado World Wide Web Consortium (W3C), ainda criavam seus próprios padrões, aumentando a bagunça.


Editores WYSIWYG

• "O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.

• Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.


Com tudo isso...

• Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags com tabelas, formatações, scripts...

• Tudo muito maior que o necessário.

• Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos... um a um!



Os Padrões Web

• Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.

XHTML – HTML – CSS – DOM – XML –...


O que é W3C?

• W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.

• Desenvolve Recomendações abertas, até agora mais de 80 padrões...

www.w3.org


http://www.w3.org/

http://www.w3.org/

Web Standards Project

• O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.

• Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.

www.webstandards.org


http://www.webstandards.org/

http://www.webstandards.org/

Mudança de Conceito...

• Web dividida em três camadas:

– Conteúdo (XHTML)

– Apresentação (CSS)

– Comportamento (Javascript)

Devem ser desenvolvidas de forma independente, porém uma complementa a outra.


Mudança de Conceito...


Vantagens da adoção dos Padrões

• Carregamento mais rápido

• Menores custos com hospedagem

• Melhor Consistência Visual

• Redesign mais barato e eficiente

• Melhores resultados nos Mecanismos de Buscas

• Maior acessibilidade e interoperabilidade


Tableless x Web Standards

• Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.

• Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.

• Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.


HTML

• HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.

• Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.


<tag atributo=“valor” atributo2=“valor”> TEXTO </tag>

<tag> Texto </tag> Inicia comando

Finaliza comando

Conteúdo formatado

HTML

• O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.

• Versões do HTML:

– HTML 2.0 (Novembro de 1995)

– HTML 3.2 (Janeiro de 1997)

– HTML 4.0 (Dezembro de 1997)

– HTML 4.01 (Dezembro de 1999)

– ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)

– HTML 5 (Janeiro de 2008 em Implementação quase finalizada)


XML: eXtensible Markup Language

• Criada para suprir a falta de flexibilidade do HTML.

• Separação do conteúdo da formatação.

• Simplicidade e Legibilidade, para humanos e computadores.

• Criação de arquivos para validação de estrutura.

• Interligação de bancos de dados distintos.

• Concentração na estrutura da informação.


XHTML

• O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.

• Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.


Um Código Semântico

• Semântica refere-se ao estudo do significado.

• Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.

• Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”

• Criar uma “Marcação com Significado”.


Marcação Semântica

• Usar <table></table> apenas para dados tabulares

• Usar <h1></h1> até <h6></h6> para títulos

• Usar <ol></ol> para Listas Ordenadas e <ul></ul> para Listas Não Ordenadas, seguidos do elemento <li></li>

• Usar <em></em> para Enfase, e <strong></strong> para Enfase Forte


Versões do XHTML

• XHTML é uma linguagem que começou como uma reformulação do HTML 4.01

• usando XML 1.0:

– XHTML 1.0 (Janeiro de 2000)

– XHTML 1.1: (Maio de 2001)

– XHTML 2.0: Ainda é um projeto de trabalho do W3C.

– XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto.


DTD: Document Type Definition

• Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.

• Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.


XHTML 1.0 - DOCTYPE:

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML – Elementos obrigatórios:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>XHTML Base</title>

</head>

<body>

<p>Conteúdo</p>

</body>

</html>


Diferenças entre XHTML e HTML

• Documentos devem ser bem formados

• Todas as tags escritas com letras minúsculas

• Tags devem estar convenientemente aninhadas

• Uso de tags de fechamento é obrigatório

• Elementos vazios devem ser fechados



• Documentos devem ser bem formados

• A estrutura básica do documento deve ser conforme mostrado a seguir:

<html>

<head> ... </head>

<body>

...

</body>

</html>



• Todas as tags devem ser escritas com letras minúsculas

Errado:

<DIV><P>Aqui um texto!</P></DIV>

Correto:

<div><p>Aqui um texto!</p></div>



• Tags devem estar convenientemente aninhadas

Errado:

<div><p>Aqui um <em>texto!</p></em></div>

Correto:

<div> <p> Aqui um <em> texto! </em> </p> </div>



• Uso de tags de fechamento é obrigatório

Errado:

<p>Um parágrafo.

Correto:

<p>Um parágrafo.</p>



• Elementos vazios devem ser fechados

Errado:

<br> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem”>

Correto:

<br /> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem” />


CSS

Cascading Style Sheets

CSS: Cascading Style Sheets

• Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.

• Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

• Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas.



• CSS 1.0 … CSS level 1

• Em setembro de 1994 surgiu a primeira proposta

• Em dezembro de 1996 lançada como Recomendação oficial do W3C


– Publicada em maio de 1998

– Ultima revisão: 12 de maio de 2008

• CSS 2.1 … CSS level 2 revision 1

• Candidata a Recomendação oficial do W3C em 23 de abril de 2009


– Proposta em 2001


Associar CSSs a documentos HTML

• Inline

– Através do atributo style diretamente dentro de uma marcação

<p style=“regras”>

• Interno

– Através da tag style entre as marcações <head></head> do documento HTML

<style type="text/css"> Regras </style>

• Externo

– Criar um link (ligação) para uma página que contém os estilos.

<link href="estilo.css" rel="stylesheet" type="text/css" />




{ h1 color : green }

Valor Propriedade

Seletor Declaração

CSS: Seletor classe

• Uma classe define a variação de um estilo.

• É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.

• Serve para definir vários estilos diferentes para o mesmo elemento.

• Definido pelo .(ponto)

• Exemplo:

– no CSS: h4.diferente {color:red;}

– no XHTML: <h4 class=“diferente”>Titulo</h4>


CSS: Seletor id

• Semelhante ao Seletor classe.

• A diferença é que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento.

• Definido pelo #

• Exemplo:

– no CSS: #topo {width:900px;}

– no XHTML: <div id=“topo”>…</div>


CSS: Comentários

• Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.

• Exemplo:

/* Comentário */


Validadores

• Validador de HTML, XHTML, XML e

– http://validator.w3.org

• Validador de Folhas de Estilo CSS

– http://jigsaw.w3.org/css-validator


http://validator.w3.org/

http://jigsaw.w3.org/css-validator



FIXE BEM...

“XHTML PARA ESTRUTURAR

E

CSS PARA APRESENTAR (FORMATAÇÃO).”

Técnicas e Padrões de Projeto Web 43

Referências

• Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.

www.w3.org

www.w3schools.com

www.maujor.com

www.tableless.com.br

www.cssnolanche.com.br


http://www.w3.org/

http://www.w3.org/

http://www.w3schools.com/

http://www.w3schools.com/

http://www.maujor.com/

http://www.tableless.com.br/

http://www.cssnolanche.com.br/

Dúvidas?


Education

Desvendando padrões para desenvolvimento web, base para o sucesso