Portfólio

P5_T1

Olá!  Esta  apresentação  está  sendo  feita  com  o  propósito  de  concluir  a  tarefa

P5_T1  da  disciplina  Programação  Web  I,  que  propôs  a  montagem  de  um

portfólio, contendo todos os sites/páginas da web realizados desde o primeiro

bimestre até o momento.

A  tarefa  foi  proposta  com  a  finalidade  de  evidenciar  a  evolução  dos  alunos

desde o primeiro site feito até hoje.

Colocarei os trabalhos em sequência cronológica (do mais antigo ao mais atual).

página que eu fiz

para a web. Meu

primeiro contato

com o HTML5.

Apenas coloquei

textos sem

formatação

alguma, linhas

horizontais e uma

imagem.

2

Aula 3

Não fiz muitas

coisas diferentes

nessa página em

comparação à

anterior. Ela foi

criada com a

finalidade de eu

estudar melhor

sobre as tags que

usei até aquele

momento.

comecei a estudar

propriedades

novas — aprendi a

colocar cor e

imagem de fundo,

alterar cor de

texto e algumas

tags base de texto

(h1, h2, h3, h4, h5

e h6).

4

Aula 5

comecei a estudar

sobre a tag mark

(que serve para

grifar textos,

destacá-los) e

aprendi, também,

a inserir o símbolo

de direitos

autorais (©) em

meu código.

5

Aula 6

que eu tinha

estudado sobre

tabelas.

Nos slides a seguir, estão anexados capturas de tela da primeira página da Web

que eu publiquei. Trata-se de um tutorial de como publicar seu site ou página

da Web em um provedor gratuito, e no caso, ele apresenta o método no site

infinityfree.net.

Este foi o primeiro site que eu fiz (que continha mais de uma página). A proposta era

fazer uma pequena playlist. Deveria conter três estilos musicais, e em cada estilo, três

músicas.  O  site  foi  organizado  de  forma  com  que  cada  estilo  musical  tivesse  a  sua

própria página, e deveria ter uma página principal mostrando os três estilos.

Coloquei  um  tema  no  meu  site:  os  meninos  desordeiros  (de  "As  meninas

superpoderosas" (1998)), para deixar o meu site com um toque ainda mais pessoal.

Nele, eu treinei a aplicação de atributos como cor de fundo, tabela e, pela primeira vez,

apliquei áudios em um trabalho.

Veja as capturas de tela deste trabalho a seguir:

começaram os

estudos sobre

estilização em CSS.

Foram mostrados

todos os métodos

de uso, mas aqui

coloquei apenas o

print de arquivo

externo, por ele

ser o que utilizo

mais comumente.

12

13

Nessa aula, começamos a utilizar tabelas para fazer menus no site.

fazer menus sem

precisar utilizar

tabelas — afinal,

isso é uma má

prática de

programação.

Aprendemos mais

sobre css e

estudamos

brevemente sobre

o atributo hover.

14

Menu em css

modelo em caixa

trata-se da divisão

de textos em

áreas

personalizáveis —

coloquei uma

margem com

borda pontilhada,

como exemplo.

15

Boxmodel (modelo em caixa)

A  proposta  para  a  realização  desse  site  era:  desenvolva  uma  fruta,  de  sua

escolha. E eu, como uma grande apaixonada em maracujá, decidi fazer um site

sobre ele. Criei uma empresa fictícia com uma história fictícia e tive que fazer

MUITAS pesquisas. Mas o resultado foi gratificante, naquele momento.

Confira, a seguir, capturas de tela contendo imagens do site em questão:

A  proposta  desse  site  era  desenvolver  e  oferecer  serviços  de  uma  terapia

alternativa de nossa escolha. A terapia que optei por desenvolver em meu site

foi  a  Aromaterapia,  com  uma  empresa  fictícia  chamada  Rouge  e  com  um

esquema de cores selecionado — rosa, cinza e branco.

Confira, a seguir, imagens deste trabalho:

E,  finalmente,  aplicando  os  meus  estudos  sobre  layout,  estudando  sobre  as

propriedades da tag position de CSS, juntando a maioria das coisas que eu tinha

aprendido até o momento e colocando um toque pessoal nisso tudo, criei, enfim,

um  site  em  que  eu  esteja  vendendo  minha  própria  arte;  expondo  os  meus

desenhos como exemplo e criando uma tabela de produtos e preços, criei um dos

sites que mais gostei até o momento, e com certeza, o que foi mais trabalhoso. Não

foi  uma  tarefa  fácil  escanear  todos  os  meus  desenhos  feitos  a  lápis,  nem

personalizar  caixas  com  medidas  diferentes  para  cada  campo  de  texto  ou  divisa

com  imagens/vídeos,  passei  por  dificuldades  no  meio  dele  que  quase  me  fez

desistir de muitas das minhas ideias. Mas superei tudo, e concluir este site foi uma

das melhores coisas que poderia ter acontecido naquela semana (sério, eu fiquei

muito feliz). Confira imagens desse site a seguir:

Enfim, tudo pronto! Aqui estão todos os meus trabalhos feitos com o HTML5. O que

você achou?

Bom, quanto ao que você achou, eu já não sei, mas eu acho que evoluí bastante

desde a minha primeira página da Web até aqui. Aprendi muito mais do que colocar

algumas linhas horizontais e imagens ampliadas em um código, e estou adorando

tudo isso. Mesmo nos momentos de stress, e do momento em que eu chorei de

desespero  no  código  do  meu  último  site  que  estava  dando  errado,  não  me

arrependo de nada. No final, tudo se baseou em "confiar no processo" (mesmo que

parecesse que ia dar tudo errado). Além de saber todas as tags para o HTML e o

CSS, também foi preciso ter confiança nas minhas habilidades e no meu trabalho.

Desenvolvi  muito  disso  ao  longo  desses  longos  dez  meses.  Tem  sido  uma

experiência ótima!

Obrigada.