Tópicos Avançados: Desenvolvimento Web

Lista de Exercícios, Parte 1

edysegura — Mon, 16 Nov 2009 21:50:49 +0000

Segue abaixo a primeira lista de exercícios como complemento para os estudos da disciplina sobre desenvolvimento web client-side.

1) A partir de um formulário calcular o IMC – Índice de Massa Corporal e informar ao usuário se o mesmo está magro, normal, sobrepeso ou obeso.

2) Desenolver uma aplicação web client-side para gerenciar um carrinho de compras simples. As informações necessárias a serem cadastradas no carrinho são: Nome do Produto, Valor e no final o total com a somatória de todos os produtos cadastrados. Se for removido algum produto o total deverá ser atualizado.

3) Desenvolver uma aplicação web client-side que a partir da data de nascimento se obtenha a quantidade em anos. ex.: 07/09/1961 = 48 anos.

4) Desenvolver um formulário em XHTML que altere o título da página conforme foi informado no formulário. Para que isso aconteça é só usar a instrução document.title.

JavaScript

edysegura — Mon, 26 Oct 2009 15:00:06 +0000

JavaScript é uma linguagem de programação script, criada em 1995 por Brendan Eich, para acrescentar interatividade às páginas da web. Graças ao JavaScript e a metodologia Ajax podemos construir verdadeiras aplicações web como se fossem aplicações desktop.

E para darmos início ao nosso estudo sobre JavaScript segue alguns links abaixo:

Exercícios sobre tabelas HTML

edysegura — Sun, 11 Oct 2009 16:33:24 +0000

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.

Tabelas no Desenvolvimento Web

edysegura — Mon, 05 Oct 2009 15:00:22 +0000

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

Treinamento pré-prova

edysegura — Fri, 25 Sep 2009 18:33:04 +0000

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

Lista de exercícios

edysegura — Fri, 25 Sep 2009 18:20:00 +0000

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

edysegura — Mon, 14 Sep 2009 15:01:33 +0000

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:

Exercícios

edysegura — Sun, 06 Sep 2009 18:10:35 +0000

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

Notícias Interessantes

edysegura — Mon, 31 Aug 2009 20:00:16 +0000

Notícias e artigos interessantes que estão relacionadas com a nossa disciplina:

Seletores CSS

edysegura — Mon, 31 Aug 2009 19:50:05 +0000

Em nossas próximas aulas iremos trabalhar com os seletores CSS. Conhecer os seletores e saber combiná-los de diferentes maneiras coloca nas mãos do desenvolvedor uma poderosa ferramenta de estilização e formatação.

Conhecer e saber empregar seletores ajuda a manter o código XHTML bem mais limpo, evitando o uso desnecessário de elementos e atributos extras na marcação.

Para se aprofundar no assunto visite os links abaixo:

Visitem também o blog CSS no Lanche, uma ótima fonte de informações para quem está iniciando com as CSS.