Interação Multidisciplinar entre o Design e Programação para Web

1. Como desenhar um site?
2. Como transformar o desenho em um site?
3. Como a internet funciona?
4. Como está a internet?
   1. Histórico da Internet;
   2. HTML;
   3. XHTML;
   4. CSS;
   5. Tableless;
5. Usabilidade;
6. Acessibilidade;
7. Internet para dispositivos móveis;

Nesse post está o material para a oficina que será apresentada nos dias 05/10/2011, 06/10/2011 e 07/10/2011 no evento Charneira 2011.

Local: Bloco Azul – CCET / Sala – Lab MAC 2

Horário: das 9:00 as 12:00

Arquivos

charneira2011diogo_pdf.zip – arquivo pdf

charneira2011diogo_pptx.zip – arquivo pptx (Power Point)

xhtml_exemplos.zip – exemplos utilizados na oficina

tableless.zip – layout em tableless

~

Mais informações sobre o evento: http://www.charneira2011.com.br

Posts relacionados:

• Querido blog… hehe
• Programação para Web (CSS)
• Programação para Web (XHTML)
• Programação para Web (Introdução)

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

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/

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

Posts relacionados:

• Artigo HTML 5
• Devendo algo…
• Programação para Web (Ajax)
• Querido blog… hehe

Olá pessoas, realmente um grande espetáculo. As duas maiores bandas de Heavy Metal do Brasil, se juntaram para fazer uma turnê nacional, e dentre as cidades em que estiveram, passaram também por Ourinhos uma pequena cidade do interior do estado de São Paulo, a 100km de onde moro, Cornélio Procópio.

Havia dois tipos de ingressos para o show, o ingresso vip e ingresso normal. Os que compraram os ingressos vips puderam ficar na beira do palco, e como cheguei cedo na fila, também me acertei por lá. Outro detalhe interessante é que era necessário levar 1 kg de alimento não perecível, que foram recolhidos pela prefeitura de ourinhos, e segundo a Jornalista Luly Salina encaminhados ao Fundo Social de Solidariedade de Ourinhos que vai repassar ainda esta semana para uma entidade assistencial.

A grande questão, que talvez tenha me deixado mais chateado foi a CENA da região. O show foi em um ginásio de esportes relativamente grande e pelo que me pareceu não haviam se quer 500 pessoas no ápice do show. Uma pena, pois isso acaba por desestimular produtores, organizadores e as próprias bandas de retornarem ao local.

Entretanto, como o próprio Kiko falou em entrevista para o site http://www.diariodeourinhos.com.br os fãns que foram são fiéis ao som, e apesar dos poucos metaleiros o show conseguiu se manter bem animado.

Ao chegar lá pelas 18:00 não havia praticamente ninguém da fila e a técnica já estava passando o som. Entre uns e outros ajustes, o Angra passou 3 músicas, e um detalhe que já nem é mais novidade, o EDU deu uma boa desafinada! Tanto que o Kiko em determinado momento solta: “Pow Edu, vai outra vez a ponte pro solo…”.

Como sempre levo a minha irmã no show, e dessa vez não foi diferente.

Houve uma má organização da fila. Criaram uma fila, depois disseram que a fila vip seria ao lado; resultado: sai da fila e fui pra fila de “vip”. Em seguida disseram que era uma fila única e nisso e fila normal já estava enorme, nossa sorte é que havíamos feito amizade com o Paulo de Avaré que ficou lá na frente e deixou agente voltar ao nosso lugar inicial.

Um outro fator negativo foi o eco do lugar, um ginásio de esportes nunca é um lugar bom pra fazer um show, e isso dava pra perceber claramente na passagem de som.

A abertura do show ficou por conta da banda Mindflow de São Paulo. Não conheço muito da banda, mas sei que os caras são bons, vou até procurar escutar mais o algumas músicas deles, mas no show, infelizmente não deu para ouvir muito a voz, que alias só consegui escutar claramente quando Sepultura entrou em palco.

Achei legal da parte da banda, ao final do show desceram ali na grade para cumprimentar alguns fãns. E nisso o guitar me entregou uma palheta

Bom depois de alguns ajustes, Angra abre o show com a clássica Carry On, e o Confessoli realmente está com tudo, como disse minha irmã “O Aquiles não fez tanta falta!”. Achei muito legal o set-list, tocaram algumas músicas das antigas que disseram que nunca haviam tocado em show, e mesmo assim o pessoal cantou todas. Apesar de não ter dado pra escutar muito bem a voz, e de principalmente o microfone ter falhado na música Make Believe o show ainda foi muito bom. Ah, e como sempre, o Kiko improvisando quase todos os solos e o Rafael tocando todos com fidelidade ao cd.

No final do show do Angra o único que desceu na grade foi o Edu, já era de se esperar o estrelismo dos outros integrantes. Bom, mas o Kiko jogou uma palheta e o segurança pegou do chão e entregou uma pra min e outra pra minha irmã! Alias a equipe de seguranças foi impecável. Tirando fotos para a galera, ajudando na organização e até deram um agüinha para quem estava no aperto.

Depois da apresentação da banda de Heavy Metal, o que sobrou para os fãns foi ESPERAR! Quase 40 minutos para arrumar as coisas para o show do Sepultura. A espera valeu a pena, começaram tocando algumas músicas do novo CD. A-Lex que por sinal compramos no final do show, junto com 2 camisas do sepultura.

A banda Sepultura foi impecável, e mostrou porque é uma das maiores bandas do mundo. Todo o pessoal da imprensa querendo tirar fotos e tudo mais.

Um destaque que fiquei perplexo foi um GURI de uns 5 anos cabeludo e, CANTANDO AS MÚSICAS e BATENDO CABEÇA na hora do show do Sepultura, quem estava na grade não deixou de olhar para a pequena figurinha que ficou bem pertinho do palco e até recebeu umas palhetas.

Não cheguei a ficar até o final para ver a JAM, já estava no “fiapo da flanela”. Mas vimos quase até o final do show do Sepultura.

Bom para resumir um grande espetáculo, que infelizmente não foi apreciado por um grande número de fãns que merecia.

Aposto que se fosse uma dessas futilidades como Vitor e Léo, Edson e Hudson ou Ivete, cairia gente pra fora do Ginásio, mas é isso ai, música boa é para poucos.

Abraços.

Em anexo alguns vídeos e fotos do show.

Enjoy.

Aguardo comentários.

12

Posts relacionados:

• Angra ~ Course of Nature
• 3th Solo @ Nova Era by Angra
• Jeff Scott Soto e Tempestt 20/06/2009 @ Ourinhos-SP

A proporção áurea ou número de ouro ou número áureo é uma constante real algébrica irracional denotada pela letra grega φ (phi) e com o valor arredondado a três casas decimais de 1,618. É um número que há muito tempo é empregado na arte. Também é chamada de: razão áurea, razão de ouro, divina proporção, proporção em extrema razão, divisão de extrema razão.

É frequente a sua utilização em pinturas renascentistas, como as do mestre Giotto. Este número está envolvido com a natureza do crescimento. Phi (não confundir com o número Pi (π), quociente da divisão do comprimento de uma circunferência pela medida do seu respectivo diâmetro), como é chamado o número de ouro, pode ser encontrado na proporção em conchas (o nautilus, por exemplo), seres humanos (o tamanho das falanges, ossos dos dedos, por exemplo), até na relação dos machos e fêmeas de qualquer colméia do mundo, e em inúmeros outros exemplos que envolvem a ordem do crescimento.

Justamente por estar envolvido no crescimento, este número se torna tão freqüente. E justamente por haver esta freqüência, o número de ouro ganhou um status de "quase mágico", sendo alvo de pesquisadores, artistas e escritores. Apesar deste status, o número de ouro é apenas o que é devido aos contextos em que está inserido: está envolvido em crescimentos biológicos, por exemplo. O fato de ser encontrado através de desenvolvimento matemático é que o torna fascinante.

Fonte: Wikipedia

Você pode gostar:

• Collab (United Countries) – Call Me When You’re Sober
• Result of Life Wallpaper
• Banda Trio de Q – 23/04/2011
• Um texto para as pessoas que amo

Tudo isso pode ser uma grande bobeira então não forme sua opinião apenas pelo que vai ler, mesmo porque questiono sempre as fontes, apesar de lhes garantir que tudo o que vai ser falado possuí fonte confiável, não procurei referências para poder provar o que vou tentar explicar, então, não se contente apenas com o que vai ler.

De forma simples, se é que isso é possível, podemos definir o tempo como algo que aconteceu ou irá acontecer, para ilustrar, o que você fez ontem a tarde, por exemplo, é um ponto determinístico na sua escala evolutiva, conseqüentemente faz parte de um tempo vivido por você. Espaço apesar de ser também abstrato é mais fácil de entender, é definido por um lugar, onde você está agora, por exemplo, é um espaço. Mas o interessante é quando essas duas coisas se juntam. Pode-se colocá-las em um plano cartesiano (aquele gráfico: x e y). E assim se tem uma escala evolutiva, e pode-se demarcar um ponto no gráfico que representa exatamente o lugar e o tempo em que você está, esteve ou estará. Tudo isso é muito lógico e comprovado. Depois desses fundamentos teóricos podemos chegar a algumas conclusões. A nossa interação com o mundo é limitada por nossos 5 sentidos básicos, eles é que nos mostram as coisas como conhecemos. Entretanto essa interação é muito limitada e acredito que, é ela que nos prende a um determinado ponto do plano Tempo x Espaço.

Para tentar convencer que é possível esse passeios por outros pontos de sua vida vamos analisar os seguintes fatos: O Universo é comprovadamente uma esfera, todos os astros estão em orbita, nosso planeta também tem forma elipsoidal, logo, não existe uma reta, uma reta não é reta (por incrível que pareça) ela tende a se curvar mesmo que imperceptível ao olho humano, uma reta infinita acaba por se curvar e retornar ao seu pronto de origem. Logo, se traçarmos uma linha nesse plano ela cortará dois pontos da nossa reta do tempo, e assim é possível que se trafegue nessa linha em outro determinado tempo do passado ou do futuro.

Mas, não é assim Puff, estou no passado! hehe, como eu escrevi, somos limitado por nossos sentidos, eles nos prendem a matéria, mas há um outro estado, que não o consciente, onde podemos apurar nossos sentidos e transitar com nossos pensamento sobre essa linha do tempo, esse estado é conhecido como estado (alfa).

Isso eplica por exemplo o famoso "Deja vu"’, que basicamente é quando você passa por uma situação que já sente ter vivido. Há também uma outra situação parecida que acontece mais especificamente, (quando se compõe pensamentos do passado)  o qual você consegue detalhar um lugar ou alguém sem nunca ter visto antes, como isso já aconteceu, você sabe detalhes sobre essa determinada coisa.

Isso acontece, pois quando estamos no estado alfa, dormindo ou meditando, nosso espírito pode viajar sobre essa linha paralela do tempo e registrar coisas em nossa memória física, mesmo que sutis, ficam armazenadas.

Bom, é isso, espero que tenha convencido.

Até.

Você pode gostar:

• Relacionamentos Nerds
• O show do professor
• Deus não é responsável por nossas atitudes
• Solos de Ferdinando