Tópicos Avançados: Desenvolvimento Web

Estruture em (X)HTML e formate em CSS as tabelas que estão representadas nas figuras abaixo. Cliquem na figura para aumentar.

A imagem de checked/checado pode ser encontrada aqui: http://files.edysegura.com/aulas/website/icon-check.gif

Cor da primeira linha: #F4F9FD
Cor da segunda linha: #FFF
Cor da linha quando o mouse estiver por cima (hover): #F2F2F2
Cor do texto na sessão cabeçalho da tabela (thead): #7A9FB9
Cor do preço na sessão rodapé (tfoot): #945162
Cor do texto na sessão corpo da tabela (tbody): #737E84

Obs: As cores e imagem são apenas sugestões. Utilize a sua criatividade para alterar as cores e a imagem e a formate um novo tema! Lembre-se que na segunda tabela é necessário o uso de rowspan e colspan.

O elemento table tem a finalidade de apresentar dados tabulares como, por exemplo, informações sobre pesos, medidas, preços, estatísticas e tudo que for dados tabulares. Tabelas devem ser utilizadas para organizar e apresentar dados.

Este será o nosso foco nas próxima aulas, aprender a usar tabelas para o que elas realmente foram criadas: apresentar dados tabulares; e não para estruturar layouts. Pensando nisso leia o parágrafo abaixo:

“Diga-me como usa as tabelas na sua marcação (X)HTML e lhe direi que espécie de desenvolvedor web você é”, Maurício Samy Silva

Veja no link abaixo o que podemos conseguir com uma tabela Web Standards:

• CSS Table Gallery

Utilizando os conceitos aprendidos em sala de aula sobre XHTML e CSS estruture o formulário de login abaixo e formate utilizando as imagens de background que podem ser encontradas aqui: imagens.zip

Utilizando os conceitos aprendidos em sala de aula sobre XHTML e CSS estruture o formulário a seguir e desenvolva 4 estilos de formatação para o mesmo. Atenção: Cada imagem é o resultado de um tema. Utilize a opção para alternar entre os estilos conforme aprendemos em aula.

Orientações:

• Clique na imagens para ampliá-las.
• Faça download das imagens utilizadas nas formatações do formulário clicando aqui.
• Para cada layout foi disponibilizado uma série de cores em hexadecimal, são apenas sugestões, utilize sua criatividade para alterá-las se achar necessário.

Formulários são a base para o desenvolvimento de aplicações web que tem por objetivo oferecer uma maior interatividade com os usuários. Entre os vários usos de formulários podemos citar o envio de mensagens, pesquisas e cadastros em geral.

Segundo Diego Eis o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com a web. Ele postou um vídeo de como desenvolver um formulário em 8 minutos.

Para os interessados em aprofundar no assunto segue alguns links abaixo:

• Construindo Formulários Acessíveis
• Formulários com CSS
• CSS-Based Forms
• Applying CSS to forms
• The Form Garden
• Forms

Em razão do feriado de 7 de setembro, disponibilizo a seguir os exercícios que seriam dados em aula. Estes  devem ser entregues em nossa próxima aula, dia 14/09/2009.

Exercícios

1) Estruture e condifique o conteúdo abaixo em um documento web com a estrutura de títulos, sub-títulos e parágrafos:

Desenvolvimento Web – Client Side
O desenvolvimento web client side é composto principalmente por três tecnologias conhecidas com o tripé do desenvolvimento web. Veja a descrição dessas tecnologias a abaixo.

HTML/XHTML
Pesquisar e descrever o que você entende sobre HTML e XHTML.

CSS
Pesquisar e descrever o que você entende sobre CSS.

JavaScript
Pesquisar e descrever o que você entende sobre JavaScript.

2) Desenvolver dois temas CSS para a estrutura acima contendo espaçamentos internos, cores, imagens de fundo e o uso da pseudo-classe :hover

CSS

CSS é a abreviação para os termos em inglês Cascading Style Sheets, traduzido para o português como Folhas de Estilo em Cascata. Cabem às CSS todas as funções de apresentação de um documento web, tais como fontes, cores e espaçamento. Para um estudo mais detalhado sobre CSS visitem o site do Maujor. Este site é considerado por muitos e inclusive por mim, como uma referência nacional sobre às CSS. Vale a pena visitar inúmeras vezes.

Abraços a todos.

Como todo e qualquer ambiente de desenvolvimento de software o ambiente de desenvolvimento para web também possui ferramentas para uma boa produtividade e auxílio na codificação e para as mais diversas atividades relacionados ao desenvolvimento web.

Em nosso curso iremos utilizar as seguintes ferramentas:

• Mozilla Firefox – Navegador usado entre 8 a cada 10 desenvolvedores web.
• Extensões do Firefox:

• Web Developer Toolbar – Essencial ao desenvolvimento web.
• Firebug – Outra extensão essecial ao desenvolvimento web.
• HTML Validator – Validação de marcações HTML.
• CodeBurner – Referência sobre os elementos do HTML e propriedades do CSS.
• MeasureIt – Medições gerais.

• Editor Notepad++ – Edição de arquivos.
• Aptana – IDE para desenvolvimento Web.
• Eclipse com WTP – IDE para desenvolvimento web.

As ferramentas citadas serão utilizadas a medida que forem necessárias, de acordo com o avanço da disciplina.