quarta-feira, 30 de setembro de 2015

Aula 5

29/09/2015

_Escolher um quadro do Renascimento para a execução do trabalho em Photoshop e enviar um e-mail ao professor com a nossa escolha.

_Excercícios em AutoCad:


Tabuleiro de Xadrez

Realizámos este exercício para aprender as noções de reflexão, translação e rotação no programa.

- Começamos por criar duas layers, a uma delas chamamos de brancas e a outra chamamos de pretas.





- Na layer Brancas desenhamos o primeiro quadrado, recorrendo ao comando SOLID, inserimos as coordenadas dos pontos que queremos que formem o quadrado (0,0 0,1 1,0 e 1,1).




- Usamos o comando ZOOM - Extend para aumentar a aparência do quadrado.




- Para criar a primeira fila de quadrados utilizamos o comando ARRAYclassic. Seleccionamos o quadrado (na barra de comandos - select objects: "last" - enter), ajustamos os valores (Rows: 1  Columns: 4  Row Offset: 1  Columns Offset: 2).






- Para replicar esta fila, criando assim as outras, utilizamos o comando COPY - All e colocamos a cópia do lugar correto.





- Para fazer o a parte restante do tabuleiro voltamos a utilizar o comando ARRAYclassic, seleccionamos o quadrado (na barra de comandos - select objects: "all" - enter) e ajustamos os valores (Rows: 4  Columns: 1  Row Offset: 2  Columns Offset: 1)






- Para fazer os quadrados que faltam (os pretos) utilizamos o comando MIRROR, de modo a preencher os espaços vazios (na barra de comandos - select objects: "all" - enter). Escolher o eixo ao centro (na barra comandos - specify first point or mirror line: seleccionar o meio).




- Para colocar os quadrados pretos na layer "Pretas", e para mudarmos a cor desses quadrados, utilizamos o comando CHPROP (change properties) p (previous) (para selccionar os quadrados que tinhamos seleccionado no ponto anterior, aqueles que vieram preencher os espaços vazios) - Layer - Pretas (nome dado) - enter - Color - black (ou outra cor que queiramos usar).




Agora temos um tabuleiro de xadrez, em que os quadrados brancos estão numa layer e os pretos estão noutra.

- Se quiséssemos realizar este processo de uma maneira mais rápida podíamos escrever todos os comandos de seguida. Podemos recorrer a um editor de texto, no meu caso, TextWrangler. Resumidamente, escrevemos todos os comandos que executámos e as coordenadas respectivas, quando é o caso, de modo a que o programa os reconheça:



Ao copiar esta informação para a barra de comandos, e seleccionado enter, vamos obter o mesmo resultado que obtemos quando fizemos o exercício passo a passo. 



Se não nos lembrarmos de todos os passos dados, ou queiramos rever o que fizemos, ao clicar na tecla F2, vemos o histórico dos comandos.




Construção de uma planta

Neste exercício criámos um espaço, subir as suas paredes e construir um telhado.

- Primeiro, para criar um rectângulo que será a base da planta, usamos o comando REC e as coordenadas 0,0 e 3,2.



- Para fazermos a espessura das paredes usamos o comando OFFSET - 0.35 - seleccionamos o rectângulo - escolhemos o rectângulo interior.



- Agora, criamos 3 linhas para dividir as paredes, que mais a frente iremos tornar em portas. Usamos o comando XLINE - v (vertical) e colocamo-la na aresta do lado esquerdo do triângulo interior. 



- Para fazer as outras linhas usamos o comando OFFSET. Para a primeira linha, a que desenhámos anteriormente, inserimos o valor 0.1 e seleccionamos essa linha. Depois disto podemos escolher que lado fixar a linha, escolhemos o lado direito.



- Para a próxima linha  repetimos o método, desta vez com o valor 0.6 e seleccionando a linha que resultou do último comando. Fixamos novamente a linha do lado direito. Para a última linha repetimos tudo da mesma maneira, desta vez com o valor 0.7.



- Criamos uma nova layer para construirmos as paredes.

- Para criar as paredes, temos de seleccionar os pontos, e fechar a forma. Para isso usamos o comando PL. Seleccionamos os pontos pretendidos - enter. 



- Congelar a layer 0- Para subir as paredes usamos o comando Extrude - enter - seleccionamos as duas partes desenhadas - enter - inserimos o valor 2.5 - enter. 



- Alterar o modo de visualização de 2D Wireframe para Realistic.



- Para desenhar a viga da portas usamos o comando PL, seleccionamos os pontos que constituem o rectângulo superior da forma da porta - enter. 



- Recorrendo ao comando Extrude novamente, seleccionamos esse rectângulo - enter - e inserimos o valor -0.5 - enter.



- Fazemos o mesmo para a janela e no fim adicionamos a parte de parede que falta. Copiamos o paralelepipedo que usámos para a viga (comando Copy - seleccionamos o objecto) e arrastamo-lo para o local pretendido - enter.



- Agora, para criar um telhado de duas águas, criámos um novo rectângulo sobre a construção que já temos. Usamos o comando Rec e seleccionamos dois vértices duma diagonal do rectângulo superior da nossa construção. Para fazer subir o rectângulo, Extrude - enter - seleccionamos o rectângulo - 1 - enter.




- Mudar a cor do telhado.



-  Para criar as águas usamos o comando Slice - enter - seleccionamos o objecto e escrevemos 3points na barra de comandos. Seleccionam-se os dois ponto de baixo do paralelepipedo e para seleccionar o 3º ponto, na face superior, escrevemos Mid na barra de comandos - enter - e seleccionamos esse ponto - enter - enter.



- Repetimos o mesmo processo para o outro lado do telhado, e temos o produto final.


quinta-feira, 24 de setembro de 2015

Aula 4

24/09/2015


_Verificação das páginas pessoais dos alunos:

Ajustes nas páginas e revisões sobre alguns conceitos relacionados com o HTML 

- dimensionar imagem para melhor percepção na página (Photoshop)



Image - Image Size - Ajustar pixeis 



- alinhar imagem à direita 


img src="imagem.jpg" align="right"

- associar texto a uma hiperligação 


<a href="http://enderenço.com/" Texto > </a>


_Discussão sobre o trabalho em Photoshop:


Escolher um quadro renascentista, no qual uma imagem nossa tem de se integrar com harmonia.



terça-feira, 22 de setembro de 2015

Aula 3

22/09/2015

_Elaboração de uma nova página pessoal, utilizando um código padrão para todas as páginas:





Utilizámos também um ficheiro de CSS, que permite estilizar a nossa página, guardando toda essa informação num ficheiro à parte, tornando o texto HTML mais simples



Durante a aula fizemos alterações ao código padrão e ao ficheiro CSS

- cores
color : rgb (xxx,xxx,xxx) 
ou
 color : nome da cor (ex.: gray)
ou 
color : #xxxxxx



- dimensões  e posição da imagem

para mudar a posição da imagem altera-se os valores de
left e top
left: 327px; para que ficasse mais perto da margem esquerda
top: 180px; para que ficasse mais perto da margem superior
(em relação ao documento padrão)

para mudar a dimensão da imagem altera-se o valor de width que está associado à imagem, ou seja o que se encontra dentro de <img>
width=150px; para que ficasse maior
(em relação ao documento padrão)




Ajustando assim a página ao nosso gosto:



Guardámos a nossa página antiga como indexantigo.html, para diferenciar as páginas. Para aceder a essa página: http://gaudi.fa.ulisboa.pt/~20141029/indexantigo.html





quinta-feira, 17 de setembro de 2015

Aula 2

17/09/2015

_Início da criação da página pessoal:





_Introdução ao AutoCad:

Desenho de um quadrado com recurso a um script






quarta-feira, 16 de setembro de 2015

Aula 1

15/09/2015


_Apresentação da discilplina;

_Introdução aos programas que vão ser utilizados: Photoshop, AutoCad, Notepad++ e Filezilla.


_Noções sobre Notepad++ (no meu caso utilizo o programa TextWrangler, uma alternativa para o sistema operativo OS X):


Editor de código HTML (HyperText Markup Text) para criação de páginas na web;

O documento deve ser guardado em formato HTML;

Comandos:

<html></html> - define o início e o fim de um documento de HTML / linguagem de marcação
<head></head> - define o início e o fim do cabeçalho da página
<title></tilte> - define o início e o fim do título da página
<body></body> - define o início e o fim do corpo da página
<center></center> - centrar texto
<br> - fazer parágrafo/quebra de linha
<img> - inserir imagem (<img src="nome_do_ficheiro.ext">)
<width= 200px> - regular a largura de um elemento
&iacute; - reconhecer acento agudo (í)
&atilde; - reconhecer til (ã)






_Noções sobre Filezilla:

Programa de publicação de páginas na web;

Servidor: ftp.fa.ulisboa.pt
Nome de utilizador: 20141029
Senha

Página pública: criar pasta - "public_html" - arrastar para esta pasta o ficheiro HTML (ao qual temos de chamar index.html) e as imagens que são associadas a essa ficheiro

Endereço: gaudi.fa.ulisboa.pt/~20141029