Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 Aula 3

4,667 views

Published on

Slides da aula 3 de HTML5 da Especializa. O curso inteiro está disponível gratuitamente no endereço: http://ead.especializa.com.br/curso/html5-basico.

Published in: Internet
  • Be the first to comment

Html5 Aula 3

  1. 1. quinta-feira, 15 de março de 12
  2. 2. HTML5 ESSENCIAL Fundamentos de todo serviço na Webquinta-feira, 15 de março de 12
  3. 3. EMENTA • Fundamentos de Web • Documentos HTML • Conteúdo • Hipermídia • Semântica • Desempenho 3quinta-feira, 15 de março de 12
  4. 4. O QUE VEREMOS AGORA • Fundamentos da Web • Documentos HTML • Conteúdo • Section, div, span, aside, parágrafos, cabeçalhos e rodapé • Listas e tabelas • Formulários (campos e atributos) • Forms 2.0 • Tags editáveis (contenteditable) • IFrames • Hipermídia • Semântica 4quinta-feira, 15 de março de 12
  5. 5. TABELAS • Estrutura para definição de dados tabulares • Não devem ser utilizadas para layout de páginas • Alguns atributos foram depreciados no XHTML e retirados no HTML5 para evitar esse mau uso das tabelas • Tabelas são estruturas simétricas onde toda linha deve conter sempre o mesmo número de colunas • <table> - Para a tabela • <tr> - Para linhas (table rows) • <td> - Para divisão em células das linhas (colunas) • <th> - Para células que representam cabeçalhos • <thead> - Para agrupar o cabeçalho da tabela • <tfoot> - Para agrupar o rodapé da tabela • <tbody> - Para agrupar o conteúdo geral da tabela 5quinta-feira, 15 de março de 12
  6. 6. TABELAS Cursos da formação WebMobile Front-End Engineer Nome Módulo Carga-horária HTML5 Essencial I - Content & Design 28h Photoshop para Web I - Content & Design 28h WebDesign com CSS3 I - Content & Design 32h Javascript Essencial II - Web Applications 32h jQuery & jQueryUI II - Web Applications 24h AJAX & HTML5 II - Web Applications 32h TOTAL 176h 6quinta-feira, 15 de março de 12 <th>
  7. 7. <table> TABELAS <th colspan=“3”> <thead> { Cursos da formação WebMobile Front-End Engineer Nome Módulo Carga-horária <tr> <tr> { HTML5 Essencial I - Content & Design 28h <tr> <tbody> Photoshop para Web I - Content & Design 28h <tr> WebDesign com CSS3 I - Content & Design 32h <tr> Javascript Essencial II - Web Applications 32h <tr> jQuery & jQueryUI II - Web Applications 24h <tr> <tfoot> <tr> AJAX & HTML5 II - Web Applications 32h { TOTAL 176h <tr> <th> <td> 6quinta-feira, 15 de março de 12 <th>
  8. 8. TABELAS • Resposta do exercício: <table> <thead> <tr> <th colspan=“3”>Cursos de formação WebMobile...</th> </tr> <tr> <th>Nome</th> <th>Módulo</th> <th>Carga-horária</th> </tr> </thead> ... continua 7quinta-feira, 15 de março de 12
  9. 9. TABELAS • Continuação do exercício: <tfoot> <!-- curiosamente o tfoot vem antes do tbody --> <tr> <th>TOTAL</th> <th></th> <!-- mesmo sem conteúdo a th deve existir --> <th>176h</th> </tr> </tfoot> ... continua 8quinta-feira, 15 de março de 12
  10. 10. TABELAS • Continuação do exercício: <tbody> <tr> <th>HTML5 Essencial</th> <td> I - Content & Design</td> <th>28h</th> Apenas um trecho do <tbody> </tr> Lembrando de fechar a tag <table> <tr> <th>Photoshop para Web</th> <td> I - Content & Design</td> <th>28h</th> </tr> </tbody> 9quinta-feira, 15 de março de 12
  11. 11. TABELAS ACESSÍVEIS • <caption> - Para se definir o título da tabela. É em geral exibido centralizado acima da tabela. Muito útil para acessibilidade • Atributo summary de <table> - Atributo não visual mas útil para leitores de tela. Nele, você deve expor a finalidade da tabela e eventualmente alguma particularidade se ela for uma tabela complexa • Atributo abbr em células <td> ou <th> - Atributo para abreviaturas de conteúdo que podem ser mais extensos • Atributo id de células - Atributo de uso geral para identificação de uma tag. Útil para ser referenciado por atributos headers • Atributo headers em células - Atributo que referencia id(s) de alguma(s) outra(s) célula(s) que lhe servirá(ão) de cabeçalho 10quinta-feira, 15 de março de 12
  12. 12. TABELAS ACESSÍVEIS • Escopo de células de cabeçalho (<th>) • Células (em geral de cabeçalho <th>) podem possuir o atributo scope com um dos seguintes valores: • row - Diz que a célula de cabeçalho fala sobre uma linha • col - Diz que a célula de cabeçalho fala sobre uma coluna • rowgroup - O mesmo que row, mas fala sobre <rowgroup> • colgroup - O mesmo que col, mas fala sobre <colgroup> 11quinta-feira, 15 de março de 12
  13. 13. TABELAS ACESSÍVEIS • Agrupamento de colunas ou linhas • Agrupamentos são feitos através das tags <colgroup> para agrupar colunas ou <rowgroup> para agrupar linhas. • Tags <colgroup> e <rowgroup> podem conter elementos (tags internas) <col> ou o atributo span. Ex: • <colgroup span=“3”></colgroup> ou • <colgroup> <col /> <col /> </colgroup> • Ao criar agrupamentos de colunas/linhas, é possível adicionar estilos a todas as células agrupadas • A tag <col> não possui corpo, ela só é vantagem sobre o atributo span caso haja alguma particularidade em alguma coluna. 12quinta-feira, 15 de março de 12
  14. 14. 13quinta-feira, 15 de março de 12
  15. 15. thead e tfoot 13quinta-feira, 15 de março de 12
  16. 16. 14quinta-feira, 15 de março de 12
  17. 17. TABELAS • Material de estudo só sobre tabelas e acessibilidade • Cartilha sobre tabelas e acessibilidade do Governo Federal - http://www.governoeletronico.gov.br/biblioteca/ arquivos/tabelas-acessiveis • Meste Maujor, leitura obrigatória - http://www.maujor.com/ tutorial/actables.php • W3Schools, a principal referência sobre HTML na Web - http://www.w3schools.com/html/html_tables.asp 15quinta-feira, 15 de março de 12
  18. 18. FORMULÁRIOS • Formulários são agrupamentos de tags que servem para obter dados do usuário • Todo conjunto de tags deve ser agrupado pela tag <form></form> • A maioria dos controles de entrada é escrita pela tag <input /> • É possível e recomendado agrupar campos de formulário com a tag <fieldset></fieldset> • Agrupamentos com <fieldset> podem conter legendas <legend></legend> • As tags <legend> se existirem devem ser o primeiro nó filho de <fieldset> • Simples textos que referenciam algum campo podem ser envolvidos na tag <label></label> • Ao clicarmos em um texto envolto em <label> seu campo associado ganhará foco (ou será marcado, no caso de checkboxes ou radio buttons) 16quinta-feira, 15 de março de 12
  19. 19. FORMULÁRIOS • Submeter formulários significa enviar uma requisição ao servidor • O método da requisição é escolhido pelo atributo method da tag <form> • A ausência do atributo method significa requisição GET. • Outro método importante da tag <form> é o action, nele, deve ser informada a URL para onde será enviada a requisição • A ausência do action faz o browser requisitar a mesma URL utilizada para obter a página atual 17quinta-feira, 15 de março de 12
  20. 20. FORMULÁRIOS • Exemplo Simples: <form method="POST"> <fieldset> <legend>Campos de um formulário de logon</legend> <label>Login <input type="text"/></label> <label>Senha <input type="password"/></label> <label><input type="checkbox"/> Lembrar login</label> <input type=“button” value=“Ok” /> </fieldset> </form> 18quinta-feira, 15 de março de 12
  21. 21. FORMULÁRIOS • Tipos de entrada <input> • text - Entradas simples de texto em única linha • password - Entradas de texto como senhas • Os browsers emitem pontos ou asteriscos no lugar do que foi digitado • Os browsers não permitem copiar seu conteúdo digitado • Mesmo assim, seu conteúdo é transmitido ao browser em texto claro • checkbox - Campo onde só é possível marcar ou desmarcar • radio - Campo semelhante ao checkbox mas que torna a escolha intercambiável entre componentes com o mesmo nome • Ex: <input type="radio" name="sexo" value="M" /> Masculino <input type="radio" name="sexo" value="F" /> Feminino 19quinta-feira, 15 de março de 12
  22. 22. FORMULÁRIOS • Tipos de entrada <input> como botões • button - Exibe um botão sem ação associada • Ex: <input type="button" name="enviar" value="OK" /> • submit - Exibe um botão que submete o formulário quando é acionado (clicado) • reset - Exibe um botão que “limpa” o formulário quando é acionado • Na verdade não “limpa” mas reinicia os campos do formulário para seus valores originais, sem eventuais alterações do usuário • Este botão não é enviado ao servidor quando o formulário é submetido 20quinta-feira, 15 de março de 12
  23. 23. FORMULÁRIOS • Outros tipos de entrada <input> • image - Funciona como um submit mas precisa carregar uma imagem em seu atributo src. • Ex: <input type="image" name="mapa" src="mapa.png" /> • file - Exibe um controle para escolha de algum arquivo na máquina do usuário para ser enviado ao servidor • Caso haja um input file no formulário a tag form precisa ter method="POST" e é necessário informar um novo atributo enctype da seguinte forma: • <form method="POST" enctype="multipart/form-data"> • hidden - Cria a referência a um campo invisível • Útil para recuperação de informações geradas pelo próprio servidor 21quinta-feira, 15 de março de 12
  24. 24. FORMULÁRIOS 22quinta-feira, 15 de março de 12
  25. 25. FORMULÁRIOS • Outros campos 22quinta-feira, 15 de março de 12
  26. 26. FORMULÁRIOS • Outros campos • <textarea></textarea> • Campo de texto que envolve mais de uma linha • O atributo rows define o número de linhas 22quinta-feira, 15 de março de 12
  27. 27. FORMULÁRIOS • Outros campos • <textarea></textarea> • Campo de texto que envolve mais de uma linha • O atributo rows define o número de linhas • <select></select> • Também chamado de combobox • Menu suspenso de lista de valores pré-definidos • Requer tags <option></option> para representar cada valor • Ex.: <select name="estado" multiple rows="3"> <option value="PE">Pernambuco</option> <option value="PB">Paraíba</option> <option value="RN">Rio Grande do Norte</option> <option value="AL">Alagoas</option> </select> • O atributo rows o transforma em listbox • O atributo multiple permite a seleção de mais de uma opção 22quinta-feira, 15 de março de 12
  28. 28. FORMULÁRIOS • Atributos comuns em todo campo de formulário • name - Nome do campo. • Campos sem name não são enviados ao servidor • value - Valor do campo. • disabled - Desabilita o campo. • É útil em geral para ser manipulado via Javascript e gerar efeitos de habilitar ou desabilitar algum campo baseado em ações do usuário • Campos desabilitados não são enviados ao servidor • readonly - Torna o campo somente leitura. • Semelhante ao disabled, mas envia o campo para o servidor • required - Torna o campo requerido (HTML5) • Faz o browser verificar o preenchimento do campo para permitir submeter o formulário • maxlength - Para o limite de caracteres permitidos no campo 23quinta-feira, 15 de março de 12
  29. 29. FORMS 2.0 • Após muitos anos sem evoluções nessa área, o Opera iniciou um processo de criação de novos campos de formulário • color - Escolha de cores • date - Escolha de data • datetime - Escolha de data e hora • datetime-local - Escolha de data e hora local • email - Escrita de email (há uma validação da entrada) • month - Escolha de mês • number - Exibição de números como spinner • continua ... 24quinta-feira, 15 de março de 12
  30. 30. FORMS 2.0 • Após muitos anos sem evoluções nessa área, o Opera iniciou um processo de criação de novos campos de formulário • range - Exibição de paleta de slider • search - Campo de texto para busca • tel - Campo de texto para telefone • time - Escolha de hora • url - Campo de texto para URL • week - Escolha de semana 25quinta-feira, 15 de março de 12
  31. 31. FORMS 2.0 • Outra tag para formulários FORMS 2.0 • <keygen> - Tag que envia uma chave pública para o servidor poder utilizar para cifrar o conteúdo. Só quem gera uma chave pública detém sua chave privada capaz de decifrar • Essa tag gera um combobox para o usuário escolher a quantidade de bits do tamanho dessa chave 26quinta-feira, 15 de março de 12
  32. 32. quinta-feira, 15 de março de 12

×