{"id":3454,"date":"2014-09-03T11:00:29","date_gmt":"2014-09-03T14:00:29","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3454"},"modified":"2014-09-03T11:00:29","modified_gmt":"2014-09-03T14:00:29","slug":"novo-elemento-do-html-deixa-a-web-mais-rapida-no-seu-smartphone","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/novo-elemento-do-html-deixa-a-web-mais-rapida-no-seu-smartphone\/","title":{"rendered":"Novo elemento do HTML deixa a web mais r\u00e1pida no seu smartphone"},"content":{"rendered":"

Por tr\u00e1s de cada foto que voc\u00ea v\u00ea na internet, h\u00e1 uma estrutura complexa de c\u00f3digo. E em breve, essa estrutura receber\u00e1 um pequeno ajuste que ir\u00e1 tornar mais r\u00e1pida a navega\u00e7\u00e3o na web,\u00a0especialmente em seu celular<\/a>.<\/p>\n

Quando p\u00e1ginas da web demoram a carregar no smartphone, h\u00e1 em geral dois principais culpados. Um deles \u00e9 sua operadora; o outro s\u00e3o as imagens. Em geral, elas representam mais da metade dos dados que seu celular tem que baixar para exibir uma p\u00e1gina.<\/p>\n

Voc\u00ea n\u00e3o precisa necessariamente de uma imagem em alta resolu\u00e7\u00e3o para ver na tela do smartphone, mas seu navegador vai baix\u00e1-la mesmo assim \u2013 a menos que voc\u00ea ative algum recurso para economizar dados,\u00a0como no Chrome<\/a>\u00a0ou no Opera.<\/p>\n

O\u00a0Ars Technica<\/em>\u00a0explica<\/a>\u00a0que isto \u00e9 uma consequ\u00eancia de como a internet est\u00e1 mudando. Cada vez mais, os sites est\u00e3o adotando o design responsivo, que se adapta a qualquer tamanho de tela, em vez de adotar um endere\u00e7o diferente \u2013 m.site.com, por exemplo \u2013 espec\u00edfico para celulares. Assim:<\/p>\n

\"celular-smartphone-dica-turbosite\"<\/p>\n

O design responsivo \u00e9 \u00fatil, mas tamb\u00e9m significa que o seu navegador ainda transfere imagens enormes, mesmo se voc\u00ea estiver em uma tela pequena, e at\u00e9 agora n\u00e3o havia uma forma de impedir isso.<\/p>\n

Mat Marquis e desenvolvedores da Opera e Google criaram uma solu\u00e7\u00e3o: um novo elemento do HTML chamado Picture. Basicamente, ele oferece imagens em diferentes tamanhos dependendo do tamanho e resolu\u00e7\u00e3o da tela.<\/p>\n

Yoav Weiss, da Opera,\u00a0oferece um exemplo t\u00e9cnico<\/a>:<\/p>\n

<img sizes=\u201d(max-width: 30em) 100vw,\n(max-width: 50em) 50vw,\ncalc(33vw \u2013 100px)\u201d\nsrcset=\u201dswing-200.jpg 200w,\nswing-400.jpg 400w,\nswing-800.jpg 800w,\nswing-1600.jpg 1600w\u201d\nsrc=\u201dswing-400.jpg\u201d alt=\u201dKettlebell Swing\u201d><\/pre>\n
A se\u00e7\u00e3o \u201csizes\u201d serve para identificar o tamanho e resolu\u00e7\u00e3o da tela. Por sua vez, a se\u00e7\u00e3o \u201cscrset\u201d lista os diferentes arquivos com a mesma imagem, por\u00e9m em diferentes tamanhos. Assim, um laptop carregaria a vers\u00e3o com 1600 pixels de largura, enquanto um smartphone comum\u00a0exibiria a vers\u00e3o menor de 200 pixels.<\/p>\n
Mas e se o navegador n\u00e3o entender esse novo elemento? Sem problema: ele carrega a imagem listada no campo \u201cscr\u201d, como \u00e9 o padr\u00e3o atual.<\/p>\n
Tudo isso deixa a internet no celular mais r\u00e1pida em sites responsivos. Claro que essa solu\u00e7\u00e3o s\u00f3 vai funcionar se todos concordarem em us\u00e1-la, e o processo de criar um novo padr\u00e3o para a web \u00e9 um pesadelo.<\/p>\n
Mas depois de uma \u00e1rdua batalha, o elemento Picture est\u00e1 prestes a chegar at\u00e9 voc\u00ea: Google Chrome e Firefox decidiram adot\u00e1-lo at\u00e9 o final do ano. Ent\u00e3o, mesmo que voc\u00ea n\u00e3o mude de smartphone (ou de operadora), a web m\u00f3vel est\u00e1 prestes a ficar mais r\u00e1pida. [Ars Technica<\/a>]<\/p>\n
Via: Gizmodo<\/a><\/p>\n
Fique de olho no Blog da Turbosite<\/a>, todos os dias postando dicas e not\u00edcias para voc\u00ea. Tamb\u00e9m possu\u00edmos um canal de Tutorias voltado a Hospedagem de Sites, veja mais aqui<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Novo elemento HTML para desenvolver sites mais r\u00e1pidos para Smartphones. Com este novo recurso, poder\u00e1 ser reduzido em mais de 50% o tamanho de uma p\u00e1gina.<\/p>\n","protected":false},"author":1,"featured_media":3459,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[156,180,334,455,475],"class_list":["post-3454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noticias","tag-css-para-smartphone","tag-destaque","tag-html-smartphone","tag-novo-elemento-css","tag-pagina-mais-rapida"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3454"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3459"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}