segunda-feira, maio 30, 2005

Sites de Alojamento de Fotos...

Ali na barrinha ao lado estão uma série de links para vários servidores de alojamento gratuito de imagens que permitem links e alguns protecção com passwords.

Pelo o que a minha amiga Bekas experimentou, o flickr é uma boa opção!

Obrigado Bekas pelo contributo!

Quanto a todos os que querem partilhar fotos... toca a experimentar e depois a dar as vossas opiniões.

Consoante eu for encontrando estes sites e testanto vou acrescentando à lista! Quem souber de mais com qualidade faça o favor de partilhar aqui com o pessoal!

Beijinhos
Sandra

sexta-feira, maio 27, 2005

Problemas dos Acentos (Versão Editada)

Este tema não é novo e já o resolvi de várias maneiras, por isso vamos lá ver as hipóteses que têm e ver quais é que funcionam!

Aviso já que este post em particular pode sofrer várias edições consoante vão experimentando as dicas e vendo os resultados.

Solução 1:



Pode ser um problema na codificação que estão a usar para o vosso blog. Ou seja estão a usar o código de uma lingua estrangeira não compatível como o nosso código. Andei a pesquisar e reparei que nos blogs em que o problema dos acentos ocorre têm a codificação definida da seguinte forma:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257">


mas o que deviam ter era (ou pelo menos pode ser):

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

ou então:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

ou então:
<meta http-equiv="content-type" content="text/html; charset=<$BlogEncoding$>">


Não se esqueçam que este código tem de ser incluido dentro do objecto <HEAD>...</HEAD>! Se não encontrarem a tag no vosso código introduzam a que vos sugeri imediatamente antes da linha com </HEAD>.

Experimentem lá uma destas a vêr se resulta!

Solução 2:



Registam-se no blogger e acedem ao vosso blog. Seleccionam o separador Settings e depois a opção Formatting. Nesta página têm várias opções, mas as que interessam são:

Date Language: Portuguese (Portugal)
Encoding: Western (ISO-8859-1) ou Universal (Unicode UTF-8)

Depois gravem as alterações e republiquem o blog todo (usem a opção Republish Entire Blog)

Neste caso escusam de mexer no template.

Esperimentem e digam de vossa justiça. Não se esqueçam de escrever um novo post com acentos para ver se o problema ficou corrigido para os novos posts.

PS: Com os meus testes consegui ficar eu com problemas de acentos! Mas consegui resolvê-los usando esta segunda solução e escolhendo o Universal (Unicode UTF-8) no vosso caso vejam a que funciona...

quinta-feira, maio 26, 2005

Como alterar a cor do texto?! E o tipo de letra?! E o tamanho?!

Mais uma vez a resposta para esta questão não é imediata. Se queremos alterar uma parte de texto de um post é uma coisa. Se queremos fazer uma alteração a título definitivo em alguma área do blog é outra. E porquê?

Porque na primeira, basta a introdução de código no post em questão e ficamos com o assunto resolvido; para a segunda temos de alterar o template e isso já não é imediato.

Vamos então ver o primeiro caso: Alterar a letra num post!

A forma mais fácil de fazer este tipo de alteração é usando o objecto FONT
<FONT COLOR="blue" SIZE="2" FACE="Arial"> texto que queremos alterar <FONT>

Vamos então conhecer melhor os seus atributos (só vou indicar os mais importantes):


  • COLOR - permite escolher a cor do texto. Aceita dois tipos de valores, ou o nome da cor (white, black, blue, etc...) ou o código RGB da cor que querem. Já explico mais à frente o que é o código RGB. (lista com 216 nomes de cores e códigos RGB seguros, ie, sempre reconhecidos pelos browsers)

    color="Deepskyblue":   Este texto é um teste!

  • SIZE - tamanho da fonte de 1 a 7

    size="5":   Este texto é um teste!

  • FACE - nome do tipo de letra (ou tipos) que queremos utilizar. O nome do tipo de letra é por exemplo Arial, Times New Roman, Comic Sans MS, etc. Podem consultar no Word os tipos de letra existentes no vosso pc. Conselho: Utilizem tipos de letra comuns, porque correm o risco ao usar tipos de letra mais personalizados de haver utilizadores que não os tenham e por consequinte não vejam a vossa página em condições. Para evitar isso, podem indicar mais do que um tipo de letra separado por virgulas:

    face="Courier New, Arial, Times New Roman":   Este texto é um teste!

  • STYLE - permite utilizar códigos de CSS para definir o tipo de letra (mais seguro mas mais complicado)

  • CLASS - indica qual a classe de CSS que o texto dentro deste objecto deve respeitar (novamente é o mais correcto no entanto mais complicado)



Exemplo final:

O código:


<font color="Deepskyblue" size="4" face="Comic Sans MS, Verdana, Arial">Este texto é um teste!</font>


O resultado:

Este texto é um teste!

Ficamos então com a alteração do texto no template por explicar.

Então e porque é que este caso é mais dificil de explicar?! Porque os templates recorrem ao uso de CSS (Cascading Style Sheets). No ínicio do vosso template vão encontrar uma zona do código delimitada pelos seguintes "marcadores":

<style type="text/css">
...
</style>


É aqui dentro que se vai definir qual o aspecto de cada área do blog (posts, comentários, lista de links, arquivos, etc.). Dentro desta área vão estar definidas várias classes as quais vão ser chamadas pelos objectos de HTML pelo atributo CLASS, e as definições base para os principais objectos de HTML.

Como é muito complicado explicar-vos assim desta forma como alterar, o que vos aconselho é darem uma olhadela no vosso template e se vos interessar "cuscar" esta zona de código, pesquisando depois no resto do template onde é que são chamadas. Podem obter mais explicações sobre CSS em Guide to Cascading Style Sheets.

Mais dúvidas já sabem!

Alteração de Templates nos blogs...

Se alterar o meu template, perco os meus posts?!

A resposta é não. O template de um blog não interfere com o seu conteúdo de forma directa. Ai não?! então afinal o que é um template?!

Um template é código de formatação, que diz ao browser como é que ele há-de apresentar o conteúdo. Quais as cores, os tipos de letra etc, etc.

Para vos explicar como é que podem alterar o vosso template sem recorrerem ao uso dos templates pré-criados, torna-se necessário que conheçam bem as difrentes partes que o compõem. Isso é infelizmente muito complicado de o fazer num simples post.

Assim o que eu vou tentar fazer nos próximos posts é ir ensinando alguns objectos/elemntos e seus atributos que podem usar nos vossos posts (ou mesmo nos vossos templates se se sentirem à vontade para isso) que vos permitem fazer algumas modificações simples.

Se precisarem de alguma ajuda para alguma alteração que não consigam posso tentar ajudar-vos.

De resto, a última coisa que vos quero dizer (como já a Bekas chamou à atenção num comentário anterior) é que antes de quaisquer alterações que façam no vosso template, guardem uma cópia do que está a funcionar. Para fazerem essa cópia, seleccionem o texto todo do template, copiem e guardem num documento do Word ou Notepad.

Atenção: Se alterarem o vosso template usando os templates disponíveis, torna-se indispensável que guardem uma cópia do vosso template original, e porquê?! Porque ao alterarem o template vão perder os códigos das barrinhas, links, contadores, etc, já existentes! Por isso atenção aos testes!

Mais vale prevenir do que remediar!!!

terça-feira, maio 24, 2005

Por música no blog - I

Antes de mais para porem uma música a tocar no vosso blog ela tem de estar disponivel na internet. Ou seja, ou encontram a música que querem partilhar em algum site da internet ou então, se tiverem algum lugar na internet onde possam guardar os vossos ficheiros colocam aí uma que já tenham em disco.

Vamos então cuscar o código:

<EMBED SRC="http://endereço/nome musica.mp3" HIDDEN="false" BORDER="0" WIDTH="310" HEIGHT="45" AUTOSTART="false" AUTOPLAY="false" LOOP="false" VOLUME="75%"></EMBED>



E agora vamos lá trocar isto por miúdos:

Ora o atributo SRC é o que usam para indicar onde está alojada a vossa música. Não se esqueçam que tem de estar disponivel na internet.

Existem alguns servidores de música que permitem linkar as músicas, mas confesso que neste particular aqui a naba sou eu. Aquando a minha visita diária a esta mãe e bem a propósito deste tema, cusquei a origem da musiquinha que tocava na sua página e descobri um destes servidores (kboing) não sei se é de fácil utilização, mas peço aqui aos meus leitores que saibam mais sobre isto que avancem e digam lá caridosamente onde podemos arranjar então links à maneira!

Agora seguem os restantes atributos e respectivas explicações (nota: este elemento tem mais atributos, no entanto estes são aqueles que eu acho mais importantes para a nossa utilização):

  • HIDDEN (true/false)- se mostra a barra de controlo ou não

  • BORDER (inteiro)- espessura do bordo

  • WIDTH (inteiro)- a largura do controlo

  • HEIGHT (inteiro)- a altura do controlo

  • AUTOSTART (true/false) - se arranca automaticamente a música ou não

  • AUTOPLAY (true/false) - se arranca automaticamente a música ou não

  • LOOP (true/false) - se toca a música indefenidamente

  • PLAYCOUNT (inteiro)- número de vezes que repete a música (só funciona no Internet Explorer)

  • VOLUME (0 - 100)- o volume por defeito a que toca a música



Adenda: Este objecto corre todos os tipos de ficheiro reconhecidos pelo software de música utilizado pelos visitantes (que é habitualmente o Windows Media Player) por isso podem usar os ficheiros nos tipos normais mp3, mid, wav, wmg, mpeg (podem passar pequenos filmes bastando para isso ampliar o tamanho em altura para se conseguir ver o "écran"), etc.

Este código é reconhecido pela generalidade de browsers.

domingo, maio 22, 2005

Protecção de Imagens...

Antes de mais, quero vos chamar a atenção de que não existem formas de protecção de conteúdos 100% seguras na internet. Existem algumas que estão lá perto tipo 99,999% mas nunca o são totalmente.

O caso que nos interessa é a publicação de imagens em blogs de domínio público, então a protecção é ainda menos eficaz.

Vamos por partes. Vejamos em que caso se enquadram:

  1. Querem publicar imagens para o público em geral - neste caso, as únicas medidas que se podem tomar são preventivas, porque basta um print screen para que qualquer pessoa fique com a vossa imagem.


  2. Querem seleccionar quem tem acesso às vossas fotos - aqui há duas hipóteses:

    a) criam um blog privado e só dão acesso a quem querem (exemplo: MSN Spaces). No entanto só as pessoas autorizadas podem lêr o que escrevem (e novamente, as vossas imagens não estão 100% seguras)

    b) alojam as fotos em algum servidor de alojamento que permita a selecção das pessoas que podem visualizar as fotos (uma pesquisa por "free photo hosting" ou "alojamento gratuito foto" no google dá-vos muitas hipóteses. No entanto, vou tentar compilar uma lista mais pequena e depois publico). Neste caso, no vosso blog só colocam os links para as fotos mas sempre que se entra na vossa página são confrontados com o pedido de uma passoword para visualizar as fotos. Só vê as fotos quem tem acesso à password. Novamente não é 100% seguro além de um pouco irritante para quem não tem a password.


Vamos então ver as hipóteses para quem se encontra no primeiro caso:

  1. A escolha das fotos é a primeira arma de protecção. Por muito queridos que possam estar os nossos bebés, devemos evitar a publicação de fotos com eles nus. Escolham as fotos que são o mais inócuas possível e menos apetecíveis à manipulação.

  2. Devem redimensionar as fotos para o tamanho de publicação, ou seja, se querem publicar uma foto que 2048x1536 mas no post vai ocupar uma área 110x70, não a enviem com o tamanho original. Antes de a enviar redimensionem a imagem para o formato desejado. Aconselho a publicação de fotos com uma largura (se for deitada) até 200px (máx 300px). Permite uma fácil visualização e dificulta a manipulação.

  3. Diminuam a qualidade das fotografias o mais possível mas de forma a que permita uma boa visualização das mesmas, na dimensão de publicação. Quanto menos for a qualidade mais dificil se torna o trabalho de manipulação.

  4. Tenham controle sobre o local onde alojam as vossas fotos. A publicação de fotos com o Hello é fácil mas não têm nenhum controle sobre as fotos uma vez publicadas. Não as podem apagar quando quiserem (se apagarem um post com fotos não apagam as fotos, elas mantêm-se no servidor) e não sabem que protecções existem nesse servidor. Eu aconselho a utilização de um site de alojamento gratuito (não é obrigatório o uso de password para visualização de fotos).

  5. Insiram no vosso template código para dificultar o download de fotos (ATENÇÃO: EU ESCREVI "DIFICULTAR"!!!). O que podemos fazer é o seguinte:

    No vosso template localizem o elemento HEAD. Devem encontrar logo no inicio do documento qualquer coisa como:

    <head>
      <title>...</title>


    Dentro do elemento HEAD, antes ou depois do elemento TITLE acrescentem a seguinte linha:


    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">


    Exemplo:

    <head>
      <title>...</title>
      <META HTTP-EQUIV="imagetoolbar" CONTENT="no">


    O que esta linha faz é simplesmente desabilitar o aparecimento do "image toolbar" que aparece quando se passa com o rato sobre uma imagem.

    Esta até parece simples não? Então vamos complicar um bocadinho!

    Como é que se desabilita a tecla direita do rato? Temos duas respostas para esta pergunta! Se queremos desabilitar esta tecla:

    • apenas sobre as imagens - É necessário incluir no código de cada elemento IMG os atributos onKeyPress, onKeyDown e onMouseDown e utilizar Javascript (não é uma linguagem de programação mas permite dar instruções ao browser sobre a forma que ele se deve comportar na nossa página), da seguinte forma:

      <img onkeypress="javascript:alert('Não autorizado!');" onmousedown="javascript:alert('Não autorizado!');" onkeydown="javascript:alert('Não autorizado!');" src="http://photos1.blogger.com/img/XXX/XXXX/XXX/XXX.jpg">



    • em todo blog - temos duas maneiras. Uma mais simples que simplesmente desabilita as teclas do rato, e outra que exibe uma janela informativa quando se clica a tecla direita do rato.

      A mais simples consta em adicionar ao elemento BODY o atributo onContextMenu, e já agora o onSelectStart para impedir que se seleccione o texto dos posts, assim temos:

      Para desabilitar a tecla direita do rato:

      <BODY onContextMenu="return false">


      Para desabilitar a tecla esquerda do rato:

      <BODY onSelectStart="return false">


      Para desabilitar ambas as teclas do rato:

      <BODY onSelectStart="return false" onContextMenu="return false">



      Se quisermos a janelinha temos de recorrer ao uso de Javascript. Assim temos de inserir o código a seguir indicado dentro do elemento HEAD, como exemplificado:

      <head>
        <title>...</title>
      ...
      <script language=JavaScript>
      <!--
      //Disable right mouse click Script

      var message="Não autorizado!!!"

      function clickIE4() {
      if (event.button==2) {
      alert(message);
      return false;
      }
      }

      function clickNS4(e) {
      if (document.layers||document.getElementById&&!document.all) {
      if (e.which==2||e.which==3) {
      alert(message);
      return false;
      }
      }
      }

      if (document.layers) {
      document.captureEvents(Event.MOUSEDOWN);
      document.onmousedown=clickNS4;
      }
      else if (document.all&&!document.getElementById) {
      document.onmousedown=clickIE4;
      }

      document.oncontextmenu=new Function("alert(message);return false")
      // -->
      </script>

      ...
      <head>






Pronto, espero que vos tenha elucidado um pouco mais sobre esta técnica. Quero alertá-los uma vez mais que os códigos aqui apresentados podem não funcionar com todos os browsers e que independentemente de funcionarem ou não, não protegem a 100% as vossas fotos. Apenas dificultam a vida... especialmente a quem não percebe muito disto.

Sobre os sites de alojamento de fotografias, vou tentar arranjar uma lista dos melhorzinhos... mas ainda deve demorar.

Se tiverem mais dúvidas deixem-nas em forma de comentário.

Beijinhos
Sandra

sexta-feira, maio 20, 2005

Como por links nas nossas páginas!

Para por um link nos nossos posts o blogger facilita-nos o trabalho. Quanto estamos a compor um post, é só carregar no botão que tem um mundo e uma corrente e inserir o endereço URL na caixinha. No entanto, se queremos por um link em qualquer ponto da página, necessitamos de saber como é que é o código!

Aqui fica a explicação do código para o saberem fazer em qualquer altura e em qualquer lado!

O elemento Anchor - Isto é o código que explica ao browser que vamos introduzir um link:

<A> </A>


Este elemento tem vários atributos sendo um deles o HREF (Hypertext Reference). Este atributo diz ao browser para onde é que vai, ou seja o endereço URL.
Exemplo para aceder a uma determinada página de um site:


<A HREF="http://www.site.com/ficheiro.html">Ficheiro em www.site.com</A>


Exemplo para aceder a um site:


<A HREF="http://www.site.com/">Aceder a site</A>


Se quiserem que esse link seja aberto numa nova janela têm de acrescentar o atributo TARGET com o valor "new". Exemplo:


<A HREF="http://www.site.com/" TARGET="new">Site</A>


Se quiserem por um link numa imagem que tenham, têm de colocar o código da imagem dentro deste elemento em vez do texto. Exemplo:

<A HREF="http://www.site.com/ficheiro.html"> <IMG SRC="imagem.jpg"> </A>


Por defeito, quando uma imagem tem um link associado aparece uma linha à volta, se a quiserem tirar acrescentam o atributo BORDER com o valor "0" no elemento IMG:


<IMG SRC="imagem.gif" BORDER="0">


Se quiserem por um link para o vosso email só têm de acrescentar mailto: antes do vosso endereço de email: Ou seja:

<A HREF="mailto:nome@mail.com"> nome@mail.com </A>



Espero que tenha ajudado. Se precisarem mais explicações é só dizer!

Beijinhos
Sandra