Plugin para criar ícone (.ICO) no Photoshop

Abuse da criatividade e crie seu próprios ícones no Photoshop

Os ícones são pequenas imagens usadas em sites, blogs, programas e diversas outras ferramentas. Estas imagens são utilizadas não só para deixar o projeto com um melhor visual, os ícones são utilizados para descrever os links ou serviços que serão linkados por eles, visando economizar espaço no ambiente do projeto, por esse motivo, muitas vezes os links em forma de texto são substituídos por uma imagem.

Para criar ícones, é necessário a utilização de um programa editor de imagens, como o Photoshop, por exemplo. Mas apenas possuir o programa não significa que o usuário já está apto a criar ícones, é necessário um bom conhecimento técnico para isso.

Pensando em melhorar a produtividade de usuários com pouca experiência e que desejam criar seus ícones personalizados, o site sibcode.com está disponibilizando um plugin para Photoshop, que possibilita a criação de ícones de forma rápida e fácil. Além dos ícones em formato padrão do Windows, ou seja, em formato .ICO, é possível exportá-los em outros formatos e diversos tamanhos.

Outra funcionalidade interessante é a geração de ícones com transparências, ideal para dar um visual mais elegante e profissional aos seus trabalhos.Tutorial muito bom aqui no Tutors de Tudo  , Plugin para criar ícone no Photoshop

Link para download: Plugin para ícones Photoshop! (.zip 0.7 MB)

Read more »

Blogger - Criando seu Banner

 Neste artigo, vou mostrar como criar um banner (ou “selo”) para seu site, que poderá ser utilizado com mais eficiência nessa modalidade de divulgação.

O banner nada mais é do que uma figura representando seu blog, contendo um link para ele, e que será publicada em outros sites. A principal vantagem em divulgar seu site através de um banner é que uma imagem costuma chamar mais a atenção do visitante do que um simples link.

Além disso, é uma possibilidade de escapar do “nofollow”, mesmo que ele esteja ativado no outro site. Como você já deixará pronto o link para o seu blog, este será um link sem o “nofollow”, e seguido pelo Google.

O processo de criação e divulgação do seu banner é bastante simples. Vou dividi-lo em etapas para facilitar seu trabalho.

1. Crie a figura para usar em seu banner

Para criar a figura que representará o seu banner, basta utilizar um editor de imagens. Você não precisa ter intimidade com programas complexos: até mesmo o Paint, que já vem instalado com o Windows, pode fazer o trabalho. O importante é seguir as orientações abaixo:

• O banner do seu site deve seguir sua identidade visual. Assim, busque usar as mesmas cores e fontes do seu site, para que as pessoas possam identificá-lo ao olhar para seu banner.
• O tamanho mais utilizado para o banner é 120 pixels de largura por 60 pixels de altura. Se você criar uma figura fora dessas dimensões, o outro site pode cortar ou deformar sua figura ao redimensioná-la.
• Um GIF animado pode chamar mais a atenção do que uma figura estática – desde que seja bem feito. Mas, se decidir fazer um, tome o cuidado para não fazer algo extravagante demais.
• Mesmo que você decida criar uma figura estática, salve-a no formato GIF. Caso você queira futuramente trocá-la por um GIF animado, basta substituir a figura atual onde ela está hospedada, e sua imagem anterior será substituída pela animação nos sites em que ela estiver publicada.

O banner do  Tutors de Tudo está abaixo, como exemplo:

2. Hospedando sua figura

Após ter criado sua figura, é necessário hospedá-la em algum local, para que fique disponível para todos os sites que desejem publicá-la. Se você já possui um serviço de hospedagem pago para seu blog, este passo é bem simples: basta fazer upload da imagem para uma pasta conhecida.

Caso você hospede seu blog numa plataforma gratuita, como o Blogger, é necessário hospedá-la em outro site. Até o possível hospedá-la no próprio Blogger, mas o endereço para a figura será extremamente longo e complicado para se divulgado.

Existem diversos serviços gratuitos para hospedagem de imagens na internet, como o Imageshack e o Photo Bucket. No entanto, não gosto desses serviços por um motivo simples: uma vez feito o upload da imagem, não é possível colocar uma nova imagem em seu lugar. Isso significa que, se um dia você quiser trocar a imagem de seu banner, precisará pedir a todos os seus parceiros para que alterem o link para ela.

Entre todos os serviços gratuitos que testei, minha escolha foi o http://www.webs.com. Nele, você pode criar um site e fazer upload das imagens. O ideal é que você o crie com o próprio nome do seu site ou blog original. Para fazer o upload da imagem que você criou, é só entrar na opção “File Manager” e acessar “Single File Uploader”. 

3. Criando o código para divulgação do banner

O próximo passo é criar o código que você colocará em seu blog para divulgação do seu banner. O código irá criar dois elementos: na parte superior será exibido seu banner e na parte inferior uma caixa onde os seus parceiros copiarão o seu código.

Abaixo está o código que uso no Tutors de Tudo, que você pode tomar como base para criar o seu:

<p align="center"> 
<img vspace="2" hspace="2" title="Tutors de Tudo" alt="Tutors de Tudo" src="http://gerenciandoblog.webs.com/Gerenciando.gif"/><br/> 
<textarea onfocus="this.select()" style="margin: 2px; width: 180px; height: 50px" onmouseover="this.focus()" name="textarea"><a href=http://www.tutorsdetudo.blogspot.com target="_blank"> 
<img border="0" title="Gerenciando Blog" alt="Gerenciando Blog" 
src=http://tutorsdetudo.webs.com/logo.gif /></a></textarea></p>

Os trechos que você precisa alterar estão colorido:

• http://tutorsdetudo.webs.com/logo.gif – Endereço em que você hospedou sua figura (item 2).
• http://tutorsdetudo.webs.com/logo.gif – Endereço do seu blog.
• Tutors de Tudo– Texto alternativo que aparecerá ao colocar o mouse sobre seu banner.
• 180 x 50 – Tamanho da caixa que será exibida com o código do seu banner.

O resultado ficará similar ao abaixo:

 

4. Publicando o código de divulgação

Feito isso, o passo mais simples: basta adicionar um gadget de HTML/JavaScript em seu blog, adicionando o código criado no item 3. Quanto maior o destaque que você der ao banner, maior a chance dele ser visto e publicado em outro site.

5. Criando uma Política de Parcerias

Outra dica que dou – embora não seja obrigatória – é que você crie e divulgue uma Política de Parcerias para seu site ou blog. Por exemplo: qualquer site pode ser seu parceiro ou você evitará conteúdo ilegal? É interessante deixar todos os pontos claros, para evitar parcerias que não sejam interessantes para você.

Como exemplo, leia a Política de parcerias do Tutors de Tudo

Pronto! Se você seguiu os passos, já tem um banner para o seu site. No início, a procura por parcerias pode demorar a aparecer. Com o tempo – e se você tem um site de qualidade – é natural que elas surjam. Outra possibilidade é você propor parcerias a outros blogs. É uma escolha pessoal.

Agora, se você achou este processo complicado, é possível fazer todo esse trabalho automaticamente em um site, embora haja algumas limitações. Para saber como fazer isso, leia o artigo Um banner para seu site de forma fácil.

E você, já tem um banner em seu blog? Como tem sido a troca de parcerias ou o uso dele? Deixe seu comentário!

Read more »

CSS - Contruindo um menu horizontal

Se você não quiser ler, mas ver como fazer, assista um vídeo. Neste vídeo é mostrado como fazer um menu horizontal com CSS. E se quiser aprender mais, visite o Campus Online e cadastre-se grátis para ver vídeos sobre desenvolvimento web.

Para fazer um menu horizontal que seja fácil de personalizar e de fazer manutenção?
Siga os passos abaixo e descubra como é fácil.

Estrutura:

Primeiramente faça um elemento NAV (antigamente usaríamos a tag DIV) e atribua um ID. Neste exemplo nossa NAV se chamará “menu”. Dentro desta NAV, faça uma lista com as opções do menu.

1 2 3 4 5 6 7 8 9

<nav id="menu">     <ul>         <li><a href="#">Home</a></li>         <li><a href="#">Produtos</a></li>         <li><a href="#">Missão</a></li>         <li><a href="#">Links</a></li>         <li><a href="#">Contato</a></li>     </ul> </nav>

Começando a formatação:

Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;), o padding (padding:0px;) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:

1 2 3 4 5 6 7 8

#menu ul {     padding:0px;     margin:0px;     float: left;     width: 100%;     background-color:#EDEDED;     list-style:none; }

Terceiro:

Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:

1	#menu ul li { display: inline; }

Deixando o menu na horizontal:

Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

1 2 3 4 5 6 7 8 9

#menu ul li a {     padding: 2px 10px;     float:left;     /* visual do link */     background-color:#EDEDED;     color: #333;     text-decoration: none;     border-bottom:3px solid #EDEDED; }

Vamos ver no que deu!

Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

1 2 3 4 5

#menu ul li a:hover {     background-color:#D6D6D6;     color: #6D6D6D;     border-bottom:3px solid #EA0000; }

Read more »

Dreamwaver - Galeria de fotos com Thumbnail

E aí pessoal! Tudo certo?
Conforme pedidos, sai do forno uma vídeo aula quentinha de Dreamweaver CS3 ensinando como criar uma galeria de fotos com thumbnail pelo Dreamweaver.Conforme informei na vídeo aula, não testei esse processo com versões diferentes entre o DW e o FW, já que para o processo funcionar é imprescindível a existência do Fireworks em sua máquina. Outra coisa interessante informar é que no Dreamweaver mx e mx2004 não têm essa opção, sendo necessária a instalação de uma extensão, mas estou correndo atrás dela, ok?

Assista à vídeo aula

Outra coisa interessante dizer, é que o e-mail que você terá que cadastrar no gravatar.com deverá ser o mesmo que você usa para postar seus comentários no mxmastes, caso contrário, a imagem não aparecerá.

Bom, isso é tudo… Boa aula a todos!

movie by: www.mxmasters.com.br

Read more »

Blogger - Inserindo artigos relacionados

Fazer com que o leitor visite o seu blog é uma coisa, agora fazer com que elecontinue por mais tempo, lendo mais postagens (a tal taxa de rejeição), é outra completamente diferente e por sinal, muito mais difícil. Uma boa forma de se conseguir isso no Blogger/Blogspot é entregando ao leitor mais daquilo que ele veio buscar, ou seja, mostrando à ele postagens relacionadas ao que ele está lendo. E não se preocupe, pois a lista só aparece na página individual da postagem.

Para inserir uma lista de Postagens Relacionadas no final da postagem, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique emEditar HTML  para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.

ão se esqueça de  fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F  do seu navegador):

</head>

Então cole o seguinte código ANTES: 

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Agora encontre este código:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Então cole este código ANTES do </b:loop> (observe o contexto do</b:loop> para que seja igual ao apresentado acima, pois existem vários</b:loop> no código): 

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>

Altere o número “5” destacado em laranja do código acima pelo número de postagens relacionadas que você deseja que apareçam para cada categoria/marcador. Por exemplo, se a sua postagem possuir os marcadores “Notícias” e “Futebol”, aparecerão 10 postagens relacionadas no total, 5 para cada marcador.

Agora só mais uma vez, encontre este código:

<div class='post-footer-line post-footer-line-3'/>

Então cole o seguinte código DEPOIS: 

<b:if cond='data:blog.pageType == "item"'><h3>Postagens Relacionadas</h3></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Altere a parte em laranja se quiser dar outro nome à lista de Postagens relacionadas. Talvez “Artigos Relacionados”? Você quem sabe.

Como esse hack funciona somente nas páginas individuais, não será possível visualizar diretamente o resultado. Então visualize apenas para checar se houve algum erro com o template e clique em Salvar Modelo. Em seguida abra uma postagem no seu blog para verificar o resultado.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Read more »

Photoshop - Criando um topo pro seu web/site

Olá pessoal , hoje irei estar postando mais um video-tutorial , desta vez iremos estar ensinando a vocês umas das melhores formas de se criar um cabeçalho bonito , elegante e atrativo pro seu público alvo . 

Confira abaixo o video criado por leandro10371 confira o canal dele no youtube .

Read more »

JavaScript - Como hospedar javascript no Blogger

Depois de ter publicado dois posts com modelos para apresentação de slides, usando JQuery, resolvi pesquisar uma forma eficaz de hospedar os arquivos em javascript dentro do template, evitando assim que vocês tenham que hospedá-los externamente.

JavaScript é uma linguagem de script (…)Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.
Fonte: Wikipedia

A maioria dos scripts que fazem maravilhas com leite moça, são do tipo JQuery

jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. Seu lema é: "Escrever menos e fazer mais".Uma função escrita em Javascript puro tem uma diminuição notável quando reescrita com este framework Fonte: Wikipedia

Apesar de eu ter dito neste post - Slideshow no Blogger – que não seria preciso hospedar nada, confesso que me enganei. Os scripts realmente já estão hospedados, mas no host de quem os criou/publicou/divulgou. Se a url (endereço do link) parar de funcionar, podemos dizer adeus àquela linda apresentação de slides.
A url do script estava bem escondidinha dentro do código:

<script src=' http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js ' type='text/javascript'/>

A parte assinalada em vermelho, corresponde à url. Neste caso, o script está hospedado no Google Sites, se não me engano. Se o dono apagar o arquivo ou mudar a url, ficamos na mão, ou seja, o slide irá parar de funcionar.
A boa notícia é que temos duas formas de resolver isso:
1. hospedar o arquivo em nosso próprio host
Ótimo, eu pago um host, outros blogueiros também pagam, mas a maioria nem sabe o que é isso.  Explicando a grosso modo, host é o mesmo que servidor. Blogs que usam o Wordpress.org, por exemplo, precisam de um host para funcionar. Nós usamos os servidores do Google, mas, como nem tudo é perfeito, não temos onde fazer o armazenamento de arquivos, tais como documentos, scripts e etc.
2. hospedar o arquivo dentro do template
Como assim? Pois é, eu também não sabia que isso era possível, mas graças à mestra Ariane que fez isso no Template Mundo Verde, descobri uma forma super prática de hospedar arquivos em javascript no Blogger.
Agora vamos ao que interessa. Para hospedar um script no Blogger, é preciso fazer uma pequena alteração no código original. Mas é bom lembrar que dependendo do tamanho do arquivo, seu blog pode ficar mais lento.
Vamos pegar como exemplo um pedacinho do código usado nos slides:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>

Observem que o primeiro link termina com a extensão .js. O que temos aí? Acertou quem pensou “javascript”! Clique sobre o link . Irá abrir um arquivo em texto enorme. Deixe-o aberto, pois daqui a pouco será necessário copiar todo o conteúdo.
Agora, substitua a primeira linha do código acima por:

<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>

Cole todo o conteúdo do arquivo .js no local que assinalei de vermelho.
O local onde o arquivo .js vai estar, irá variar. Então, faça uma busca usando o comando Ctrl+F do teclado.

Agora, sempre que você se deparar por aí com um recurso fantástico usando Javascript, mas não possui um serviço para hospedar o arquivo, utilize essa tática ;)
Fiz testes em vários templates e com vários scripts diferentes e em todos funcionou.

Read more »

XML - Criando um sitemap (sitemap.xml) para enviar ao GOOGLE

O blog de webmasters do google lançou um artigo ensinando a webmasters a como criar um sitemap com os padroes do google e como envia-los para as pesquisas do grande oráculo.Lembrando que é importante seguir estes padroes pois se nao o crawler do google nao conseguira ler o sitemap e não fará a indexação de suas páginas da melhor forma.

Bem primeiro crie um arquivo vazio chamado: sitemap.xml

Insira o seguinte dentro do arquivo:

<urlset xmlns=”http://www.google.com/schemas/sitemap/0.84″>
<url>
<loc>http://www.SEUSITE.com/
<lastmod>2005-06-30T14:12:14+00:00
<changefreq>daily
<priority>1.0
<url>
<loc>http://LINK DO SEU SITE 1
<lastmod>2005-06-30T14:12:14+00:00
<changefreq>weekly
<priority>1.0

Entendendo:
lastmod -
Esta é a data que indica quando foi a ultima modificação do arquivo podem ser usados os seguinte formatos:
dd.mm.yyyy
dd.mm.yyyy hh:mm
dd/mm/yyyy
dd/mm/yyyy hh:mm
changefreq -

Diz com freqüência seus arquivos são atualizados no site.
Suas opcoes sao: “always”, “hourly”, “daily”, “weekly”, “monthly”, “yearly” ou “never”.
O valor “always” deve ser usado quando a pagina muda a cada acesso. O valor “never” deve ser usado para páginas de arquivo que não vão sofrer alterações.
priority -
Seta a prioridade de um link em relação a outros.
Voce pode escolher de 0.0 a 1.0, onde 0.0 é baixa prioridade(s) no seu site 1.0 significa alta prioridade.

Lembre-se de colocar no seu sitemap.xml todas as paginas do seu site.

O google pode ler até 50.000 links por XML caso seu site tenha mais de 50.000 paginas crie um segundo arquivo XML.
Depois de criar seu sitemap.xml e hora de envia-lo para o google.

Envie para: (voce precisa de uma conta de e-mail no gmail)
https://www.google.com/webmasters/sitemaps/login

Sucesso!!

Read more »

Delphi - Criando um Editor de Texto no Delphi (Mais Avançado)

Olá pessoal, a pedidos dos leitores do Oficina da Net estou fazendo este tutorial para ensinar como se faz um editor de texto no Delphi de forma bem simples e fácil.Neste editor, diferente do meu outro artigo, será muito melhor,  sendo que ao clicar em negrito, itálico e etc. o editor modificará somente as partes selecionadas. Também será possível modificar formatação e etc.

Dica: se você esta iniciando agora em Delphi, antes de fazer este editor, faça primeiro o anterior que é mais simples; depois de se familiarizar com o Delphi e suas ferramentas, tente fazer este.
Artigo: http://www.oficinadanet.com.br/artigo/113/criando_um_simples_editor_de_textos_no_delphi

Neste tutorial eu usarei o Delphi 2007 juntamente com o Windows 7. Os procedimentos podem ser feitos nas outras versões do Delphi e Windows normalmente, como por exemplo, o Delphi 7 e Windows XP, os mais usados ate hoje.

Então vamos lá, mão na massa!
Primeiramente com o Delphi já aberto (é claro rsrs) crie um novo projeto File > VCL Forms Application – Delphi for Win32 (se você estiver utilizando Delphi 7, será apenas Application).



Vamos agora dar uma customizada no nosso formulário. Mude o Caption do form (nome que se dá no Delphi para aquele nome que fica em cima do formulário).



Vamos criar os “controles” do nosso editor agora.
Crie um “ToolBar”. Para isso vá até a aba “Win32” e clique em “TToolBar” depois clique no seu “form” ou formulário.



Diferente do outro artigo que nos utilizamos o componente “Memo”, neste usaremos o componente “RichEdit”. Portanto coloque um “RichEdit” no seu “Form”, ele pode ser encontrado na guia “Win32”. (Clique em “TRichEdit” e depois de um clique no Formulário).



Selecione o “RichEdit” que você acabou de criar, na Object Inspactor (F11) coloque:

Align = alClient
ScrollBars = ssVertical
Veja como ficou:



Procure Lines e depois clique nos três pontinhos “...” irá abrir uma janela, não deixe nenhum caractere dentro dessa janela e clique em OK.



Vamos criar os botões de navegação do nosso editor.
Para isso clique com o botão direito na “ToolBar” e clique em “New Button”.



Crie 13 botões dentro do “ToolBar” utilizando o procedimento mostrado acima.
Para colocar as imagens nos botões, utilizando a “ToolBar”, precisamos colocar um componente chamado “ImageList”.



Vamos “linkar” a “ToolBar” com a “ImageList” para isso seleciona a “ToolBar” que criamos anteriormente, va na Object Inspector (F11)



Depois de ter “linkado” tudo certinho, vamos adicionar as imagens para dentro do “ImageList” Para isso, clique 2 veses em cima do componente. Veja a janelinha:



Clique no botão “ADD” e coloque as imagens que você desejar. Depois organize direitinho seguindo a ordem dos botões. (Se você não tem as imagens dos botões não se preocupe, no fim do artigo irei deixar um link com os icones utilizados no artigo)



Coloque um “Opendialog” e um ”Savedialog” dentro do “form”, para isso procure a aba “Dialogs”, depois no “Opendialog” duas vezes no “Opendialog” e duas vezes no “Savedialog”.



Selecione o “Opendialog” e o ”Savedialog” que você acabou de criar, e modifique a propriedade da Object Inspector “Filter”, Coloque isto: “Arquivos RichText|*.rtf” (sem aspas).
Selecione os botões que você ira utilizar para Negrito, Itálico e Sublinhado. Vá na Object Inspector (F11) e mude a propriedade “Style” para “tbsCheck”.



Layout prontinho, agora vamos programar!



Vamos trabalhar com 2 funções no nosso projeto. Primeiro vamos declarar elas em private:

  private

    function TextoSelecionado: TTextAttributes;

    procedure AtualizaBotoes;

Agora vamos colocar as funções por inteiro no bloco de codigo, coloque isso após a “implementation”
:

function TForm1.TextoSelecionado: TTextAttributes; //Responsavel por captar o texto selecionado para aplicar efeitos de fonte

begin

  if RichEdit1.SelLength > 0 then Result := RichEdit1.SelAttributes

  else Result := RichEdit1.DefAttributes;

end;

procedure TForm1.AtualizaBotoes();  // responsavel por afundar os botões em tempo de execução (RunTime)

begin

    with RichEdit1.Paragraph do

  try

    ToolButton9.Down := fsBold in RichEdit1.SelAttributes.Style;

    ToolButton10.Down := fsItalic in RichEdit1.SelAttributes.Style;

    ToolButton11.Down := fsUnderline in RichEdit1.SelAttributes.Style;

    if Ord(Alignment) = 0 then

    begin

      ToolButton12.Down := True;

      ToolButton15.Down := False;

      ToolButton14.Down := False;

    end;

    if Ord(Alignment) = 1 then

    begin

      ToolButton12.Down := False;

      ToolButton15.Down := True;

      ToolButton14.Down := False;

    end;

    if Ord(Alignment) = 2 then

    begin

      ToolButton12.Down := False;

      ToolButton15.Down := False;

      ToolButton14.Down := True;

    end;

  except

    application.terminate; //se acontecer algum problema nas funções acima, o programa fecha.

  end;

end;

Clique duas vezes no botão de novo arquivo e coloque o codigo:

RichEdit1.Clear;

Clique duas vezes no botão de Abrir e coloque o codigo:

  if opendialog1.Execute then

  begin

    Richedit1.Lines.LoadFromFile(opendialog1.FileName);

    Richedit1.SetFocus;

  end;

Clique duas vezes no botão de Salvar e coloque o codigo:

  if Savedialog1.Execute then

  begin

    RichEdit1.Lines.SavetoFile(Savedialog1.FileName);

    RichEdit1.SetFocus;

  end;

Clique duas vezes no botão de Colar e coloque o codigo:

  RichEdit1.PasteFromClipboard;

Clique duas vezes no botão de Copiar e coloque o codigo:

  RichEdit1.CopyToClipboard;

Clique duas vezes no botão de Recortar e coloque o codigo:

  RichEdit1.CutToClipboard;

Clique duas vezes no botão de Negrito e coloque o codigo:

  if ToolButton9.Down = false then

    TextoSelecionado.Style := TextoSelecionado.Style - [fsBold]

  else

    TextoSelecionado.Style := TextoSelecionado.Style + [fsBold];

Clique duas vezes no botão de Italico e coloque o codigo:

  if ToolButton10.Down  then

    TextoSelecionado.Style := TextoSelecionado.Style + [fsItalic]

  else

    TextoSelecionado.Style := TextoSelecionado.Style - [fsItalic];

Clique duas vezes no botão de Sublinhado e coloque o codigo:

  if ToolButton11.Down then

    TextoSelecionado.Style := TextoSelecionado.Style + [fsUnderline]

  else

    TextoSelecionado.Style := TextoSelecionado.Style - [fsUnderline];

Clique duas vezes no botão de Alinhar a esquerda e coloque o codigo:

  RichEdit1.Paragraph.Alignment := TAlignment(0);

Clique duas vezes no botão de Alinhar ao centro e coloque o codigo:

  RichEdit1.Paragraph.Alignment := TAlignment(2);

Clique duas vezes no botão de Alinhar a Direita e coloque o codigo:

 RichEdit1.Paragraph.Alignment := TAlignment(1);

Clique duas vezes no botão de Fechar o Programa e coloque o codigo:

Application.terminate;

Selecione o “RichEdit1” va na aba “Events” da Object Inspector clique 2 vezes no evento “onchange”:

  AtualizaBotoes();

Agora na mesma janela e com o “RichEdit1” selecionado, clique 2 vezes no evento “SelectionChange” e coloque:

  AtualizaBotoes();

Selecione o “Form” e clique 2 vezes no evento “OnShow” e coloque:

  AtualizaBotoes();

Bom pessoal espero ter explicado direitinho para vocês. Qualquer coisa que vocês não tiverem entendido estou disponibilizando na net os códigos fontes para que vocês possam estudar. Também como prometido, no pacote também coloquei os ícones utilizados no tutorial.

Ícones do Tutorial

Read more »

WebDesign - Técnicas de Layout de mídia digital

Você sabia que as mesmas técnicas que utilizamos na criação de um layout impresso é também utilizado na criação de sites e outros tipos de mídia digital? Pois é queridos amigos leitores, as técnicas de design são universais e se aplicam também na web.

Alan Ramires, leitor assíduo deste blog, enviou para mim um conjunto de slides coincidentemente feito por um dos meus professores preferidos que me deu aulas de mídia digital nos tempos  de faculdade, o sábio e excelente professor Melo Jr, do Instituto UFC Virtual.

Nesses slides, Melo Jr compilou conceitos importantes do Design e da Web retirados dos livros Design para Não-Designers, Web Design para Não-Web Designers, Não me faça pensar e Design on the Rocks. O resultado foi um guia visual muito interessante de diversas técnicas de layout que podem ser aplicadas tranquilamente a qualquer criação web.

Este tema é abordado com mais profundidade no curso de Design Web, fundamental para qualquer web designer que deseja aprimorar e melhorar sua forma de criar layouts.

Divirtam-se!

Read more »

Blog - Inserindo caixa curti no Blog

Existem muitas maneiras de incentivar os leitores a compartilhar seu blog nas grandes redes sociais, e com o Facebook não é diferente. Neste tutorial vamos mostrar como você pode inserir a caixa curtir do Facebook em seu blog.O site Desenvolvedores do Facebook disponibiliza livremente vários plugins que podem integrar seu blog a rede social, e entre eles nos temos a Like Box ou Caixa Curtir.

Inserir em seu blog não é nada complicado, para começar acesse o seguinte endereço http://developers.facebook.com/docs/reference/plugins/like-box/ preencha os dados corretamente para configurar a sua caixa curtir. No item Facebook Page URL você pode inserir somente a URL da sua página de fãs, não é possível usar o seu perfil pessoal para configurar.

Se ainda não tem uma página de fãs, acompanhe o artigo abaixo:

• Como criar uma página de fãs no Facebook

Depois configure o tamanho desejado para que a caixa apareça em seu blog de forma correta. Ao finalizar clique em “Get Code” e copie o código gerado.

Inserindo a caixa em seu Blog

Se você usa o Blogger acesse o seu painel em Layout, clique em Adicionar um Gadget e escolha o modelo HTML/Javascript, neste ponto basta inserir o código gerado no gadget e salvar. Agora se você usa o WordPress, acesse o menu Aparência ~> Widgets e selecione o modelo Texto, insira o código da caixa dentro deste Widget e salve.

Pronto! A Like Box já deve estar funcionando perfeitamente, bom, agora aproveite e curta o Dicas de WEB no Facebook.

Read more »