JS Bin é uma ferramenta para a experimentação de linguagens web. Em HTML particular, CSS e JavaScript, mas JS Bin também suporta outras linguagens como Markdown, Jade e Sass.
é possível compartilhar código. Junto com o código, a saída completa também é compartilhada com outros desenvolvedores, colegas e / ou alunos. Conforme você digita em um dos painéis, você e qualquer um vendo o seu bin vai ver a saída a ser gerado em tempo real no painel de saída.
A ideia defendida por Luke Wroblewski é simples: desenhar sua solução primeiro para mobile, depois para web. Esse exercício forçará o seu poder de síntese ao máximo e, ao transportar para a versão web, você já terá limado o excesso de conteúdo.
Segundo Luke, o excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo web.
“O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.”, afirma Luke.
Um dispositivo mobile é por muitas vezes o primeiro dispositivo conectado que um bebê ou uma criança pequena interage e se familiariza. Se hoje eu der o kindle para meu bebê com 10 meses, ele tenta arrastar a tela como se fosse meu Smartphone.
“… Esta mentalidade mobile-first molda como eles interagem com o mundo e criam expectativas para tudo a sua volta. Incluindo dispositivos non-touch ou objetos inanimados, touch-friendly e sempre conectados. Estas mentes mobile-first são livres dos modelos mentais do passado da computação, e como resultado certamente moldarão o que esperamos mais a frente do nosso “mundo conectado.”
A definição mobile-first de Luke consiste em três principais componentes:
1. O crescimento do mobile é, mais do que nunca, uma grande oportunidade de atingir as pessoas;
2. As restrições do meio mobile nos força a focar no que realmente importa;
3. E as capacidades do mobile criam oportunidades inovadoras.
Então? Será que mobile-first seria a arquitetura a se pensar? Ou estamos apenas em mais um modismo?
A declaração <!DOCTYPE> não é uma tag HTML; ela é uma instrução para o browser sobre qual versão a página HTML está escrita. e deve ser a primeira declaração do documento HTML.
No HTML 4.01, a declaração <!DOCTYPE> faz referência a um DTD, por que o HTML 4.01 foi baseado no SGML. O DTD especifica as regras para a linguagem de marcação para que os navegadores renderizem o conteúdo corretamente.
HTML5 não é baseado no SGML, e, portanto, não necessita de uma referência para um DTD. HTML 4.01 e HTML 5
Existem três diferente declarações <!DOCTYPE> no HTML 4.01. No HTML5 existe apenas uma:
<!DOCTYPE html>
Elementos HTML e DOCTYPE
Veja na tabela todos os elementos HTML e em qual <!DOCTYPE> cada elemento aparece.
Dicas e Notas
Nota: A tag <!DOCTYPE> não tem uma tag de fechamento.
Dica: a declaração <!DOCTYPE> NÃO é case sensitive.
Dica: Use o validador W3C para checar se você escreveu um documento HTML / XHTML válido.
Declarações mais comuns de DOCTYPE
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional
Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01 Frameset
Este DTD é igual ao HTML 4.01 Transitional, mas permite o uso de conteúdo frameset.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 1.0 Strict
Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional
Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset
Este DTD é igual ao XHTML 1.0 Transitional, mas permite o uso de conteúdo frameset.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML 1.1
Este DTD é igual ao XHTML 1.0 Strict, mas permite que você adicione módulos (por exemplo para fornecer suporte ao Ruby para idiomas do Leste Asiático).
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&g
Dublin Core nada mais é do que um esquema de metadados que visa descrever objetos digitais como videos, imagens, textos e sites. Através da utilização do XML e o RDF (Resource Description Framework).
dcmi_logo_edersonmelo
A Dublin Core Metadata Initiative (DCMI) (Iniciativa Dublin Core Metadados) é uma organização dedicada a promover a adoção de padrões de interoperabilidade de metadados e desenvolver vocabulários especializados para descrever fontes que tornem mais inteligentes sistemas de descobrimento de informações.
Cada vez mais me surpreendo com as possibilidades e o poder do javascript, na sua mais ampla forma de utilização.
A última foi a possibilidade e interação com o firebug, além de simplesmente substituir as funções de “alert();“, o que para muitos, não é nenhuma novidade.
Entre elas a possibilidade de procurar valores de variáveis em determinados pontos de códigos, exibir uma estrutura XML, e muitas outras. Aperfeiçoando a DX (Developer Experience).
Entre os exemplos mais simples encontrados temos:
console.log
A maneira mais fácil escrever para o console do Firebug, podendo passar tantos argumentos quanto você quer e eles serão unidos em uma fileira, conforme os exemplos: console.log(“hello world”), console.log(2,4,6,8,”foo”,bar) .
Código de cores
Além console.log , existem várias outras funções que você pode chamar para imprimir mensagens com uma distinção colorido visual e semântica. Estes incluem console.debug , console.info , console.warn , e console.error .
Timing e profiling
O Firebug permite duas maneiras fáceis de medir o desempenho JavaScript. Uma delas é chamar o console.time(“timing foo”) antes do código que você quer medir, e então console.timeEnd(“timing foo”) depois.
O Firebug, então, registra o tempo que foi gasto entre elas. E o profiler JavaScript. Basta mandar para o console.profile()antes do código que você quer medir, e então console.profileEnd()depois, mais simples não! O Firebug irá registrar um relatório detalhado sobre quanto tempo foi gasto em cada chamada de função entre elas.
Como falei, as possibilidades são muitas e excelentes.
Estive precisando um dia destes de algo para realizar a quebra de linha e não podia optar por JavaScript ou suas vastas opções. Então que descubro o White-Space e Display.
Tag White-Space
É usada para o tratamento de espaços em branco, que possuí as seguintes propriedades: Valor Descrição normal Os espaços em branco serão ignorados pelo browser. nowrap O texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br> pre Os espaços em branco serão preservados pelo browser. pre-line Os espaços em branco serão ignorados pelo browser e o texto será quebrado quando necessário. pre-wrap Os espaços em branco serão preservados pelo browser e o texto será quebrado quando necessário. inherit Será herdado as características do elemento pai. Tag Display
Além de utilizar a tag div como uma quebra de linha quase natural, em muitos casos como na utilização de tags do jsf que geram divs e com isso muitas são renderizadas é que temos a tag Display.
Value Description none O elemento não será exibido em todos box (ou flex-box) O elemento é apresentado como um em nível de bloco flex container box block O elemento é apresentado como um em nível de bloco do elemento(like paragraphs and headers) flex O elemento é apresentado como um em nível de bloco flex container box inline Default. O elemento é apresentado como um elemento inline-level(like span) inline-block O elemento é colocado como um elemento inline(on the same line as adjacent content), but it behaves as a block element inline-flex O elemento é apresentado como um n inline-level flex container box inline-table O elemento é apresentado como um n inline-level table list-item O elemento é apresentado como um list-item table O elemento é apresentado como um tabela table-caption O elemento é apresentado como um tabela caption table-cell O elemento é apresentado como um tabela cell table-column O elemento é apresentado como um tabela column table-column-group O elemento é apresentado como um tabela column group (like <colgroup>) table-footer-group O elemento é apresentado como um tabela footer row group table-header-group O elemento é apresentado como um tabela header row group table-row O elemento é apresentado como um tabela row table-row-group O elemento é apresentado como um tabela row group inherit Será herdado as características do elemento pai
Continuando um pouco nosso HTML5, e finalizando, já que a idéia era apenas dar uma olhada paran entender um pouco as “novidades”. Sobre internalização
O HTML5 nos da um bdi, que permite aos autores substituir o algoritmo bidirecional Unicode e fazer o texto mais compreensível.
para saber um pouco mais sobre bdi “HTML5(http://rishida.net/blog/?p=564)”.
A maioria das pessoas estão cientes de que HTML5 nos dá muitos novos elementos para descrever partes de uma página da Web, como header , footer , nav , section , article , aside e assim por diante.
A representação de uma figura com algum conteúdo de fluxo, opcionalmente, com uma legenda, que é auto-suficiente e é normalmente referenciado como uma única unidade do fluxo principal do documento.
O elemento pode assim ser usado para anotar ilustrações, diagramas, fotos, listas de código, etc …
<picture alt=”angry pirate”>
<source src=hires.png media=”min-width:800px”>
<source src=midres.png media=”min-width:480px”>
<source src=lores.png>
<!– fallback for browsers without support –>
<img src=midres.png alt=”angry pirate”>
</picture>
Há um grande problema com isso. Em navegadores que não suportam figuras, a imagem não seria exibido, pois o figura elemento seria completamente ignorado. O conteúdo do elemento credit seria exibido, porque é apenas texto. Então, você poderia pelo menos mostrar estes créditos para qualquer imagem em navegadores mais antigos.
HTML5 tem um time elemento, isso permite que você possa anotar uma data legível. Não importa o que se passa entre as tags, porque esse é o conteúdo para as pessoas lerem. Então, você poderia usar um dos seguintes:
<time datetime=”1982-07-18″>The day the woman I love was born</time>
Seja qual você escolher, a máquina ainda sabe a data que você quer dizer por causa do atributo datetime, formatadas como YYYY-MM-DD .
Se você quiser adicionar um tempo, você poderia: separar o tempo entre a data com um T , e depois colocar o tempo no formato de 24 horas, terminada por um Z , junto com qualquer fuso horário offset.
Por exemplo, 2011-11-13T20:00Z would be 8:00 pm on 13 November 2011 UTC, enquanto 2011-11-13T23:26.083Z-05.00 seria pm 23:26 e 83 milissegundos no fuso horário escondendo 5 horas antes de UTC .
Uma breve estudada sobre HTML5 e consigo entender o porque de tanta vontade que alguns tem de utilizar, como as API’s: armazenamento local, cache de aplicativos, serviços web, desenho 2-D e similares, mas traz ainda 30 elementos para marcar documentos e aplicativos, aumentando o número total de elementos disponíveis para mais de 100.
A semântica HTML5 é cuidadosamente projetada para ampliar a capacidade atual do HTML, sempre permitindo que os usuários de navegadores mais antigos consigam acessar o conteúdo.
Alguns elementos de apresentação
Elementos puramente de apresentação, como center, font e big são agora obsoletos. seu papel tem sido perfeitamente usurpado por Cascading Style Sheets. Não significa que você tem que se apressar e recodificar todas as páginas antigas. Pela mesma razão os atributos de apresentação foram retirados elementos de corrente, por exemplo, align a img, table, background no body e bgcolor na table.
Elementos de apresentação redefinidos
Nem todos os elementos de apresentação foram retirados, alguns passaram por uma reeducação extensa e brilhante, surgindo uma nova semântica. Por exemplo, o small, já não significa “usar uma fonte pequena”, embora ele irá aparecer em uma folhas de estilo do navegador. Agora small representa comentários laterais, tais como letras pequenas:
Letras pequenas renúncias tipicamente características, limitações, restrições legais, ou direitos autorais. Letras pequenas às vezes também é usado para atribuição, ou para satisfazer requisitos de licenciamento.
O elemento u [agora] representa um intervalo de texto com um desarticulador, embora explicitamente prestados, a anotação não-textual, como a rotulagem do texto como sendo um nome próprio no texto em chinês (uma marca de nome chinês propriamente dita), ou rotulagem o texto como ser grafadas incorretamente.
Nova semântica
Todos sabemos que video e audio assim como canvas que permitem gráficos 3-D utilizando webGL, então designers de jogos podem portar seus produtos para web. Como o bom e velho img são incorporados no conteúdo seja um arquivo, um URI de dados ou u JavaScript.
Ao contrário de img, eles tem abertura e fechamento de tags, permitindo fallback, portanto, os navegadores que não suportam a nova semântica pode ser alimentado com algum conteúdo.
Os elementos source e track são elementos vazios(sem tag de fechamento) que são filhos de video ou audio.
O source aponta para um arquivo de origem diferente(WebM, MP4, Ogg Theora)
Neste exemplo, Opera, Firefox e Chrome irá baixar a versão mais recente do Ogg, enquanto o Safari e IE vai pegar a versão MP3. Chrome pode jogar tanto Ogg e MP3, mas os browsers irá baixar o arquivo de origem na primeira vez que eles entendem. O conteúdo fallback entre as tags de abertura e fechamento é um link para baixar o conteúdo para o desktop e jogá-lo através de um tocador de mídia separado, e é exibido apenas em navegadores que não pode jogar multimídia nativa.
Para vídeo, você poderia usar um filme flash embutido hospedado no YouTube:
>O Google apresentou, na home do Search daNova Zelândia, um doodle especial e animado, feito em HTML5, em comemoração aos 25 anos do Fulereno.
Os fulerenos são a terceira forma mais estável do carbono, após o diamante e o grafite. Foram descobertos recentemente (1985), tornando-se populares entre os químicos, tanto pela sua beleza estrutural quanto pela sua versatilidade para a síntese de novos compostos químicos. Foram chamados de “buckminsterfullerene” em homenagem ao arquiteto R. Buckminster Fuller que inventou a estrutura do domo geodésico, devido à semelhança, daí advindo a denominação antiga desta forma de carbono.
Fulerenos uma vasta família de nanomoléculas superaromáticas, altamente simétricas, compostas de dezenas de átomos de carbono sp2-hibridizados.
Sua estrutura é em geral esférica, formada por hexágonos interligados por pentágonos, sendo estes últimos responsáveis pela curvatura da molécula e, conseqüentemente, por sua forma tridimensional. O representante mais conhecido da família dos fulerenos sendo o C60 (com 60 carbonos), um icosaedro truncado de simetria Ih, e um diâmetro de aproximadamente 1 nm.
Ederson Melo 