Existem alguns tipos de ficheiro que para serem publicados num blog necessitam de ser alojados noutro local o que nos leva a procurar um sitio que nos ofereça as melhores condições. O ideal era poder carregar os ficheiros directamente do nosso computador para o blog e isso já é possivel com o Dropbox.
O Dropbox é um serviço de alojamento que oferece 2Gb (dois gigabites) de espaço para alojar qualquer tipo de ficheiro de uma forma surpreendente.
Para o usar basta passar pela página do serviço Dropbox [link] e fazer o download do programa.
Depois de baixado, instalamos o software e durante a instalação é necessário criar uma conta com um endereço de email e, como é obvio, com uma password (não é a password do email). Este programa, depois de instalado irá criar uma pasta chamada My Dropbox dentro da pasta "Os Meus Documentos" que irá ter duas pastas dentro da mesma.
[ver imagem]
A vantagem disto tudo é que podemos mover os ficheiros do nosso computador para o Dropbox como se apenas os estivéssemos a mudar de pasta dentro do nosso computador. Basta arrasta-la para a pasta Dropbox e quando o ícone ficar com um símbolo verde significa que está carregada!
Para quem tem o habito de alojar fotos noutros sites, para publicar no blog, é bastante vantajoso porque movendo a imagem para a pasta "Public" podemos clicar com o botão direito do rato e no menu do Dropbox copiar o link para publicação.
[ver imagem]
Para um nivel mais privado pode-se usar a pasta "Photos" ou mesmo a "My Dropbox", nas quais não é fornecido o link dos respectivos ficheiros.
Um exemplo disso é quando precisamos de fazer um trabalho em casa para apresentar no emprego! Basta que depois de concluído seja arrastado para a pasta "My Dropbox" e depois no trabalho se acesse à nossa conta pelo serviço online (no link que dei atrás e com os dados que inserimos quando criamos a nossa conta) e podemos ter acesso ao referido trabalho para fazermos dele o que quisermos sem ter que usar pendrives. (Se este serviço tivesse surgido há mais tempo não teria havido problemas com o orçamento de estado)
E, basicamente, é o que precisam saber! Para além disto, explorem mais potencialidades porque eu uso-o há pouco tempo para poder dizer mais.
Para terminar informo que este serviço é iniciado com o Windows e podem ver o seu icone junto do relógio do computador que com 2 cliques abre a pasta respectiva.
[ver imagem].
Dropbox - alojamento de ficheiros
Conhecer estilos do blog - medidas
Depois de ter explicado como configurar o fundo (background) das varias partes do blog, decidi hoje falar de medidas.
É algo bastante importante num blog e que nem todos entendem como funciona.
Existem 4 tipos principais de medidas a ter em conta num blog que são:
Width: - define a largura de qualquer objecto.
Height: - define a altura.
Margin: - define a distância exterior de um objecto ao objecto que se encontre ao seu lado.
Padding: - define a distância interior da borda aos objectos.
Width
Na largura (width) existem as possibilidades de usar dois tipos de medidas, os pixels e a percentagem. Na ausência deste estilo a medida por defeito é a largura total disponível, ou seja 100%, mas esta medida pode ser fixada no valor que nós quisermos.
Por exemplo, se definirmos a largura total do blog para 50%, o blog vai ocupar metade da área visível do monitor, qualquer que seja a definição que se use nesse mesmo monitor.
Este estilo aparece-nos nos mais variados objectos que usamos no nosso blog, quer sejam vídeos, fotos, áreas de texto, etc.
Acontece muitas vezes que ao querermos publicar um vídeo, o player fique mais largo que a área onde o publicamos, quer seja num post ou na coluna lateral. Para resolver este problema basta que, no código desse vídeo, se procure este estilo, width, e se altere a medida que se encontra logo à frente.
Um exemplo disso é a publicação de um vídeo do Youtube num post. O vídeo do Youtube tem predefinido a largura de 425px e no entanto a área de publicação dum blog original do blogspot é 410px. Como podem ver, existe uma diferença de 15px que é o suficiente para que o vídeo fique a ocupar mais espaço que o que pretendíamos. A solução para este problema é alterar a largura do vídeo para a mesma medida que a área de publicação ou ainda mais fácil, alterar para 100% que irá fazer com que o vídeo se adapte à largura disponível.
Height
A altura (height) não é tão utilizada como a largura mas no entanto existem situações em que temos que fixar uma altura limite.
Numa foto ou vídeo, por exemplo, quando ajustamos a largura (width) convém sempre ajustar proporcionalmente a altura para que a imagem não fique deformada.
Tal como disse, esta alteração deve ser proporcional. Se uma imagem tiver as medidas 400 X 300 (400px de largura e 300px de altura), nós ao reduzirmos a largura para 300px, 75% do original, na altura vamos ter que reduzir os mesmos 75% (75% x 300 = 225px). Resumindo, na largura reduzimos 100px e na altura reduzimos 75px.
No entanto, nas áreas do blog, este estilo normalmente não é definido e a ausência do mesmo funciona de maneira diferente da largura. Enquanto que o width assume a área disponível exterior, o height assume a medida necessária ao seu conteúdo. É por isso que quantas mais coisas tivermos na página inicial, mais longo irá ser o blog.
Margin
Outro estilo a ter em conta é o margin. Este estilo, tal como disse, define a distância exterior de qualquer objecto a outro objecto.
É usado principalmente quando não queremos que qualquer objecto inserido no blog fique encostado à borda. Numa imagem publicada junto a um texto, se definirmos que margin: 10px, a imagem irá ficar afastado do texto 10 pixels.
As medidas para este objecto podem ser definidas das seguintes formas:
margin-top:
margin-right:
margin-bottom:
margin-left:
Ou, em alternativa, compilarmos tudo numa linha:
margin: 10px 10px 10px 10px;
A primeira medida refere-se ao topo, a segunda à direita, a terceira ao fundo e a quarta à esquerda. O valor 10px é exemplificativo.
Podemos também usar a propriedade auto para o objecto se auto-ajustar.
Ex: margin: 10px auto;
Neste caso o objecto irá ficar 10px distanciado do topo, mas irá assumir distâncias iguais em todos os outros lados. Serve, por exemplo, para centrar algo.
Padding
Por fim, vou falar do estilo padding. Este estilo funciona, mais ou menos, como o margin mas define a distância interior da borda de qualquer área ao seu conteúdo.
Um exemplo da utilização deste estilo é na área de publicação, se usarmos o padding-left: 10px, todos os artigos que publicarmos irão ficar com 10 pixels de distância da borda esquerda dessa mesma área.
Para usar este estilo podemos fazer como no margin:
padding-top:
padding-right:
padding-bottom:
padding-left:
Ou compilado numa linha:
padding: 10px 10px 10px 10px;
(ordem: topo, direita, fundo, esquerda)
Conhecer estilos do blog - background
No último artigo falei das várias partes que compõem um blog e disse que iria falar delas individualmente mas antes de o fazer acho que devo falar dos diversos estilos que se podem aplicar num blog em cada uma dessas partes.
No início do vosso código fonte, mais propriamente na área de estilos (CSS), podem encontrar, modificar, adicionar ou eliminar qualquer configuração que desejarem e para saber melhor onde mexer vou explicar o significado de cada estilo e como podem ser modificados.
Para começar vou começar pelo preenchimento de fundo das várias partes, o BACKGROUND.
Este estilo define o fundo de cada área onde esteja inserido e podem ser usadas as seguintes propriedades:
background-color:
define a cor de fundo através de um código de cor que podem encontrar aqui.
background-image:
define a imagem a usar como fundo.
background-repeat:
define se a imagem de fundo se vai repetir e como o deve fazer.
As variáveis são:
repeat; - para se repetir em toda a area
no-repeat; – para não se repetir
repeat-x; – para se repetir na horizontal
repeat-y; – para se repetir na vertical
backgroud-attachment:
define se a imagem de fundo vai ficar fixa ou se vai deslocar com o blog.
As variáveis são:
fixed; – para fixar a imagem
scroll; – para a imagem se deslocar (por defeito)
background-position:
define onde a imagem inicial se irá localizar quer seja na vertical, quer na horizontal. Para isso são usadas duas posições seguidas sendo a primeira para definir a posição vertical e a segunda a horizontal.
As variáveis são:
top; - para iniciar no topo (condição vertical)
bottom; - para iniciar no fundo (condição vertical)
left; - para iniciar alinhado á esquerda (condição horizontal)
right; para iniciar alinhado á direita (condição horizontal)
center; - para centrar a imagem (vertical e horizontal)
Ex: background-position: top center; (a imagem irá ficar encostada ao topo e centrada na horizontal)
Todas estas propriedades podem ser compiladas numa linha só e como exemplo vou mostrar como fica o estiilo para uma imagem encostada ao topo, alinhada à esqueda e a repetir-se na vertical, como a cor de fundo vermelha e que não se desloque com o blog:
background: #CC0000 url(‘ENDEREÇO DA IMAGEM’) top left repeat-y fixed;
Como podem ver, estão todas as variaveis inseridas apenas numa linha.
Conhecer o blog - geral
Para modificar um blog é necessário conhecer as diversas partes que o compõem.
Na área de estilos podemos configurar qualquer elemento do nosso blog e conhecendo todas essas partes torna-se tudo muito mais fácil e até básico.
Um blog divide-se basicamente em 6 partes principais como pode ser visto nesta imagem:
- A área total que nos é apresentada no monitor – Body (a vermelho)
- A área do blog, propriamente dito – Outer-wrapper (a branco)
- A área de titulo, cabeçalho – Header-wrapper (a azul)
- A área de publicação dos artigos – Main-wrapper (a verde)
- A coluna lateral – Sidebar-wrapper (a castanho)
- O rodapé – Footer-wrapper (a preto)
body
Nesta parte podemos configurar o tipo, cor, tamanho e alinhamento do texto, por defeito, do blog e também a imagem ou cor de fundo do blog.
outer-wrapper
Esta parte define o corpo do blog que contem todas as partes editáveis. É nela que estão incluídas as outras partes do blog que vou falar a seguir.
header-wrapper
É o cabeçalho e é onde podemos configurar tipos, tamanhos, cores e alinhamento da letra do título do blog e da descrição. Nesta área também podemos definir a imagem de cabeçalho para além da largura do mesmo.
Esta área está subdividida em outras áreas nas quais são configuradas os seus itens individualmente.
main-wrapper
Esta parte, tal como o cabeçalho, também está subdividida noutras partes mas é nesta que podemos configurar a largura da área dos artigos, os tipos de letra das várias partes, as cores, a posição entre muitas outras coisas.
sidebar-wrapper
É a barra lateral, onde normalmente são incluídos todos os elementos de página que vamos adicionando ao blog (contadores, perfil, musica, arquivo, etc.)
footer-wrapper
Esta parte do blog é a menos utilizada mas, tal como na barra lateral, também podemos incluir na mesma diversos elementos de página.
Nos próximos artigos irei falar destas partes individualmente.
Editores de imagem
Por vezes precisamos editar imagens para o nosso blog mas a ferramenta que precisamos está no nosso computador e estamos a usar outro que não tem qualquer ferramenta que nos permita essa edição.
Actualmente não é problema porque existem recursos que nos permitem a edição de imagens online sem que se instale qualquer programa.
Para facilitar decidi adicionar na coluna lateral 2 links para editores de imagem online.
Gifninja - para editar e criar GIF (imagens animadas)
Pixlr - um editar de imagem muito semelhante ao PaintNet da Microsoft.
