Hoje tivémos o prazer de assistir às seguintes apresentações:

• Javascript for Beginners, por Pedro Eugénio
• JavaScript done right, por André Luís
• Prototype & LibSAPO.js, por Cláudio Gamboa

Ao contrário da primeira edição, a partir de agora estas sessões passaram a estar abertas ao público, gratuitamente, mas com lugares limitados. Para mais informações sobre as próximas sessões e como se podem inscrever, fiquem atentos ao Blog Developers do SAPO.

Tal como na primeira edição, as apresentações e os vídeos das mesmas vão ser disponibilizados online (actualmente ainda não estão disponíveis os vídeos de todas as apresentações da primeira sessão, mas vão sendo publicados ao ritmo de um por semana, todas as quintas-feiras).

Esta nova versão ainda está longe de ser finalizada. Ainda há algumas funcionalidades em processo de desenvovimento, outras ainda só no papel. Uma vez que foram introduzidas muitas novas funcionalidades, é possível que ainda hajam alguns bugs (apesar de termos feito muitos testes durante a fase em que a aplicação esteve disponível apenas a um conjunto restrito de pessoas).

As Novidades

Uma das novidades principais é a mudança completa do layout da aplicação. A versão anterior tinha sido inspirada no iTunes e nesta nova versão decidi criar um layout próprio tentando aproveitar o que o layout anterior tinha de melhor.

Quanto às funcionalidades, durante estes últimos meses tenho recebido alguns pedidos e nesta nova versão já consegui aplicar a maior parte deles:

Adicionar mais do que uma temporada de cada vez

Um dos pedidos mais frequentes era o de poder adicionar mais do que uma temporada de cada vez. A partir de agora é possível adicionar quantas temporadas quisermos, desde que sejam separadas por uma vírgula. Ex: 1, 2, 3.

Infelizmente ainda não é possíve adicionar “todas” as temporadas disponíveis para uma determinada série, mas vou continuar a trabalhar para que essa funcionalidade seja implementada.

Não ter que enviar uma imagem para a série

Outro dos pedidos mais frequentes estava relacionado com o envio de uma imagem de capa para cada série que era adicionada. Muitos utilizadores pediram para que a aplicação automaticamente adicionasse uma imagem correspondente à série.

Na nova versão, o myTVShows automaticamente adiciona as imagens às séries com base nas imagens enviadas pelos outros utilizadores. Assim que uma série é adicionada, é-lhe atribuída uma das imagens já existentes e o utilizador tem a possibilidade de escolher uma nova imagem (ou enviar a sua) sempre que quiser editar a sére.

Pesquisa de novos episódios

No final da lista de episódios de cada temporada passou a haver uma opção para procurar a existência de novos episódios. Isto permite estar sempre a par das novidades da série e dos novos episódios que vão sendo transmitidos. Esta pesquisa é feita com base na data de transmissão original dos episódios nos E.U.A.

Em breve vou tentar implementar uma secção que permita verificar a existência de novidades (novas temporadas/episódios) para todas as séries que temos.

Link para download dos episódios

Esta foi sem dúvida a funcionalidade mais pedida e também a mais controversa de implementar. O objectivo principal do myTVShows é o de gerir as séries que vamos acompanhando e não o download das mesmas da Internet, mas finalmente cedi aos vários pedidos e coloquei uma secção com links para sites externos que permitem efectuar o download dos episódios via BitTorrent. Convém salientar que a disponibilização de links para sites externos não é ilegal e que no myTVShows não é feito o alojamento de qualquer tipo de ficheiros deste tipo.

Identificação do número de episódios não vistos

Na barra lateral, para cada série temos a informação do número total de episódios que nos falta ver para cada uma.

Desta forma é fácil saber em qualquer altura quais as séries em que temos episódios não vistos sem ter que entrar na página da serie.

Outras Novidades

Para além das novidades visíveis, foram feitas também alterações a quase todo o código da aplicação para a tornar mais rápida e menos pesada. Dessa forma, todas as imagens foram combinadas numa só (usando o método CSS Sprites) o que permite que o carregamento seja feito de forma muito mais rápida e de uma só vez. Este métdo teve no entanto algumas consequências para os utilizadores do Internet Explorer 6 (que não suporta imagens PNG transparentes) e como tal, oficialmente o myTVShows não é suportado em versões do IE 6 ou inferiores (não só por causa das imagens, mas também porque esta versão do IE também não suporta alguns selectores de CSS como por exemplo o :hover).

Em relação ao CSS ainda não está tudo terminado. Falta criar uma folha de estilos para dispositivos móveis (talvez uma específica também para o iPhone/iPod Touch) e outra para ecrãs mais pequenos, como por exemplo uma TV (sim, há quem use o myTVShows directamente na TV).

Futuro

Como disse no início, esta nova versão está longe de ser uma versão final. Optei por divulgá-la já porque penso que já amadureceu o suficiente e também porque ando a ler o livro “Getting Real” da 37 Signals que indica que uma aplicação web deve ser lançada para o público logo que possível. Os próprios utilizadores irão encontrar e ajudar a resolver os bugs e a seleccionar as funcionalidades que mais querem ao longo do desenvolvimento da própria aplicação

Sendo assim, caso encontrem alguns bugs ou queiram que sejam adicionadas ainda mais funcionalidades (lembrem-se que isto é suposto ser KISS – “Keep It Simple, Stupid”), informem-me!

Boas Séries!

Uma vez que se torna um pouco caro trazer um orador deste tipo a Portugal, gostava de saber quantas pessoas estariam interessadas em participar. Dessa forma podemos ter uma ideia dos preços que podemos cobrar. Chocava-os terem de pagar por exemplo 300€ para assistir a uma formação deste tipo?

Uma vez que não me lembro de ter havido nenhum workshop ou formação de AJAX em Portugal nos últimos tempos (pelo menos não com esta categoria ), penso que seria uma mais valia para todos os que nela participem

Digam de vossa justiça!

Estes exemplos irão contemplar temas como: criação de 2 ou mais colunas usando CSS, como criar menus usando uma lista de itens, como posicionar elementos num local exacto numa página, bem como alguns efeitos simples em Javascript. Estou aberto a sugestões

Hoje começo com o tema:

Abrir/Fechar elementos usando Javascript e CSS

Basicamente, através de um pequeno código Javascript e uma linha de CSS conseguimos fazer com que um determinado elemento se abra ou feche mediante um clique. Por exemplo, podemos querer ter alguma informação na página que é acedida apenas quando o utilizador clica num link. Isto faz com que essa informação apareça sem ter que recarregar a página (no fundo, a informação está lá, mas está escondida).

Para tal, basta termos o seguinte código Javascript e colocá-lo na nossa página ou num ficheiro externo:

1. function toggle(obj) {
2. var el = document.getElementById(obj);
3. if ( el.style.display != 'none' ) {
4. el.style.display = 'none';
5. }
6. else {
7. el.style.display = '';
8. }
9. }

No HTML teremos o link para abrir/fechar a caixa de informação (nota, é necessário indicar que “id” é que vamos abrir/fechar):

1. <a href="#" onclick="toggle('maisinfo');">Mais Informação</a>

E finalmente, a div com a “id” que será aberta ou fechada usando o link anterior:

1. <div id="maisinfo" style="display:none">Conteúdos que ficarão escondidos</div>

O CSS usado nesta div indica que este elemento está escondido quando se abrir a página. Se quiserem que o elemento apareça aberto, basta remover a instrução do style.

Ver exemplo 1

E para quem não tem o javascript activado no browser?

Pegando no Exemplo 1, vamos fazer com que o link “Mais Informação” apenas apareça para os browsers que tiverem o Javascript activado. Sendo assim, alteramos o link para:

1. <script>
2. if (true) {
3. document.write('<p><a href="#" onclick="toggle(\'maisinfo\');">Mais Informação</a></p>');
4. }
5. </script>
6. <noscript><p class="erro">O Javascript está desactivado no seu browser.</p></noscript>

Ou seja, caso não exista nenhuma versão de Javascript, apenas mostramos o texto que está entre as tags noscript.
Esta versão ainda não está perfeita porque falta dizer ao browser que, se não houver javascript, então os conteúdos devem ter um display:block, caso contrário, um utilizador com CSS activo e Javascript desactivo, não irá ver o texto.

Ver exemplo 2

Fazer a mesma coisa, mas com efeitos animados (Script.aculo.us + Prototype)

Para que possamos animar a abertura/fecho do elemento, necessitamos de usar uma “library” de efeitos. Neste exemplo, vamos usar a Script.aculo.us.
A Scrip.taculo.us é uma biblioteca de efeitos em Javascript que pode ser facilmente usada no nosso site, sem ser necessário grandes conhecimentos de programação. Basta fazer download e colocar numa pasta do site.

No cabeçalho da página, temos que chamar os efeitos, assim:

1. <script type="text/javascript" src="/lib/js/prototype.js"></script>
<script type="text/javascript" src="/lib/js/scriptaculous.js"></script>

Nota: Iremos usar esta biblioteca em vez do javascript usado no Exemplo 1.

Depois basta alterar o link que também tinhamos definido para algo como:

1. <a href="#" onclick="Effect.toggle('maisinfo','slide'); return false;">

Em que: “maisinfo” é o nome da div a abrir/fechar e “slide” é o efeito. Podemos usar outros efeitos, tais como “blind” ou “appear”.

Ver exemplo 3

Separação do Javascript dos conteúdos

Da mesma forma que podemos separar a apresentação (CSS) dos conteúdos (HTML), também é possível separar os efeitos e outras animações (Javascript) para fora do código HTML.
(Obrigado ao Sérgio Nunes pela dica!)

Fiz um pequeno teste com base no Exemplo 1, em que modifiquei o HTML, removendo todo o Javascript e colocando as acções à parte no Javascript.

Ver exemplo 4

E fazendo a mesma coisa usando jQuery

Graças ao José Carlos, temos um exemplo que consegue fazer tudo o que os anteriores fazem, e melhor. Através do jQuery, uma biblioteca de Javascript, é possível, com pouco código, abrir ou fechar um elemento usando animação e, ao mesmo tempo, ter em conta os utilizadores que não têm javascript activado. Além de tudo isto, faz também a separação do Javascript para um ficheiro externo, o que nos deixa com um HTML limpo e sem mais nenhuma tag que não seja HTML puro.

Ver exemplo 5

Definitivamente, esta é a melhor solução para este tipo de situações.

Outros métodos

O Dustin Diaz mostra 7 maneiras diferentes de abrir/fechar (toggle) um elemento usando Javascript. Estes exemplos fazem basicamente a mesma coisa mostrada no Exemplo 1, mas usando várias metodologias diferentes.

Conclusão

Usando um pequeno pedaço de código é possível tornar o nosso site um pouco mais interactivo. É claro que este tipo de elementos e as animações não devem ser usadas em demasia, mas sim, tendo em conta um propósito e um objectivo bem definidos que facilitem de alguma forma a navegabilidade do site.
Por exemplo, esta função seria bastante útil numa listagem de itens com um link para “ver mais informações” sobre cada um deles. Desta forma, o utilizador não seria bombardeado com tanta informação de início e ao mesmo tempo teria a liberdade de poder abrir a informação detalhada de cada elemento sem ter que recarregar a página inteira nem distrair-se com outra informação que não é relevante na altura.

Nota: Este artigo é apenas uma forma de eu ir testando algumas coisas em Javascript. Uma vez que só agora estou a aprender a usar esta linguagem (ainda só consigo usar coisas que outros já desenvolveram) é normal que nos comentários apareçam pessoas mais entendidas que eu e que dêem melhores sugestões/soluções para estes problemas. De qualquer das formas, a discussão do tema ajudará sempre a que eu (e outros) possamos aprender um pouco mais. Talvez nos próximos artigos me fique exclusivamente pelo HTML+CSS e deixe o javascript um pouco de lado até perceber minimamente da coisa