Webdesigning em 30 minutos

Bruno AfonsoBruno Afonso

2 Setembro 20052 Setembro 2005

Comunicar Ciência 2005Comunicar Ciência 2005

O que é uma página web?O que é uma página web?

Uma página web não é mais do que um Uma página web não é mais do que um ou mais ficheiros de texto, com ficheiros ou mais ficheiros de texto, com ficheiros adicionais de suporte (eg imagens, etc)adicionais de suporte (eg imagens, etc)

Páginas Web - ferramentasPáginas Web - ferramentas

Uma página web não é mais do que um Uma página web não é mais do que um ou mais ficheiros de texto, com ficheiros ou mais ficheiros de texto, com ficheiros adicionais de suporte (ex: imagens, etc)adicionais de suporte (ex: imagens, etc)

Existem ferramentas apropriadas Existem ferramentas apropriadas consoante as necessidades das pessoas: consoante as necessidades das pessoas: Não é necessariamente complicado!Não é necessariamente complicado!

Hoje em dia é muito fácil criar um espaço Hoje em dia é muito fácil criar um espaço na internet (ex: blogs)na internet (ex: blogs)

Evolução da webEvolução da web

Inicialmente apenas quem sabia “bater Inicialmente apenas quem sabia “bater código” é que podia ter páginas pessoais código” é que podia ter páginas pessoais sem pagar ou ajuda de outrossem pagar ou ajuda de outrosHTML

HTML

XHTML

XHTMLCSS1CSS1

CSS2CSS2

PHPPHP

ASPASP

CMS’ e a mudança de paradigmaCMS’ e a mudança de paradigma

Content Management System apareceram Content Management System apareceram com a mudança de paradigma que o com a mudança de paradigma que o conteúdo e o layout devem ser conteúdo e o layout devem ser independentesindependentes

Possibilita a integração de equipas tendo Possibilita a integração de equipas tendo em vista uma colaboração positiva entre em vista uma colaboração positiva entre creativos, técnicos e gestores de creativos, técnicos e gestores de conteúdosconteúdos

CMS’ e a mudança de paradigmaCMS’ e a mudança de paradigma

Exemplo:Exemplo:

CMS’ e a mudança de paradigmaCMS’ e a mudança de paradigma

Evolução da webEvolução da web

Inicialmente apenas quem sabia “bater Inicialmente apenas quem sabia “bater código” é que podia ter páginas pessoais código” é que podia ter páginas pessoais sem pagar ou ajuda de outrossem pagar ou ajuda de outros

Com o surgimento de CMS – Content Com o surgimento de CMS – Content Managemente System – qualquer leigo Managemente System – qualquer leigo informático pode gerir conteúdosinformático pode gerir conteúdos

O aparecimento de blogs (micro-CMS) O aparecimento de blogs (micro-CMS) permite qualquer pessoa ter o seu espaço permite qualquer pessoa ter o seu espaço pessoal ou colectivopessoal ou colectivo

Blogs – web ao alcance de todosBlogs – web ao alcance de todos

Um blog não é mais do que um micro-Um blog não é mais do que um micro-CMS em que apenas é preciso:CMS em que apenas é preciso:

Escrever texto(s), praticamente como se Escrever texto(s), praticamente como se fosse num editor de texto comumfosse num editor de texto comum

Saber editar imagens:Saber editar imagens: Reduzir até um tamanho aceitávelReduzir até um tamanho aceitável Formatos adequados: JPEG, GIF & PNGFormatos adequados: JPEG, GIF & PNG

Fazer upload de imagensFazer upload de imagens

Software pré-instalado em servidoresSoftware pré-instalado em servidores Grátis ou comercialGrátis ou comercial Mais simplesMais simples

Software instalado pela pessoa num Software instalado pela pessoa num espaço num servidor (alojamento)espaço num servidor (alojamento) Menos simples mas mais poderosoMenos simples mas mais poderoso Normalmente pago a menos que se tenha Normalmente pago a menos que se tenha

alojamento grátisalojamento grátis Melhor solução a longo prazoMelhor solução a longo prazo

Blogs – Diferentes opçõesBlogs – Diferentes opções

Criando um blog - ExemploCriando um blog - Exemplo

Criando um blog - ExemploCriando um blog - Exemplo

Criando um blog - ExemploCriando um blog - Exemplo

Criando um blog - ExemploCriando um blog - Exemplo

Criando um blog - ExemploCriando um blog - Exemplo

Criando um blog – Inserindo uma Criando um blog – Inserindo uma entradaentrada

Criando um blog – Inserindo uma Criando um blog – Inserindo uma entradaentrada

Criando um blog – Editando uma Criando um blog – Editando uma imagemimagem

Criando um blog – Inserindo uma Criando um blog – Inserindo uma imagemimagem

Criando um blog – finalizando a Criando um blog – finalizando a entradaentrada

Criando um blog – A primeira Criando um blog – A primeira entrada!entrada!

Blogs – A nova página pessoal?Blogs – A nova página pessoal?

Blogs – Um início simples para voos Blogs – Um início simples para voos mais altosmais altos

Primeiro passo para familiarização com:Primeiro passo para familiarização com: o conceito de CMSo conceito de CMS Edição de código para alterações simples (ex: alterar Edição de código para alterações simples (ex: alterar

links)links)

Primeiro passo para aprender técnicas para Primeiro passo para aprender técnicas para melhorar ou implementar novas capacidades no melhorar ou implementar novas capacidades no site:site: Layout (ex: CSS)Layout (ex: CSS) Multiplos editoresMultiplos editores ... ...

Ajustando o Blog...Ajustando o Blog...

Nomes e links úteisNomes e links úteis

Hosted webloggers:Hosted webloggers: Blogger - Blogger - http://http://www.blogger.comwww.blogger.com/ / (grátis)(grátis) Blogsome - Blogsome - http://http://www.blogsome.comwww.blogsome.com// (grátis) (grátis) TypePad - TypePad - http://http://www.typepad.comwww.typepad.com// ($-$$) ($-$$) Weblog - Weblog - http://http://weblog.com.ptweblog.com.pt// (Português, $-$$) (Português, $-$$)

Edição de imagens:Edição de imagens: Paint Shop Pro ($)Paint Shop Pro ($) Adobe Photoshop ($$$)Adobe Photoshop ($$$) Gimp (grátis, opensource)Gimp (grátis, opensource)

Aprofundando o tema...Aprofundando o tema...

HTML (linguagem web principal)HTML (linguagem web principal) http://www.w3schools.com/html/http://www.w3schools.com/html/ http://www.davesite.com/webstation/html/http://www.davesite.com/webstation/html/ http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/

Cascaded Style Sheets (CSS) – Layout Cascaded Style Sheets (CSS) – Layout das páginasdas páginas http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp http://www.echoecho.com/css.htmhttp://www.echoecho.com/css.htm

That’s all folks!That’s all folks!

Too much internet can be harmful...Too much internet can be harmful...