{"id":5459,"date":"2017-03-27T09:00:02","date_gmt":"2017-03-27T12:00:02","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=5459"},"modified":"2019-03-16T02:25:40","modified_gmt":"2019-03-16T05:25:40","slug":"5-dicas-de-html5-que-todo-curso-deveria-dar","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/5-dicas-de-html5-que-todo-curso-deveria-dar\/","title":{"rendered":"5 dicas de HTML5 que todo curso deveria dar"},"content":{"rendered":"<p>O HTML5 \u00e9 a \u00faltima vers\u00e3o de Hypertext Markup Language (Linguagem de marca\u00e7\u00e3o de texto), o c\u00f3digo para estruturar p\u00e1ginas na web. Nessa atualiza\u00e7\u00e3o, foram inclu\u00eddos v\u00e1rios recursos que <a href=\"https:\/\/www.mxcursos.com\/blog\/como-criar-sites-incriveis\/\" target=\"_blank\" rel=\"noopener noreferrer\">otimizam a exibi\u00e7\u00e3o de v\u00e1rios tipos de conte\u00fados<\/a> nos navegadores, como a exibi\u00e7\u00e3o de artigos, imagens, v\u00eddeos, \u00e1udios cria\u00e7\u00e3o de gr\u00e1ficos.<\/p>\n<p>Neste post, daremos 5 dicas de HTML5 que deveriam estar presente em um bom curso de HTML5. Vamos l\u00e1!<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5622 size-medium\" title=\"5 dicas de HTML5 que todo curso deveria dar\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-600x375.jpg\" alt=\"5 dicas de HTML5 que todo curso deveria dar\" width=\"600\" height=\"375\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-600x375.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-768x480.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-1500x938.jpg 1500w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-740x463.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2-24x15.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/unitymedia_html5ad_illustration_a2.jpg 1800w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>1. Cabe\u00e7alho e metadados<\/h2>\n<p>No cabe\u00e7alho de uma p\u00e1gina web, s\u00e3o inclu\u00eddos diversos itens relacionados \u00e0 forma como a p\u00e1gina ser\u00e1 exibida e que a descrevem para <a href=\"https:\/\/www.mxcursos.com\/blog\/google-analytics-saiba-aproveitar-suas-funcionalidades-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">navegadores e mecanismos de busca<\/a>. Alguns deles s\u00e3o:<\/p>\n<ul>\n<li>descri\u00e7\u00e3o da p\u00e1gina;<\/li>\n<li>keywords, palavras que ajudam os buscadores a identificar se na p\u00e1gina h\u00e1 o tipo de conte\u00fado que o usu\u00e1rio busca;<\/li>\n<li>indica\u00e7\u00e3o de quais tipos de caracteres ser\u00e3o exibidos; e<\/li>\n<li>inclus\u00e3o de javascript e CSS.<\/li>\n<\/ul>\n<h2>2. Estrutura\u00e7\u00e3o de textos<\/h2>\n<p>O HTML5 trabalha com tags sem\u00e2nticas, como posts em um blog, endere\u00e7os, rodap\u00e9s e legendas, que melhoram a exibi\u00e7\u00e3o do conte\u00fado. Elas tornam a p\u00e1gina mais intuitiva para os navegadores, que, assim podem exibir o texto de forma mais leg\u00edvel para o usu\u00e1rio.<\/p>\n<p>Nessa vers\u00e3o especialmente foram inclu\u00eddas <em>tags<\/em> como:<\/p>\n<ul>\n<li><strong>&lt;main&gt;:<\/strong> onde fica situado o principal conte\u00fado da p\u00e1gina;<\/li>\n<li><strong>&lt;header&gt;:<\/strong> ideal para t\u00edtulos de textos e mensagens;<\/li>\n<li><strong>&lt;figcaption&gt;:<\/strong> tag para legendas em figuras;<\/li>\n<li><strong>&lt;figure&gt;:<\/strong> tags entre as quais figuras e uma legenda s\u00e3o inseridas;<\/li>\n<li><strong>&lt;article&gt;:<\/strong> tags dentro das quais o conte\u00fado completo de artigos \u00e9 colocado.<\/li>\n<\/ul>\n<h2>3. Formul\u00e1rios<\/h2>\n<p>Na \u00faltima atualiza\u00e7\u00e3o, foram inclu\u00eddas diversas fun\u00e7\u00f5es que facilitam a estrutura\u00e7\u00e3o e valida\u00e7\u00e3o de formul\u00e1rios. Tamb\u00e9m foram desenvolvidos m\u00e9todos que facilitam a cria\u00e7\u00e3o de ferramentas que interagem com o usu\u00e1rio.<\/p>\n<p>O <em>fieldset<\/em>, por exemplo, agrupa itens de formul\u00e1rios como campos para inser\u00e7\u00e3o de texto, checkbox, combobox e bot\u00f5es. J\u00e1 o <em>datalist <\/em>cont\u00e9m v\u00e1rios elementos, cada um em uma tag &lt;<em>option<\/em>&gt;, que ficam dispon\u00edveis para uso em outros elementos. Ele pode ser usado para um autocomplete para um <em>input<\/em>, por exemplo.<\/p>\n<p>Os atributos <em>oninput<\/em> e o campo <em>output<\/em> permitem que, em um formul\u00e1rio HTML (sem uso de javascript ou acesso a uma aplica\u00e7\u00e3o de <em>backend<\/em>), se possam aplicar fun\u00e7\u00f5es sobre dados inseridos em um formul\u00e1rio pelo usu\u00e1rio, agilizando assim rotinas como valida\u00e7\u00e3o e outras.<\/p>\n<p>Ainda, foram acrescentados atributos e tags para melhoria da intera\u00e7\u00e3o com o usu\u00e1rio, como <em>autofocus<\/em>, <em>progress<\/em>, e par\u00e2metros para indicar o tipo de campo, como e-mail, texto e num\u00e9rico. Eles tornam mais f\u00e1cil verificar se os campos s\u00e3o preenchidos com o tipo correto de informa\u00e7\u00e3o.<\/p>\n<h2>4. Inser\u00e7\u00e3o de \u00e1udio e v\u00eddeo<\/h2>\n<p>Com HTML5, a exibi\u00e7\u00e3o de \u00e1udios, v\u00eddeos e imagens foi bastante simplificada. Foi eliminada a necessidade de utiliza\u00e7\u00e3o de <em>plugins<\/em> para a exibi\u00e7\u00e3o um v\u00eddeo ou uma anima\u00e7\u00e3o, por exemplo, o que deixa a p\u00e1gina mais leve e segura.<\/p>\n<p>Com <em>&lt;<\/em>audio<em>&gt;<\/em>, pode-se incluir controles e o <em>link<\/em> para o arquivo de \u00e1udio. J\u00e1 com <em>&lt;<\/em>video<em>&gt;<\/em> temos fun\u00e7\u00f5es e atributos que permitem:<\/p>\n<ul>\n<li>localizar o v\u00eddeo e incluir controles;<\/li>\n<li>indicar largura, altura;<\/li>\n<li>configurar se ele ser\u00e1 exibido logo ao abrir a p\u00e1gina ou ap\u00f3s o usu\u00e1rio clicar em <em>play;<\/em> e<\/li>\n<li><em>link<\/em> para imagem que fica sobre o v\u00eddeo antes de ser exibida.<\/li>\n<\/ul>\n<p>No caso de textos com legenda, no pr\u00f3prio HTML podemos colocar o link para o arquivo com as legendas.<\/p>\n<h2>5. Cria\u00e7\u00e3o de gr\u00e1ficos e anima\u00e7\u00f5es<\/h2>\n<p>No HTML5 temos a tag &lt;canvas&gt;, dentro da qual podem-se<a href=\"https:\/\/www.mxcursos.com\/blog\/problemas-para-criar-aposte-nesses-4-servicos-de-design-on-line\/\" target=\"_blank\" rel=\"noopener noreferrer\"> desenhar gr\u00e1ficos<\/a> de forma r\u00e1pida e din\u00e2mica. \u00c9 necess\u00e1rio usar um c\u00f3digo Javascript para desenhar os gr\u00e1ficos dentro dela, que n\u00e3o comporta apenas um <em>container<\/em> para os gr\u00e1ficos, mas, sim, disponibiliza diversos m\u00e9todos para desenhar ret\u00e2ngulos, linhas, textos e acrescentar de imagens.<\/p>\n<p>Vimos assim que o HTML5 cont\u00e9m diversas atualiza\u00e7\u00f5es que agilizam o desenvolvimento de p\u00e1ginas web, com recursos que ajudam a criar projetos mais din\u00e2micos e seguros. Com essas dicas de HTML5, \u00e9 poss\u00edvel ter uma refer\u00eancia de qual conte\u00fado deve estar presente em um bom curso para que possa criar p\u00e1ginas din\u00e2micas e interativas, aproveitando bem os recursos da linguagem.<\/p>\n<p>Est\u00e1 interessado em aprender tudo o que precisa para cria\u00e7\u00e3o de p\u00e1ginas web? <a href=\"https:\/\/www.mxcursos.com\/webdesign?tracking=cta_slider_home\" target=\"_blank\" rel=\"noopener noreferrer\">Conhe\u00e7a os cursos da MX Cursos<\/a>. Voc\u00ea vai encontrar aulas de HTML5, CSS, Javascript, Jquery, Bootstrap, diversas linguagens e <em>frameworks<\/em> para a cria\u00e7\u00e3o de p\u00e1ginas responsivas, interativas e com design atraente e moderno!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O HTML5 \u00e9 a \u00faltima vers\u00e3o de Hypertext Markup Language (Linguagem de marca\u00e7\u00e3o de texto), o c\u00f3digo para estruturar p\u00e1ginas na web. Nessa atualiza\u00e7\u00e3o, foram inclu\u00eddos v\u00e1rios recursos que otimizam a exibi\u00e7\u00e3o de v\u00e1rios tipos de conte\u00fados nos navegadores, como a exibi\u00e7\u00e3o de artigos, imagens, v\u00eddeos, \u00e1udios cria\u00e7\u00e3o de gr\u00e1ficos. Neste post, daremos 5 dicas [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":5621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-5459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=5459"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5459\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/5621"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=5459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=5459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=5459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}