Como usar o Syntax Highlighter?

Publicado em Publicado por gserrano

O que é Syntax Highlighter

O Syntax Highlighter é uma ferramenta em javascript[bb] que permite que você ajude seus usuários a entenderem códigos publicados em seu blog ou site, ideal para quem quer compartilhar programações ou exemplificar e explicar alguns códigos.

O que ele faz é entender a sintaxe da programação como se fosse um editor, deixando o código mais "amigável", veja esse exemplo em funcionamento ou a imagem exemplificando o resultado.

 

Para o leitor a vantagem é óbvia: "código colorido" é mais fácil de entender, as linhas contadas facilitam o autor (no caso você)  a explicar a programação e para os leitores que querem copiar o código existe um botão específico para isso.

 

Como aplicar o Syntax Highlighter?

A aplicação é muito simples, primeiro você precisa baixar os arquivos (aqui a v versão 1.51) e pode fazer isso no Google Code.

Com os arquivos já dentro da pasta do seu site ou blo você precisa inseri-los na página que irá ter o código, segue o código:

 

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
</script>

 

Dica básica: cuidado com o caminho dos arquivos, qualquer caminho errado prejudicará a exibição correta do código.

Com os arquivos já inseridos na página o único trabalho que você precisa fazer é definir no seu conteúdo onde está o bloco (ou blocos) de código a serem interpretados e qual a linguagem de programação utilizada.

Para isso você pode usar textarea ou pre, eu utilizo pre, e aqui vai um exemplo do html utilizado para exibir a inclusão dos arquivos (que aparece aí em acima).

 

<pre name="code" class="html">
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/SyntaxHighlighter.css&quot;&gt;&lt;/link&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shCore.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushCSharp.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushXml.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
&lt;/script&gt;
</pre>

 

O nome da tag (textarea ou pre) sempre deve ser code, e a class é que define a linguagem de programação utilizada, que pode ser:

C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Exemplo:

<pre name="code" class="vb">

Programação aqui

</pre>

Você também pode fazer algumas personalizações, selecionar o número de contagem inicial das linhas (para exibir códigos grandes, segmentados por exemplo)…

Simples e útil, né? Mais informações aqui. 😉

Google Doctype

Publicado em Publicado por gserrano

O Google acaba de lançar um novo serviço, uma espécie de wiki para desenvolvimento de projetos web. Se chama Google Doctype. A idéia é ser uma biblioteca escrita por desenvolvedores web para os próprios desenvolvedores, falando sobre HTML, Javascript, CSS e tudo mais que se refere à (boa) prática no desenvolvimento de código.


Se vai pegar ou não, ninguém sabe. Mas, estando esse wiki dentro do Google Code, a chance de ser um wiki muito alimentado nos próximos momentos é grande.

Google Doctype
clique para ampliar

 

Referência: http://googlesystem.blogspot.com

Web 2.0 sem Ajax?

Publicado em Publicado por gserrano

Primeiro, vou agradecer @gserrano e @biab por poder dar meus pitacos aqui no odesenvolvedor.com.br 🙂

Estava pensando "o que seria um assunto bacana de se falar, que interessa a todos (desenvolvedores web) e que pode fomentar uma discussão?". Foi quando comecei a refletir sobre alguns acontecimentos na vida profissional: reuniões com clientes, bate-papo com colegas, desentendimentos com área comercial, etc…

E um grande ponto que sempre me leva ódio é quando alguém mistura o termo web 2.0 (considere você isso um termo, uma tendência, ou apenas mais um novo buzzword) com ajax (a metodologia); se seu site tem ajax, ele é web 2.0.



Não acho que seja necessário dar aulas sobre as diferenças entre um e outro (até porque a definição de ambos já foi feita em milhões de outros textos na internet), mas vou explicar rapidamente o que cada uma dessas palavras – ou termos – significa para mim, depois de anos trabalhando com web e nos últimos desses, muito ligado a eles:

web 2.0 é um apelido dado para a chamada revolução que ocorreu nos últimos 3 ou 4 anos, onde a internet deixou de ser um local onde o grande público visitava sites e recebia o conteúdo todo pronto – gerado por uma minoria – sem ter voz ativa, e passou a ser (ou está passando a ser, pois estamos sempre em constante mudança) um local onde o grande público pode contribuir com conteúdo, compartilhar conhecimento e ditar (ou seria melhor dizer seguir?) novos caminhos.

Ajax é uma metodologia de desenvolvimento, que combina algumas tecnologias – sendo a capacidade de se fazer requisições assíncronas a um servidor via javascript a base dela (não se esquecer que o xhtml, CSS, DOM, etc… fazem parte do pacote).



Tendo posto isso em pratos limpos, vêm o grande problema – aquele que me leva ao ódio em alguns momentos: onde está a relação de um com o outro?

Vamos ver… blogs, RSS, tags, (ia usar o termo taxonomia, mas ele diz tão pouco quando comparado ao termo tags…), redes sociais (orkut, facebook, myspace), wikis. Poucos ousam falar que esses itens não são ótimos exemplos de web 2.0. E claro que são… em todos eles, a tal revolução está presente; o usuário contribui com o conteúdo, ele escolhe para onde pode ir, o que quer fazer.

E aí? O que mais vou falar?

Talvez nem precisasse, é só analisar se algum exemplo desses necessita do uso de ajax para existir. Veja lá, são serviços que podem – ou não – se utilizar de pitadas de ajax (um suggest para as tags do del.icio.us por exemplo, ou um agregador de feeds como o Netvibes), mas que funcionariam na sua essência da mesma forma. O tal do ajax está lá não para ser o centro das atenções, mas sim para colaborar com o usuário; ajudar na sua experiência, facilitar seu uso, aumentar a velocidade do acesso, etc…

Então, vamos pensar: se não existisse o (tal do) ajax, nenhum dos conceitos abrangidos pelo termo web 2.0 seriam afetados – usuários continuariam conseguindo prover conteúdo, trocar informações, definir caminhos, fazer escolhas. Mas, o que seria do ajax sem a web 2.0? Seria apenas mais uma metodologia de desenvolvimento para web.

Ocorre uma grande confusão, e aí sou obrigado a dizer que grande responsabilidade é de nós, desenvolvedores, em colocar tecnologias acima de tudo. Acabamos nos ligando tanto às tecnologias que deixamos de lado os conceitos.



Resumindo: web 2.0 é focar na troca de informações, na colaboração entre os usuários, no conteúdo participativo. Qual tecnologia usar para fazer isso ser possível? Você escolhe 😉

Como gerar números random em ASP?

Publicado em Publicado por gserrano

Como sortear um número randômico em asp

Aqui vai uma função bem simples para gerar números randômicos em ASP sem complicação, possibilitando delimitar o máximo e o mínimo.

Dim menor, maior, sorteado
RANDOMIZE
meno = 1
maior = 5
sorteado = Int((maior-menor+1)*Rnd+menor)

 

Para aplicação prática do número sorteado para banners rotativos, por exemplo, você pode utilizar um SELECT CASE, como o exemplo abaixo:

SELECT Case sorteado

Case "1"
    banner = "banner1.swf"
Case "2"
    banner = "banner2.asp"

end select

 

Exemplo de aplicação

Estou usando esse random em asp para exibir os anúncios com a API Boo-Box (no Shopping a direita do texto).

Quando não existem tags cadastradas para aquela publicação um Random é usado para selecionar tags pré-definidas (com o select case) por mim para montar a vitrine.

Se existem tags são usadas, senão o random, então sempre existem produtos para visualizar.

 

Espero ter ajudado!
Dúvidas, críticas e contribuições nos comentários… 😉