Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005.

Apresentação em tema: "Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005."— Transcrição da apresentação:

1 Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005

2 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) Uma página web não é mais do que um ou mais ficheiros de texto, com ficheiros adicionais de suporte (eg imagens, etc)

3 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) 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! 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) Hoje em dia é muito fácil criar um espaço na internet (ex: blogs)

4 Evolução da web Inicialmente apenas quem sabia bater código é que podia ter páginas pessoais sem pagar ou ajuda de outros Inicialmente apenas quem sabia bater código é que podia ter páginas pessoais sem pagar ou ajuda de outros HTML XHTML CSS1 CSS2 PHP ASP

5 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 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 Possibilita a integração de equipas tendo em vista uma colaboração positiva entre creativos, técnicos e gestores de conteúdos

6 CMS e a mudança de paradigma Exemplo: Exemplo:

7 CMS e a mudança de paradigma

8 Evolução da web Inicialmente apenas quem sabia bater código é que podia ter páginas pessoais sem pagar ou ajuda de outros 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 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 O aparecimento de blogs (micro-CMS) permite qualquer pessoa ter o seu espaço pessoal ou colectivo

9 Blogs – web ao alcance de todos Um blog não é mais do que um micro- CMS em que apenas é preciso: Um blog não é mais do que um micro- CMS em que apenas é preciso: Escrever texto(s), praticamente como se fosse num editor de texto comum Escrever texto(s), praticamente como se fosse num editor de texto comum Saber editar imagens: Saber editar imagens: Reduzir até um tamanho aceitável Reduzir até um tamanho aceitável Formatos adequados: JPEG, GIF & PNG Formatos adequados: JPEG, GIF & PNG Fazer upload de imagens Fazer upload de imagens

10 Software pré-instalado em servidores Software pré-instalado em servidores Grátis ou comercial Grátis ou comercial Mais simples Mais simples Software instalado pela pessoa num espaço num servidor (alojamento) Software instalado pela pessoa num espaço num servidor (alojamento) Menos simples mas mais poderoso Menos simples mas mais poderoso Normalmente pago a menos que se tenha alojamento grátis Normalmente pago a menos que se tenha alojamento grátis Melhor solução a longo prazo Melhor solução a longo prazo Blogs – Diferentes opções

11 Existem vários pacotes que se podem instalar em servidores: Existem vários pacotes que se podem instalar em servidores: Movable Type (pago para uso não comercial) Movable Type (pago para uso não comercial) Wordpress (opensource) Wordpress (opensource) b2evolution (opensource) b2evolution (opensource) Blogs – Vários softwares...

12 Criando um blog - Exemplo

13

14

15

16

17 Criando um blog – Inserindo uma entrada

18

19 Criando um blog – Editando uma imagem

20 Criando um blog – Inserindo uma imagem

21 Criando um blog – finalizando a entrada

22 Criando um blog – A primeira entrada!

23 Blogs – A nova página pessoal?

24 Blogs – Um início simples para voos mais altos Primeiro passo para familiarização com: Primeiro passo para familiarização com: o conceito de CMS o conceito de CMS Edição de código para alterações simples (ex: alterar links) 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: Primeiro passo para aprender técnicas para melhorar ou implementar novas capacidades no site: Layout (ex: CSS) Layout (ex: CSS) Multiplos editores Multiplos editores......

25 Ajustando o Blog...

26 Nomes e links úteis Hosted webloggers: Hosted webloggers: Blogger - http://www.blogger.com/ (grátis) Blogger - http://www.blogger.com/ (grátis)http://www.blogger.com/ Blogsome - http://www.blogsome.com/ (grátis) Blogsome - http://www.blogsome.com/ (grátis)http://www.blogsome.com/ TypePad - http://www.typepad.com/ ($-$$) TypePad - http://www.typepad.com/ ($-$$)http://www.typepad.com/ Weblog - http://weblog.com.pt/ (Português, $-$$) Weblog - http://weblog.com.pt/ (Português, $-$$)http://weblog.com.pt/ 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)

27 Aprofundando o tema... HTML (linguagem web principal) HTML (linguagem web principal) http://www.w3schools.com/html/ http://www.w3schools.com/html/ http://www.w3schools.com/html/ http://www.davesite.com/webstation/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/ http://www.w3.org/MarkUp/Guide/ Cascaded Style Sheets (CSS) – Layout das páginas Cascaded Style Sheets (CSS) – Layout das páginas http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp http://www.echoecho.com/css.htm http://www.echoecho.com/css.htm http://www.echoecho.com/css.htm

28 Thats all folks! Too much internet can be harmful...