quarta-feira, 23 de junho de 2010

CSS3 Parte 1

O que é CSS

CSS é uma linguagem para definir o estilo ou a aparência das páginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o conteúdo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparência das páginas.

Com CSS3, mais controle sobre a forma

O objetivo inicial de CSS, separar o conteúdo da forma, se cumpriu já com as primeiras especificações da linguagem. Entretanto, o objetivo de oferecer um controle total aos designers sobre os elementos da página foi mais difícil de cobrir. As especificações anteriores da linguagens tinham muitas utilidades para aplicar estilos às webs, porém os desenvolvedores ainda continuam usando truques diversos para conseguir efeitos tão comuns ou tão desejados como as bordas arredondadas ou a sombra de elementos na página.

CSS 1 já significou um avance considerável na hora de desenhar páginas web, trazendo muito maior controle dos elementos da página. Porém, como ainda ficaram muitas coisas que os designers desejavam fazer, mas que CSS não permitia especificar, estes deviam fazer uso de truques para o design. O pior destes truques é que muitas vezes implica alterar o conteúdo da página para incorporar novas etiquetas HTML que permitam aplicar estilos de uma maneira mais elaborada. Dada à necessidade de mudar o conteúdo, para alterar o desenho e fazer coisas que CSS não permitia, estava-se acabando com algum dos objetivos para os que CSS foi criado, que era o de separar por completo o conteúdo da forma.

CSS 2 incorporou algumas novidades interessantes, que hoje já utilizamos habitualmente, porém CSS 3 ainda avança um pouco mais na direção, de dar mais controle sobre os elementos da página.

Sendo assim, a novidade mais importante que traz CSS 3, para os desenvolvedores de webs, consiste na incorporação de novos mecanismos para manter um maior controle sobre o estilo com o qual se mostram os elementos das páginas, sem ter que recorrer a truques ou hacks, que a muitas vezes complicavam o código das webs.

CSS3 Parte 2

Propriedades novas em CSS3

Segue aqui uma lista das principais propriedades que são novidade em CSS3.

Bordas

  • border-color
  • border-image
  • border-radius
  • box-shadow
Fundos
  • background-origin
  • background-clip
  • background-size
  • fazer camadas com múltiplas imagens de fundo
Cor
  • cores HSL
  • cores HSLA
  • cores RGBA
  • Opacidade
Texto
  • text-shadow
  • text-overflow
  • Ruptura de palavras longas
Interface
  • box-sizing
  • resize
  • outline
  • nav-top, nav-right, nav-bottom, nav-left
Seletores
  • Seletores por atributos
Modelo de caixa básico
  • overflow-x, overflow-y
Outros
  • media queries
  • criação de múltiplas colunas de texto
  • propriedades orientadas a discurso ou leitura automática de páginas web
  • Web Fonts
EM BREVE TUTORIAS .

HTML A EVOLUÇÃO Parte 1

HTML 5 A EVOLUÇÃO DA AGUÁ PARA O VINHO.

O HTML não é uma linguagem de programação como muita gente pensa. HTML é uma linguagem de marcação. Isso quer dizer que sozinha ela não é capaz de criar ou alterar conteúdo. Ela está ali somente para ajudar a organizar o conteúdo na tela. Não deixa de ser uma forma de diagramação de hipertextos. O que faz com que o HTML tenha dinamismo é basicamente o Javascript e a formatação do conteúdo é provido pelo CSS.

Resumindo bem, o Javascript é a linguagem que utilizamos para fazer qualquer tipo de interação com o HTML e CSS. O trabalho do Javascript manipulando CSS e HTML é o que nos dá hoje incríveis aplicações para Internet sem a necessidade de plugins como o Flash, Silverlight ou JavaFx. Porém o HTML4 é uma linguagem muito antiga. Já tem mais de 10 anos desde sua última atualização e convenhamos que a Internet mudou demais nessa década que passou. Ela tornou-se limitada e obsoleta para apresentar o conteúdo que a internet demanda hoje em dia.

HTML A EVOLUÇÃO Parte 2

Muitos desenvolvedores e usuarios ainda estão com duvidas sobre o HTML 5, O que é ? Como Usar ?

O HTML 5 vem para ajudar em especial em duas coisas:Organizar a tremenda bagunça que a Internet está hoje em dia. A organização do conteúdo precisa ter mais semântica, não apenas para os olhos dos usuários, mas também para os robozinhos indexadores de conteúdo. O conteúdo de uma página precisa ser melhor dividida, entre o que realmente é o conteúdo, o que é apenas navegação ou textos adicionais por exemplo.Melhorar a interatividade e aumentar a riqueza de recursos nativos dos navegadores. HTML4 tornou-se obsoleto para o que a internet é capaz de provir. Hoje dependemos de plugins como o Flash e frameworks de javascript para tornar a internet rica. Quando eu digo internet rica, quer dizer que não temos mais apenas textos e imagens estáticas como tinhamos alguns anos atrás. Hoje temos animações, videos, áudio e aplicações com muita interação do usuário, como jogos e sistemas complexos.
e do HTML 5, poderemos adicionar arquivos de áudio e vídeo com a mesma facilidade que adicionamos uma imagem atualmente, e a otimização destes elementos também será bem simples, já que eles contarão com o atributo de descrição alternativa (mais conhecidos como alt tags ou alt text).

HTML A EVOLUÇÃO Parte 3

Conheça Algumas das Novas TAGS

Canvas(imagens)

Especializadas em renderizar imagens em bitmap, as tags canvas serão específicas para a edição breve de imagens através de APIs ou JavaScript. Esse tipo de edição acontece de maneira muito similar a outros geradores de imagem em duas dimensões (2D). Além disso, as Canvas Tags são compatíveis com as folhas CSS.

Elementos de Mídia Embutida

Elementos de mídia embutida são elementos que importam recursos externos à página, tais como: vídeo, áudio, widgets, etc. Com as tags e do HTML 5, poderemos adicionar arquivos de áudio e vídeo com a mesma facilidade que adicionamos uma imagem atualmente, e a otimização destes elementos também será bem simples, já que eles contarão com o atributo de descrição alternativa (mais conhecidos como alt tags ou alt text).

Caching de aplicações

Com o HTML 5 os aplicativos web poderão ser acessados offline via cache. De acordo com a W3C, o arquivamento desses aplicativos será feito via URL em que cada uma delas possui uma categoria diferente. As entradas mestre são aqueles documentos que foram adicionados ao cache por um contexto de navegação indicado por um atributo de manifesto. Já o manifesto é a fonte da URL indicada na Entrada mestre do HTML. Esses arquivamentos ainda podem ser agrupados ou não.

Base de dados

Apesar de não ser um recurso muito utilizado por usuários comuns, os bancos de dados são importantes para os sites. No HTML 5, algumas vantagens serão implementadas como a possibilidade de entradas de valores ou palavras chave, além do banco de dados SQL.

HTML A EVOLUÇÃO Parte 4

O que muda para o usuário comum?

Se você possui um perfil um pouco mais ligado às novidades tecnológicas, sentirá boas diferenças ao navegar pela Internet. Isso porque o HTML 5 irá facilitar muito a vida de todos nós - quer sejamos desenvolvedores ou apenas usuários. Para os desenvolvedores, fica mais rápido produzir sites cada vez mais fáceis e limpos para que os usuários possam aproveitar ao máximo cada uma dessas melhorias.

Você irá notar que colocar vídeos do YouTube no seu site ou blog ficará cada vez mais simples, assim como os conteúdos específicos direcionados para você que está procurando por uma padaria ou locadora de filmes pelo navegador do seu smartphone. Os conteúdos possuem a tendência de serem convergentes, assim como a linguagem de programação. O HTML 5 vem exatamente para facilitar esse processo, para você que acessa o mundo virtual usando um smartphone com tempo vai ver que os sites tendem cada vez mais ter elementos visuais e interativos, e não estáticos como de costume.

Vale a pena lembrar que o HTML 5 ainda deve demorar para ganhar força e prevalecer na web, e, apenas quando ele for largamente utilizado é que será possível analisar a diferença que eles poderão fazer no rastreamento, indexação e ranking.

Mas uma característica necessária para todo bom profissional é saber enxergar a frente do seu tempo e, por isso, desde já devemos ficar atentos às mudanças!

Diferenças entre HTML 4 e HTML 5?
Vou citar apenas as principais mudanças: Principais novos elementos: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video
Principais elementos abolidos: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u
Poder usar SVG e MathML diretamente no html, junto com textos por exemplo.
Novos tipos de campos de formulários: dates, times, email, url, search, tel e outros
APIs de áudio, video, Drag & drop e habilidade de criação de aplicações offline.

Quando o HTML 5 ficará pronto?
Não existe um prazo que seja bem específico, mas a ideia é que seja lançado oficialmente até o final de 2012. Porém muita coisa já está com especificações bem definidas e tecnologias bem estáveis e o único inconveniente em começar a utilizá-las é apenas a compatibilidade dos navegadores com determinadas tecnologias.

Em Breve mais Informações.