Webdesigning em 30 minutos

Webdesigning em 30
minutos
Bruno Afonso
2 Setembro 2005
Comunicar Ciência 2005
O que é uma página web?

Uma página web não é mais do que um
ou mais ficheiros de texto, com ficheiros
adicionais de suporte (eg imagens, etc)
Páginas Web - ferramentas



Uma página web não é mais do que um
ou mais ficheiros de texto, com ficheiros
adicionais de suporte (ex: imagens, etc)
Existem ferramentas apropriadas
consoante as necessidades das pessoas:
Não é necessariamente complicado!
Hoje em dia é muito fácil criar um espaço
na internet (ex: blogs)
Evolução da web

Inicialmente apenas quem sabia “bater
código” é que podia ter páginas pessoais
sem pagar ou ajuda de outros
CMS’ e a mudança de paradigma


Content Management System apareceram
com a mudança de paradigma que o
conteúdo e o layout devem ser
independentes
Possibilita a integração de equipas tendo
em vista uma colaboração positiva entre
creativos, técnicos e gestores de
conteúdos
CMS’ e a mudança de paradigma

Exemplo:
CMS’ e a mudança de paradigma
Evolução da web



Inicialmente apenas quem sabia “bater
código” é que podia ter páginas pessoais
sem pagar ou ajuda de outros
Com o surgimento de CMS – Content
Managemente System – qualquer leigo
informático pode gerir conteúdos
O aparecimento de blogs (micro-CMS)
permite qualquer pessoa ter o seu espaço
pessoal ou colectivo
Blogs – web ao alcance de todos

Um blog não é mais do que um microCMS em que apenas é preciso:
Escrever texto(s), praticamente como se
fosse num editor de texto comum
 Saber editar imagens:

Reduzir até um tamanho aceitável
 Formatos adequados: JPEG, GIF & PNG


Fazer upload de imagens
Blogs – Diferentes opções

Software pré-instalado em servidores
Grátis ou comercial
 Mais simples


Software instalado pela pessoa num
espaço num servidor (alojamento)
Menos simples mas mais poderoso
 Normalmente pago a menos que se tenha
alojamento grátis
 Melhor solução a longo prazo

Criando um blog - Exemplo
Criando um blog - Exemplo
Criando um blog - Exemplo
Criando um blog - Exemplo
Criando um blog - Exemplo
Criando um blog – Inserindo uma
entrada
Criando um blog – Inserindo uma
entrada
Criando um blog – Editando uma
imagem
Criando um blog – Inserindo uma
imagem
Criando um blog – finalizando a
entrada
Criando um blog – A primeira
entrada!
Blogs – A nova página pessoal?
Blogs – Um início simples para
voos mais altos

Primeiro passo para familiarização com:



o conceito de CMS
Edição de código para alterações simples (ex: alterar
links)
Primeiro passo para aprender técnicas para
melhorar ou implementar novas capacidades no
site:



Layout (ex: CSS)
Multiplos editores
...
Ajustando o Blog...
Nomes e links úteis

Hosted webloggers:





Blogger - http://www.blogger.com/ (grátis)
Blogsome - http://www.blogsome.com/ (grátis)
TypePad - http://www.typepad.com/ ($-$$)
Weblog - http://weblog.com.pt/ (Português, $-$$)
Edição de imagens:



Paint Shop Pro ($)
Adobe Photoshop ($$$)
Gimp (grátis, opensource)
Aprofundando o tema...

HTML (linguagem web principal)
http://www.w3schools.com/html/
 http://www.davesite.com/webstation/html/
 http://www.w3.org/MarkUp/Guide/


Cascaded Style Sheets (CSS) – Layout
das páginas
http://www.w3schools.com/css/default.asp
 http://www.echoecho.com/css.htm

That’s all folks!
Too much internet can be harmful...