Navegador de histórias em quadrinhos
Senhores. Senhoras. Aqui está.
É gratuito, podes alterar como bem entender.
Ninguém é obrigado a nada, mas ficaria muito grato a ti, se optar por utilizar esta solução, pudesse divulgá-la ou enviar um link pro meu site. Vamos aos detalhes.
1. VANTAGENS
1.1. Código aberto (open source)… tu podes mudar, é teu e ninguém tasca.
1.2. Livre do servidor – seja linux ou windows, o navegador de HQ usa HTML + javascript (ajax) + XML.
1.3. Livre também de linguagens – seja PHP, ASP etc…
1.4. Livre de banco de dados (uns usam este, outros usam aquele).
1.5. Navegação multidirecional: 3 páginas anteriores ou posteriores à atual; vai para a próxima página ou anterior; vai para a primeira ou para última; digite o número da página que você quer ver; o navegador diz quantas páginas tem aquele projeto, HQ, tirinhas etc.
1.6. Decides qual página mostrar ao leitor (primeira, última ou determinado número da página).
1.7. Permite hospedagem em qualquer lugar das tuas imagens – seja teu site ou outro de hospedagens de arquivos/imagens como o Flickr (o Criador salve o Flickr).
1.8. Quantos projetos tu quiseres – prá mudar de HQ é só clicar no menu (select).
1.9. Controle dos menus – superior, inferior ou ambos.
1.10. Podes associar HQs por posts – quantos posts/HQs quiser por página e navegação independente dentro post – sem recarregar (reload) a página.
1.11. Podes associar páginas de HQs por posts ou páginas de um site/blog – quantas quiser por dia, com reload (recarregando a página).
1.12. Associe HQs por páginas do teu site – não funciona só em blogs…
1.13. Funciona (ou deveria funcionar) com todos os CMS (Wordpress, Joomla… o que mais?).
1.14. Se “adapta” ao formato (altura/largura em pixels) da HQ digital – sejam tiras, cartuns, ou quadrinhos.
1.15. Fontes, cores e leiaute personalizável.
2. DESVANTAGENS
2.1. Não usa banco de dados. Isso teria que se adaptar caso a caso – optei por fazer algo aberto e genérico, não voltado a MySQL, PostGREE etc… com isso vêm algumas desvantagens:
2.1.1. a instalação é manual;
2.1.2. o recorte das imagens é manual;
2.1.3. o upload das imagens tem de ser manual;
2.1.4. a atualização tem de ser manual – upload e inserção da HQ/tira/cartum no seu site/blog;
2.1.5. sem agendamento futuro.
3. O QUE QUERO FAZER
3.1. Um administrador em PHP + MySQL (não fiz prá não restringir o uso) que permita:
3.1.1. instalação;
3.1.2. recorte e upload de imagens quando o usuário optar por armazenar as imagens em seu site;
3.1.3. agendamento de publicação;
3.1.4. integração opcional ao Wordpress.
4. INSTALAÇÃO
4.1. Baixe o arquivo e decompacte-o.
4.2. Abra o arquivo showComic.js (dentro da pasta js) e substitua o endereço absoluto de onde ficará o navegador (no meu caso eu coloquei no endereço “http://ds.art.br/wp-content/”).
src=\”XYZ/dsartbr_navigator/index.html?name=”
Exemplo:
src=\”http://ds.art.br/wp-content/dsartbr_navigator/index.html?name=”
4.3. Faça o upload da pasta do navegador (com todos os arquivos) no endereço que anteriormente preencheste;
4.4. No arquivo index do seu site/blog, entre as tags <head></head>, coloques o seguinte:
<script type=”text/javascript” src=”XYZ/dsartbr_navigator/js/jquery-1..2.6.js”></script>
<script type=”text/javascript” src=”XYZ/dsartbr_navigator/js/showComic.js”></script>
Onde XYZ é o endereço completo de onde colocaste o navegador. No meu caso é “http://www.ds.art.br/wp-content/”.
Exemplo:
<script type=”text/javascript” src=”http://www.ds.art.br/wp-content/dsartbr_navigator/js/jquery-1..2.6.js”></script>
<script type=”text/javascript” src=”http://www.ds.art.br/wp-content/dsartbr_navigator/js/showComic.js”></script>
5. USO
5.1. IMAGEM DA SUA HQ
5.1.1. Faça o upload da imagem/página onde desejar (já no formato final que queiras que ela apareça no seu site/blog);
5.1.2. Descubra o endereço absoluto da tua imagem, seja no teu site ou em outro lugar. Para descobrir o endereço de uma imagem, clique com o botão direito sobre ela e selecione propriedades (da imagem). Isto depende do navegador – alguns já dão opção de copiar o endereço da imagem.
Exemplo: http://farm3.static.flickr.com/2079/1505305695_783476043a_o.gif
5.2. CONTROLE DE NAVEGAÇÃO
5.2.1. Abra o arquivo comics.xml, dentro da pasta xml. Lá existe a estrutura (node):
<comic name= “w“>
<page number=”x” image=”y” link=”z” />
</comic>
w = nome da tua HQ (exemplos de minhas HQs: Muertos ou 10 Centavos ou Sétimo Filho etc).
x = número da página (1, 2, 3 etc).
y = endereço absoluto da imagem da tua HQ – jpg, gif, png etc (http://farm3.static.flickr.com/2079/1505305695_783476043a_o.gif).
z = link/endereço de onde a HQ deve aparecer no teu site (http://ds.art.br/navegacao/). Use este recurso apenas se desejares navegar entre páginas ou posts. Caso queiras navegação de várias páginas de HQ no mesmo post/página, exclua todo o link=”z“.
Exemplo de navegação entre posts/páginas:
<comic name=”Navegação entre posts“>
<page number=”1” image=”http://farm3.static.flickr.com/2079/1505305695_783476043a_o.gif” link=”http://ds.art.br/navegacao/” />
<page number=”2” image=”http://farm3.static.flickr.com/2299/1506167790_dccf76686e_o.gif” link=”http://ds.art.br/entre/” />
<page number=”3” image=”http://farm3.static.flickr.com/2029/2535044052_78736812f7_o.gif” link=”http://ds.art.br/posts/” />
</comic>
Exemplo de navegação em um mesmo post/página:
comic name=”Navegação dentro do post“>
<page number=”1” image=”http://farm3.static.flickr.com/2079/1505305695_783476043a_o.gif” />
<page number=”2” image=”http://exploradoresdodesconhecido.com/tiras/2008-06-28.jpg” />
<page number=”3” image=”http://farm1.static.flickr.com/154/417355064_c92d43eac4_o.gif” />
</comic>
5.2.2. Suba (atualize, através de upload) o arquivo comics.xml, sobreescrevendo o antigo.
A cada nova página que quiseres apresentar no site, acrescente a linha <page number=”x” image=”y” link=”z” /> dentro projeto correspondente, com os dados desejados, na ordem correta de páginas (entre as tags <comic></comic>).
Para um novo projeto, insira um novo “node”, abaixo do anterior. Quantos quiser. A ordem colocada será a mesma apresentada no menu do navegador (select).
Sempre terá de atualizar o arquivo comics.xml no seu site a cada página ou projeto, não se esqueça.
5.3. APLICAÇÃO AO SITE
5.3.1. A cada post/página do teu site que aplicares determinada página/tirinha/HQ, deves aplicar o seguinte código (dependendo do caso, você deve colocar este código via opção HTML do seu editor de conteúdo – leia o FAQ):
<script type=”text/javascript”>
$(document).ready(function() {
showComic (“w“, “x“, “#y“, “z“);
});
</script>
<div id=”y“></div>
w = nome da tua HQ (exemplos de HQs minhas: Muertos ou 10 Centavos ou Sétimo Filho etc). DEVERÁ SER O MESMO NOME QUE ESTÁ NO ARQUIVO COMICS.XML.
x = a página que queres mostrar. Pode ser o número da página (1, 2, 3 etc), “first” (para mostrar a primeira página da HQ) ou “last” (para mostrar a última página da HQ ou atual).
y = uma variável (string) onde aparecerá tua HQ (somente minúsculas, sem acentos, sem espaços). Esta variável deve ser única – a cada página ou HQ. NÃO repita variáveis de/em outros projetos (muertos1, muertos2, muertos3).
z = opção se desejas que o menu apareça acima (preencha com “top“), embaixo (preencha com “bottom“) ou em ambas posições (preencha com “both“).
Exemplo:
<script type=”text/javascript”>
$(document).ready(function() {
showComic (“Navegação entre posts“, “3“, “#entreposts3“, “bottom“);
});
</script>
<div id=”entreposts3“></div>
Navegação entre posts = nome da minha HQ. O mesmo nome que está no arquivo comics.xml.
3 = a página que quero mostrar (ou ainda é possivel usar “first” para exibir a primeira página ou “last” para página atual).
entreposts3 = uma variável (string) onde aparecerá minha HQ. Só posso utilizar uma a cada HQ/página/post.
bottom = optei por mostrar o menu apenas abaixo da HQ (poderia ser “top” para aplicar acima da página de quadrinhos ou “both” para exibir o menu acima e abaixo da imagem).
———————————————-
É isto.
Quis desde o início algo que fosse genérico, sem depender muito de tecnologia (?!). Elas vêm e vão. Uns acham bom isto, outros aquilo. Há ganhos e perdas com isto, com certeza. Mas sendo código aberto, todas as funcionalidades podem ser adicionadas e modificadas, caso a caso.
Claro que dá um certo trabalho prá “instalar” e rodar na primeira vez. E a cada página/HQ (com upload manual), você tem que atualizar o XML e usar o código na aplicação ao post ou página do site. Mas depois que pega o jeito, se entende como funciona, é bastante prático e com uma liberdade de opções que não encontrei em webcomic browsers por aí…
Quero ver se automatizo isso – mas prá PHP/MySQL, com opcional integração ao Wordpress… mas sabe lá quando…
Peço que dúvidas e sugestões sejam colocadas nos comentários deste post – vou construindo um FAQ (perguntas frequentes) de acordo com os comentários.
———————————————-
6. FAQ – perguntas frequentes
6.1. Eu coloco o código de aplicação (5.3.1.) mas não funciona!!!
Uso o wordpress versão 2.5.1. Na edição do post ou de uma página, coloco todo o texto e o edito como quero e, depois disso, vou na aba HTML do editor (tinymice) e coloco o código onde desejo que apareça a página/HQ. Salvo (ou publico) e vou prá galera. Há de fato um problema: se você retornar a editar este post/página pelo editor visual (e não pela aba HTML), ele provavelmente “limpará” seu código. Então, atenção. Mais a frente apresento como desabilitar esta “limpeza” do editor…
6.2. Você instala/personaliza este navegador prá mim?
Lamento – mal dá tempo de fazer minhas HQs… Coloque suas dúvidas nestes comentários, que vou incrementando esta lista da forma que (como e quando) puder ajudar. Peço apenas paciência.
