Curso de HTML5 - Aula 01

  • Published on
    24-Jan-2017

  • View
    254

  • Download
    2

Transcript

Aula 1 Contedo do Curso Introduo Estrutura HTML5 Novos Elementos Semnticos Formatao Formulrios Elemento Canvas Players de udio e vdeo Vnculos (links) e microdata Listas Tabelas Tableless Introduo ao CSS3 Montagem de Layout Introduo Noes bsicas sobre desenvolvimento para ambientes Web Como funciona a WEB A World Wide Web uma grande rede de computadores interligados e capazes de compartilhar informaes e recursos. Para disponibilizar de modo mais acessvel so criadas pginas de hypertexto para que o usurio possa interagir com estas informaes. Hipertexto so conjuntos de elementos ou ns ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos, udio, documentos dentre outros. Segundo a World Wide Web Consortium (W3C) a Web baseada em 3 pilares: Esquema de nomes para localizao (URL) Protocolo de acesso (HTTP) Linguagem de Hypertexto (HTML) Linguagens WEB Quem est acostumado com programao voltada para desktop, geralmente trabalha com uma nica linguagem. Se voc esta fazendo um programa em Java, Visual Basic, C# ou Delphi usa a mesma linguagem para a interface quanto para o funcionamento do programa. Quando trabalhamos na criao de projetos voltados para ambientes web temos uma mudana de paradigma. Trabalhamos com mais de uma linguagem onde cada uma tem um papel a cumprir. Por exemplo o HTML estrutura o seu documento enquanto o CSS responsvel pela formatao ou seja a aparncia de uma pgina da internet. Linguagens WEB Existem diversas linguagens mas vamos citar abaixo as mais usadas hoje. HTML (atualmente na verso 5) Estrutura e organizao do documento CSS (atualmente na verso 3) Formatao e aparncia do documento Javascript (atualmente na verso 3) Responsvel pela programao de toda funcionalidade que executada no navegador por esta razo chamada de client-side ou seja executa do lado do cliente. Permite validar formulrios, criar banners, slideshow e processar dados. PHP (atualmente na verso 5) Responsvel pela programao de toda funcionalidade que executada no servidor por esta razo chamada de server-side ou seja executa do lado do servidor. Permite validar formulrios, manipular banco de dados, e processar dados. O que o HTML HTML uma abreviao de Hypertext Markup Language - Linguagem de Marcao de Hypertexto, e de acordo com a World Wide Web Consortium (W3C), uma linguagem para publicao de contedo (texto, imagem, vdeo, udio e etc) na Web. Segundo Lee (1994), dentre as linguagens de marcao, ainda a mais utilizada na Internet, mesmo que muitos a considerem simples e limitada. Sua utilizao est voltada tanto para a estruturao de documentos quanto na apresentao visual destes documentos em um navegador. O que o HTML Embora simples, ela pode representar documentos na Internet da mesma forma que as linguagens mais complexas. Ainda que existam formas de representao mais evoludas, no se usando apenas tags predefinidas a HTML continua sendo utilizada em larga escala. Estrutura do HTML5 Estrutura do HTML A estrutura bsica do HTML relativamente simples. Utiliza-se marcadores chamados de tags. Cada tag representada da seguinte forma: - Tag de abertura - Tag de fechamento A maioria das tags aberta e fechada como mostrado acima, com o contedo entre as duas. Para aqueles que j utilizavam HTML4 importante ressaltar que houveram algumas mudanas na estrutura bsica. Seguem os exemplos do cdigo nas verses 4 e 5 para comparar. Estrutura do Documento HTML 4 Estrutura do Documento HTML5 Titulo da Pgina Corpo da Pgina Vamos comear entendendo as tags presentes no exemplo. Indica que se trata de um documento do tipo HTML ressaltando que se trata da verso 5. Deve ser a primeira tag do cdigo antes mesmo da tag . Indica que todo seu contedo deve ser tratado como um cdigo HTML. Indica o cabealho do documento HTML onde muito de seu contedo no visvel ao usurio. Nesta parte ficam os metadados que so informaes sobre a pgina e o contedo ali publicado. Estrutura do Documento HTML5 Existem mais de uma tag meta. So chamadas de metatags e so responsveis por passar informaes de configurao. A propriedade charset informa a tabela de caracteres. No nosso caso passamos o valor utf-8, que representa o padro europeu j que nosso idioma tem acentos e outros caracteres especiais de origem europeia. Esta tag guarda o titulo do documento geralmente exibido na guia do navegador. Tudo que est dentro desta tag faz parte do corpo do documento e ser exibido na tela. Estrutura do Documento HTML5 Conhecendo as Tags Modelos de contedo O HTML possui algumas regras bsicas sobra a organizao de elementos desde as primeiras verses. Elas fazem referncias s duas categorias: elementos de linhas e de bloco. Estas regras definem onde os elementos podem ou no estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus comportamentos. Isto muito importante para a organizao mas tambm influenciar a formatao no CSS. Vamos ver algumas premissas simples: 1. Elementos de linha podem conter outros elementos de linha 2. Elementos de linha nunca podem conter elementos de bloco. 3. Elementos de bloco sempre podem conter elementos de linha. 4. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um pargrafo no pode conter um DIV. Mas o contrrio possvel Categorias dos Elementos Os elementos HTML so divididos em algumas categorias de acordo com suas similaridades. Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content As listas que sero mostradas a seguir, esto organizadas de acordo as informaes da W3C. Metadata Content Os elementos desta categoria vem antes da apresentao, formando uma relao com o documento e seu contedo com outros documentos que distribuem informao por outros meios. base command link meta noscript script style title Flow Content A maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content. Existem alguma excees em que elementos de outra categoria passa a ser considerados Flow Content. Veja a lista abaixo: area (se for um descendente de um elemento de mapa style (Se o atributo scopedfor utilizado) link (Se o atributo itempropfor utilizado) meta (Se o atributo itempropfor utilizado) Basicamente elementos que seu modelo de contedo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faa parte da categoria embedded. Flow Content a abbr address area article aside audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset Figure Footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input Ins Kbd keygen label Flow Content Link map mark math Menu Meta meter nav noscript object o output p pre progress q ruby samp script section select small span strong sub sup svg table textarea time ul var video wbr Text Sectioning content Estes elementos definem um grupo de cabealhos e rodaps. So elementos que juntam grupos de textos no documento article aside nav section Heading content Estes elementos definem uma seo de cabealhos, que podem estar contidos em um elemento na categoria Sectioning. h1 h2 h3 h4 h5 h6 hgroup Phrasing content Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de pargrafo. Existem alguns elementos que s se enquandram nestas categorias em condies especiais. area (se ele for descendente de um elemento de mapa) del (se ele contiver um elemento da categoria de Phrasing) ins (se ele contiver um elemento da categoria de Phrasing) link (se o atributo itempropfor utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing) meta (se o atributo itempropfor utilizado) Phrasing Content a abbr audio b bdo br button canvas cite code command datalist dfn em embed i iframe img input kbd keygen Label mark Math meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr Text Embedded content Nessa categoria h elementos que importam outra fonte de informao para o documento. audio canvas embed iframe img math object svg video Embedded content Os elementos desta classe fazem parte da interao de usurio. Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que o usurio pode ativ-lo de alguma forma. O incio da sequencia de eventos depende do mecanismo de ativao e pode ser um evento de teclado, mouse, comando de voz dentre outros dependendo do user-agente, que permite que o usurio ative manualmente. So eles: a audio (se o atributo controlfor utilizado) button details Embed frame img (se o atributo usemapfor utilizado) input (se o atributo type no tiver o valor hidden) keygen label menu (se o atributo typetiver o valor toolbar) object (se o atributo usemapfor utilizado) select textarea video (se o atributo controlfor utilizado) Elementos Semnticos Novidades do HTML5 Elementos Semnticos Uma das novidades do HTML5 que agora temos novas tags que funcionam como elementos semnticos. Isto alm de organizar o cdigo permite que os buscadores como o Google possa ler o contedo de uma pgina com mais eficincia. As verses anteriores do HTML no continham um padro para a criao de sees comuns e especficas como rodap, cabealho, sidebar, menus e etc. Frequentemente era necessrio usar uma tag para cada elemento onde trabalhvamos com ID e classes para identific-los. Tambm no havia um padro de nomenclatura de IDs, classes ou tags. Veja o exemplo em HTML 4. Elementos Semnticos Titulo da Pgina Cabealho Menu Contedo Barra lateral Roda P Exemplo de Estrutura utilizando apenas A tag . Elementos Semnticos O HTML5 modifica a forma de como escrevemos cdigo e organizamos a informao na pgina. Organizada com novas tags de forma mais semntica com menos cdigo. Deste modo conseguimos mais interatividade sem a necessidade de instalao de plugins o que pode levar a perda de performance. Ainda sim podemos ter problemas de compatibilidade de cdigo que podem ocorrer com mais frequncia o que depende dos fabricantes dos navegadores. Por exemplo, um navegador pode adotar bordas arredondadas e outro no. Elementos Semnticos Estas so algumas das novas tags: Define uma artigo ou contedo de texto Esta tag demarca a rea para uma barra lateral Define um cabealho de contedo Marca uma barra de navegao seja ela principal ou secundria. Define uma nova seo genrica no documento Este elemento consiste em um grupo de ttulos. Define um rodap de contedo Marca parte do texto que exibe um horrio ou uma data Elementos Semnticos Exemplo 1 Esta a organizao do cdigo do exemplo 1, que voc ver no prximo slide. Elementos Semnticos Exemplo 1 Titulo da Pgina Cabealho Menu Contedo Barra lateral Roda P Agora observe o exemplo utilizando as novas tags e observe como ficou mais limpo e organizado. Podemos ainda dizer que est semanticamente correto. Elementos Semnticos Exemplo 2 Titulo da Pgina Cabealho Menu Ttulo 1 Ttulo 2 Seco 1 Seco 2 Roda P Observe este outro exemplo onde trabalhamos com a tag section para dividir seces de contedo. Tambm utilizamos a tag hgroup para organizar os grupos de cabealhos , onde havero ttulos e subttulos. Elementos Modificados Elementos Modificados Passa a ter o mesmo nvel semntico que um SPAN, mas ainda mantm o estilo de negrito no texto. tambm passa a ser um SPAN. O texto continua sendo itlico e para usurios de leitores de tela, a voz utilizada modificada para indicar nfase. Quandi estiver sem o atributo href representa um placeholder no lugar que este link se encontra. Agora tratado como uma seo no documento. agora tem o mesmo nvel que um pargrafo, mas utilizado para quebrar linhas e fazer separaes. Ganhou mais importncia. no aceita mais elementos child como seu filho. Apresentao Professor Formado Tcnico em Informtica pela Universidade Federal de Viosa Campus Florestal/MG, Graduado em Sistemas de Informao pela Faculdade Pitgoras Campus Divinpolis/MG. Profissional certificado pela Microsoft nos exames Microsoft Office Specialist (MOS) de Word 2010, Powerpoint 2010 e Excel 2010 alm de aprovado em diversos cursos da Microsoft Virtual Academy (MVA) dentre eles: PowerShell 3.0, HTML5 - Homologado pelo W3C e SQL Server para DBAs Oracle. Trabalha como designer grfico e webmaster desde 2007, tendo feito diversos trabalhos de criao de identidade visual contendo elementos como logos, cartes de visitas, banners, sites dinmicos e outros. Professor Atuou como Instrutor na People - Informtica e Idiomas, da cidade de Divinpolis em Minas Gerais, de 2011 at 2015, onde ministrou cursos de diversos assuntos como Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Adobe Dreamweaver, HTML, CSS, Flash, Actionscript, Windows 7, Windows 8, Office 2010, Excel Avanado e Excel com VBA. Tambm criador e responsvel pelo contedo e manuteno dos blogs cujo os endereos esto listados abaixo, onde procura compartilhar parte do conhecimento com outros profissionais e estudantes de design e programao. rabiscandonophotoshop.blogspot.com.br worldwildwebdesign.blogspot.com.br http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://rabiscandonophotoshop.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/http://worldwildwebdesign.blogspot.com.br/CONTATOS Skype: leo.diaz1985 Twitter: wilborn7 Facebook: www.facebook.com/wilborn7