» Javascript » Modelando por Diego Franco

Modelando por Diego Franco

Este é o site pessoal do Diego Franco Miguel, Desenvolvedor, Webdesigner (Padrões Web, XHTML, Microformats e tudo que contribui para uma melhor customização e leitura de um site), falo aqui sobre novos comportamentos na internet bem como as evoluções que ela sofre na área de desenvolvimento.



tinyMCE: O Editor do Wordpress

Por: Diego Franco - [ October 9th, 2008 ]

A muito tempo estou querendo fazer algumas adaptações no editor do Wordpress para facilitar a minha vida. Então resolvi separar um tempo para estudar o tinyMCE o editor do Wordpress.

O tinyMCE é um editor de conteúdo WYSIWYG (What You See Is What You Get) “O que você vê é o que você obtêm”. Feito em javascript e sobre licença GNU ou LGPL - Lesser General Public License, é um excelente editor muito bem documentado e com muitos recursos.

Algumas recomendações importantes para o uso do Editor:

  • Você pode usar, alterar e distribuí-lo, desde que seja sem fins lucrativos;
  • Você não deve alterar ou excluir os direitos autorais;
  • Qualquer modificação que você faça no código do tinyMCE deverá ser comunicado ao desenvolvedor;
  • Para obter uma licença comercial, você deverá entrar em contato com a Moxiecode Systems AB proprietária do código.

O TinyMCE é facilmente configurado para integrar outros sistemas de gerenciamento de conteúdo. Fiquei impressionado com a quantidade de informações que você pode encontrar no site para auxiliar a implementação. Logo abaixo do post vou informar alguns dos links principais.

O que mais me impressionou foi de que, além de ser totalmente customizável existe a possibilidade de você criar seus próprios temas e plugins.

Outras peculiaridades:

  • é um crossbrowser, compatível com:  Mozilla, MSIE, Firefox, Opera e Safari Chrome;
  • Fácil de integrar - Com poucas alterações de código;
  • Totalmente customizável;
  • Totalmente flexível - PHP / .NET / JSP / Coldfusion gzip compressor, TinyMCE;
  • Leve e rápido;
  • AJAX - Você pode facilmente usar AJAX para salvar e carregar conteúdos!
  • Multilingue - Suporte para várias línguas. E se não tiver a sua você encontrá todas as informações para criar o pack da sua língua.

Agora a parte boa, ao menos pra mim foi.

Você já precisou inserir nos links do seu post valores para alguns atributos tais como:

  • rel;
  • hreflang;
  • eventos: Onfocus, Onblur e qualquer “on”  que exista;
  • class.

Sim ou não?

Tenho certeza que sim. E talvez muitas das vezes, você se sentiu improdutivo ou com preguiça de ter que ir direto no código e colocar na mão os atributos que precisou.

Aqui vem a razão de eu ter dado uma lida na documentação do tinyMCE, eu sempre tinha que ir no código e colocar todos os atributos e links, eu disse tinha porque não tenho mais. Conheci o ADVLINK um plugin para o tinyMCE, que simplesmente me poupa o tempo de ir até o código inserir atributos nos meus links, simplesmente alterando o popup padrão de inserção de link para uma ultra-hiper-super avançada, que te possibilita inclusive adionar eventos.

Como usar e como instalá-lo?

É o que você irá conferir no meu próximo post. Lembrando que o blog estará de roupa nova no dia 13/10/2008 e com muitas novidades! Não deixem de conferir.

[UPDATE] - Olá galera conforme prometido você pode conferir a sequência deste post neste link: http://diegofranco.net/archives/plugin-advlink-ensira-atributos-rel-hreflang-class-id-nos-links-dos-seus-posts-sem-precisar-ir-no-codigo .

Até lá pessoal e boa leitura nas referências.

Referências

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

Javascript | 1 Comentário » View blog reactions

Tags | |

Aproveite! Leia isto também:



Vamos embedar agora com o SWFObject.

Por: Diego Franco - [ March 16th, 2008 ]

Ok se você usa arquivos flash em seus projetos web e usa UFO para embedá-los em suas páginas como eu, você precisa ler este post do Henrique, porque a era agora é do SWFObject. Agora se você não tem nem idéia do que estou falando vai ter que garimpar algumas palavras no “paisão” Google porque a história é longa e antiga.

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

Embed, Flash, Javascript, SWFObject, UFO | Nenhum Comentário » View blog reactions

Tags

Aproveite! Leia isto também:



Internet Explorer Developer Toolbar + IEDebugBar

Por: Diego Franco - [ December 14th, 2007 ]

Vou postar aqui três extensões para o Internet Explorer que qualquer hora dessas pode te salvar de um erro esquisito. Já disse e volto a dizer, boas ferramentas de desenvolvimento podem afetar absurdamente em sua produtividade, te ajudando a descobrir erros de script e outras coisinhas que vão aparecendo no decorrer do desenvolvimento de um site.

A primeira: Internet Explorer Developer Toolbar ( Baixe aqui )

Essa tem um visual semelhante a Firebug a qual citei aqui neste post, porém nem se compara a tal extensão. Essa extensão irá te auxiliar em erros de sintáxe, indentificação de elementos como DIVS, Links, imagens e outros, dividos por cores e mais algumas outras opções não tão interessantes, mas não deixa de ser uma extensão interessante já que boas extensões para o IE são raras.

A segunda: IEDebugBar ( Baixe aqui )

Essa é parecida com a de cima e consequentemente também com a Firebug, um pouco mais robusta que a IEDeveloper a IEdebugBar tem um inspetor de propriedades para DOM, HTTP, Javascript, AJAX e outras mais que você pode ver uma prévia abaixo (em inglês) ou no conteúdo completo no site do desenvolvedor.

  • DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
  • HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
  • Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
  • HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
  • And many more features: See page cookies, get pixel color on a page, make a page screenshot…

A terceira: Companion.JS ( Baixe aqui ou acesse o site do desenvolvedor)

Essa sim eu tenho usado mais constantemente, mais simples do que a DebugBar ela é específica para depurar javascripts, mostra o erro no próprio javascript te indicando a linha, local do erro em destaque e o nome do arquivo. Realmente essa é uma ferramenta que mesmo para aqueles que não usam o IE7 como seu navegador e até mesmo para um Analista de Qualidade, é uma excelente extensão para se usar na hora do desenvolvimento e em casos de erros de javascripts no IE7 claro. Quem nunca se deparou com aquela marmota de mensagem que o IE te dá quando tem algum problema na página? “Concluído mas contém erros na página”, e o melhor é que não informa mais nada, não te dá nenhuma referência de onde está o erro. Essa extensão vai substituir esse depurador padrão que, incluse para que a extensão funcione perfeitamente você deve desabilitar duas opções no IE7 conforme mostrado abaixo.

Vá até o menu:
Ferramentas > Opções da Internet > Avançadas
Na janela Configurações vá até o ítem:
Navegação
Desabilite as caixas:
- “Desabilitar depuração de scripts (Internet Explorer)” e
- “Desabilitar depuração de scripts (Outros)”

A extensão deverá funcionar perfeitamente. Veja abaixo um print da extensão em uso.

DebugBar IE7

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

Addons, Companion.JS, Desenvolvimento, Extensões, Ferramentas, Ferramentas Web, IE7, IEDebugbar, Internet Explorer, Javascript | 1 Comentário » View blog reactions

Tags | | | | |

Aproveite! Leia isto também:



Cantos arredondados sem imagens com Nifty Corners Cube

Por: Diego Franco - [ July 21st, 2007 ]

Nifty Corner CubeRecentemente um cliente me fez uma solicitação para que os cantos do menu horizontal que ia no topo da página fosse com cantos arredondados. Geralmente usamos soluções com imagens, mas dessa vez fiz diferente usei o Nift Corners Cube, um script baseado em CSS e Javascript escrito por Alessandro Fulciniti no site HTML.it. Já na sua segunda versão o script sofreu algumas alterações para que fosse mais versátil e mais simples de se usar do que as versões anteriores. O script foi testado no IE5.5, IE6 e IE7, ópera 8.5, Firefox 1.5 e Safari 2.0, todos com sucesso.
No site você vai encontrar vários exemplos de se usar este script e como implementá-los em sua página. Para aqueles que querem arredondar os cantos de suas divs, menus, abas, colunas, ou até montar um site inteiro com cantos arredondados simplesmente sem usar imagens minha recomendação é: Nifty Corners Cube “Uma mão na roda que arredonda”.

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

CSS, Javascript, Nifty Corners | Nenhum Comentário » View blog reactions

Tags

Aproveite! Leia isto também:



Foto DiegoO Modelando é o site pessoal do Diego Franco Miguel que, atualmente, trabalha como Designer e lidera uma equipe de Agência Web na Webroom Soluções Interativas. Diego é Designer de Interface é especialista em XHTML e CSS, vetorização em CorelDraw, criação de logomarcas, VB for Excel. Gosta de se aventurar em programação ASP.NET, PHP, AS2 e AS3 e procura sempre escrever aqui a fim de colaborar com essa imensa base de conhecimento que são os Blogs.

Me encontre também aqui:

Confira também:

Blogroll:

Sites que eu leio com frequência (Vou atualizando aos poucos)

Pessoas que trabalham comigo:

Sites dos colegas de trabalho da Webroom.

Já trabalharam comigo:



Twitts

Se preferir receba atualizações do site por e-mail. Preencha o campo abaixo com seu e-mail e clique no botão Enviar.

Added Delicious!

Veja mais!

Tags