Disciplinas de Computação Gráfica - Material de Apoio
01 - Referência sobre Html.
02 - Exercícios iniciais sobre Html.
03 - Exportando Favoritos.
04 - Grupo Web Standards, com convenções sobre rigor de codificação.
05 - Definições de caixa quais os conceitos associados aos atributos de caixa.
06 - Modos do DOCTYPE... estrito ou ambíguo entre IE e outros navegadores.
07 - Aprendendo CSS's...
08 - Porquê a utilização de ID em CSS's?
09 - Standards sobre ID do Consórcio World Wide Web.
10 - Tabela de DOCTYPES.
11 - Artigo do site A List Apart sobre Doctypes...
12 - e outro do mesmo site, com menus suspensos...
13 - Permissões em UNIX, para definir as permissões dos ficheiros na área pessoal...
14 - Alteração das permissões em UNIX, para alterar as permissões dos ficheiros na área pessoal (normalmente chmod -R 755 mydirectory)...
Matérias tratadas:
Marcas Estruturais: Doctype, Html, Head, Title, Body(- marca Meta HTML 4, pg. 22)
A marca identifica a versão de HTML utilizada no documento aberto, dando assim aos browsers uma indicação de como este deverá ser interpretado. Esta marca não é emparelhada, e é requerida pelas especificações 3.2 e 4 do HTML.
O seu uso típico no início do documento é:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
A parte pincipal desta marca é o elemento DTD (Document Type Definition) que indica aos browsers que o documento se ajusta a uma versão particular de HTML; no exemplo acima demonstrado dá-se a indicação de que o documento foi produzido segundo a especificação HTML 4 Transitional (a mais flexível, já que interpreta marcas entretanto em desuso; em vez de Transitional poderíamos utilizar a especificação Frameset, indicando que o código utilizado suporta frames).
A marca <HTML> é teóricamente supérfula após o Doctype, mas torna-se útili se o documento for visto em browsers antigos.
A marca <HEAD> contem informação sobre o documento, incluindo o seu título, scripts utilizados, definições de estilo e descrição do documento. Nem todos os browsers requerem a utilização desta marca mas quase todos tentam encontrar informação adicional sobre o documento dentro dela. Uma função importante da marca <HEAD> é a inclusão de informação para motores de busca e programas de indexação.
<TITLE> é uma marca requerida pela especificação de HTML 3.2 e 4, contendo um indicação breve do conteúdo do documento que é vista na barra de título do browser. Esta marca é emparelhada e inserida dentro da marca <HEAD>.
O corpo do documento é circunscrito pela marca <BODY>, a qual engloba todas as marcas, atributos e informação que se pretende apresentar na janela do browser. Esta marca deve ser disposta emparelhada, a seguir à marca <HEAD>.
A implementação mínima da especificação HTML 4 implica o uso das marcas <!DOCTYPE...> e <TITLE>, pelo que é desejável ter um ficheiro modelo com estas marcas, a partir do qual se constroem diferentes páginas.
Utilizando a marca <META ...> podemos dar informações sobre o documento, que serão interpretadas automáticamente por programas como motores de busca, ou de modo a afectar o funcionamento interno do documento (por ex: <META HTTP-EQUIV="refresh" CONTENT="5;URL=index.htm">). O atributo NAME associado à marca META e ao atributo CONTENTS, permite definir palavras-chave (NAME="Keywords") ou uma descrição (NAME="Description") que os motores de busca detectarão e apresentarão aquando da realização de uma busca.
Tabelas
<TABLE>
Atributos:
align="left, center, right"; background="url"; bgcolor="#rrggbb" ou "..."; border="n"; bordercolor="#rrggbb" ou "..."; bordercolordark="#rrggbb" ou "..."; bordercolorlight="#rrggbb" ou "..."; cellpadding="n": especifica em nº de pixeis o espaço entre o bordo da célula e o seu conteúdo; cellspacing="n": especifica o espaço entre o bordo de células adjacentes; class="...": indica que classe de estilo se aplica ao elemento <table> cols="n"; frame="{void, border, above, below, hsides, lhs, rhs, vsides, box}"; id="n": funciona associado a estilos como a class mas apenas pode ser usado uma vez; rules="{none, rows, cols, groups, all}": especifica linhas limite das células; style="..."; summary="...": especifica texto descritivo do conteúdo da tabela; title="...";
<TD>
Atributos:
abbr="...": especifica texto abreviado que substitui momentâneamente o conteúdo da célula; axis="...": especifica de modo abreviado o nome da célula; axes="...": listagem de valores de axis associados à célula; align="{left, right, center, char}": alinhamento horizontal - se align="char", o alinhamento far-se-à sobre um caracter específico (ex.: separador decimal); char="...": especifica o caracter sobre o qual se alinha o conteúdo da célula; o valor por omissão é o separador decimal; charoff="n": nº de caracteres contando da esquerda para definição do alinhamento.
Computação Gráfica
Grandes Etapas:1 Trabalhando em rede
1.1 Login e acesso a área no servidor
1.1.1 Através do Windows Explorer
1.1.2 Através do Smart FTP
1.1.3 Abrindo uma ligação em Telnet
1.2 Publicando informação a partir do servidor
1.2.1 Dando acesso a ficheiros
1.2.2 Tapando o acesso aos ficheiros com index.html
1.2.3 Produzindo informação no index.html
1.2.4 Criando ligações no index.html para ficheiros interpretados pelo browser / navegador
1.2.5 Criando ligações para ficheiros não interpretados pelo browser / navegador
2 Produzindo uma página Internet
2.1 Marcas estruturais e protocolos, estilos lógicos
2.2 Criando ligações e imagens
2.3 Produzindo tabelas e listas
2.4 Produzindo frames
2.5 Formatando com CSS
3 Edição de imagem em Photoshop
3.1 Dimensão e modo de imagem
3.2 Dimensão da tela
3.3 Criação de vectores
3.4 Técnicas de selecção
3.5 Trabalhando com layers
3.6 Ajustando a cor
3.7 Guardando para Internet
3.8 Produzindo a montagem de um panorama
3.8 Resolução de impressão
4 Trabalhando com Autocad
4.1 Interface e comandos recorrentes de produção e edição4.2 Utilização de ucs's
4.3 Criação de layouts
4.3.1 Definição de escala no pagesetup
4.3.2 Definição de escala nas janelas
4.3.3 Aplicação de cotas nos layouts
4.3.3.1 Definição de variáveis (DIMASSOC) e estilos de cotagem para diferentes escalas de viewpport
4.3.3.2 Aplicação de cotas
4.4 Impressão
4.4.1 Definição de impressora (Adobe EPS)
4.4.2 Definição do padrão de impressão designado ou dependente da cor (CONVERTPSTYLES - *.STB ou *.CTB e CONVERTCTB)
4.4.3 Definido uma tabela de estilos de impressão dependentes da cor (*.CTB)
4.4.4 Imprimindo para EPS
4.4.5 Abrindo o ficheiro EPS e atribuindo-lhe uma dimensão e resolução
5 Modelação 3d
5.1 Digitalizando uma maquete física com Photomodeler
5.2 Racionalização da geometria em Autocad
5.3 Importando e trabalhando com 3ds
Seminários
1 Trabalhar com GoogleEarth
1.1 Manusear o ponto de vista
1.2 Criar e exportar atalhos
1.3 A comunidade Keyhole
2 Produzir filmes VR
2.1 Produzir panoramas VR
2.2 Produzir Cenas VR
3 Trabalhar com ficheiros externos em Autocad e Archicad
3.1 Ligando ficheiros externos
3.2 Gestão de ficheiros externos
3.3 Exportação e importação de ficheiros entre aplicações
4 Trabalhar com SketchUp
4.1 Ferramentas do SketchUp
4.2 Importando e exportando do SketchUp para o GoogleEarth
4.3 Importando do SketchUp em Archicad
Exemplos de realizações
1. Um atalho de GoogleEarth para um modelo 3d
2. Um exemplo de impressão e publicação online por Nelson Leão
3. Um exemplo de panoramas VR em Itália
4. Um exemplo de modelação 3d em Photomodeler - Autocad - 3dsMax por Harald Kofler