o uso de html5 e css3 na viabiliza§£o do design responsivo

  • View
    224

  • Download
    7

Embed Size (px)

Text of o uso de html5 e css3 na viabiliza§£o do design responsivo

  • UNIFEOB CENTRO UNIVERSITRIO DA FUNDAO DE ENSINO OCTVIO BASTOS

    Curso de Sistemas de Informao

    O USO DE HTML5 E CSS3 NA VIABILIZAO DO

    DESIGN RESPONSIVO

    SAMUEL DE PAIVA MUCIN

    SO JOO DA BOA VISTA, SP, 2012

  • SAMUEL DE PAIVA MUCIN

    O USO DO HTML5 E DO CSS3 NA VIABILIZAO DO DESIGN RESPONSIVO

    Trabalho de Concluso de Curso realizado na rea

    de Desenvolvimento Web como requisito legal para

    a obteno do Grau de Bacharel em Sistemas de

    Informao no Curso de Sistemas de Informao da

    UNIFEOB Centro Universitrio da Fundao de

    Ensino Octvio Bastos de So Joo da Boa Vista -

    SP, sob orientao do Prof. Joo Ricardo Gomes

    dos Reis.

    CENTRO UNIVERSITRIO DA FUNDAO DE ENSINO OCTVIO BASTOS

    SO JOO DA BOA VISTA, SP, 2012

  • MUCIN, Samuel de Paiva. O uso de HTML5 e CSS3 na viabilizao do design

    responsivo. So Joo da Boa Vista, SP. (Trabalho de Concluso de Curso de

    Sistemas de Informao da UNIFEOB Centro Universitrio da Fundao de

    Ensino Octvio Bastos).

    Orientador: Prof. Joo Ricardo Gomes dos Reis

  • DECLARAO DE APROVAO

    Declaro para fins de avaliao de desempenho escolar, que o aluno Samuel

    de Paiva Mucin, apresentou o Trabalho de Concluso de Curso intitulado O uso do HTML5 e

    do CSS3 na viabilizao do Design Responsivo para atender s exigncias da disciplina de

    Trabalhos de Concluso de Curso perante banca examinadora na UniFEOB Centro

    Universitrio da Fundao de Ensino Octvio Bastos, composta pelos seguintes membros:

    Prof. Joo Ricardo Gomes dos Reis - Orientador

    Prof.

    Prof.

    Diante disto declaro que o referido aluno foi aprovado com a nota (), tendo apresentado este relatrio e foi aprovado.

    So Joo da Boa Vista, 12 de Novembro de 2012.

    Professor Orientador: Joo Ricardo Gomes dos Reis

  • DEDICATRIA

    Dedico este trabalho minha famlia, meu pai,

    minha me e meus irmos, aos meus amigos e

    namorada, pessoas s quais devo grande parte do

    que sou e s quais agradeo pelos esforos, no

    medidos, em me apoiar.

  • AGRADECIMENTOS

    Agradeo primeiramente a Deus pelo que sou e por me dar condies de

    desenvolver este trabalho.

    Agradeo aos meus amigos Marcos, Adalberto, Everton, Guilherme e Lucas, sem os

    quais esses anos teriam sido muito mais complicados e sem graa.

    Obrigado tambm aos professores que durante esses anos dedicaram horas de seu

    tempo para nos atender e passar um pouco de seus conhecimentos.

    Finalizo agradecendo o professor e orientador Joo Ricardo Gomes dos Reis por ter

    aceitado me orientar neste trabalho.

  • Faa ou no faa. Tentativas no h.

    Mestre Yoda - Star Wars V

  • RESUMO

    A nova era tecnolgica de dispositivos mveis tornou o desenvolvimento de

    aplicaes WEB mais desafiadora e complexa no sentido de atender os diversos formatos

    de telas encontrados nos vrios modelos de dispositivos lanados no mercado a todo o

    momento. Por no haver uma correo nativa desenvolvida pelos fornecedores para

    resolver o problema, a tcnica de sites responsivos se tornou extremamente necessria

    para que os usurios tenham a melhor experincia em navegao independente do

    dispositivo utilizado.

    A utilizao do HTML5 e do CSS3 para a criao de designs responsivos que se

    adaptam a cada formato de maneira a redimensionar o contedo sem perd-lo e sem

    prejudicar o entendimento do usurio, vem crescendo exponencialmente.

    Mesmo sendo o HTML5 uma linguagem ainda em fase de desenvolvimento devido

    falta de suporte total dos navegadores a seus elementos e de usurios que ainda utilizam

    programas antigos de acesso WEB, assim como o CSS3, os desenvolvedores j os

    utilizam para desenvolverem aplicaes responsivas e atender demanda crescente dos

    usurios que utilizam dispositivos mveis para acessarem a internet.

    O uso do JavaScript para inserir interaes dinmicas nas pginas responsivas

    passa por mudanas em relao ao uso para pginas fixas.

    Este trabalho ir mostrar como possvel a viabilizao de aplicaes WEB

    responsivas desenvolvidas com o uso das novas linguagens HTML5 e CSS3.

    Palavras-Chave: html5, css3, javascript, design, responsivo, web.

  • SUMRIO Captulo 1. INTRODUO................................................................................................... 13

    1.1 Objetivo geral ............................................................................................ 15

    1.2 Objetivos especficos ................................................................................ 15

    Captulo 2. REVISO DA LITERATURA .............................................................................. 16

    2.1 HTML ........................................................................................................ 16

    2.2 HTML 5 ..................................................................................................... 17

    2.2.1 Sintaxe ........................................................................................................... 18

    2.2.2 Novos elementos ............................................................................................ 19

    2.3 CSS .......................................................................................................... 41

    2.3.1 Regra CSS ..................................................................................................... 41

    2.3.2 Categorias de valores CSS ............................................................................. 43

    2.3.3 Tipos de valores CSS ..................................................................................... 49

    2.3.4 Vinculando folhas de estilo a documentos ...................................................... 52

    2.3.5 Mdulos CSS3 ................................................................................................ 55

    2.3.6 Esquemas de posicionamento CSS ................................................................ 56

    2.3.7 Posicionamento com z-index .......................................................................... 62

    2.3.8 Seletores CSS3 .............................................................................................. 64

    2.3.9 Fontes ............................................................................................................ 69

    2.3.10 Layout multicolunas ........................................................................................ 73

    2.3.11 Media Queries ................................................................................................ 80

    2.3.12 Template Layout ............................................................................................. 89

    2.3.13 Box Layout flexvel.......................................................................................... 94

    2.4 JavaScript ............................................................................................... 100

    2.4.1 Como usar .................................................................................................... 100

    2.4.2 Variveis ....................................................................................................... 101

    2.4.3 Operadores Aritmticos ................................................................................ 103

    2.4.4 Operadores de Atribuio ............................................................................. 103

    2.4.5 Operadores de Comparao ........................................................................ 104

    2.4.6 Operadores Lgicos ..................................................................................... 105

    2.4.7 Declaraes Condicionais ............................................................................ 105

    2.4.8 Laos de Repetio ...................................................................................... 106

    2.4.9 Eventos HTML DOM em JavaScript ............................................................. 108

    2.4.10 Tratamento de Excesses ............................................................................ 110

    Captulo 3. METODOLOGIA .............................................................................................. 112

    Captulo 4. APLICAES DE CONCEITOS ...................................................................... 113

    4.1 Pgina fixa .............................................................................................. 113

    4.2 Pgina Responsiva ................................................................................. 115

  • 4.3 Pgina Responsiva com JavaScript ........................................................ 121

    Captulo 5. CONCLUSES ................................................................................................ 127

    REFERNCIAS BIBLIOGRFICAS ................................................................................... 128

  • LISTA DE ILUSTRAES E FIGURAS

    Figura 1 - Modelo de Contedo ........................................................................................... 18

    Figura 2 - Coordenadas do contexto 2D de canvas ............................................................. 24

    Figura 3 - Sintaxe da regra CSS .......................................................................................... 42

    Figura 4 - Sobreposio de margens ................................................................................... 57

    Figura 5 - Posicionamento relativo ..........................................