ROTEIRO VISÃO GERAL FORMULÁRIOS MULTIMÍDIA A NOVA GERAÇÃO DE APLICAÇÕES WEB CSS 3 DEMONSTRAÇÕES
|
|
|
- Francisco Aragão Veiga
- 10 Há anos
- Visualizações:
Transcrição
1
2 SOBRE O PALESTRANTE Desenvolvedor Web e líder técnico do projeto ICD (Intercâmbio de Conteúdos Digitais) pela Dynavideo Mestrando em Informática pela UFPB Tecnólogo em Sistemas para Internet pelo IFPB
3 ROTEIRO VISÃO GERAL FORMULÁRIOS MULTIMÍDIA A NOVA GERAÇÃO DE APLICAÇÕES WEB CSS 3 DEMONSTRAÇÕES
4 VISÃO GERAL
5 1. Histórico de versões
6 1. Histórico de versões
7 2. HTML 5 e suas mudanças Lançado o HTML a W3c alertou sobre as boas práticas; Como separação da estrutura do código e formatação; Porém, HTML4 não trazia diferença real para semântica; HTML4 também não facilitava manipulação de elementos via Javascript ou CSS Ex.: Drag and drop
8 2. HTML 5 e suas mudanças Criação de APIs que formarão a base da arquitetura Web Fácil manipulação de objetos de forma transparente ao usuário Ferramentas para CSS e Javascript Novas tags e recursos Seções, componentes de formulário, gráficos, multimídia, etc Maior semântica, código interoperável Retrocompatibilidade
9 3. ESTRUTURA BÁSICA <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" ref="estilo.css"> <title></title> </head> <body> </body> </html> Doctype: indica a especificação em uso ao browser ou dispositivo HTML: lang é necessário para que os user-agents saibam a linguagem principal do documento Link: rel pode assumir outros valores como ALTERNATE, mapeando por exemplo um feed como (application/atom+xml)
10 4. Novos elementos e atributos elementos; HTML deve indicar o tipo da informação exibida; Quando lemos um livro é fácil identificar os tipos; Robôs de busca não conseguem diferenciá-los. Em versões anteriores, era possível diferenciar um parágrafo de um título, mas não o rodapé do cabeçalho; Cabe ao desenvolvedor marcar a informação; Essa diferenciação era percebida apenas visualmente; Não havia maneira de detectar automaticamente estes elementos
11 5. Novos elementos e atributos Como era... <div id="header"> <div class="article"> <div id="nav"> <div id="content"> <div id="right"> <div id="footer">
12 5. Novos elementos e atributos Como será... <header> <article> HTML 5 trouxe elementos que ajudam a definir setores principais; <nav> <section> <footer> <aside> Pode-se diferenciar áreas como sidebar, rodapé, cabeçalho; Tais mudanças simplificam o trabalho dos sistemas de busca;
13 5. Novos elementos e atributos
14 6. Elementos descontinuados
15 7. SUPORTE ATUAL PELOS BROWSERS Desenvolvimento Modular Motores de renderização: Motor Webkit Gecko Browser Safari, Google Chrome Firefox, Mozilla, Camino Trident Internet Explorer 4 ao 9 Presto Opera 7 ao 10 Webkit alcança aparelhos como Blackberry, iphone, ipod Touch, ipad e dispositivos que rodam Android
16 8. COMPATIBILIDADE COM HTML5 Atualmente Webkit é o motor mais compatível Firefox e opera já estão compatíveis com boa parte
17 FORMULÁRIOS
18 1. Novos valores para o atributo type tel search Não há máscara ou validação; Integração com agenda de contatos, útil em celulares. Muda ligeiramente de acordo com o navegador. url datetime number range color Formatação e validação; Integração com agenda de contatos Endereço web com formação e validação; Validação, formatação e calendários; Usa-se também: date, month, week, time e datetime-local Validação e formatação; Componente personalizado. Componente personalizado para números. Seletor de cores
19 2. Datas e Horas <input type= datetime step= 10 /> Outros tipos disponíveis: datetime date month week time datetime-local
20 3. Números <input value= 7 type= number step= 1 min= 1 max= 20 /> <input value= 7 type= range step= 1 min= 1 max= 20 />
21 4. TIPOS DE DADOS E VALIDADORES Foco automático antes do carregamento da página: <input name= login type= autofocus /> Suporte a placeholder: <input placeholder= Seu login aqui /> Required: <input name= login required /> Max-length para textarea: <textarea maxlength= 50 ></textarea>
22 4. TIPOS DE DADOS E VALIDADORES Validação com REGEX: <input name= CEP pattern= \d{5}-?\d{3} /> Submeter sem validação: <input type= submit formnovalidate /> Validador personalizado: function vcpf(i){ i.setcustomvalidity(validacpf(i.value)?'':'cpf inválido!') } <input name= cpf oninput= vcpf(this) />
23 5. COMPONENTES WEB APPLICATION Barra de progresso <progressbar max= 100 value= 75 /> Detalhes e sumário <details> <summary>copiando <progress max="39248" value="14718"> 37,5%</summary> <dl> <dt>tamanho total:</dt> <dd>39.248kb</dd> <dt>transferido:</dt> <dd>14.718</dd> <dt>taxa de transferência:</dt> <dd>127kb/s</dd> <dt>nome do arquivo:</dt> <dd>html5.mp4</dd> </dl> </details>
24 5. COMPONENTES WEB APPLICATION Conteúdo editável <div contenteditable= true >Edite-me</div> Revisão ortográfica e gramatical spellcheck= true Utiliza o revisor ortográfico disponível na plataforma Controle pode ser feito individualmente para cada elemento
25 5. COMPONENTES WEB APPLICATION Drag and Drop Eventos do objeto arrastado : Dragstart, drag, dragend Eventos do objeto que recebe o outro: dragenter, dragleave, dragover, drop <div id="box" ondrop="return dragdrop(event)" ondragover="return dragover(event)"> <div id="drag" draggable="true" ondragstart="return dragstart(event)"> drag me</div> <div id="drag2" draggable="true" ondragstart="return dragstart(event)">drag me</div> </div>
26 MULTIMÍDIA
27 1. ÁUDIO <audio src= musica.oga controls= true autoplay= true /> Se controls for desabilitado será preciso controlar as operações do player via javascript
28 1. ÁUDIO Nem todo browser suporta o codec livre OggVorbis É preciso oferecer um formato alternativo de áudio Ou até mesmo uma opção para baixar o conteúdo <audio controls= true autoplay= true /> <source src= musica.oga /> <source src= musica.mp3 /> <source src= musica.wma /> <p>faça o download <a href= musica.mp3 >da música</a>.</p> </audio>
29 2. VÍDEO <video src= video.ogv width= 400 height= 300 />
30 2. VÍDEO Também suporta controle com vários sources <video controls= true autoplay= true /> <source src= video.ogg /> <source src= video.mp4 /> <source src= video.wmv /> <p>faça o download <a href= video.mp4 >do vídeo</a>.</p> </video>
31 2. VÍDEO - CODECS É importante incluir informações a respeito do container e codecs utilizados Isso antecipa a detecção de alguma incompatibilidade A extensão do arquivo não é relevante para isso Para indicar essas informações usa-se o atributo type Para OGG usando os codecs Theora e Vorbis: <source src= video.ogv type= video/ogg; codecs= theora,vorbis /> Para MPEG-4: <source src= video.mp4 type= video/mp4; codecs= mp4v , mp4a.40.2 />
32 2. VÍDEO ELEMENTO DEVICE É possível inserir no HTML um elemento de acesso à Webcam do usuário Solicita confirmação do usuário para acesso Em caso de mais de um dispositivo, será possível escolher um para fazer stream <script> function update(stream) { document.getelementsbytagname( video )[0].src = stream.url } </script> <device type= media onchange= update(this.data) /> <video widht= 400 height= 300 />
33 A NOVA GERAÇÃO DE APLICAÇÕES WEB
34 1. MATHML O HTML5 incorpora a linguagem de marcação MathML <math xmlns=" <mrow> <mi>x</mi> <mo>=</mo><mfrac> <mrow><mo form="prefix"> </mo><mi>b</mi> <mo>&plusminus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> </mo> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>a</mi> <mo>&invisibletimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>&invisibletimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>
35 2. SVG Linguagem para marcação de gráficos vetoriais Também pode ser incorporada com facilidade <svg width= 400 height= 400 > <rect x= 10 y= 10 width= 150 height= 50 stroke= # stroke-width= 5 fill= #FF0000 /> <circle cx="70" cy="240" r="60" stroke="#00ff00" strokewidth="5" fill="#ffffff" /> </svg>
36 2. SVG A maioria dos editores gráficos vetoriais exporta e importa automaticamente SVG Pode-se construir javascript para manipular SVG, usando métodos do DOM Isso possibilita gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em javascript e sem tecnologias proprietáris e plugins
37 3. CANVAS API Permite desenhar na tela do navegador via Javascript O único elemento HTML existente para isso é o canvas: <canvas id= x width= 400 height= 400 /> Para desenhar: <script> function desenhar() { context=document.getelementbyid('x').getcontext('2d'); context.fillrect(10, 10, 50, 150); //x,y,w,h context.fillstyle='#ff0 ; context.fill(); } </script>
38 3. CANVAS API
39 3. CANVAS X SVG SVG: O Conteúdo é acessível a leitores de tela O gráfico é escalável, não perde resolução ou serrilha ao redimensionar O conteúdo é acessível via DOM Canvas: A performance é muito superior ao SVG É fácil desenhar via Javascript. Em SVG é preciso escrever XML.
40 4. SERVER-SENT EVENTS Maneira de inverter o fluxo das aplicações Ajax Servidor dispara o envio de dados ao cliente Cria-se em javascript um objeto EventSource: es = new EventSource( messages.php ); es.onmessage=function(e){ alert( Chegaram dados: "+e.data) } Isso vai abrir uma conexão HTTP com messages.php O cliente se mantém escutando e cada vez que o servidor enviar dados, o evento message será disparado Pode ser utilizado para implementar chat ou monitor de status de alguma operação demorada que esteja ocorrendo no servidor
41 4. SERVER-SENT EVENTS Protocolo de comunicação A página messages.php deve enviar mensagens no seguinte formato: data: mensagem 1 id: 1 data: mensagem com duas data: linhas id: 2 data: mensagem 3 id: 3 Pelo ID é possível recuperar a última mensagem enviada através do valor no header HTTP Last-Event-ID
42 5. MENUS E TOOLBARS <menu type= toolbar > <menu label="file > <command onclick="fnew()" label="new..." /> <command onclick="fopen()" label="open..." /> [ ] </menu> </menu>
43 6. MICRODATA Permite tornar a estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento. <dl itemscope temtype= notas"> <dt>nome</dt><dd itemprop="nome">diego</dd> <dt>total</dt><dd itemprop="total">9.7</dd> </dl> <script> resultados=document.getitems( notas ); for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+": R$ "+ resultados[i].properties.total[0].content) } </script>
44 6. MICRODATA Já existem vários padrões de metadados prédefinidos: <section itemscope itemtype=" <h1 itemprop="name">diego Ernesto Rosa Pessoa</h1> <h2 itemprop= nickname">diego Pessoa</h2> <a itemprop= url href= >diegopessoa.com</a> </section> Usar formatos padronizados ajuda os sistemas de busca a tratar e entender esses dados Mais informações em: wer.py?hl=en&answer=146861
45 7. HISTÓRICO DE SESSÃO Um grande desafio de aplicações web é apresentar um modelo de navegação consistente para o usuário. Famoso problema do back-button O objeto history foi vitaminado no HTML5 com dois novos métodos: pushstate(data,title[,url]): acrescenta uma entrada na lista de histórico. replacestate(data,title[,url]): modifica a entrada atual na lista de histórico. Com isso, pode-se acrescentar itens à lista de histórico, associando dados ou mesmo uma URL;
46 8. STORAGE API Nova maneira de armazenar dados no cliente (alternativa aos cookies) Objeto Storage possui os métodos: getitem(key); setitem(key); removeitem(key); clear(); Dois objetos disponíveis: localstorage sessionstorage
47 9. APLICAÇÕES OFF-LINE HTML5 provê uma maneira de se indicar ao navegador que elementos devem ser postos em cache para que uma aplicação funcione offline. Para permitir que o usuário acesse uma página offiline é preciso escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache. CACHE MANIFEST meu.html meu.css meu.js <html manifest= meu.manifest">
48 10. GEOLOCATION API Três métodos: Geolocalização IP: localização através de consultas whois Triangulação GPRS: rede de celulares sem GPS ou GPS desabilitado GPS: método mais preciso, margem de erro de apenas 5 metros navigator.geolocation.getcurrentposition(showpos); function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert('your position: '+lat+','+lon) } Watch Position (rastrear a posição continuamente)
49 11. UNDO Navegador guarda um histórico de alterações para cada documento; Histórico controlado pelo objeto UndoManager, acessível através de window.undomanager. O histórico guarda dois tipos de alterações: Alterações DOM Objetos undo Ex.: uma aplicação de pode guardar um objeto undo representando o fato do usuário mover um de uma pasta para outra. document.execcom mand('undo') document.execcom mand('redo')
50 CSS 3
51 1. BORDAS ARREDONDADAS
52 2. SOMBRAS Regular box-shadow: -3px -3px 10px #212121; Interna box-shadow: 0px 0px 10px #212121;
53 2. SOMBRAS Compatibilidade dos navegadores:
54 3. MÚLTIPLOS BACKGROUNDS background: url(body-top.gif) top left no-repeat, url(banner.jpg) top 11px no-repeat, C url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y; Suporte atual apenas dos navegadores baseados em Webkit
55 4. FONTES { font-family: SketchRockwell; src: url( SketchRockwell.ttf ); }.my_css3_class { font-family: SketchRockwell; font-size: 3.2em; text-shadow: 3px 3px 7px #111; }
56 4. E MUITO MAIS... Bordas com imagem Degradê em background Transparência de elementos Layouts multi-ccolunas Transformações 2D e 3D de imagens (girar, perspectiva, etc) Animações Controle do conteúdo de um elemento Etc... Mais informações em:
57 DEMONSTRAÇÕES
58 1. Recursos / APIs HTML5 Canvas animation WebSocket (Chat)
59 2. JOGOS Legend of Sadness Adventure Game PACMAM Torus (Tetris 3D)
60 Perguntas? Contato: Referências:
HTML5 e CSS3 O presente e o futuro da WEB. Danilo Borges da Silva [email protected]
HTML5 e CSS3 O presente e o futuro da WEB Danilo Borges da Silva [email protected] Agenda Introdução Histórico Características Conclusão Referências Introdução HTML HTML é uma abreviação de Hypertext
HTML5. André Tavares da Silva. [email protected]
HTML5 André Tavares da Silva [email protected] O que é HTML5? HTML5 será o novo padrão para HTML, XHTML e HTML DOM (Document Object Model). A última versão (4.01) foi definida em 1999 e a Web mudou
Minicurso introdutório de desenvolvimento para web em HTML5. Cristiano Costa
Minicurso introdutório de desenvolvimento para web em HTML5 Cristiano Costa Sobre mim Graduando em Engenharia Eletrônica - UNIFEI Trabalhou em desenvolvimento de sistemas empresariais (Base em servidores
Programação para Internet I 9. HTML5. Nuno Miguel Gil Fonseca [email protected]
Programação para Internet I 9. HTML5 Nuno Miguel Gil Fonseca [email protected] Resumidamente, é o novo standard para estruturar conteúdo de páginas web. A última versão de HTML surgiu em 1999,
Aplicativos para Internet Aula 01
Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.
Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 Alex de Andrade Catini¹, Tiago Piperno Bonetti¹ ¹Universidade Paranaense (Unipar) Paranavaí PR Brasil [email protected], [email protected] Resumo:
Análise da Nova Linguagem HTML5 para o Desenvolvimento Web
Análise da Nova Linguagem HTML5 para o Desenvolvimento Web Sergio N. Ikeno¹, Késsia Rita da Costa Marchi¹ ¹Universidade Paranaense (Unipar) Paranavaí PR Brasil [email protected], [email protected] Resumo.
HTML5 ESSENCIAL. Fundamentos de todo serviço na Web
HTML5 ESSENCIAL Fundamentos de todo serviço na Web EMENTA Fundamentos de Web Documentos HTML Conteúdo Multimídia Semântica Desempenho 3 O QUE VEREMOS AGORA Fundamentos da Web Documentos HTML Conteúdo Section,
Web Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte
MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar
DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico
DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual
HTML5. Jhonny R. S. Frischembruder
HTML5 Jhonny R. S. Frischembruder RESUMO O HTML5 surgiu com o intuíto de preencher a lacuna de necessidades da programação com HTML de sua versão antecessora 4.01 que foi congelada em 1999. Dificuldades
Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente.
1 HTML5 e 3 Descrição Aprenda no curso de HTML os conceitos essenciais para a criação de páginas web, junto com os novos recursos e possibilidades que o HTML5 e 3 oferecem para a criação de sites com códigos
Primeiro contato com JavaScript
Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
Monday, January 23, 12. Introdução sobre Acessibilidade na web
Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.
O papel do "devigner" e as novidades do HTML5. O novo profissional de Interfaces
O papel do "devigner" e as novidades do HTML5 O novo profissional de Interfaces O Surgimento da Web A web surgiu na década de 80 em um centro de pesquisa científica (CERN) Características: Documentos em
Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4
Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4 Guilherme Miranda Martins 1, Késsia Rita da Costa Marchi 1 1 Universidade paranaense (Unipar) Paranavaí PR Brasil
CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;
CONCEITOS INICIAIS Agenda A diferença entre páginas Web, Home Page e apresentação Web; O que é necessário para se criar páginas para a Web; Navegadores; O que é site, Host, Provedor e Servidor Web; Protocolos.
Afinal o que é HTML?
Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste
Roteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO
HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO Djalma Gonçalves Costa Junior¹, Willian Barbosa Magalhães¹ ¹Universidade Paranaense (Unipar) Paranavaí - PR - Brasil [email protected] [email protected]
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil Um pouco do W3C O W3C no Brasil Web e W3C 5 Tim Berners-Lee criou / propôs a Web em 1989 (há 23 anos) (URI + HTTP + HTML) HTML5 - Futuro da Web Web em 1989
Manual de Integração Via Gadget. Passo a passo para realizar a integração entre websites e a plataforma Virtual Target.
Manual de Integração Via Gadget Passo a passo para realizar a integração entre websites e a plataforma Virtual Target. Manual de Integração Via Gadget 1. Introdução 1.1. O que é? Virtual Target Gadgets
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 4 Técnico Prof. Cesar 2014 Conteúdo 1. ESTRUTURA DE UM DOCUMENTOHTML... 2 2. ELEMENTOS DA ESTRUTURA... 3 3. FORMULÁRIOS...Erro!
HTML5 - POR QUE USÁ-LO?
HTML5 - POR QUE USÁ-LO? Ícaro Carlos Andrade Costa ([email protected]) Igor Antônio Santos Andrade ([email protected]) RESUMO A linguagem HTML surgiu a mais de duas décadas como um
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3 Eduardo Laguna Rubai, Tiago Piperno Bonetti Universidade Paranaense (Unipar) Paranavaí PR- Brasil [email protected], [email protected] Resumo.
MANUAL DE UTILIZAÇÃO DO SISTEMA GLPI
MANUAL DE UTILIZAÇÃO DO SISTEMA GLPI Setembro de 2013 Objetivo: Esse manual, baseado no manual GLPI feito pela DTI, tem como objetivo principal instruir os usuários quanto à utilização do GLPI, sistema
Anote aqui as informações necessárias:
banco de mídias Anote aqui as informações necessárias: URL E-mail Senha Sumário Instruções de uso Cadastro Login Página principal Abrir arquivos Área de trabalho Refine sua pesquisa Menu superior Fazer
Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa
Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato
PDI 1 - Projeto e Design de Interfaces Web
Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Manual de Utilização do GLPI
Manual de Utilização do GLPI Perfil Usuário Versão 1.0 NTI Campus Muzambinho 1 Introdução Prezado servidor, o GLPI é um sistema de Service Desk composto por um conjunto de serviços para a administração
HTML5. Prof. Salustiano Rodrigues de Oliveira [email protected] www.profsalu.com.br
HTML5 Prof. Salustiano Rodrigues de Oliveira [email protected] www.profsalu.com.br HTML5 HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa
Inicialização Rápida do Novell Vibe Mobile
Inicialização Rápida do Novell Vibe Mobile Março de 2015 Introdução O acesso móvel ao site do Novell Vibe pode ser desativado por seu administrador do Vibe. Se não conseguir acessar a interface móvel do
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
parte I Apostila Esquematizada de Informática Sumário Navegadores e Mecanismos de Pesquisas na web Unidade 1 Navegadores (browser)
Apostila Esquematizada de Informática parte I Navegadores e Mecanismos de Pesquisas na web Sumário Unidade 1 Navegadores (browser) Unidade 2 Internet Explorer Explorando a interface e suas funções Unidade
O W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011
O W3C HTML5 Web Semântica Março/2011 SENAC Ribeirão Preto Road Show TI 2011 Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP
O HTML 5 E SUAS NOVAS API s
O HTML 5 E SUAS NOVAS API s David William Rosa de Souza 1, Rafael Cunha Cardoso 1 1 Tecnologia de Sistemas para a Internet Instituto Federal de Educação, Ciência e Tecnologia Sul-Rio-Grandense (IF-Sul)
TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão [email protected] http://luizleao.com
Luiz Leão [email protected] http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação
Responsive Web Design
Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
Criar Newsletters. Guia rápido sobre...
Guia rápido sobre... Criar Newsletters Neste guia... Saiba como criar atrativas newsletters em texto simples ou HTML para captar a atenção de seus contatos e ir ao encontro de seus interesses e expectativas.
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Compatibilidade Principais características
"Manual de Acesso ao Moodle - Discente" 2014
"Manual de Acesso ao Moodle - Discente" 2014 Para acessar a plataforma, acesse: http://www.fem.com.br/moodle. A página inicial da plataforma é a que segue abaixo: Para fazer o login, clique no link Acesso
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem de Script e PHP @wre2008 1 Sumário Introdução; PHP: Introdução. Enviando dados para o servidor HTTP; PHP: Instalação; Formato básico de um programa PHP; Manipulação
Manual de utilização do Zimbra
Manual de utilização do Zimbra Compatível com os principais navegadores web ( Firefox, Chrome e Internet Explorer ) o Zimbra Webmail é uma suíte completa de ferramentas para gerir e-mails, calendário,
VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo
VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando
Introdução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
Manual de Utilização do Sistema GLPI
Manual de Utilização do Sistema GLPI Perfil Guest Apresentação Esse manual, baseado no manual GLPI foi elaborado pela Coordenação de Tecnologia de Informação CTI do câmpus e tem como objetivo instruir
www.andrix.com.br [email protected] Conceitos Básicos
Desenvolvimento Andrique web Amorim II www.andrix.com.br [email protected] Conceitos Básicos Sites e Aplicações Web Normalmente, as pessoas utilizam o termo SITE quando se referem a blogs, sites
PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS
VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...
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
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Compatibilidade Principais características
I - O que é o Mobilize-se
Índice O que é o Mobilize-se...03 A campanha de lançamento...12 Divulgação da campanha...14 Como irá funcionar o sistema para o ouvinte da rádio...20 O que a rádio deve fazer para se inscrever no Mobilize-se...36
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes
Introdução à Tecnologia Web. Tipos de Sites. Profª MSc. Elizabete Munzlinger www.elizabete.com.br
IntroduçãoàTecnologiaWeb TiposdeSites ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br TiposdeSites Índice 1 Sites... 2 2 Tipos de Sites... 2 a) Site
Manual das funcionalidades Webmail AASP
Manual das funcionalidades Webmail AASP 1. Configurações iniciais 2. Regras 3. Histórico da conta 4. Autorresposta 5. Dados de acesso (alterando senha de acesso) 6. Identidade (assinatura) 7. Redirecionamento
Índice. Parte 1: Markup. Parte 2: Formulários e Multimídia. Parte 3: A nova geração de aplicações web I. Parte 4: A nova geração de aplicações web II
1 Índice Parte 1: Markup 1. VISÃO GERAL DO HTML5. 2. ANÁLISE DO SUPORTE ATUAL PELOS NAVEGADORES E ESTRATÉGIAS DE USO 3. ESTRUTURA BÁSICA, DOCTYPE E CHARSETS 4. MODELOS DE CONTEÚDO 5. NOVOS ELEMENTOS E
Proposta de Reformulação do Site do Conselho de Transparência da Administração Pública
Proposta de Reformulação do Site do Conselho de Transparência da Administração Pública Análise e propostas realizadas, levando-se em conta: arquitetura da informação, layout, navegabilidade e estruturação
Desenvolvendo para WEB
Nível - Básico Desenvolvendo para WEB Por: Evandro Silva Neste nosso primeiro artigo vamos revisar alguns conceitos que envolvem a programação de aplicativos WEB. A ideia aqui é explicarmos a arquitetura
CORPVS SEGURANÇA SETOR DE TECNOLOGIA DA INFORMAÇÃO
CORPVS SEGURANÇA SETOR DE TECNOLOGIA DA INFORMAÇÃO ACESSO GLPI ABERTURA E ACOMPANHAMENTO DE CHAMADOS NO SERVICE DESK DATA: 1 0 /0 9 /201 5 VERSÃO: 1.0 AUTOR: Italo Rocha APROVADOR: Raphael Dantas Introdução
HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language) Hipertexto: modo de organizar o conteúdo de forma não linear. Marcação: distinguir títulos, subtítulos, conteúdo etc. Desenvolvido originalmente por Tim Berners-Lee. W3C:
MP-MOBILE. Manual do usuário
MP-MOBILE Manual do usuário MP-MOBILE - INTRODUÇÃO O MP-Mobile é o cliente de acesso personalizado ao serviço de comunicação do MPSE. O MP-Mobile foi customizado a partir de ferramenta livre, o Spark,
Manual de Utilização Moodle
Manual de Utilização Moodle Perfil Professor Apresentação Esse manual, baseado na documentação oficial do Moodle foi elaborado pela Coordenação de Tecnologia de Informação CTI do câmpus e tem como objetivo
Omega Tecnologia Manual Omega Hosting
Omega Tecnologia Manual Omega Hosting 1 2 Índice Sobre o Omega Hosting... 3 1 Primeiro Acesso... 4 2 Tela Inicial...5 2.1 Área de menu... 5 2.2 Área de navegação... 7 3 Itens do painel de Controle... 8
CONFIGURAÇÃO DO ACESSO REMOTO PARA HS-DHXX93 E HS-DHXX96
CONFIGURAÇÃO DO ACESSO REMOTO PARA HS-DHXX93 E HS-DHXX96 1 CONFIGURAR PARÂMETROS DE REDE DO DVR Para maior fiabilidade do acesso remoto é recomendado que o DVR esteja configurado com IP fixo (também pode
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY Prof. Dr. Daniel Caetano 2012-1 Objetivos Introduzir o framework JQuery Capacitar para a construção de documentos JQuery simples Compreender os mecanismos
A. O Sindepark. 1. História
Reestruturação de todo o site utilizando outras tecnologias, nova identidade visual, que seja adaptável à realidade dos smartphones e inserir novas ferramentas. Web Site - Versão Desktop O site seguirá
I N T R O D U Ç Ã O W A P desbloqueio,
INTRODUÇÃO Para que o Guia Médico de seu Plano de Saúde esteja disponível em seu celular, antes de mais nada, sua OPERADORA DE SAÚDE terá de aderir ao projeto. Após a adesão, você será autorizado a instalar
Manual de Utilização do Zimbra
Manual de Utilização do Zimbra Compatível com os principais navegadores web (Firefox, Chrome e Internet Explorer) o Zimbra Webmail é uma suíte completa de ferramentas para gerir e-mails, calendário, tarefas
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Copyright 2011 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer
Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15
APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos
Programação para Internet I
Programação para Internet I Aula 6 PHP: Include, Require, Variáveis de ambiente Prof. Teresinha Letícia da Silva [email protected] Inclusão de arquivos com Include e Require no PHP Uma técnica muito
A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal.
MANUAL DO SISCOOP Sumário 1 Menu de Navegação... 3 2 Gerenciar País... 5 3- Gerenciamento de Registro... 8 3.1 Adicionar um registro... 8 3.2 Editar um registro... 10 3.3 Excluir um registro... 11 3.4
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio [email protected].
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio [email protected] #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver
HTML5 Curso W3C Escritório Brasil
HTML5 Curso W3C Escritório Brasil Autores: Elcio Ferreira e Diego Eis ÍNDICE 1. Visão geral do HTML5 7 Hypertexto 7 O começo e a interoperabilidade 8 WHAT Working Group 8 O HTML5 e suas mudanças 9 O que
Web Services. Autor: Rômulo Rosa Furtado
Web Services Autor: Rômulo Rosa Furtado Sumário O que é um Web Service. Qual a finalidade de um Web Service. Como funciona o serviço. Motivação para o uso. Como construir um. Referências. Seção: O que
CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
Sumário. Conteúdo Certificação OFFICE 2010
Conteúdo Certificação OFFICE 2010 Sumário Access 2010... 2 Excel Core 2010... 3 Excel Expert 2010... 4 Outlook 2010... 5 PowerPoint 2010... 8 Word Core 2010... 9 Word Expert 2010... 10 Access 2010 1. Gerenciando
Manual do Usuário Central de Agendamento. Versão 1.1
Manual do Usuário Central de Agendamento Versão 1.1 Maio, 2014 Central de Agendamento Manual de utilização Tribunal de Justiça do Estado da Bahia Setor: Coordenação de Sistemas - COSIS Histórico de Revisões
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
TRBOnet MDC Console. Manual de Operação
TRBOnet MDC Console Manual de Operação Versão 1.8 ÍNDICE NEOCOM Ltd 1. VISÃO GERAL DA CONSOLE...3 2. TELA DE RÁDIO...4 2.1 COMANDOS AVANÇADOS...5 2.2 BARRA DE FERRAMENTAS...5 3. TELA DE LOCALIZAÇÃO GPS...6
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
Como funciona a MEO Cloud?
Boas-vindas O que é a MEO Cloud? A MEO Cloud é um serviço da Portugal Telecom, lançado a 10 de Dezembro de 2012, de alojamento e sincronização de ficheiros. Ao criar uma conta na MEO Cloud fica com 16
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Web I F R N I N S T I T U TO F E D E R A L D E E D U C A Ç Ã O, C I Ê N C I A E T E C N O LO G I A D O R I O G R A N D E D O N R T E.
Web I F R N I N S T I T U TO F E D E R A L D E E D U C A Ç Ã O, C I Ê N C I A E T E C N O LO G I A D O R I O G R A N D E D O N R T E. J O S É A N TÔ N I O D A C U N H A Web Page HTTP No início a web, era