Notícias do dia

Teslas têm mais acidentes que outras marcas - revela estudo de sinistros; Worldcoin recolhe scans da íris em Portugal; MB Way vai chegar a Espanha e Itália; NASA envia vídeo Ultra HD do espaço via laser; corte do Beeper leva Apple a ser investigada por comportamento anti-concorrencial nos EUA.

Antes de passarmos às notícias, relembro que já arrancou o nosso mega-passatempo de Natal 2023 com 31 dias de prendas.

Play Store prestes a deixar remover apps remotamente

Wonder leva jogos do Unreal Engine para o browser

A Wonder Interactive está a trabalhar para permitir a fácil adaptação de jogos que usem o Unreal Engine para correrem directamente no browser.

Google lança curso gratuito de HTML

Para quem se interessar pelas tecnologias web, conta agora com o curso básico essencial para se iniciar nessa área: um curso de HTML disponibilizado pela Google.

Edge e Chrome vão deixar bloquear ver o código fonte das páginas web

A MS e a Google estão a preparar-se para permitir o bloqueio da opção view-source que mostra o código das páginas web, levantando preocupações sobre o futuro da web e dos browsers.

10 dicas de alinhamento CSS

Alinhar coisas numa página HTML adaptável, mesmo em layouts complexos, é algo que por vezes pode ser feito com uma única linha CSS.

eBooks HTML5 da FCA [exclusivo AadM]

A FCA tem sido uma parceira regular do Aberto até de Madrugada, disponibilizando regularmente alguns dos seus livros para os nossos passatempos; e agora deu-nos a possibilidade de oferecer um preview especial e exclusivo de alguns dos seus novos ebooks.

Adobe continua afastamento do Flash

Tempos houve em que o Flash era visto como o futuro da web, permitindo todo o tipo de interactividade que o HTML não permitia. Mas os tempos mudam, e agora é a própria Adobe que se vai afastando cada vez mais do Flash, que se vai tornando cada vez mais desnecessário (e até indesejado) face às funcionalidades que o HTML tem vindo a aprender ao longo dos anos.

Ganha livros Build an HTML5 Game da O'Reilly

Desta vez, dos seis livros propostos da O'Reilly venceu o: Build an HTML5 Game.

Já sabem como tudo se processa, durante os próximos cinco dias iremos fazer uma pergunta por dia, sendo atribuído um exemplar aleatoriamente entre todos os que responderem correctamente às perguntas de cada dia. Ou seja, podem - e devem - responder a todas as perguntas para terem mais probabilidades de ganhar um dos cinco livros que temos para oferecer.

Esta oferta está disponível para todos os que tenham morada em território nacional (Portugal) e não se esqueçam de espreitar os livros da O'Reilly sempre que precisarem de alguma ajuda para se iniciarem, ou aprofundarem, os vossos conhecimentos sobre qualquer matéria tecnológica. Embora seja verdade que muita coisa se encontra na Internet, há coisas para a qual não há substituto de um bom livro em papel que podemos folhear, marcar as folhas, ou até rabiscar nas suas páginas.

HTML5 está (finalmente) finalizado

Muito se fala do HTML5 e das suas potencialidades, e da importância que tem para nos levar em direcção a um futuro onde a web possa funcionar como elemento unificador de todas as plataformas. Mas o que poderia passar despercebido é que o HTML5 ainda não era um standard oficialmente finalizado.

Novo elemento HTML "picture" vai acelerar as imagens na web

Parte do motivo pelo qual os 200MB de dados disponibilizados pelos operadores mobile se tornam ridículos, é o facto de continuarem a haver muitos sites que não têm qualquer preocupação com (o tamanho de) as imagens que usam. Felizmente, isso poderá passar a ser feito automaticamente graças à chegada de um novo elemento HTML que pretende resolver esse problema.

Ganha Livros HTML5: The Missing Manual da O'Reilly

Desta vez, dos seis livros propostos da O'Reilly, o vencedor foi o: HTML5 The Missing Manual.

Já sabem como tudo se processa, durante os próximos cinco dias iremos fazer uma pergunta, sendo atribuído um exemplar aleatoriamente entre todos os que responderem correctamente às perguntas de cada dia. Ou seja, podem - e devem - responder a todas as perguntas para terem mais probabilidades de ganhar um dos cinco livros que temos para oferecer.

Esta oferta está disponível para todos os que tenham morada em território nacional (Portugal) e não se esqueçam de espreitar os livros da O'Reilly sempre que precisarem de alguma ajuda para se iniciarem ou aprofundarem os vossos conhecimentos sobre qualquer matéria tecnológica. Embora seja verdade que muita coisa se encontra na Internet, há coisas para a qual não há substituto de um bom livro em papel que podemos folhear, marcar as folhas, ou até rabiscar nas suas páginas.

Ganha Livros Functional Javascript da O'Reilly

Desta vez, dos seis livros propostos da O'Reilly, o vencedor foi o: Functional Javascript (embora por escassa margem sobre o 3D Game Programming for Kids).

Já sabem como tudo se processa, a cada dia iremos fazer uma pergunta, sendo atribuído um exemplar aleatoriamente entre todos os que responderem correctamente às perguntas de cada dia. Ou seja... podem - e devem - responder a todas as perguntas para terem mais probabilidades de apanhar um dos cinco livros que temos para oferecer.

Esta oferta está disponível para todos os que tenham morada em território nacional (Portugal) e... não se esqueçam de espreitar os livros da O'Reilly sempre que precisarem de algo para se iniciarem ou necessitarem aprofundar os vossos conhecimentos sobre qualquer matéria. Embora seja verdade que muita coisa se encontra na Internet, há coisas para a qual não há substituto de um bom livro em papel que podemos folhear, marcar as folhas, ou até rabiscar nas suas páginas.

Site do Kennedy & Oswald mostra-nos o que o HTML pode fazer

A propósito dos 50 anos sobre a trágica morte de John F. Kennedy, a National Geographic criou um site que se revela tão fascinante quanto o enquadramento histórico deste infeliz acontecimento. Para todos aqueles que insistiam em que o futuro das revistas na web passava por pesadas versões em Flash (ou até PDFs), este site servirá como exemplo de que basta apenas o simples HTML, CSS e uma pitada de Javascript.

Ganha Livros HTML5 e CSS3 da O'Reilly

Desta vez, dos seis livros propostos da O'Reilly, o vencedor foi o: HTML5 and CSS3, 2nd Edition.

Já sabem como tudo se processa, a cada dia iremos fazer uma pergunta, sendo atribuído um exemplar aleatoriamente entre todos os que responderem correctamente às perguntas de cada dia. Ou seja... podem - e devem - responder a todas as perguntas para terem mais probabilidades de apanhar um dos cinco livros que temos para oferecer.

Esta oferta está disponível para todos os que tenham morada em território nacional (Portugal) e... não se esqueçam de espreitar os livros da O'Reilly sempre que precisarem de algo para se iniciarem ou necessitarem aprofundar os vossos conhecimentos sobre qualquer matéria. Embora seja verdade que muita coisa se encontra na Internet, há coisas para a qual não há substituto de um bom livro em papel que podemos folhear, marcar as folhas, ou até rabiscar nas suas páginas.

Introdução do Star Wars recriada em HTML

É impossível não ter a introdução do Star Wars gravada na memória, e se procuravam mais um exemplo de como o HTML e os browsers actuais evoluíram desde o tempo em que apenas permitiam apresentar texto e imagens estáticas, eis um projecto que combina ambos os elementos na perfeição. Tim Pietrusky recriou a introdução original do Star Wars de 1977 no browser, usando apenas HTML, CSS, e Javascript.

O que o caso YouTube revela sobre a Fragmentação da Web

O recente conflito entre Microsoft e Google relativamente ao YouTube levanta algumas questões interessantes sobre o futuro da web. O Google quer que a Microsoft utilize uma "web app" em HTML5 para o YouTube (mesmo quando eles próprios não o fazem no Android nem no iOS). A Microsoft diz que não é viável neste momento criar a app em HTML5 devido a várias limitações. Mas então... não seria o HTML5 e as webapps o futuro que se espera que venha a uniformizar todas as apps, tornando-as independentes da plataforma em que forem utilizadas? A ideia seria essa... mas a realidade actual é bem diferente, como se pode comprovar ao espreitar um pouco mais atentamente vários serviços do Google.

Mapa do Metro Londrino Recriado em CSS

O mapa do metro Londrino é um exemplo de design que é reconhecido internacionalmente, e que tem servido de inspiração para muitos outros mapas por todo o mundo. Um web developer lembrou-se de ver até que ponto é que as modernas capacidades do CSS permitiram recriar este mapa... sem usar nenhuma imagem. E o resultado foi este mapa do metro Londrino feito totalmente em CSS.

O CSS é um sistema que permite aplicar diferentes estilos visuais a um documento HTML, que numa forma básica permitiria que facilmente mudassem a cor e tamanho de todos os títulos ou links apresentados numa página web; mas que pode ir muito para além disso - como se pode ver neste exemplo.

Na sua base, cada linha de metro que é apresentada no mapa consiste numa simples lista HTML das estações, que de forma convencional (sem a aplicação do CSS) seria apresentada como:

• estação 1
• estação 2
• estação 3
• ...

(Algo que poderão confirmar caso espreitem o código fonte HTML da página.)

Acho que nunca mais poderemos dizer que é impossível fazer o que quer que seja em HTML e CSS. :)

O que é o HTML?

Hoje em dia a Internet já se tornou algo "comum" a que todos dão uso. A grande maioria, de forma directa ou indirecta já terá ouvido falar de "HTML" - mas no entanto, nem todos saberão em que consiste realmente esta "coisa". Não é o meu propósito ensinar-vos tecnicamente o que é o HTML (para isso já existem "milhões" de tutoriais espalhados pela internet), mas sim tentar explicar-vos de uma forma simples em que consiste este "bicho" responsável por fazer da internet e da web aquilo que é hoje.

HTML significa HyperText Markup Language, e a sua origem remonta ao final dos anos 80 do século passado, altura em que um tal de Tim Berners-Lee propôs esta sua criação como uma forma de partilhar e referenciar conteúdos (agora já sabem porque o chamam de "pai da internet").

Vejamos então o problema que se queria resolver, e como tal foi conseguido.

A forma mais fácil de guardarem informação é um documento de texto, certo? Facilmente podem criar dezenas ou centenas de documentos, darem-lhe títulos representativos, e ficar com uma enorme fonte de informação e conhecimento digitalizado. Mas... imaginem que por lá temos um documento chamado "sistema solar" que tem uma lista dos planetas do nosso sistema solar; e que também já temos outros documentos a falar detalhadamente de cada um dos planetas. Tornava-se bastante ineficiente ler um documento, e depois ter que procurar manualmente cada um dos outros, para conseguir informações mais detalhadas.

Era necessário uma forma de se poder referenciar documentos de dentro de outros... e é aí que entrou o "markup language". O "markup" é uma forma de inserir informação/comandos dentro de um documento de texto. Por exemplo, nos nossos documentos de texto, se quiséssemos uma forma standard de saber qual é o título do documento - ao contrário de assumir que estivesse sempre na primeira linha, por exemplo - poderíamos definir um código especial para o identtificar; um código que nunca seria escrito por acidente.

Assim, um texto que fosse:

O meu título
Este é um texto de exemplo só para ter alguma coisa.

Poderia tornar-se:

<title>O meu título</title>
Este é um texto de exemplo só para ter alguma coisa.

Com aqueles códigos especiais, um computador facilmente consegue interpretar o que está a ver, e saber distinguir o título do resto do conteúdo.

E tal como podemos criar um código para o título, poderíamos fazê-lo para muitas outras coisas: como por exemplo, separar páginas e parágrafos, mudar o tipo de letra, ou até inserir imagens, com algo do género <imagem nome="imagem.jpg> escrito no texto no sítio onde quiséssemos que a imagem aparecesse.

Já se está a ver onde toda esta versatilidade leva... se podemos criar códigos para fazermos o que queremos, porque não criar um código que serve de índice para outro documento? E foi com este pequeno passo que o emaranhado de interligações e referências que hoje conhecemos como "world wide web" (www) nasceu.

Os códigos usados no HTML nem sempre são muito explícitos à primeira vista. Por exemplo, inserir uma imagem é feita usando um facilmente decifrável <img src="ficheiro.jpg">. Mas no caso da tal referência para outra página (os vulgares "links"), o código poderá parecer um pouco mais obtuso:

• <a href="pagina de destino">texto do link</a>

Basicamente, estamos a dizer que o texto contido entre as tags de abertura e fecho do elemento servirá como link para a página de desitno que especificarmos.


Claro que isto é tudo muito bonito... mas não passa de texto que não funcionaria por si só. E é aí que entram os browsers. Os browsers são os programas responsáveis por interpretar os documentos escritos em HTML, e nos apresentarem tudo isto já processado, com as imagens nos locais especificados, os diferentes tipos de letra aplicados, e os links transformados nos populares links clicáveis que todos conhecemos nas páginas web.

Hoje em dia, uma pagina web já raras vezes é apenas um bocado de HTML "puro" como antigamente. As coisas evoluíram ao ponto de agora ser indispensável usar outras técnicas, como o CSS para aplicar estilos de forma versátil e adaptável; e claro... o javascript, que permite transformar uma página web num autêntico programa que corre dentro da janela do browser. No entanto, não deixa de ser interessante pensar que tudo nasceu com uma simples necessidade de ter documentos de texto capazes de integrar conteúdos extra e que pudessem referenciar outros documentos.

Form Follows Function - Exemplos HTML5 para Todos

Se estão a pensar desenvolver algo "diferente" para a web, mas estão sem ideias - ou tão somente querem espreitar o que hoje em dia é possível fazer na janela de um browser - aconselho-vos a perder alguns minutos a explorar os exemplos que se podem ver neste Form Follows Function.

Com uma colecção de excelentes exemplos das mais recentes tecnologias web (HTML5, CSS, etc), e sendo o próprio site apresentado numa forma de cartões dispostos em círculo por onde podemos navegar, este será um site a que ninguém ficará indiferente.

Noutros tempos, seria o tipo de site que inevitavelmente obrigar a recorrer ao Flash para se concretizar. Hoje em dia... já podemos fazê-lo sem recorrer a isso (e significando que é também acessível a partir de qualquer outro equipamento com um browser capaz de "entender" HTML5, quer sejam tablets ou smartphones).

Exemplos HTML5

Se estão interessados em explorar as capacidades do HTML5, nada como revisitar uma "velha" apresentação que foi feita no Google IO de 2011: este HTML5 WOW.

Ao visitarem o site num browser Webkit verão como uma simples apresentação HTML pode ser bem mais interactiva do que se poderia supor, e lá pelo meio terão muitos exemplos de como utilizar funcionalidades avançadas de ficheiro, gráficos, e áudio.

(Na altura era recomendado utilizar um Chrome "beta" para ter acesso a todas essas funcionalidades, mas hoje em dia tudo isso está já implementado no Chrome "público" que todos podem utilizar.)