Aplicativos móveis com HTML5
|
|
|
- Artur Gabeira Mota
- 6 Há anos
- Visualizações:
Transcrição
1 Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco de notas, Gedit, TextEdit, etc). Neste tutorial iremos utilizar o Sublime Text2. Diferente do bloco de notas, o Sublime reconhece a sintaxe padrão do HTML e adiciona cores ao código facilitando sua visualização. Para baixar o Sublime, acesse: Ao invés de salvar o conteúdo no formato padrão para texto (extensão.txt), o código HTML é salvo com a extensão.html. Depois de salvo, o documento pode ser aberto em qualquer navegador Web. Para visualizar como o documento HTML é renderizado em um navegador móvel, é possível utilizar simuladores. Alguns exemplos neste tutorial serão apresentados com o emulador do Opera. Para baixar o Opera Mobile Classic Emulator, acesse:
2 Programação com HTML O aplicativo que iremos fazer como exemplo neste tutorial é uma adaptação do aplicativo Álcool ou Gasolina?. A ideia é digitar o valor da gasolina e do álcool ao chegar num posto e, dado os valores de consumo do seu automóvel, o programa te ajuda a decidir rapidamente com qual dos dois abastecer. Conteúdo (HTML) Vamos começar com o código HTML. Abra seu navegador e inicie criando a estrutura básica do documento HTML: <!DOCTYPE html> <html lang="pt-br"> <head></head> <body></body> </html> Salve o documento como index.html em um diretório de sua preferência. Se você abrir esse documento em um navegador, você perceberá que não há nenhum conteúdo ainda. Vamos acrescentar alguns elementos no cabeçalho do documento agora. Adicione a codificação UTF-8 ao documento e o título da página, como no código a seguir: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title> Calculadora Flex </title> </head> <body></body> </html>
3 Abrindo sua página no navegador novamente, você perceberá que o título adicionado ao documento agora aparecerá no topo da janela e/ou da aba aberta. Vamos continuar adicionando conteúdo ao nosso documento HTML. Agora adicione ao elemento body, o cabeçalho da página com um título e o formulário. Note que além dos elementos do formulário (labels, inputs e button) foram acrescentados elementos div para auxiliar na estruturação e formatação. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title> Calculadora Flex </title> </head> <body> <header> <h1> Calculadora Flex </h1> </header> <div class="content" > <form class="form"> <label for="gas_cons">consumo com Gasolina:</label> <input type="number" name="gas_cons" id="gas_cons"> <label for="eta_cons">consumo com Etanol:</label> <input type="number" name="eta_cons" id="eta_cons"> <label for="gas_price">gasolina:</label> <input type="number" name="gas_price" id="gas_price" placeholder="preço da Gasolina"> <label>etanol:</label> <input type="number" name="eta_price" id="eta_price" placeholder="preço do Etanol"> </form> <button type="button">gasolina ou Etanol?</button> </body> </html>
4 Abrindo seu documento no navegador web ou no simulador do Opera, você verá todo o conteúdo da nossa aplicação. Para deixar ele com a formatação da nossa aplicação final nós precisaremos adicionar estilo ao documento. Essa parte é feita em um documento CSS. Aplicação sem formatação Apresentação (CSS) No documento HTML deve estar contido apenas o conteúdo da aplicação. Toda a formatação (tipo de fonte, cores, margens, etc) devem estar em uma folha de estilos. O CSS (Cascading Style Sheets Folhas de Estilo em Cascata) pode ser adicionado dentro do documento HTML ou em um documento externo. A melhor abordagem é criar um documento externo e referencia-lo no cabeçalho do documento HTML. Abra uma nova página no seu editor de texto e digite as seguintes regras: body { background: #e7e7e7; font-size: 1em; margin: 10px; font-family: Verdana; As regras acima definem a formatação do elemento body do HTML. Nelas nós declaramos a cor de fundo da página, o tamanho da fonte, a margem de todo o corpo do documento e o tipo de fonte de todo o texto da página. Essa é nossa primeira formatação. Salve essa página como style.css no mesmo diretório do arquivo index.html. Agora volte ao código HTML no index.html e adicione a referência a nossa folha de estilos no cabeçalho, como descrito no código abaixo:
5 <head> <meta charset="utf-8"> <title>calculadora Flex</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> Agora já é possível perceber que a nova formatação foi acrescentada ao nosso documento. Vamos acrescentar novas regras no código CSS e deixar nosso documento como nossa aplicação final. De uma só vez iremos formatar nosso título, as caixas de entrada do formulário, as etiquetas do formulário e o botão. h1 { input { font-size: 1.3em; font-weight: bold; text-transform: uppercase; width: 50px;.form label{ display:block; width: 200px; float: left; button{ margin-top: 50px; Agora nossa aplicação está formatada.
6 Interatividade (Javascript) Para adicionar interatividade à nossa página precisamos utilizar o Javascript. Por exemplo, queremos que nossa aplicação armazene de forma permanente os dados de consumo para que não seja preciso digita-los toda vez que se chegar ao posto. Para fazer isto nós podemos utilizar o recurso de Local Storage introduzido pelo HTML5. Para gravar dados na memória local, utiliza-se o método: localstorage.setitem( <key>, <dado> ); Para resgatar o dado salvo, utiliza-se o método: localstorage.getitem( <key> ); Assim que a nossa aplicação for aberta o valor de consumo armazenado deve ser recuperado na memória e adicionado à caixa de entrada corresponde no formulário. Se a memória estiver vazia estamos adicionando os valores 1.3 para gasolina e 1 para álcool. Esses valores são arbitrários e podem ser mudados. Abra uma nova página em seu editor de texto e adicione o código abaixo: window.onload = LoadLocalData(); function LoadLocalData(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); Quando o documento for aberto será executada a função LoadLocalData() if (gas_con == null) { localstorage.setitem('calcflex_gas_con', '1.3'); document.getelementbyid("gas_cons").value="1.3"; document.getelementbyid("gas_cons").value = localstorage.getitem('calcflex_gas_con'); if (eta_con == null) { localstorage.setitem('calcflex_eta_con', '1'); document.getelementbyid("eta_cons").value="1"; document.getelementbyid("eta_cons").value = localstorage.getitem('calcflex_eta_con'); function CalcFlex(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); var gas_price = document.getelementbyid("gas_price").value; var eta_price = document.getelementbyid("eta_price").value;
7 effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('abasteça com Gasolina'); alert('abasteça com Etanol'); document.queryselector('#gas_cons').addeventlistener('keyup',function(){ localstorage.setitem('calcflex_gas_con', this.value);, false); document.queryselector('#eta_cons').addeventlistener('keyup',function(){ localstorage.setitem('calcflex_eta_con', this.value);, false); Salve este novo documento com o nome lstorage.js no mesmo diretório dos seus arquivos index.html e style.css. Para acessá-lo no seu documento HTML, volte ao index.html e adicione a referência ao novo documento javascript. Carregar o arquivo javascript depois de haver carregado o conteúdo HTML é uma boa prática de programação Web. Logo, acrescentaremos a referência ao JS logo após o elemento body:... </body> <script src="lstorage.js"></script> </html> Adicione também a chamada à função CalcFlex() no botão: <button onclick="calcflex()" type="button">gasolina ou Etanol?</button> Agora a aplicação está completa! Você pode executá-la em seu navegador web, no simulador ou mesmo em seu aparelho celular. Basta carregar o diretório em seu aparelho ou em um servidor online e abrir o arquivo index.html em um navegador nativo. Aplicação vista no navegador Firefox em um smartphone Aplicação vista no navegador Chrome em um desktop
8 Caso você tenha se perdido em algum momento, vamos recapitular como ficaram nossos Index.html arquivos finais. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>calculadora Flex</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <header> <h1>calculadora Flex</h1> </header> <div class="content" > <form class="form"> <label for="gas_cons">consumo com Gasolina:</label> <input type="number" name="gas_cons" id="gas_cons"> <label for="eta_cons">consumo com Etanol:</label> <input type="number" name="eta_cons" id="eta_cons"> <label for="gas_price">gasolina:</label> <input type="number" name="gas_price" id="gas_price" placeholder="preço da Gasolina"> <label>etanol:</label> <input type="number" name="eta_price" id="eta_price" placeholder="preço do Etanol"> </form> <button onclick="calcflex()" type="button">gasolina ou Etanol?</button> </body> <script src="lstorage.js"></script> </html>
9 style.css body { h1 { background: #e7e7e7; font-size: 1em; margin: 10px; font-family: Verdana; font-size: 1.3em; font-weight: bold; text-transform: uppercase; input { width: 50px;.form label{ display:block; width: 200px; float: left; button{ margin-top: 50px; lstorage.js window.onload = LoadLocalData(); function LoadLocalData(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); if (gas_con == null) { localstorage.setitem('calcflex_gas_con', '1.3'); document.getelementbyid("gas_cons").value="1.3"; document.getelementbyid("gas_cons").value = localstorage.getitem('calcflex_gas_con'); if (eta_con == null) { localstorage.setitem('calcflex_eta_con', '1'); document.getelementbyid("eta_cons").value="1";
10 document.getelementbyid("eta_cons").value = localstorage.getitem('calcflex_eta_con'); function CalcFlex(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); var gas_price = document.getelementbyid("gas_price").value; var eta_price = document.getelementbyid("eta_price").value; effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('abasteça com Gasolina'); alert('abasteça com Etanol'); document.queryselector('#gas_cons').addeventlistener('keyup',function( ){ localstorage.setitem('calcflex_gas_con', this.value);, false); document.queryselector('#eta_cons').addeventlistener('keyup',function( ){ localstorage.setitem('calcflex_eta_con', this.value);, false);
Frameworks para interfaces móveis
Frameworks para interfaces móveis Vamos agora incrementar o projeto do nosso aplicativo em HTML5 com um framework para interfaces móveis. Nesse tutorial usaremos o Ratchet que é um framework gratuito para
INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
INTRODUÇÃO AO CSS O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading
<HTML> Vinícius Roggério da Rocha
Vinícius Roggério da Rocha www.monolitonimbus.com.br O que é HTML? HTML = HyperText Markup Language ou Linguagem de Marcação de Hipertexto Linguagem: maneira de se comunicar (entre máquinas, pessoas
HTML: INTRODUÇÃO TAGS BÁSICAS
HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
JAVASCRIPT. Desenvolvimento Web I
JAVASCRIPT Desenvolvimento Web I JavaScript HTML Conteúdo - ( Markup language) CSS Apresentação (Style Sheet language) JavaScript (Programming language) Uso de JavaScript : Validação de formulários, galerias
A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.
Aula 02 - Introdução ao css ( folhas de estilo ) CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo
Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I. Profª Eulaliane Gonçalves
TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I Profª Eulaliane Gonçalves COMPETÊNCIAS 1. Interpretar e desenvolver páginas para Web. HABILIDADES 1.1. Coletar dados e informações de usuários para elaboração
S U J E I T O P R O G R A M A D O R
S U J E I T O P R O G R A M A D O R HTML5 Aprenda criar sites com HTML5 Introdução ao HTML5 Estamos na era do layout responsivo, onde sites precisam adaptar os seus layouts para funcionarem em quaisquer
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
OFICINA DA PESQUISA PROGRAMAÇÃO APLICADA À CIÊNCIA DA COMPUTAÇÃO
OFICINA DA PESQUISA PROGRAMAÇÃO APLICADA À CIÊNCIA DA COMPUTAÇÃO Prof. Msc. Carlos José Giudice dos Santos carlos@oficinadapesquisa.com.br www.oficinadapesquisa.com.br Linguagens de Programação Material
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Desenvolvimento de Aplicações para. Prof.: Bruno Rafael de Oliveira Rodrigues
Desenvolvimento de Aplicações para Internet Prof.: Bruno Rafael de Oliveira Rodrigues Videos nas Páginas Existem várias maneiras de inserir um vídeo em sua página. O vídeo pode aparecer sob a forma de
Aprenda Layout com CSS Lara Popov Zambiasi Bazzi Oberderfer
Aprenda Layout com CSS http://pt-br.learnlayout.com/ Lara Popov Zambiasi Bazzi Oberderfer http://professores.ifsc.edu.br/lara/ lara.popov@ifsc.edu.br A propriedade "display" display é a propriedade mais
HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO DPW
HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO 1 DPW 2017.2 2 WWW: uma breve história Tim Berners-Lee pesquisador inglês na CERN (Organização Europeia
Introdução ao HTML e às folhas de estilo (CSS)
MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues
PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:
CSS. Cascading Style Sheets Style Sheets
CSS Cascading Style Sheets Style Sheets Agenda Histórico Definição Limitações do CSS-1 CSS2 - Características Por que usar CSS? Vantagens Sintaxe Básica Como inserir uma folha de Estilo Indentificando
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS CSS Como inserir códigos CSS em páginas HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Gráficos Comerciais na WEB com Chart.js
Gráficos Comerciais na WEB com Chart.js Compilação feita com base nas referências por: José Augusto Cintra Professor da Faculdade Sumaré SP Analista de TI da Empresa PRODAM SP josecintra@josecintra.com
Dreamweaver CS5 -5- CAPÍTULO 1... Iniciando e conhecendo o dreamweaver...8 Interfaces...23 Criando e confi gurando sites...24 Exercícios...
DREAMWEAVER CS5 INTRODUÇÃO O Dreamweaver CS5 é um editor avançado de páginas para Internet, pois possui ferramentas para usuários que não são familiarizados com as linguagens HTML, Java e PHP. Com o Dreamweaver
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD
1. O que é CSS? a) É a linguagem que se usa para se definir quais serão os elementos de uma página HTML. b) É uma linguagem que se usa para se modificar o estilo de apresentação dos elementos de uma página
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução
Interfaces Pessoa Máquina Laboratório 1 HTML, CSS, JS- Introdução 01 HTML + CSS + JavaScript Tecnologia para desenvolvimento web: Páginas web Aplicações web Aplicações mobile HTML Linguagem standard para
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
Programação WEB I DOM (Document Object Manager)
Programação WEB I DOM (Document Object Manager) DOM Significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os objetos e seus relacionamentos em uma aplicação. Tem a finalidade
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
PROJETO WEB: Java. Prof Fernando Gomes
PROJETO WEB: Este projeto nos mostra uma página JSP que contém um formulário para digitarmos um número inteiro. Na mesma página, o sistema retorna se esse número é primo ou não - caso não seja primo, retorna
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
Construção de sites Aula 1
Construção de sites Aula 1 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 31 de Julho de 2010 Indice Estrutura da Internet 1 Estrutura
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Módulo 3 HTML com CSS Prof. Dr. Daniel A. Furtado Introdução e Inserção de Código CSS 2 3 CSS Cascading Style Sheets
HTML 5 TAGS BÁSICAS E ESTRUTURAIS. Prof. Rosemary Melo
HTML 5 TAGS BÁSICAS E ESTRUTURAIS Prof. Rosemary Melo TAGS BÁSICAS DA LINGUAGEM TAG Indica que está criando uma página html TAG Área contém informação sobre a página TAG especifica
Programação Web - HTML
Instituto Federal de Minas Gerais Campus Ponte Nova Programação Web - HTML Professor: Saulo Henrique Cabral Silva HTML Início em 1980, Tim Bernes-Lee Implementado Pascal. 1989, o CERN investiu esforços
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
INTRODUÇÃO ÀS APLICAÇÕES PARA WEB
INTRODUÇÃO ÀS APLICAÇÕES PARA WEB Material cedido pelo prof. Francisco Dantas Nobre Neto Professor: Rhavy Maia Guedes E-mail: rhavy.maia@gmail.com, rhavymg.wordpress.com Sites vs Aplicativos Web Aplicativos
Novos inputs em HTML5
Novos inputs em HTML5 Através do elemento input nós podemos criar botões, campos de texto, checkboxes, radios e muito mais. O HTML5 nos trouxe uma variedade de mais 13 novos tipos de elementos input que
Samus - Desenvolvimento Web - 14/11/2009 WebStandards Padrões de desenvolvimento Web
Samus - Desenvolvimento Web - 14/11/2009 WebStandards Padrões de desenvolvimento Web A proposta do Mini-Curso à apresentar de forma rã pida e objetiva as principais prã ticas e definiã ões sobre o desenvolvimento
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
IFSC/Florianópolis - Prof. Herval Daminelli
Linguagem de marcação de textos; HTML significa Hypertext Markup Language (linguagem de marcação de hipertexto); Composta por elementos chamados tags ou rótulos ou marcadores; Estes marcadores definem
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Introdução ao Javascript. Parte 3 Prof. Victor Hugo Lopes
Introdução ao Javascript Parte 3 Prof. Victor Hugo Lopes agenda Trabalhando com Eventos DOM na prática: trabalhando com propriedades http://goo.gl/tkjhmb Eventos Evento é um acontecimento que ocorre a
Revisando os conteúdos. Introdução ao CSS
Aula 04 Revisando os conteúdos Tag : fornece informações sobre o documento, palavras-chaves, autor da página, última atualização, etc. Essas informações não são mostradas na página, apenas processadas
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
<link rel="stylesheet" type="text/css" href="imagens.css" />
Este código é responsável pela visualização html. exibição de Imagens
Prof Evandro Manara Miletto. parte 1
Prof Evandro Manara Miletto parte 1 Sumário Introdução Variáveis e tipos de dados Operadores O que é JavaScript? JavaScript é uma linguagem de programação criada pela Netscape para adicionar interatividade
TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML
INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup
Dreamweaver CC_15x21.indd 1 06/04/ :04:22
Dreamweaver CC_15x21.indd 1 06/04/2015 11:04:22 SUMÁRIO INTRODUÇÃO... 3 CAPÍTULO 1 Iniciando e conhecendo o Dreamweaver... 8 Interfaces... 21 Criando e configurando sites... 22 CAPÍTULO 2 Criando arquivos...
Desenvolvimento para Internet. Professor Ariel da Silva Dias HTML
Desenvolvimento para Internet Professor Ariel da Silva Dias HTML Plano de Aulas Data 06/out 13/out 20/out 27/out 03/nov 10/nov 17/nov 24/nov 01/dez 08/dez 15/dez Conteúdo INÍCIO - HTML/CSS FERIADO JAVASCRIPT
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
Web Design Responsivo
Web Design Responsivo O Design Responsivo ajusta-se automaticamente baseado no tamanho da tela do dispositivo de mídia que está sendo utilizado. Nós estudaremos como utilizar a propriedade @media_property
Tutorial 1 Configuração Apache Tomcat no NetBeans 8.0 (passo a passo)
Nome do laboratório: Laboratório de Programação Ferramenta 1 -NetBeans 8.0 WEB Elaborado por: Osmar de Oliveira Braz Junior Descrição Este tutorial tem como objetivo mostrar a construção de aplicações
Cabeçalho do documento
Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe
O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2
HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
MANUAL DE UTILIZAÇÃO DO SISTEMA DE SERVICE DESK
MANUAL DE UTILIZAÇÃO DO SISTEMA DE SERVICE DESK Novembro de 2015 Objetivo: Esse manual, baseado no manual GLPI, tem como objetivo principal instruir os usuários quanto à utilização do Service Desk GLPI,
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
1 O QUE É O ZOTERO? INSTALAR O ZOTERO INSTALAR O CONECTOR ZOTERO NOS NAVEGADORES GOOGLE CHROME E MOZILLA FIREFOX...
SUMÁRIO 1 O QUE É O ZOTERO?...6 2 INSTALAR O ZOTERO...7 3 INSTALAR O CONECTOR ZOTERO NOS NAVEGADORES GOOGLE CHROME E MOZILLA FIREFOX... 9 3.1 CONECTOR ZOTERO PARA GOOGLE CHROME... 10 3.2 CONECTOR ZOTERO
Posicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
Programação Web Aula 2 XHTML/CSS/XML
Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
Programação WEB I Funções
Programação WEB I Funções Funções As funções podem ser definidas como um conjunto de instruções, agrupadas para executar uma determinada tarefa. Dentro de uma função pode existir uma chamada a outra função.
Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida. Aula II jquery UI
Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida Aula II jquery UI Introdução O que é jquery UI? Biblioteca que fornece maior nível de abstração para interação
GUIA Assinaturas de
Pensando no novo posicionamento da empresa em relação ao mercado, elaboramos esse pequeno guia para que você possa utilizar a sua nova assinatura de email. Sua assinatura será enviada juntamente com este
Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).
4149 - Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Introdução 1.1. Novidades do Dreamweaver CS5...23 1.2. Área de Trabalho...23 1.2.1. Tela de Boas-vindas...24 1.2.2.
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
Mini-Curso Expotec 2010 Professores: Paulo Vítor, Jackson, Raimundo, Lucas e Cleverton
Mini-Curso Expotec 2010 Professores: Paulo Vítor, Jackson, Raimundo, Lucas e Cleverton Sumário da Aula Introdução Introdução à XHTML Introdução à Folhas de Estilo (CSS) A Ferramenta Dreamweaver CS4 2 O
REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques
16-01-2019 Redes de Comunicação - Prof. Rafael Henriques 1 REDES DE COMUNICAÇÃO 11º - ANO Professor: Rafael Henriques E-mail: prof@rafaelhenriques.com Apresentação módulos 4 - Desenvolvimento de Páginas
Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O
Plano de Aula - Dreamweaver CS5 - cód Horas/Aula
Plano de Aula - Dreamweaver CS5 - cód.4149 24 Horas/Aula Aula 1 Capítulo 1 - Introdução Aula 2 Continuação do Capítulo 1 - Introdução Aula 3 Capítulo 2 - Site do Dreamweaver 1.1. Novidades do Dreamweaver
V Semana de Tecnologia da Informação
V Semana de Tecnologia da Informação Rafael L. de Macedo Centro Universitário Eurípides de Marília - UNIVEM Marília, 2012 Índice 1 Introdução 2 3 Índice Introdução 1 Introdução 2 3 (Rich Internet Application).
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET LABORATÓRIO 5 PROF. EMILIO PARMEGIANI
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET LABORATÓRIO 5 PROF. EMILIO PARMEGIANI MASTER PAGES Master Pages (ou Páginas Mestres) é um arquivo ASP.NET com a extensão.master (por exemplo, MinhaPagina.master)
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de