Pós-Graduação Lato Sensu/Especialização

Jonas Leave a comment

A UNINORTE esta lançando dois cursos de especialização nas áreas de Informática.

Um voltado para educação e outro voltado para Desenvolvimento WEB, confira:

Web Marketing

Público-Alvo:

  • Formados em cursos de computação, publicidade e marketing.

web_grade_.gif

Período, investimento e demais informações, faça download do prospecto.

webmarketing.pdf

Informática na Educação

Público-Alvo:

  • Licenciados em qualquer área de atuação.

educacao_grade_.gif

Período, investimento e demais informações, faça download do prospecto.

informatica na educacao.pdf

Forró Chinês?

Jonas Leave a comment

Oia só que legal, postado pelo Manero, esse vídeo de diferenças culturais é muito legal:

[youtube]http://www.youtube.com/watch?v=Qv9wk5lgGFo[/youtube]

Se você não estiver entendendo nada, não tem problema, use a legenda.. 🙂

Tá, mas agora faça esse teste, tire o som do vídeo, e vá até este site: http://www.garagemmp3.com.br/bandas/forro

Dá um play em alguma música e deixa o forró rolar… e acompanhe o vídeo… é ficou mais familiar a dancinha né?

Diferenças culturais, é show!!

HowTo: Editor TinyMCE com LightBox

Jonas 12 Comments

HowTo: Como integrar o editor TinyMCE com LightBox.

  • Definições:
    TinyMCE – é um editor Javascript HTML WYSIWYG multi-plataforma, web based. É usado principalmente em sistemas de notícias, onde fornece uma interface semelhante a um editor de texto, permitindo realizar praticamente toda a formatação necessária em um bloco de texto. Site oficial: http://tinymce.moxiecode.com/
  • LightBox – É um script que permite fazer sobreposição de imagens á página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Página oficial: http://www.huddletogether.com/projects/lightbox2/

Exemplo de utilização: Esta sendo muito usado, o efeito LightBox dentro de sistemas de notícias, o G1 é um exemplo, confira:

http://g1.globo.com/Noticias/Mundo/0,,MUL268938-5602,00.html,

basta clicar em uma das fotos.

Agora você não precisa ficar quebrando a cabeça pra poder fazer isso, é tudo muito, mas muito simples.

============================================================

1 . Você deve baixar o material necessário:

TinyMCE – http://tinymce.moxiecode.com/download.php
Baixe a última versão disponível. Você depois pode baixar no mesmo local, o pacote de idiomas, que tem para o português também. É fácil fazer a mudança, no próprio site ensina, só não iremos falar aqui porque não é o objetivo deste howto.

Já falamos aqui, em outra oportunidade, que o TinyMCE não possui um assistente de upload de fotos, mas que você pode usar o plugin Ibrowser para isso, se estiver usando PHP. Se for ASP, JSP, CFM ou qualquer outra linguagem pode se utilizar o TinyFCK.

LightBox2 – http://www.huddletogether.com/projects/lightbox2/#download
Também, baixe a última versão.

============================================================

1 . Configurando:

  • Descompacte o arquivo baixado, você vai ter uma basta chamada examples, com dicas e modelos para você ver como implementar em seu formulário, e outra chamada jscripts, com os scripts necessários para que o TinyMCE funcione.
  • Copie a pasta jscripts para dentro de seu projeto. Se você já tiver uma pasta de JavaScript em seu projeto, copie somente a pasta que fica dentro dela, a tiny_mce que é onde fica todos os scripts.

Na sua página que faz a inserção do conteúdo através de um formulário com os campos de Text e Textarea, você vai editar, inserindo entre as tags <head>:

<!– TinyMCE –>

<!–aqui você deve indicar o caminho correto, dentro de seu projeto, onde se encontra a pasta tiny_mce que você copiou anteriormente–>
<script type=”text/javascript” src=”jscripts/tiny_mce/tiny_mce.js”></script>

<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,

// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
});
</script>
<!– /TinyMCE –>

É claro que tem outras opções, é so você ver o código fonte dos exemplos, na pasta examples.

Quando você terminar, seu formulário terá mais ou menos essa aparência:

Ou seja, os campos Textarea automaticamente assumirão o editor de texto.

2. Para que o efeito LighBox funcione:

  • Você vai inserir imagens normalmente, através do botão inserir imagem do editor. Se você estiver usando o Ibrowser, terá um botão exclusivo para isso, se não estiver usando será o botão padrão, sendo que neste caso a imagem já deve estar carregada em algum lugar, podendo ser uma imagem de um outro site, por exemplo, copie e cole este endereço, no campo URL da imagem:

    http://www.funpic.hu/files/pics/00002/00002281.jpg

  • Depois de inserir a imagem, você pode redimensionar conforme ficar melhor pra você.
  • Agora você clica na imagem, e depois escolhe o botão Insert/Edit Link, que é o desenho de uma corrente. Vai surgir uma outra janela, você então vai colar novamente a URL da imagem que você quer que ele abra: http://www.funpic.hu/files/pics/00002/00002281.jpg
  • Na mesma janela, você tem a opção Title, ai você vai colocar uma descrição da foto, que vai aparecer quando a foto for clicada, exemplo: Gato Fumando.
  • Clique na aba Advanced, vá até o combo Relationship page to target, e escolha a opção Lightbox, e pronto.

3. Configurando a página de resultado.

Na página que exibe as notícias, você vai ter que inserir as propriedades do LightBox, antes da tag <head>:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script

É claro que você já pegou esses JavaScripts, e copiou para a pasta JS de seu projeto né?

Ai é so colocar também o CSS do Lightbox:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Pronto, já deve funcionar…

Até a próxima.

Howto – Como abrir pop-up com Javascript corretamente

Jonas 20 Comments

HowTo: Veja como abrir janelas pop-up utilizando JavaScript de maneira correta.

Alguns podem pensar: “que besteira, isso é trivial, qualquer desenvolvedor com o conhecimento mais básico sabe fazer isso”.

Pois bem, acreditem, muitos fazem, mas poucos o fazem de maneira correta. Então vejamos.

———————————————————————————

Muitos usam um método errôneo para abrir um pop-up em suas páginas. Explico:

<a href=”#” mce_href=”#” onClick=”window.open(’/pagina.htm‘,’popup‘,’width=600,height=350‘)”>Abrir</a>

Neste caso, unicamente esta se criando um link com o texto ‘Abrir’, com suas cores pre-definidas e etc… porém a forma de abrir esta incorreta:

  1. As pessoas que não tem javascript ativo não irá ver nada, simplesmente clicam no link e nada irá acontecer.
  2. Os sistemas de buscas não conseguem indexar conteúdo de um link #.
  3. Não sabemos onde nos levará este link, simplesmente olhando na barra de status.
  4. Se pedir para abrir uma nova janela, ou nova aba, veremos a mesma página que estamos, sem nenhum conteúdo novo.
  5. ….

Resumindo, há muitos incovenientes em nossa página para uma coisa tão simples.

Para usarmos 100% o código de um pop-up seria correto usarmos dessa forma:

<a href=”/pagina.htm” target=”_blank” onClick=”window.open(this.href, this.target, ‘width=600,height=350‘); return false;”>Abrir</a>

Se não tiver o javascript ativo, o evento OnClick entra em ação, que vai reconhecer pelo elemento .this é um elemento href, e abrirá em um tamanho determinado.

Se falhar em abrir retornará um false no evento OnClick, e então o elemento <a> executaria sua função, abrindo a pagina.html em uma nova janela.

O que ganhamos com isso?

  1. Os usuários sem javascript terão acesso ao conteúdo.
  2. Os buscadores poderão rastrear a página.htm
  3. Poderemos saber onde o link nos levará, olhando a barra de status.
  4. Ao abrirmos em uma nova janela, se abrirá o conteúdo do link em uma janela de tamanho padrão.

Não custa nada fazer as coisas corretamente né?

Até a próxima.

HowTo: Vídeos do YouTube como proteção de tela

Jonas 8 Comments

Howto: Transformando vídeos em proteção de telas.

P.S: Desculpe as imagens em espanhol, é de um PC recém comprando na Bolívia e não quis remover e nem traduzir o sistema.

Bem, a idéias é esta, utilizar vídeos, seja do YouTube, Google Vídeo, Meta Café e outros como protetor de telas.

Utilizaremos três aplicações, todas gratuitas, duas online:

1 – Devemos buscar o vídeo desejado no YouTube, por exemplo, copiamos usa URL e vamos até o site Keepvid para baixar o vídeo (Ao baixar, receberá a extensão .FLV):

Descargar video

2 – Depois de ter baixado o vídeo, vamos até Media Convert, fazemos upload do arquivo .FLV e como formato de saída, indicamos SWF. De um OK e espere que o sistema faça o upload e converta o arquivo.

Convertir archivo

3 – Instalamos InstantStorm e abrimos. Esta ferramenta serve para converter qualquer SWF em um protetor de telas. Na primeira aba que aparece, clique para criar um projeto, passo-a-passo:

InstantStorm

4 – Vai abrir o Wizard, ali completamos o título do protetor de telas, e logo teremos o SWF convertido. Também podemos escolher uma imagem que vai aparecer na hora de escolher a proteção de tela.

Wizard

5 – O passo seguinte será clicar em Finish. Próximo passo é exportar o instalador, clique em Create. La damos um nome e selecionamos algum local onde irá ser gerado o .EXE instalador. Automaticamente InstanStorm fará a compilação e em alguns segundos teremos o nosso arquivo.

Ai é só executar o arquivo, e selecionar a proteção de tela.

Buscador de imagens em vários idiomas

Jonas Leave a comment

Veja só que legal.

Muitas vezes necessitamos buscar imagens para algum projeto, porém encontramos muitos resultados que as vezes não é o que queremos, então acabamos por procurar em outros idiomas, como inglês, alemão, espanhol… para ter os resultados esperados.

Hoje encontrei uma ferramenta que já exatamente isso, procurando uma imagens em diversos idiomas tanto no google como no Flickr, trata-se do Panimages: um buscador que traduz automáticamente os termos de buscas em até 49 idiomas, tornando o resultado mais preciso.

Link: Panimages