webdesigning em 30 minutos bruno afonso 2 setembro 2005 comunicar ciência 2005
TRANSCRIPT
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...