![Page 1: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/1.jpg)
Webdesigning em 30 minutos
Bruno AfonsoBruno Afonso
2 Setembro 20052 Setembro 2005
Comunicar Ciência 2005Comunicar Ciência 2005
![Page 2: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/2.jpg)
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)
![Page 3: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/3.jpg)
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)
![Page 4: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/4.jpg)
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
![Page 5: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/5.jpg)
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
![Page 6: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/6.jpg)
CMS’ e a mudança de paradigmaCMS’ e a mudança de paradigma
Exemplo:Exemplo:
![Page 7: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/7.jpg)
CMS’ e a mudança de paradigmaCMS’ e a mudança de paradigma
![Page 8: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/8.jpg)
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
![Page 9: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/9.jpg)
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
![Page 10: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/10.jpg)
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
![Page 11: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/11.jpg)
Criando um blog - ExemploCriando um blog - Exemplo
![Page 12: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/12.jpg)
Criando um blog - ExemploCriando um blog - Exemplo
![Page 13: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/13.jpg)
Criando um blog - ExemploCriando um blog - Exemplo
![Page 14: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/14.jpg)
Criando um blog - ExemploCriando um blog - Exemplo
![Page 15: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/15.jpg)
Criando um blog - ExemploCriando um blog - Exemplo
![Page 16: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/16.jpg)
Criando um blog – Inserindo uma Criando um blog – Inserindo uma entradaentrada
![Page 17: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/17.jpg)
Criando um blog – Inserindo uma Criando um blog – Inserindo uma entradaentrada
![Page 18: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/18.jpg)
Criando um blog – Editando uma Criando um blog – Editando uma imagemimagem
![Page 19: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/19.jpg)
Criando um blog – Inserindo uma Criando um blog – Inserindo uma imagemimagem
![Page 20: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/20.jpg)
Criando um blog – finalizando a Criando um blog – finalizando a entradaentrada
![Page 21: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/21.jpg)
Criando um blog – A primeira Criando um blog – A primeira entrada!entrada!
![Page 22: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/22.jpg)
Blogs – A nova página pessoal?Blogs – A nova página pessoal?
![Page 23: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/23.jpg)
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 ... ...
![Page 24: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/24.jpg)
Ajustando o Blog...Ajustando o Blog...
![Page 25: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/25.jpg)
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)
![Page 26: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/26.jpg)
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
![Page 27: Webdesigning em 30 minutos Bruno Afonso 2 Setembro 2005 Comunicar Ciência 2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/552fc0f8497959413d8b552a/html5/thumbnails/27.jpg)
That’s all folks!That’s all folks!
Too much internet can be harmful...Too much internet can be harmful...