Links comentados no vídeo:

Gcast

Audacity

Podomatic

Leia o artigo sobre Podcast.

Veja o vídeo abaixo retirado do site da UOL Tecnologia.

Espero que vocês gostem. Prometo não demorar tanto para postar a quinta aula. :)

Até a próxima.

Reservado sob os direitos da Creative Commons

O serviço que o eulembro.com oferece é muito bom principalmente para quem trabalha o dia inteiro em frente ao computador. Pois sempre que você precisa de um telefone, email ou até mesmo site de algum de seus contatos, basta digitar no campo de pesquisa o nome desejado e todas as informações sobre seu contato aparece rapidamente. Há também um campo de observações onde você poderá colocar palavras chaves ou alguma característica do seu contato, e quando fizer a busca, essas observações também são levadas em consideração.

Gostei muito do eulembro.com. É muito útil e bem mais fácil de usar do que o UNIK. A promessa do site é sempre está colocando novas funcionalidades para facilitar ainda mais o cadastro de novos contatos e sua busca.

eulembro.com. Recomendo a todos. Até a próxima.

Assista o vídeo para mais detalhes.

Até a próxima!

Veja o vídeo explicativo sobre como usar este serviço, muito bem-vindo, da revista INFO.

O link para acessar o acervo da revista é http://info.abril.com.br/arquivo/
Até a próxima.

Até a próxima!

Espero que vocês gostem desta vídeo-aula e em breve postarei a quarta aula. Até a próxima!

Reservado sob os direitos da Creative Commons

Assim resolvi escrever um sistema em PHP de comentários. Agora quem assistir as aulas, ler as dicas ou as postagens no blog, poderá comentar e tirar as dúvidas na própia página. E eu responderei prontamente.

Além do campo de comentários, coloquei também o link "Twittar esta postagem" onde você poderá twittar à vontade.

Bom pessoal, espero ter facilitado um pouco à aqueles que estão sempre me escrevendo. Até a próxima.

O design desta Folha de Referência Visual original - Visual Cheat Sheet - foi criado por Antonio Lupetti e no seu site, woork.blogspot.com, você encontra a folha original e uma versão em pdf para baixar.

Clique aqui para baixar a Folha de Referência Visal traduzida para o português.

Até a próxima.

Para vocês terem uma idéia do que eu estou falando, um russo (de nome desconhecido) criou um gabinete para seu computador, no mínimo, original. Ele levou 18 dias desde o desenho e corte das peças de metal, até a montagem e acabamento da pintura e simulação de ferrugem.

No final o trabalho ficou perfeito. E, como já postei no twitter, quero um gabinete assim também!

Para ver todo o processo clique no link: http://englishrussia.com/?p=2487

Até a próxima!

Espero que vocês gostem desta vídeo-aula e em breve postarei nossa segunda aula.

Reservado sob os direitos da Creative Commons

Contudo, nossa realidade atual é diferente como também a tecnologia avançou bastante. Hoje, de acordo com a Ibope//NetRatings 82% dos internautas brasileiros possuem banda larga e o uso das linguagens JQuery e JavaScript popularizaram os sites "single page".

O site dzineblog postou 40 ótimos exemplos de "single page" que utilizam de forma inteligente uma combinação de JQuery e JavaScript para mostrar todo o conteúdo de seus sites em uma única página.

Veja os exemplos postados pelo site dzineblog no link http://dzineblog.com/2009/02/web-design-inspiration-40-impressive-single-page-websites.html

Até a próxima.

Reservado sob os direitos da Creative Commons

Baixe o arquivo aula01.zip que contem o arquivo index.html necessário para acompanhar corretamente todas as aulas.

Espero que vocês gostem desta vídeo-aula e em breve postarei nossa segunda aula.

Até a próxima.

Reservado sob os direitos da Creative Commons

A CRISTAL é um agente de usuário extremamente simples para controlar dispositivos multimédia e sistemas de automação residencial.

Com a CRISTAL controlamos praticamente tudo em torno da sala de uma forma simples. A mesa permite a interação dos usuários diretamente com os dispositivos digitais em uma imagem de vídeo de sua sala projetada sobre ela usando gestos Multi-Touch (múltiplos toques).

Veja o vídeo e surpreenda-se!

Nesta video aula da UOL tecnologia você aprenderá a cortar cabelo e outros objetos usando a ferramenta Background Eraser Tool. Quem apresenta a ferramenta é Alexandre Keese, instrutor da Adobe Systems Brasil.

Nesta video aula da UOL tecnologia você aprenderá a aplicar perspectiva nas imagens usando a ferramenta Vanishing Point. Quem apresenta a ferramenta é Alexandre Keese, instrutor da Adobe Systems Brasil.

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")
     && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Neste artigo não me atentarei a explicação do código JavaScript. Com o código JavaScript concluído, vamos escrever o HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trocando a folha de estilo
<link rel="stylesheet" type="text/css" href="css/amarelo.css" media="all"  />
<link rel="stylesheet" type="text/css" href="css/amarelo.css" title="default" media="all"  />
<link rel="stylesheet" type="text/css" href="css/vermelho.css" title="vermelho" media="all"  />
<script type="text/javascript" src="scripts/styleswitcher.js"></script>
</head>
<body>
<h1>Trocando a folha de estilo

<ul>
<li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Estilo padrão
<li><a href="#" onclick="setActiveStyleSheet('vermelho'); return false;">Mudando o estilo
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Exemplo criado por Daniel Farias.</p>

</body>
</html>

Salve o arquivo com o nome trocandoestilos.html.
A linha <link rel="stylesheet" type="text/css" href="css/amarelo.css" media="all" /> define qual será o arquivo CSS que será carregado como padrão do site.
A linha <link rel="stylesheet" type="text/css" href="css/amarelo.css" title="default" media="all" /> passa o valor "default" através do atributo title.
A linha <link rel="stylesheet" type="text/css" href="css/vermelho.css" title="vermelho" media="all" /> passa o valor "vermelho" através do atributo title.
A linha <script type="text/javascript" src="scripts/styleswitcher.js"></script> faz o link com o arquivo styleswitcher.js.

Crie agora dois arquivos CSS. Comece pelo amarelo.css.

@charset "utf-8";
/* CSS Document */
/* Criado por Daniel Farias */

*{
    font-family:"Times New Roman", Times, serif;
    color:#900;
    width:500px;
    height:auto;
    margin:0 auto;

}

body{
    background:#FFC;
    border: 1px #900 solid;
    margin:20px 0 0 0;
    padding:30px;
}

h1{
    margin:0 0 30px 0;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

li a{
    display:block;
    width:200px;
    height:auto;
    padding:10px;
    background:#900;
    color:#FF9;
    float:left;
    margin:0px 10px 30px 10px;
    text-align:center;
}

p{
    text-align:justify;
    margin-bottom:10px;
}
E em seguida o arquivo vermelho.css.
@charset "utf-8";
/* CSS Document */
/* Criado por Daniel Farias */
*{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#FFC;
    width:500px;
    height:auto;
    margin:0 auto;

}

body{
    background:#900;
    border: 1px #FFC solid;
    margin:20px 0 0 0;
    padding:30px;
}

h1{
    margin:0 0 30px 0;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

li a{
    display:block;
    width:200px;
    height:auto;
    padding:10px;
    background:#FFC;
    color:#900;
    float:left;
    margin:0px 10px 30px 10px;
    text-align:center;
}

As diferenças entre os arquivos amarelo.css e vermelho.css são as cores do background e das fontes e o estilo das fontes. Não esqueça de salvar os dois arquivos CSS na pasta css e o arquivo HTML fora das pastas para que os links entre eles fiquem corretos.

Agora você poderá “brincar” à vontade com as formatações CSS e criar estilos bem diferentes para um mesmo site. Isso o deixa mais dinâmico e atrativo ao usuário.

Nos “veremos” na próxima. Tchau!

Veja o exemplo.

Começaremos pelo código HTML. Colocarei abaixo somente o código necessário para este artigo, suprimindo todo o restante.

Suponhamos que você está fazendo o seu site. O seu <h1> deve conter o título do seu site e se possível um subtítulo.

<h1>Substituindo este texto por imagem</h1>

Uma boa prática é colocar um link no <h1> apontando para a página índex.html do seu site. Assim o usuário estando em qualquer lugar do seu site poderá voltar para a página inicial clicando no título do site, o <h1>.

<h1><a href="index.html" title="Substituindo este texto por imagem">Substituindo este texto por imagem</a></h1>

Coloque sempre o atributo title nos links. Isso facilita a identificação do conteúdo do site pelos buscadores e pelos leitores de tela.

Bom, nosso <h1> está pronto. Vamos formatá-lo no CSS.

Crie uma imagem (sugiro no Photoshop) para colocar no lugar do <h1>. Poderá fazê-la a sua escolha, mas recomendo que não ultrapasse 800 píxels de largura e 180 píxels de altura, pois alguns usuários ainda usam a resolução 800 x 600px. Com a imagem criada, vamos colocá-la no site.

1. h1 a{
2.          width:800px;
3.          height:180px;
4.          display:block;
5.          background:url(topo.jpg) no-repeat;
6.          text-indent:-9999px;
7.          overflow:hidden;
8. }

Explicando o código:

Linha 1 – Inicio a regra CSS. Indico que a declaração (formatação) a seguir é para ser aplicada a tag <a> que está dentro da tag <h1>, por isso coloquei os seletores h1 a na mesma regra CSS.

Linha 2 – Inicio a declaração da regra CSS. Aplico a largura (width) de 800px à tag <a> que está dentro da tag <h1>.

Linha 3 – Aplico a altura (height) de 180px à tag <a> que está dentro da tag <h1>.

Linha 4 – Usando a propriedade display com o valor block eu transformo a tag <a> em um bloco, e toda a área 800 x 180px será uma área clicável.

Linha 5 – Coloco a imagem topo.jpg como background da tag <a> e por segurança coloco o valor no-repeat para que a imagem não se repita por acidente.

Linha 6 – Se você fez tudo certo até agora, você tem visualmente em seu <h1> a imagem do topo que você criou, mas o texto Substituindo este texto por imagem ainda está lá. Para retirá-lo de cima da imagem coloquei a propriedade text-indent, que é responsável pelo recuo do texto e dei um valor de -999px para que o texto desapareça do navegador.

Linha 7 – A propriedade owerflow seguida do valor hidden também é uma medida de segurança, pois ela faz desaparecer todo o conteúdo que está fora da largura e altura que especificamos, no nosso caso, 800 x 180px.

Linha 8 – Fecha a regra CSS.

Bom, agora você já sabe trocar o texto da tag <h1> por uma imagem usando CSS. Lembrando, para linkar o arquivo CSS no HTML você deve colocar essa linha de código <link rel="stylesheet" href="seuarquivo.css" media="screen" /> logo acima da tag de fechamento </head>.

Nos “veremos” na próxima.  Tchau!

• Fala Freela - sobre o profissional freelancer
• Info Online - sobre tecnologia
• Podcast One - portal com vários podcasts
• MTV - sobre música e cinema

O Podcast do danielfarias.net estará disponível em um futuro próximo. Enquanto isso, assine meu RSS.
Até a próxima.

O Twitter é um blog onde você possui uma rede de seguidores que lêem suas “twittadas” e por sua vez, você poderá ler as “twittadas” de quem você segue.

O Twitter foi idealizado por Jack Dorsey em 1992 inspirado, onde trabalhava, em um sistema que taxistas utilizavam para se comunicar com a central dos taxis. Contudo o Twitter só pode se tornar real em 2006, pois somente nesse ano fora criada a tecnologia necessária para suportá-lo. E com a ajuda de Evan Williams, criador do (https://www.blogger.com/start)Blogger, Jack Dorsey concretizou sua idéia.

Rapidamente o Twitter se popularizou e hoje existem mais de 11 milhões de usuários, se tornando o terceiro maior site de relacionamento do mundo, ficando atrás somente do Facebook e do MySpace.

Apostando nessa crescente popularização várias empresas estão aderindo ao Twitter fazendo promoções exclusivas para seus seguidores. Essa é uma ótima prática, diferente dos velhos spans que se alastram pelo Orkut e emails, pois você só lê uma “twittada” de alguém se você for seu seguidor. Desta forma eu só recebo uma promoção de uma empresa se eu for seu seguidor. Assim as empresas evitam de mandar promoções para quem não as quer receber atingindo 100% dos interessados.

Bom, agora que você conhece o Twitter, não perca tempo, faça já o seu e seja meu seguidor!

Até a próxima!