Categorias
Tecnologia

Lendo RSS Feed somente com Javascript (jQuery)

Eu construi uma página estática em HTML, CSS e JS para ser uma espécie de portfólio e cartão pessoal para mim e queria colocar uma seção com os artigos deste blog nela. A melhor maneira de acessar esses artigos sem muito esforço é usando o RSS Feed do blog.

Mas a página é “estática”, então eu poderia usar no máximo o Javascript para ler o Feed do blog. Uma opção seria acessá-lo via Ajax e processar os dados em seguida, mas se o Feed for de outra origem (domínio diferente, que não era o meu caso, mas pode ser o seu) ia acabar esbarrando em um erro de segurança (CORS Error) e não funcionaria.

Então encontrei uma solução (no link de referência no final do artigo), usar uma API do Google que lê um Feed e retorna um JSON com as informações dele.

Segue abaixo uma versão do código que estou utilizando na página, totalmente comentado.

[gist id=”98d6f630b9b89b229deaa19acb38e2bd”]

Os items que temos disponíveis para acesso, como mostra a imagem abaixo, são o autor, categorias e tags, o conteúdo inteiro em HTML, um pequeno snippet do conteúdo em texto puro, a URL do artigo, a data de publicação e o título. Eu senti falta do retorno das mídias, como fotos, por exemplo, mas se for necessário a opção seria pegá-las do próprio HTML que retorna em “content“.

É isso aí, qualquer dúvida ou sugestão deixe nos comentários abaixo. Para ver esse código em funcionamento acesse o site.

Referência: http://pt.stackoverflow.com/a/65758

Categorias
Tech

O que é Tableless?

Apesar de muito utilizada atualmente no meio da informática, principalmente em anúncios de empresas que desejam profissionais de webdesign, muitas pessoas não estão familiarizadas com a expressão Tableless.

Então vamos começar por onde o problema começou.

WYSIWYG (ou What You See Is What You Get) é uma expressão utilizada para definir programas que demonstram na tela exatamente o que você verá no resultado final. Essa expressão começou a ser utilizada para programas editores de texto, porém muitos foram (e são) os programas geradores de HTML que atuam da mesma forma, escondendo o código fonte da página de internet por trás da visão final. Um exemplo? O Adobe Dreamweaver.

No começo da popularização da internet, muitos iniciantes utilizaram esse tipo de programa para publicar sua primeira home page na grande rede. O Microsoft FrontPage foi um dos primeiros que eu conheci.

Acontece que esses programas (como o FrontPage, por exemplo) baseavam a estruturação de seu código em tabelas (ou tables). Ou seja, o que você fazia na tela gerava tabelas no código fonte para ficar do jeitinho que você via. Se você queria colocar uma imagem do lado da outra, gerava-se uma tabela com duas colunas e uma linha. Até aí, tudo certo.

O problema é que existe algo chamado semântica no html. Ou seja, cada tag do código fonte tem seu objetivo, ela existe e atua por um motivo.

No caso da tag <table> (referente à construção de tabelas) ela serve para tabelar as informações, ou seja, fazer uma tabela. Simples assim, como no Excel, por exemplo, sabe? Ou aquelas que você faz pra marcar quem está ganhando no jogo de cartas… Ela não serve para você estruturar o lay-out da página, dividir o menu, ou colocar aqueles gifs animados de personagens de anime ou games.

E é daí que vem a expressão Tableless ou, em português, Sem Tabela.

Falando de forma bem básica, um lay-out tableless é semântico e se utiliza dos blocos (ou divs) para estruturação da página.

Mas você pode perguntar o porquê disso. Eu lhe respondo, para que a página possa ser acessada por tudo e todos.

Como assim? Simples, se um browser é feito para pessoas com deficiência visual, ele usará a semântica para ler as tags html e passar a informação correta ao usuário.

Outra vantagem está em dispositivos móveis, um website tableless tem uma chance muito maior de encaixar corretamente na sua pequena tela.

Ainda existem muitas outras dicas para quem quer usar tableless, como por exemplo, não formatar NADA no código fonte. Para isto serve o CSS, ou Cascading Style Sheets. Mas isso fica para outro post.

Categorias
Tech

Portfolio Webdesign

Segue uma galeria com imagem e descrição de alguns dos trabalhos feitos no último ano na área do Webdesign. Presentes nesta lista estão hotsites, websites institucionais, lay-out de sistemas de gerenciamento, websites de vendas, informativos eletrônicos e email marketing.

Todos utilizam webstandars: Xhtml com CSS (tableless).

[nggallery id=1]