O mestradão está me descascando, pretendo colocar os materiais aqui quando tiver tudo certinho, algumas coisas que estou compilando já estão disponíveis no diretório: www.diogocezar.com/mestrado/

Mas vamos colocar algumas coisas interessantes, primeiro um vídeo de paramore fazendo cover kings of leon, não curto muito paramore, mas gostei da versão.

Paramore – Use Somebody

DAN the MAN

Também achei bem legal uma animação que vi no site do meu amigo totonho (@coerenciazero) um game um tanto quanto machista mas vale muito a pena, super engraçado:

Animações de Legião

Também tem dois vídeos bem legais de um cara, alias gostei de quase todos o link para o perfil dele no orkut está disponível aqui.

Nesses vídeos o kra do peixeaquatico faz umas animações com as músicas Faroeste Caboclo e Eduardo e Mônica do Legião, confiram:

Paris em 26 giga pixels

Ainda tem o link http://www.paris-26-gigapixels.com que mostra a cidade de paris num esquema bem legal, é possível dar um super zoom na imagem, e ver detalhes que a princípio seriam imperceptíveis.

Pixels

Boa a idéia de transformar o mundo em pixels:

PIXELS by PATRICK JEAN.
Enviado por onemoreprod. – Ver mais videos criativos

Satellite Car Chase

Uma boa animação feita com imagens de satélite.

Satellite Car Chase from Honest Directors on Vimeo.

Identidade Visual

Uma ideia muito legal do canal alemão 13th Street, especializado em filmes de crimes e terror, resolveu contextualizar os materiais que utilizam na empresa no dia-a-dia.

Veja o post completo clicando aqui.

Por enquanto é isso pessoal, obrigado a @Alieeen que me ajudou a achar algumas boas dessas coisas, minha amiga nerds de todas as horas!

Algo que as vezes passa desapercebido é que, essa evolução acontece naturalmente, independente do meio, ou seja, da tecnologia disponível. Nós do âmbito computacional temos por qualidade a persistência, e muitas vezes sem saber que é impossível, acabamos fazendo; talvez não da maneira correta, com especificações e/ou padrões, mas na famosa gambiarra.

Foi justamente através da gambiarra que a Internet encontra-se no caos que vivemos hoje. O padrão para convencionar como os navegadores devem renderizar seus códigos, estabelecido pela W3C, ainda não é implementado inteiramente por alguns navegadores, que infelizmente se aproveitam da popularidade para de impor seu próprio método padrão.

Talvez a vilã de tudo isso seja a Microsoft, com o famoso Internet Explorer, que insiste em impedir o progresso inevitável da Internet. Coincidência ou não, na lista dos navegadores modernos, o único que não implementa os conceitos primordiais do HTML5 é o Internet Explorer, aliás, não implementa nem a especificação do HTML 4.01 completa.

Há alguns dias houve uma mobilização entre os grandes da web para que houvesse um boicote ao Internet Explorer 6, que realmente está impedindo o progresso da Internet. Li em uma entrevista que a equipe Microsoft se recusa a aderir a evolução, e continuará oferecendo suporte para esse navegador. Será que não há um interesse por parte da Microsoft em evoluir? Medo? Fica a conclusão por conta do leitor.

A internet chegou a um nível que não podemos apenas continuar montando esse Frankstein: plugins e mais plugins para fazer algo que deveria estar embutido no próprio código. Nessa linha de pensamento é que surge o HTML5, uma forma de encapsular os recursos  que a Internet tem para oferecer, agrupando-os no lugar que já deveriam estar desde o princípio, no próprio código HTML.

Resumindo a boa apresentação de Andrew, para contextualizar o HTML5:

Em 1995 a Netscape lança junto com seu navegador, a linguagem de programação JavaScript, e junto a ela, a primeira recomendação para estipular métricas a serem seguidas por uma linguagem. Seu desenvolvimento foi tão importante que está presente até os dias atuais. Sua função é permitir a iteração no lado cliente (client-side) com os objetos da página, ou seja, poder alterar características dos objetos que compões o documento (textos, formulários, imagens) em tempo de execução, sem a necessidade de enviar uma requisição ao servidor e esperar uma resposta com outro código HTML.

Essa interação só foi possível, pois outra característica nascida com a criação do JavaScript, o DOM (Document Object Model), que mapeia os elementos HTML em formato de árvore, foi implementado, e assim, a linguagem JavaScript poderia manipular um nodo (uma folha da árvore) independentemente de toda a estrutura.

O JavaScript também foi implementado pela Microsoft com o nome de JScript e pela adobe como ActionScript (presente nas aplicações Flash);

Em 1998, Jhonatan que trabalhava numa equipe da Microsoft, ao se deparar com o DHTML (Utilização de JavaScript + HTML), implementou uma função que daria vida ao AJAX(Asynchronous Javascript And XML) o XMLHTTP, que apesar do nome, não tem muito a ver com XML. Essa função servia para permitir uma comunicação com o servidor de forma assíncrona, descontinuando a necessidade de enviar uma solicitação para somente depois, receber uma resposta. Essa descoberta foi revolucionária, mas na época não teve destaque pois não ficou claro para os desenvolvedores a implementação da comunicação assíncrona.

Em 2002 a empresa Mozilla percebeu a potencialidade desse recurso e implementou a função XMLHttpRequest, que se tornou o padrão para comunicação assíncrona nos principais navegadores como (FireFox, Opera, Safari, Chrome).

Mas foi somente em 2004 que o mundo se rendeu a essa nova funcionalidade, com as magias feitas pelo Google, em sua aplicação Gmail. Isso se deu pela implementação da função XMLHttpRequest construindo todo um conceito de programação chamado AJAX. Esse não era um conceito novo, já existiam implementações idênticas nos anos 90, mas teve atenção somente depois da implementação do Google.

Até então, não se tinha noção do que era possível desenvolver com AJAX, foi então em 2005 que o Google lança o Google Maps, que pode ser considerada a primeira aplicação web com características de uma aplicação desktop.

Até aqui vimos um pouco da evolução da Internet como um todo, mas vamos voltar e analisar como tudo isso era codificado, ou seja, vamos voltar a 1999 com o HTML 4.01.

Quase toda a Internet que temos hoje está escrita em HTML 4.01 (1999) ou XHTML 1.0 (2000) ou seja, estamos quase 10 anos trabalhando com conceitos que não previam a dimensão que a Internet iria tomar. Justamente por essa defasagem temos hoje um problema classificado por Andrew de plugin hell (inferno de plugins) Adobe Flash, Microsoft SilverLight e Sun com JavaFx. Dentre suas desvantagens podemos citar que: não seguem um padrão, não são nativos, são particulares e não tem a codificação aberta, o que impede o progresso.

A W3C, que estabelece os padrões a serem seguidos na Internet, formada pelas grandes empresas que ditam moda, vendo a necessidade de aprimorar as falhas notórias do HTML 4.01 e do XHTML 1.0 decide então criar o XHTML 2.0.

O grande problema foi que o XHTML 2.0 foi uma tentativa de revolução, e o mercado não estava preparado para absorver tamanhas transformações. Então o XHTML2.0 foi descontinuado.

Em 2004, os representantes das empresas Mozilla, Apple e Opera se reuniram e decidiram criar um grupo paralelo a W3C, começaram então a desenvolver uma codificação totalmente diferente da tentativa do XHTML 2.0, estava então formado o The Web Hypertext Application Technology Working Group (WHAT-WG). Esse grupo tomou como base a evolução e não a revolução, pois, mudar drasticamente iria corromper muito do que já estava funcionando na Internet. O principal objetivo do grupo era criar tags que facilitariam a implementação de aplicações Web nativas. Em segundo plano, houve a necessidade de eliminar a sopa de tags, definida por Andrew como, uma misturas de tags iguais para representar formatações diferentes. Quando o HTML 4.01 foi especificado, tags foram criadas e seu objetivo estipulado, entretanto nada foi documentado com relação a como os navegadores deveriam interpretar essas tags, Isso deu origem ao MAIOR PROBLEMA ENFRENTADO POR DESENVOLVEDORES WEB a incompatibilidade da mesma codificação em navegadores diferentes; o que acontece é que cada navegador tenta adivinhar como interpretar determinada tag quando um desenvolvedor tentou fazer algo de forma errada. A proposta do HTML5 é especificar detalhadamente como interpretar possíveis erros para que seja possível manter a maior compatibilidade possível.

Um aspecto interessante que vem com o HTML5 é que ele elimina a necessidade de se criar vários encadeamentos de divs (blocos) para montar seu layout,  para o desenvolvimento do HTML5 foi realizada uma pesquisa para extrair quais eram os divs mais populares e transformá-los em tags:

A idéia foi implementar tags de forma que a semântica ficasse separada do visual, que é trabalho para o CSS.

Vamos analisar algumas inovações do HTML5:

Doctype

O tipo de documento em HTML5 não necessita mais qualquer tipo de especificação para validação, como era necessário no XHTML, ficou mais simplificado e pode ser usado somente como:

antes:

Html

A tag html na nova especificação necessita apenas da linguagem em que está sendo escrita:

Header

O header nada tem a ver com a tag head, que ainda existe e especifica as configurações do documento, serve aqui para a criação de um cabeçalho para sua página html.

Nav

A tag nav foi especificada para a construção de menus. É fortemente utilizada com as listas li.

Section

Especifica uma sessão para o site, pode ser um conteúdo, uma barra lateral, entre outros;

Note que usamos a tag article para especificar um artigo, e que dentro de um artigo temos especificado uma cabeçalho com a tag header.

Outros recursos interessantes que serão oferecidos pelo HTML5 são a inclusão de vídeo e imagem de forma nativa e tratados como objetos html. E assim damos adeus aos plugins?

Atualmente já é possível utilizar alguns recursos da nova especificação, o site HTML5doctor mostra o que já é possível implementar.

Em um próximo artigo, vou demonstrar como é possível transformar uma implementação convencional, com header, menu, content e footer em HTML5.

Por enquanto é isso, espero que tenham aproveitado. Abraços.

Links:

• http://html5.validator.nu/
• http://html5doctor.com/

Baseado na obra de:

• Andrew Andrade
  (http://www.cssnolanche.com.br/webcast-html5-ja-e-uma-realidade/);

Dentre os arquivos estão os conteúdos relativos à jQuery com Ajax e SAjax.

• jQuery com Ajax
  • O que é AJAX?
  • Por que Usar?
  • Quando Usar?
  • Quem usa?
  • Ciclo de Vida de uma Aplicação Web
  • Ciclo de Vida de uma Aplicação Web 2.0
  • Maravilhas do JQuery
  • Como fazer?
    • Load HTML
      • Filtrando os Resultados
    • $.POST e $.GET
    • Ações Antes e Depois do Ajax
    • $.AJAX
• SAjax
  • O que é?
  • Como funciona?
  • Como utilizar?
  • Configurando o SAjax
  • Utilizando o SAjax
  • Tratando Acentos

Seguem os arquivos para download:

clique aqui – S9_JQuery_Ajax.pdf
clique aqui – S9_SAjax.pdf

Dentre os arquivos estão os conteúdos relativos à JavaScript, jQuery, jQuery com Objeto Literal.

• JavaScript
  • Introdução
  • Destaques da Linguagem
  • Código JavaScript
  • Onde são Usados?
  • Sintaxe e Estrutura
  • Tipos de Dados
  • Variáveis
  • Conversão de Tipos
  • Caixas de Mensagens
  • Funções
  • Eventos
  • Hierarquia de Objetos
  • Propriedades e Métodos
  • Comandos Interessantes
• jQuery
  • O que é?
  • Por que Utilizar?
  • Características
  • Funcionalidades
  • Onde Obter?
  • Como Instalar?
  • Iniciando o JQuery
  • Seletores em JQuery
  • Capturando Atributos
  • Procurando Elementos
  • Efeitos Visuais
  • Modo de Compatibilidade
• jQuery com Objeto Literal
  • Objeto Literal em JavaScript
  • Convenções jQuery e Objeto Literal

Seguem os arquivos para download:

clique aqui – S8_JavaScript.pdf
clique aqui – S8_JQuery.pdf
clique aqui – S8_JQuery_Objeto_Literal.pdf

Dentre os arquivos estão os conteúdos relativos à Integração do PHP com banco de dados, Componente PEAR::DB, Componente PEAR::HTML_Template_IT.

• PHP Integração BD
  • Quais Bancos?
  • Boas Práticas
  • Modelo de Exemplo
  • MySQL
    • Conectando-se ao Banco
    • Selecionando um BD
    • Executando um Comando SQL
  • PostGreSQL
    • Conectando-se ao Banco
    • Executando um comando SQL
  • Percorrendo os dados
  • Capturando o Erro
• PEAR::DB
  • A Biblioteca PEAR
  • Componentes Fornecidos pelo PEAR
  • Classes DB do PEAR
  • URL ou DSN do PEAR::DB
  • Conectando ao Banco
  • Executando Consultas
  • Percorrendo os Dados
  • Encerrando o Processo
  • Modos de Busca do Resultado
    • DB_FECHMODE_ORDERED
    • DB_FETCHMODE_ASSOC
    • DB_FETCHMODE_OBJECT
  • Outras Funções Úteis para Retorno de Dados
  • Encerrando a Conexão
• PEAR::HTML_Template_IT
  • Por que Usar Templates?
  • Ferramentas Existentes
  • PEAR::HTML_Template_IT
  • Repetição de Bloco

Seguem os arquivos para download:

clique aqui – S7_PHP_Integração_BD.pdf
clique aqui – S7_Pear_DB.pdf
clique aqui – S7_Pear_HTML_Template_IT.pdf

Dentre os arquivos estão os conteúdos relativos à Manipulação de Arquivos, Upload de arquivos, Envio de E-mails e Geração de Imagens.

• PHP Arquivos
  • FILE_GET_CONTENTS
  • FILE_PUT_CONTENTS
  • Lendo um arquivo por partes
    • fopen
    • fgetc
    • fgets
    • feof
    • fclose
    • Lendo por Caractere
    • Lendo por Linha
  • Escrevendo um arquivo por partes
    • fwrite
  • Verificando arquivos
    • file_exists
    • Permissões
      • is_readable
      • is_writable
      • is_executable
      • is_dir
      • is_file
      • is_link
    • Diretório e arquivo
      • dirname
      • basename
    • Tamanho do Arquivo
      • filesize
• PHP Upload
  • Upload de Arquivos em PHP
  • Propriedades do $_FILES
  • Alterando o action do formulário
  • Funções úteis
• PHP Email
  • Enviando E-mails em PHP
  • Configurando o PHP para Enviar E-mails
  • Parâmetros Opcionais do Envio de Correio
• PHP Geração de Imagens
  • Por que Manipular Imagens?
  • Biblioteca Gráfica GD
  • Tipos de Imagens Suportados
  • Criando uma Imagem
  • Definindo Cores
  • Definindo o Conteúdo
  • Exibindo a Imagem
  • Liberando a Memória Utilizada
  • Escrevendo em uma Imagem
  • Criando Miniaturas

Seguem os arquivos para download:

clique aqui – S6_PHP_Arquivos.pdf
clique aqui – S6_PHP_Upload.pdf
clique aqui – S6_PHP_Email.pdf
clique aqui – S6_PHP_Geração_Imagens.pdf

Dentre os arquivos estão os conteúdos relativos à linguagem de programação php com os paradigmas da orientação a objetos:

• PHPOO – Parte 1
  • Revisão de Orientação a Objetos
    • Objeto
    • Classe
    • Instância
    • Encapsulamento
    • Ocultamento de Informações
    • Polimorfismo
    • Herança ou Especialização
    • Agregação e Composição
  • Características do Trabalho com POO em PHP 5
  • Classes e Objetos em PHP
  • Especificadores de Acesso
  • Métodos e Variáveis Estáticas
  • Métodos e Classes Finais
  • Construtores e Destrutores
  • Classe Abstrata
  • Interfaces
  • Diferença entre Classes Abstratas e Interfaces
• PHPOO – Parte 2
  • Herança em PHP
  • Tratando Erros
  • Método __call()

Seguem os arquivos para download:

clique aqui – S5_PHPOO_Parte1.pdf
clique aqui – S5_PHPOO_Parte2.pdf

Dentre os arquivos estão os conteúdos relativos à linguagem de programação php:

• PHP – Parte 1
  • Introdução
  • Primeiro Script
  • O que o PHP Pode Fazer?
  • Configuração (PHP.INI)
  • Sintaxe Básica
  • Mesclando XHTML e PHP
  • Comentários
  • Palavras-chave do PHP
  • Variáveis
  • Interpretação de Variáveis
• PHP – Parte 2
  • Tipos de Dados
  • Arrays
  • Constantes
  • Expressões
  • Operadores Aritméticos
  • Operadores de Comparação
  • Operadores Lógicos
  • Operadores de Incremento/Decremento
  • Operador Ternário
  • Precedência de Operadores
  • Funções Úteis
  • Manipulação de Datas
  • Estruturas de Controle
    • if
    • else
    • elseif
    • switch
    • while
    • do..while
    • for
    • foreach
    • break
    • continue
• PHP – Parte 3
  • Comando exit
  • Função list
  • Funções de classificação
  • Funções para reordenação
  • Formatando strings
  • Caracteres especiais
  • Reutilização de Código
    • Require
    • Include
  • Utilizando Funções
  • Criando suas Próprias Funções
  • Manipulando Datas
  • Extraindo Dados de Formulários
    • Método POST
    • Método GET
• PHP – Parte 4
  • Trabalhando com Cookies
  • Trabalhando com Sessões
  • Redirecionando

Seguem os arquivos para download:

clique aqui – S4_PHP_Parte1.pdf
clique aqui – S4_PHP_Parte2.pdf
clique aqui – S4_PHP_Parte3.pdf
clique aqui – S4_PHP_Parte4.pdf

Dentre os arquivos estão os conteúdos relativos às folhas de estilo ou Cascading Style Sheet (CSS) e Tableless:

• CSS – Parte 1
  • Problemas do HTML
  • O que é CSS?
  • Por que usar CSS?
  • O Efeito Cascata
  • Definição da Formatação CSS
  • Regras do CSS e sua Sintaxe
  • Exemplos de CSS
  • Inserindo Comentários nas CSS
  • Modificando Links
• CSS – Parte 2
  • Cores da Web
  • Modificando o Body
  • Estilizando Texto
  • Tamanho das Fontes
  • Espaçamento entre Linhas
  • Parágrafos
  • Títulos
  • Listas
  • Boxes
    • Posicionamento Absoluto
    • Posicionamento Relativo
• Tableless
  • O que é?
  • Layout Feito com Tabelas
  • Layout Feito com Tableless
  • Vantagens
  • Como fazer?
  • Construindo um exemplo

Seguem os arquivos para download:

clique aqui – S3_CSS_Parte1.pdf
clique aqui – S3_CSS_Parte2.pdf
clique aqui – S3_Tableless.pdf

Dentre os arquivos estão os conteúdos relativos à linguagem de marcação XHTML:

• XHTML – Parte 1
  • Histórico
  • Definição
  • Vantagens
  • Regras Básicas
  • Conceitos Básicos
    • Cabeçalho
    • Corpo
• XHTML – Parte 2
  • Elementos de Lista
    • Listas não Ordenadas
    • Listas Ordenadas
    • Listas de Definição
  • Atributos
  • Links
• XHTML – Parte 3
  • Manipulando Tabelas
  • Manipulando Imagens
  • Trabalhando com Formulários

Seguem os arquivos para download:

clique aqui – S2_XHTML_Parte1.pdf
clique aqui – S2_XHTML_Parte2.pdf
clique aqui – S2_XHTML_Parte3.pdf