Profari

Diagramação de páginas da web e o recurso Tableless

profari — Tue, 23 Nov 2010 17:37:48 +0000

Podemos traduzir “Tableless” como “Sem Tabelas” ou “Menos Tabelas”. Não se trata de tecnologia, mas de uma prática. Sem tabelas ou menos tabelas, porque assim recomenda o W3C – órgão responsável por padrões na Web – para a diagramação de páginas de sites. A diagramação com tabelas, como se praticou no passado, não é de fácil execução; e tabelas não foram feitas para diagramar, criar leiautes, mas para armazenar dados ou componentes que, de modo adjacente, se arranjam melhor dentro de uma tabela, como coleções de imagens ou componentes de formulário; ou para organizar dados em linhas e colunas, formando registros, seja de modo estático ou dinâmico. O recurso fundamental para a prática de Tableless é a aplicação de CSS (sigla para Cascading Style Sheets – Folhas de Estilo em Cascata). Através dessa linguagem é possível formatar e posicionar elementos em uma página.

Segue, como exemplo, uma diagramação simples sem imagens e sem tabelas e seu código. Este post serve de apoio às aulas de Web com Dreamweaver. Uma análise do código no Dreamweaver servirá de bom auxílio ao aprendizado.

► Código

Leiaute

► Imagem

Arnaldo Antunes

profari — Thu, 02 Sep 2010 16:10:26 +0000

Aproveito para homenagear Arnaldo Antunes neste dia de seu aniversário. Arnaldo Antunes emite um fluxo de poesia constante, desde 02/09/1960.

Assim, cabe um exercício de inserção de texto no Fireworks, background com imagem e a foto do poeta-músico, trabalhada com efeito “fade image”.

Abraços.

Ari.

Exercício Yin-Yang

profari — Thu, 02 Sep 2010 14:50:13 +0000

Neste exercício, feito no Fireworks, os recursos principais utilizados são: circulos vetoriais, ferramenta faca, rotação a 90º, cor de tela, alinhamentos entre objetos e na tela. Fonte com efeitos (filtros) e clonagem para sobreposição (na assinatura j. a. pelegrina).

Abraços.

Ari.

Exercício – Símbolos Sagrados

profari — Thu, 02 Sep 2010 14:32:43 +0000

Um exercício no Fireworks que envolve vetores e bitmaps, abrangendo vários recursos, como gradientes, filtros e otimização de imagens; flips horizaontal, vertical e transformação numérica a 45º.

Abraços.

Ari.

Rosa dos Ventos

profari — Thu, 02 Sep 2010 14:10:21 +0000

Um exercício para treinar as ferramentas vetoriais do Fireworks: uma rosa-dos-ventos simples.

Construir uma “rosa-dos-ventos” igual à postada aqui.

A fonte do título é algerian, o restante é arial. O “j. a. pelegrina” à direita inferior não deve ser colocado, pois é minha assinatura.

São dois tons de cinza com fundo gradiente.

O círculo maior tem 76% da opacidade do cinza “#cccccc”.

O círculo menor tem os 100% de opacidade do mesmo cinza.

O gradiente é constituido de cinza “#333333″ e branco.

Para chegar às dimensões (altura, largura, diâmetro) importe a imagem para o Fireworks e copie as medidas.

O fundo tem linha cinza”#999999″ e os círculos têm linha branca.

Abaixo do título, envolvendo o nome, nº e turma há duas linhas horizontais.

Coloquem o nome completo, número e a turma nos respectivos campos.

O arquivo deve ser enviado em formato PNG para meu e-mail.

Abraços.

Ari.

TI44M e o Projeto com a ONG Girassol.

profari — Sun, 13 Sep 2009 13:58:25 +0000

Em meados deste mês de setembro/09 iniciaremos o projeto do site da ONG Girassol. Os alunos da TI44M serão os desenvolvedores. A sorte está lançada.

Marketing na Web

profari — Sun, 13 Sep 2009 13:55:22 +0000

MKT Web foi um sucesso com a TI46N. Um projeto com Natal Iluminado da Associação Comercial estará em andamento logo, logo. Os alunos estão entusiasmados.

Excel

profari — Sun, 13 Sep 2009 13:50:28 +0000

Terça, dia 15/09/2009, iniciaremos uma nova turma de Excel Avançado. Não se deve desprezar o Excel. Ele é poderoso e há muito mercado de trabalho para quem o conhece.

A TI44M está chegando!

profari — Fri, 31 Jul 2009 13:33:05 +0000

A TI44M e a TI46N estão chegando! Estou ansioso. Mais duas turmas do Senac Santo Amaro se preparando para o futuro.