• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Minicurso introdução ao html5 e css3
 

Minicurso introdução ao html5 e css3

on

  • 570 views

Minicurso apresentado na Semana Nacional de Ciência de Tecnologia do IF Sertão Pernambucano. Dia 24/10/2013

Minicurso apresentado na Semana Nacional de Ciência de Tecnologia do IF Sertão Pernambucano. Dia 24/10/2013

Statistics

Views

Total Views
570
Views on SlideShare
229
Embed Views
341

Actions

Likes
1
Downloads
18
Comments
0

2 Embeds 341

http://blog.brenoleonardo.com.br 338
http://sotero.brenoleonardo.com.br 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Minicurso introdução ao html5 e css3 Minicurso introdução ao html5 e css3 Presentation Transcript

    • Introdução ao HTML5 e CSS3 Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br
    • Currículo • Meu nome: Breno Leonardo G. de M. Araújo • Formação: • Bacharel em Sistemas de Informação; • Especialista em Engenharia de Software; • Mestrando em Informática Aplicada. • Possui experiência em Web a mais de 5 anos; 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • What is HTML5? • HTML5 will be the new standard for HTML. • The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. • HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs. 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • The HTML5 <!DOCTYPE> • In HTML5 there is only one <!doctype> declaration, and it is very simple: • <!DOCTYPE html> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Minimum HTML5 Document • Below is a simple HTML5 document, with the minimum of required tags: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • O que tem de novo? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • HTML5 - New Features • Some of the most interesting new features in HTML5: • The <canvas> element for 2D drawing • The <video> and <audio> elements for media playback • Support for local storage • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> • New form controls, like calendar, date, time, email, url, search 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Browser Support for HTML5 • HTML5 is not yet an official standard, and no browsers have full HTML5 support. • But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Vamos a prática! • Novos campos de Formulário: • • • • • • • • tel search email url Datas e Horas number range color 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Formulários vitaminados • autofocus • placeholder • required • maxlength no textarea • pattern • Utiliza expressões regulares. Exemplo: • <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" /> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Conteúdo editável • Exemplo: <div contenteditable=“true”> Edite-me... </div> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Áudio • Para inserir áudio na página web, basta usar o elemento áudio: <audio src="mus.oga" controls="true" autoplay="true" /> • Origens alternativas de audio: <audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Vídeo • Muito semelhante a utilização do áudio: <video src="u.ogv" width="400" height="300" /> 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • SVG 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • CSS 3
    • CSS é como xadrex • Você pode aprender os princípios em um dia, e vai passar a vida inteira se especializando. (Chris Coyier | css-tricks.com) 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • CSS2 deixa a desejar Hoje, ainda temos que nos virar pra conseguir certos efeitos gráficos como sombras em objetos e textos, cantos arredondados, fazer múltiplos planos de fundo, inserir opacidade nos elementos, trabalhar com diferentes famílias tipográficas, trabalhar textos em coluna... 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • CSS3 Com uma série de novas propriedades, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens. 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Tá quase pronta! O CSS3 ainda não é uma especificação completa da W3C, ainda está em fase de rascunho, e nem todos os navegadores suportam por completo. 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Testando na prática • Para que alguns dos novos recursos possam funcionar, ainda é necessário adicionar um prefixo: • -moz- (Para renderização no Mozilla) • -webkit- (Para renderização no Safari) 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • border-radius • Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como • -moz-border-radius: 10px • ou valores diferentes para cada canto • -moz-border-radius-topright: 5px 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • border-colors • Podemos adicionar um efeito gradiente nas bordas de um elemento, aplicando cores em diferentes camadas: • -moz-border-top-colors: #555 #666 #777... 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • text-shadow • Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o e nevoamento e cor: • text-shadow: 5px 5px 2px #999 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • box-shadow • Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: • -moz-box-shadow: -10px -10px 0px #333 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • opacity • Podemos adicionar opacidade aos elementos: • opacity: 0.2 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • columns • Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: • • • • -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em; 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Multiple backgrounds • Podemos definir diferentes planos defundo para um mesmo elemento: • background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundoquatro.jpg) left repeat-y 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • @font-face • Importamos um arquivo de fonte: • @font-face { font-family: Agni; src: url(‘fonts/agni-font.otf’) } • Em seguida aplicamos essa fonte a um elemento de texto: • h3 { font-family: Agni, sans-serif; } 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Dicas! • A linguagem ainda está em fase de desenvolvimento, então cuidado quando utilizá-la, pois vários navegadores ainda não possuem suporte a todas as funcionalidades. • A partir de agora, estude para poder acompanhar as constantes mudanças que o HTML5 e CSS3 podem proporcionar! 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Dúvidas??? 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo
    • Obrigado! Material e códigos http://blog.brenoleonardo.com.br Breno Leonardo G. de M. Araújo brenod123@gmail.com @breno_leonardo 24 de outubro de 2013 Semana Nacional de Ciência e Tecnologia IF Sertão Pernambucano – Campus Floresta Prof. Breno Leonardo G. de M. Araújo