O documento apresenta uma aula sobre HTML5, incluindo: (1) uma visão geral da evolução da web e dos navegadores; (2) os pilares da web e a estrutura básica do HTML5; (3) novos elementos e atributos no HTML5 como section, nav, article, aside, header e footer.
O documento discute as primeiras configurações necessárias para criar um site, incluindo registro de domínio, hospedagem e projeto. Também apresenta uma introdução ao HTML5, cobrindo tópicos como estrutura básica de documentos, tipos de linguagens da web e modelos de conteúdo.
O documento discute HTML5, incluindo iframes, imagens, mapas de imagens, áudio, vídeo e SVG. Apresenta atributos e elementos como <iframe>, <img>, <map>, <audio>, <video> e <svg>.
O documento discute as primeiras configurações necessárias para criar um site, incluindo registro de domínio, hospedagem e projeto. Também apresenta uma introdução ao HTML5, cobrindo tópicos como estrutura básica de documentos, tipos de linguagens da web e modelos de conteúdo.
O documento discute HTML5, incluindo iframes, imagens, mapas de imagens, áudio, vídeo e SVG. Apresenta atributos e elementos como <iframe>, <img>, <map>, <audio>, <video> e <svg>.
As novas features que essas duas tecnologias trouxeram para o mundo da Web. Formas de se ter agilidade com elas e a semântica ao documento. Bem-vindo ao mundo do HTML5 e CSS3!
O documento resume uma apresentação sobre HTML5, CSS3 e JavaScript feita por Fábio Flatschart na Campus Party 2011. A apresentação discute as novas especificações e recursos introduzidos pelo HTML5, como estrutura semântica, formulários, vídeo, SVG e APIs, e como essas tecnologias permitem o desenvolvimento de aplicações web ricas. O documento também aborda compatibilidade entre navegadores e ferramentas da Adobe para suporte a HTML5.
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
O documento apresenta as novidades do HTML5 em 8 capítulos, incluindo novas tags semânticas, formulários aprimorados, armazenamento offline, acesso a dispositivos e multimídia. Apresenta também CSS3 com novas propriedades para efeitos visuais e design responsivo para diferentes telas.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
O documento apresenta técnicas de CSS como CSS Reset e CSS Hacks. CSS Reset é usado para eliminar estilos padrão dos navegadores e começar o desenvolvimento sem anomalias. CSS Hacks são "gambiarras" no código CSS para contornar problemas de renderização entre navegadores. O documento explica como implementar CSS Reset e como usar comentários condicionais e exemplos para aplicar CSS Hacks especificamente no Internet Explorer.
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}Matheus Thomaz
1) O documento apresenta um cronograma de estudos em HTML e CSS para um desenvolvedor front-end.
2) Inclui explicações sobre as principais tags e atributos em HTML e CSS, além de tópicos como pré-processadores, semântica e HTML5.
3) Fornece detalhes sobre a estrutura e significado semântico de páginas web.
O documento discute os conceitos básicos de HTML e XHTML, incluindo sua história, estrutura, tags e regras. Também aborda CSS, imagens e otimização para mecanismos de busca. É dividido em três módulos tratando de HTML/XHTML, CSS e imagens respectivamente.
O documento apresenta as principais diferenças entre HTML5 e XHTML, como a remoção do fechamento de tags, a nova sintaxe do doctype e a adição de novas tags semânticas. Também discute como implementar vídeos, tabelas e formulários semanticamente no HTML5, além de dicas para adaptação a dispositivos móveis.
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
O documento apresenta uma introdução sobre a história da web, desde sua criação por Tim Berners-Lee até os padrões atuais. Aborda conceitos como HTML, XHTML, CSS e a importância da semântica e dos padrões web para um código acessível.
Este documento fornece informações sobre estilos em CSS (Cascading Style Sheets). Explica o que é CSS, como aplicar estilos através de folhas externas, seletores e propriedades. Também discute como especificar cores em CSS usando nomes predefinidos, valores hexadecimais, RGB e outros métodos.
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoWordPress Floripa
Tomando por base a minha trajetória profissional, de pesquisador e professor da área de Ciências Humanas para depois desenvolvedor WEB, pude reconhecer o grande potencial didático do WordPress no ensino-aprendizagem de diversos assuntos ligados ao universo da programação. É claro que é disso que se trata o ambiente em si, uma ferramenta ágil voltada para a programação de sistemas, mas vale reforçar o seu papel didático para o entendimento e desenvolvimento dessas habilidades e competências, especialmente para estudantes e/ou iniciantes na área de Tecnologia da Informação. O objetivo deste "talk" é justamente reconhecer o valor educacional da ferramenta e de tudo que a envolve (documentação, tutoriais, suporte, etc) como sendo parte de uma grande comunidade E-learning. Sem dúvida, o WordPress contribui muito na formação dos profissionais de TI.
Este documento fornece uma introdução sobre HTML, CSS e XHTML. Ele explica o que são essas linguagens, como funcionam e quais são suas principais tags e comandos. Além disso, fornece exemplos de como estruturar páginas web usando essas tecnologias.
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
Ferramentas Livres para Desenvolvimento Webigorpimentel
O documento discute a história da web, as etapas de desenvolvimento de um site, incluindo coleta de informações, planejamento, design, desenvolvimento, testes e publicação. Também aborda as tecnologias fundamentais para desenvolvimento web como HTML, CSS, JavaScript, PHP e banco de dados MySQL.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
O documento discute o desenvolvimento de sites web utilizando os padrões XHTML e CSS. Aborda a história da web, os padrões web, as diferenças entre HTML e XHTML, e como CSS pode ser usado para separar a apresentação do conteúdo em sites web.
O documento discute o uso de pré-processadores CSS como Sass e Compass para criar designs responsivos. Ele explica como Sass fornece recursos como aninhamento, variáveis e mixins que facilitam o desenvolvimento. O documento também descreve como Compass e Breakpoint ajudam na compatibilidade entre navegadores e consultas de mídia, respectivamente. Por fim, é apresentado Susy como uma forma flexível de criar grids responsivos.
Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono
Este documento fornece um resumo sobre HTML 5 e Internet Explorer 9. Apresenta os novos elementos estruturais do HTML 5 como <header>, <footer>, <nav> e <article>. Também discute os novos elementos de mídia como <video> e <audio>, além dos novos controles de formulário. Por fim, fornece recomendações sobre o uso do HTML 5.
O documento resume uma palestra sobre HTML5, CSS3 e JavaScript que ocorrerá em 17 de outubro de 2022. Apresentará conceitos básicos dessas tecnologias como tags, elementos, estrutura básica de páginas web e exemplos de códigos.
As novas features que essas duas tecnologias trouxeram para o mundo da Web. Formas de se ter agilidade com elas e a semântica ao documento. Bem-vindo ao mundo do HTML5 e CSS3!
O documento resume uma apresentação sobre HTML5, CSS3 e JavaScript feita por Fábio Flatschart na Campus Party 2011. A apresentação discute as novas especificações e recursos introduzidos pelo HTML5, como estrutura semântica, formulários, vídeo, SVG e APIs, e como essas tecnologias permitem o desenvolvimento de aplicações web ricas. O documento também aborda compatibilidade entre navegadores e ferramentas da Adobe para suporte a HTML5.
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
O documento apresenta as novidades do HTML5 em 8 capítulos, incluindo novas tags semânticas, formulários aprimorados, armazenamento offline, acesso a dispositivos e multimídia. Apresenta também CSS3 com novas propriedades para efeitos visuais e design responsivo para diferentes telas.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
O documento apresenta técnicas de CSS como CSS Reset e CSS Hacks. CSS Reset é usado para eliminar estilos padrão dos navegadores e começar o desenvolvimento sem anomalias. CSS Hacks são "gambiarras" no código CSS para contornar problemas de renderização entre navegadores. O documento explica como implementar CSS Reset e como usar comentários condicionais e exemplos para aplicar CSS Hacks especificamente no Internet Explorer.
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}Matheus Thomaz
1) O documento apresenta um cronograma de estudos em HTML e CSS para um desenvolvedor front-end.
2) Inclui explicações sobre as principais tags e atributos em HTML e CSS, além de tópicos como pré-processadores, semântica e HTML5.
3) Fornece detalhes sobre a estrutura e significado semântico de páginas web.
O documento discute os conceitos básicos de HTML e XHTML, incluindo sua história, estrutura, tags e regras. Também aborda CSS, imagens e otimização para mecanismos de busca. É dividido em três módulos tratando de HTML/XHTML, CSS e imagens respectivamente.
O documento apresenta as principais diferenças entre HTML5 e XHTML, como a remoção do fechamento de tags, a nova sintaxe do doctype e a adição de novas tags semânticas. Também discute como implementar vídeos, tabelas e formulários semanticamente no HTML5, além de dicas para adaptação a dispositivos móveis.
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
O documento apresenta uma introdução sobre a história da web, desde sua criação por Tim Berners-Lee até os padrões atuais. Aborda conceitos como HTML, XHTML, CSS e a importância da semântica e dos padrões web para um código acessível.
Este documento fornece informações sobre estilos em CSS (Cascading Style Sheets). Explica o que é CSS, como aplicar estilos através de folhas externas, seletores e propriedades. Também discute como especificar cores em CSS usando nomes predefinidos, valores hexadecimais, RGB e outros métodos.
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoWordPress Floripa
Tomando por base a minha trajetória profissional, de pesquisador e professor da área de Ciências Humanas para depois desenvolvedor WEB, pude reconhecer o grande potencial didático do WordPress no ensino-aprendizagem de diversos assuntos ligados ao universo da programação. É claro que é disso que se trata o ambiente em si, uma ferramenta ágil voltada para a programação de sistemas, mas vale reforçar o seu papel didático para o entendimento e desenvolvimento dessas habilidades e competências, especialmente para estudantes e/ou iniciantes na área de Tecnologia da Informação. O objetivo deste "talk" é justamente reconhecer o valor educacional da ferramenta e de tudo que a envolve (documentação, tutoriais, suporte, etc) como sendo parte de uma grande comunidade E-learning. Sem dúvida, o WordPress contribui muito na formação dos profissionais de TI.
Este documento fornece uma introdução sobre HTML, CSS e XHTML. Ele explica o que são essas linguagens, como funcionam e quais são suas principais tags e comandos. Além disso, fornece exemplos de como estruturar páginas web usando essas tecnologias.
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
Ferramentas Livres para Desenvolvimento Webigorpimentel
O documento discute a história da web, as etapas de desenvolvimento de um site, incluindo coleta de informações, planejamento, design, desenvolvimento, testes e publicação. Também aborda as tecnologias fundamentais para desenvolvimento web como HTML, CSS, JavaScript, PHP e banco de dados MySQL.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
O documento discute o desenvolvimento de sites web utilizando os padrões XHTML e CSS. Aborda a história da web, os padrões web, as diferenças entre HTML e XHTML, e como CSS pode ser usado para separar a apresentação do conteúdo em sites web.
O documento discute o uso de pré-processadores CSS como Sass e Compass para criar designs responsivos. Ele explica como Sass fornece recursos como aninhamento, variáveis e mixins que facilitam o desenvolvimento. O documento também descreve como Compass e Breakpoint ajudam na compatibilidade entre navegadores e consultas de mídia, respectivamente. Por fim, é apresentado Susy como uma forma flexível de criar grids responsivos.
Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono
Este documento fornece um resumo sobre HTML 5 e Internet Explorer 9. Apresenta os novos elementos estruturais do HTML 5 como <header>, <footer>, <nav> e <article>. Também discute os novos elementos de mídia como <video> e <audio>, além dos novos controles de formulário. Por fim, fornece recomendações sobre o uso do HTML 5.
O documento resume uma palestra sobre HTML5, CSS3 e JavaScript que ocorrerá em 17 de outubro de 2022. Apresentará conceitos básicos dessas tecnologias como tags, elementos, estrutura básica de páginas web e exemplos de códigos.
Este documento apresenta os principais tópicos sobre HTML, CSS, DOM e LocalStorage. A primeira aula introduz o HTML, definindo-o como uma linguagem de marcação para criar páginas web semanticamente. A segunda aula aborda o CSS, que é usado para estilizar o layout e aspecto visual das páginas. A terceira aula explica como o DOM representa a estrutura do documento HTML e pode ser manipulado com JavaScript. Por fim, a quarta aula introduz o LocalStorage para armazenar dados no navegador.
O documento descreve as principais novidades do HTML5 e CSS3, incluindo a reorganização semântica do HTML5 com elementos como header, nav, section e article, assim como recursos multimídia como vídeo e canvas, e propriedades avançadas de CSS3 como borda arredondada, sombras e transições. Exemplos são fornecidos para ilustrar o uso desses recursos.
O documento resume vários artigos sobre HTML5. Apresenta as principais mudanças trazidas pelo HTML5 como novas tags semânticas que melhoram a acessibilidade e a estrutura do código, novas APIs para mídia e formulários e compatibilidade aprimorada entre navegadores. Também discute técnicas para garantir compatibilidade do HTML5 em navegadores mais antigos.
O que todos os developers devem saber sobre seointrofini
Este documento fornece informações sobre otimização de sites (SEO) em 3 frases:
1) SEO refere-se a estratégias para melhorar o posicionamento de sites nos resultados de pesquisa, como otimizar o conteúdo e links;
2) Fatores importantes incluem otimização interna da página, estrutura do site, links externos e métricas sociais e de tráfego;
3) Ferramentas como Drupal facilitam o SEO ao fornecer recursos como URLs amigáveis e tags semânticas
Quando você tem uma startup, a última coisa que quer é perder tempo na hora do desenvolvimento dos aplicativos, então aqui temos uma breve descrição de tecnologias e ferramentas que ajudam no rápido desenvolvimento do seu aplicativo.
O documento discute as responsabilidades de um desenvolvedor front-end, incluindo HTML, CSS, JavaScript, frameworks back-end e front-end, padrões de projeto, SEO, acessibilidade, versionamento e ferramentas de trabalho. Também recomenda alguns profissionais e recursos de estudo importantes para a área.
O documento discute as novas possibilidades trazidas pela especificação HTML5, como elementos estruturais semânticos, novos tipos de entrada para formulários, integração de mídia como vídeo e áudio, uso de canvas e SVG, e APIs que permitem novas funcionalidades para aplicações web. A especificação HTML5 evolui a web de forma modular, permitindo que recursos sejam implementados gradualmente pelos navegadores sem depender da finalização da especificação.
1) O documento discute os padrões web, incluindo HTML semântico, CSS e JavaScript para separar conteúdo, apresentação e comportamento.
2) As vantagens de usar padrões web incluem compatibilidade, velocidade e acessibilidade.
3) Embora os navegadores tenham melhorado o suporte aos padrões, nem todos possuem o nível de suporte necessário ainda.
O documento discute conceitos e técnicas relacionadas a desenvolvimento front-end, incluindo HTML5, CSS3, JavaScript, AngularJS e outras tecnologias. Aborda tópicos como semântica, boas práticas de codificação, SEO, acessibilidade, design responsivo, organização de código e outras especificações front-end.
O documento introduz os principais conceitos de HTML, incluindo suas tags básicas para formatação de texto, quebra de linha, cabeçalhos, parágrafos e listas. Além disso, explica a especificação de URLs para acesso a recursos na web.
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
O documento discute os conceitos básicos de HTML, incluindo:
1) O que é HTML e como é usado para estruturar páginas da web;
2) As principais tags HTML como <head>, <body>, <h1>, <p>, <img>;
3) Como adicionar estilos a páginas HTML usando CSS.
O documento discute padrões da web, incluindo HTML, XHTML e CSS. Ele explica como esses padrões foram criados para facilitar o desenvolvimento web e melhorar a experiência do usuário, e destaca boas práticas como usar HTML de forma semântica e separar conteúdo de apresentação usando folhas de estilo.
O documento descreve os conceitos básicos de HTML, incluindo sua criação por Tim Berners-Lee para permitir a inserção de conteúdo e estrutura básica na web. Explica como HTML, CSS e JavaScript trabalham juntos para criar sites modernos, com HTML fornecendo a estrutura, CSS o estilo e JavaScript a interatividade.
Este documento é um e-book que ensina os principais elementos do HTML5 em 15 minutos. Ele explica o doctype, tags HTML, meta charset e outros elementos de cabeçalho. Também apresenta os novos elementos estruturais como header, nav, section, article e footer, dando um exemplo de como usá-los. Por fim, discute como estilizar esses elementos com CSS e a compatibilidade com navegadores antigos.
O documento apresenta a formação acadêmica e experiência profissional de dois professores. Ele resume os principais tópicos que serão abordados em uma aula sobre HTML5, incluindo uma breve história da linguagem, estrutura básica, elementos de seção, formulários e multimídia.
Padrões Web são normas estabelecidas pela W3C para construção e interpretação de conteúdo na web. Os principais padrões são XHTML, CSS, XML e DOM. Seguir padrões traz benefícios como manutenção facilitada de código, baixo custo, velocidade e acessibilidade em qualquer dispositivo.
Este documento fornece dicas para otimizar o desempenho front-end de sites WordPress, incluindo reduzir consultas desnecessárias ao banco de dados, usar compressão Zlib, gerenciar plugins de forma adequada, otimizar arquivos CSS e JavaScript, imagens e sprites CSS. O autor relata como essas técnicas melhoraram significativamente o tempo de carregamento de uma página de exemplo de 10 para 5 segundos.
O documento apresenta uma aula sobre os Livros Proféticos do Antigo Testamento. Discute os conceitos de profeta e profecia, dividindo os profetas em três períodos: pré-exílico, exílico e pós-exílico. Também lista e descreve brevemente os principais profetas maiores: Isaías, Jeremias, Lamentações, Ezequiel e Daniel.
Este documento resume as principais funções no povo de Israel no Antigo Testamento, incluindo sacerdotes, profetas, juízes, reis e escribas. Detalha as subclasses de sacerdotes, como sumo sacerdotes, sacerdotes e levitas, e suas responsabilidades. Também fornece listas de juízes e reis de Israel e Judá.
Este documento resume uma aula sobre os Livros Poéticos da Bíblia. Apresenta os cinco livros poéticos - Jó, Salmos, Provérbios, Eclesiastes e Cânticos dos Cânticos - discutindo brevemente a autoria, tema e divisão de cada um. Também fornece alguns pontos de observação sobre os livros de Jó e Salmos.
O documento resume a aula 9 sobre os livros históricos da Bíblia, discutindo 7 livros: Rute, I e II Samuel, I e II Reis, Josué e Juízes. Fornece informações sobre autoria, contexto histórico, conteúdo e divisões de cada livro.
1) O documento discute os livros históricos bíblicos de 1 e 2 Crônicas e Esdras. 2) 1 e 2 Crônicas contam a história de Israel desde Adão até o cativeiro na Babilônia, com foco no reinado de Davi. 3) Esdras relata o retorno dos judeus ao cativeiro sob a liderança de Zorobabel e Esdras e a reconstrução do Templo.
O documento apresenta uma aula sobre a Bíblia Sagrada, discutindo a origem do nome Bíblia, as diferentes versões e métodos de tradução, e fornecendo um resumo dos principais pontos dos livros do Pentateuco.
O documento resume o livro bíblico de Deuteronômio, incluindo sua autoria por Moisés, estrutura em cinco partes, e tema de recapitular a lei de Deus para preparar Israel para entrar na terra prometida.
1. O livro de Números descreve a jornada de Israel no deserto após sair do Egito, cobrindo os 39 anos até chegarem às fronteiras da terra prometida.
2. O livro relata os preparativos de Israel no Sinai, as paradas no deserto, a rebelião em Cades-Barnéia e os eventos finais na planície de Moabe.
3. O tema principal é mostrar que o povo de Deus deve andar pela fé, confiando em Suas promessas, apesar de fracassos,
(1) O documento discute a formação da Bíblia, incluindo a inspiração divina dos autores humanos ao longo de 1500 anos.
(2) Foram mais de 40 autores de diferentes origens sociais que escreveram os 66 livros bíblicos sem se conhecerem, mas de forma harmoniosa.
(3) Isso mostra que a Bíblia não pode ser produto apenas de autoria humana, mas deve ter recebido inspiração divina para manter a coerência entre os diferentes livros.
O documento apresenta um resumo da aula 3 sobre o livro bíblico de Êxodo. Ele discute o título, a autoria, o período histórico, os temas e as divisões principais do livro, incluindo a libertação do povo hebreu da escravidão no Egito e o estabelecimento da aliança entre Deus e o povo no Monte Sinai.
1) O documento discute o livro bíblico de Levítico, incluindo sua autoria, data, temas e história de Nadabe e Abiú.
2) Levítico contém leis sobre sacrifícios e santificação dadas a Moisés no Monte Sinai para guiar o povo de Israel.
3) Nadabe e Abiú, filhos de Arão, foram mortos por Deus por usarem fogo estranho em oferendas, desobedecendo às leis.
O documento apresenta uma aula sobre o livro de Gênesis no Antigo Testamento. Ele discute a estrutura do Pentateuco e do Tanakh, além de fornecer um resumo dos principais temas e eventos cobertos no livro de Gênesis, como a criação do mundo, o pecado original do homem, as origens da civilização e da nação de Israel.
Este documento resume a primeira aula de um curso de apologética. Ele define apologética como a defesa racional da fé cristã contra críticas e apresenta três propósitos principais da apologética: 1) influenciar a cultura combatendo ideias falsas, 2) fortalecer aqueles que já creem e 3) evangelizar os descrentes. O documento também discute a base bíblica da apologética, citando exemplos de Jesus e dos apóstolos defendendo a fé através de argumentos.
O documento resume uma aula sobre teologia natural, abordando três tópicos principais: (1) a revelação geral e especial de Deus, (2) as bases da revelação geral através da criação, e (3) os principais argumentos da teologia natural, como o argumento cosmológico.
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Gustavo Zimmermann
O documento discute princípios básicos de design como contraste, alinhamento, tipografia, paleta de cores e uso de imagens. Apresenta exemplos destes princípios e enfatiza a importância da repetição, proximidade e balanceamento para criar uma experiência visual consistente.
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Gustavo Zimmermann
A aula 4 do curso Introdução ao Web Design ensinou sobre o sistema de grade 960 e frameworks como o Bootstrap. O professor Gustavo Zimmermann forneceu links para recursos sobre grade de 12, 16 e 24 colunas e frameworks para desenvolvimento web.
O documento discute os padrões web, incluindo que são recomendações do W3C para tornar a web acessível para todos e o papel do W3C na criação de padrões. Também lista os principais grupos de padrões web e fases e categorias de entregáveis de UX.
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
1) A aula introduz conceitos fundamentais de web design, como a história da internet, evolução da web, definição de web design e etapas de um projeto web.
2) É explicado o que é web design e quais conhecimentos são necessários, como UX design, layout, web standards e responsividade.
3) São apresentadas as principais etapas de um projeto web em uma agência, incluindo briefing, wireframes, desenvolvimento e validações.
3. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
WEB
HTML5 - Marcação
Visão Geral do HTML5
4. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
WEB
HTML5 - Marcação
Visão Geral do HTML5
5. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
HTML
WEB
HTML5 - Marcação
Visão Geral do HTML5
6. prof. Gustavo Zimmermann | contato@swag.ag
• 1990 - Criação do Protocolo HTTP e do HTML.
HTML5 - Marcação
Visão Geral do HTML5
7. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 06/08/1991
Primeiro site da Web
8. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1992
NCSA MOSAIC
9. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1994
Desenvolvedores saem do Mosaic
10. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• IBM Web Explorer
• UDI WWW
• Internet Explorer
• 1995
Surgem novos Navegadores
11. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
86%
14%
• 1996
Arrogância
12. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
• 1998
IE já instalado no Windows
13. prof. Gustavo Zimmermann | contato@swag.ag
• 1999
America Online compra o Netscape
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
$$$
14. prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
MUNDO: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
50,15%
17,53%
17,02%
9,92%
1,69%
3,69%OUTROS
15. prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
BRASIL: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
66,38%
17,74%
10,75%
2,91%
0,94%
1,27%OUTROS
18. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
5 principais novidades do navegador:
1. Escrever diretamente sobre a tela
2. Assistente pessoal
3. Leitura
4. Design minimalista
5. Rapidez
“Nosso objetivo é evitar interferir
visualmente na experiência de
navegação. A ideia é apoiá-la"
23. prof. Gustavo Zimmermann | contato@swag.ag
• 2004
HTML5 - Marcação
Visão Geral do HTML5
XHTML1.0
Preocupação:
•
•
24. prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
XHTML2.0
Proposta do WHATWG:
•
25. prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
HTML5
Abandono:
26. prof. Gustavo Zimmermann | contato@swag.ag
Análise do suporte atual pelos
Navegadores e
Estratégias de Uso
27. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
O desenvolvimento modular
01. SEMÂNTICA 02. ESTILOS
03. INTERATIVIDADE
28. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
29. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
Não há como os desenvolvedores manterem um bom nível de
compatibilidade com todos estes browsers levando em consideração a
particularidade de cada um.
MOTOR BROWSER
Webkit
Gecko
Trident
Presto
37. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
XHTML
Quando a W3C propôs uma versão do
HTML baseado em XML ela tinha a
intenção de organizar melhor o código
HTML. Esta organização tem como
base 5 principais regras.
38. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Marcações em minúsculo
<HEAD></HEAD>
<head></head>
39. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de TAGs
• Marcação
<li> Item
<li> Item </li>
• Execução
<br > <br />
40. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Encadeamento
<b> <i> Item </b> </i>
<b> <i> Item </i> </b>
41. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Indentação do HTML
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
</div>
<div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<ol>
</div>
42. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Caminhos Absolutos e Relativos
• Absoluto
http://gust4vo.com/cursos/wp-
content/uploads/2014/07/Plano-de-Trabalho-
HTML5.pdf
• Relativo
Plano-de-Trabalho-HTML5.pdf
43. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de
elementos: elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns
exemplos: a, strong, em, img, input, abbr, span.
Os elementos de blocos são como caixas, que dividem o conteúdo nas
seções do layout.
44. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos:
• Os elementos de linha podem conter outros elementos de
linha, dependendo da categoria que ele se encontra. Por exemplo: o
elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de
bloco.
• Elementos de bloco sempre podem conter elementos de
linha.
• Elementos de bloco podem conter elementos de bloco,
dependendo da categoria que ele se encontra. Por exemplo, um
parágrafo não pode conter um DIV. Mas o contrário é possível.
45. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Cada elemento no HTML pode ou não fazer parte de um grupo de
elementos com características similares. As categorias estão a seguir.
Manteremos os nomes das categorias em inglês para que haja um melhor
entendimento:
1. Metadata content
2. Flow content
3. Sectioning content
4. Heading content
5. Phrasing content
6. Embedded content
7. Interactive content
46. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Abaixo segue como as categorias estão relacionadas de acordo com o
WHATWG:
Flow
Phrasing
Embedded
Interactive
Metadata
Heading
Sectioning
47. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
A maioria dos elementos utilizados no body e aplicações são categorizados
como Flow Content. São eles:
a, abbr, address, area (se for um decendente de um elemento de mapa), article,
aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command,
datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2,
h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label,
link (se o atributo itemprop for utilizado), map, mark, math, menu, meta (se o
atributo itemprop for utilizado), meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, samp, script, section, select, small, span, strong, style (se o
atributo scoped for utilizado), sub, sup, svg, table, textarea, time, ul, var, video,
wbr, text*
* Sob algumas circunstâncias.
48. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Estes elementos definem um grupo de cabeçalhos e rodapés. Basicamente
são elementos que juntam grupos de textos no documento.:
article
aside
nav
section
49. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Os elementos da categoria Heading definem uma seção de cabeçalhos, que
podem estar contidos em um elemento na categoria Sectioning:
h1
h2
h3
h4
h5
h6
hgroup
50. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Fazem parte desta categoria elementos que marcam o texto do documento,
bem como os elementos que marcam este texto dentro do elemento de
parágrafo:
a, abbr, area (se ele for descendente de um elemento de mapa), audio, b,
bdo, br, button, canvas, cite, code, command, datalist, del (se ele
contiver um elemento da categoria de Phrasing), dfn, em, embed, i,
iframe, img, input, ins (se ele contiver um elemento da categoria de
Phrasing), kbd, keygen, label, link (se o atributo itemprop for utilizado),
map (se apenas ele contiver um elemento da categoria de Phrasing),
mark, math, meta (se o atributo itemprop for utilizado), meter, noscript,
object, output, progress, q, ruby, samp, script, select, small, span,
strong, sub, sup, svg, textarea, time, var, video, wbr, text.
51. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Na categoria Embedded, há elementos que importam outra fonte de
informação para o documento:
audio
canvas
embed
iframe
img
math
object
svg
video
52. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Interactive Content são elementos que fazem parte da interação de usuário:
a, audio (se o atributo control for utilizado), button, details,
embed, iframe, img (se o atributo usemap for utilizado),
input (se o atributo type não tiver o valor hidden), keygen,
label, menu (se o atributo type tiver o valor toolbar), object
(se o atributo usemap for utilizado), select, textarea,
video (se o atributo control for utilizado).
54. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
section
nav
55. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
article
aside
header
56. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
footer
time
57. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• align como atributo da tag
• caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3,
h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
• alink, link, text e vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr, td, th e body.
• border como atributo da tag table e object.
• cellpadding e cellspacing como atributos da tag table.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
58. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• char e charoff como atributos da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• clear como atributo da tag br.
• compact como atributo da tag dl, menu, ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag img e object.
• marginheight e marginwidth como atributos da tag iframe.
• noshade como atributo da tag hr.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
59. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
• type como atributo da tag li, ol e ul.
• valign como atributo da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• width como atributo da tag hr, table, td, th, col, colgroup e pre.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
60. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• rev e charset como atributos da tag link e a.
• shape e coords como atributos da tag a.
• longdesc como atributo da tag img and iframe.
• target como atributo da tag link.
• nohref como atributo da tag area.
• profile como atributo da tag head.
• version como atributo da tag html.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
61. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• name como atributo da tag img (use id).
• scheme como atributo da tag meta.
• archive, classid, codebase, codetype, declare e standby como
atributos da tag object.
• valuetype e type como atributos da tag param.
• axis e abbr como atributos da tag td e th.
• scope como atributo da tag td.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
62. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O atributo autofocus pode ser especificado nos elementos input (exceto
quando há atributo hiddenatribuído), textarea, select e button.
• A tag a passa a suportar o atributo media como a tag link.
• A tag form ganha um atributo chamado novalidate. Quando aplicado o
formulário pode ser enviado sem validação de dados.
• O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado
os indicadores da lista são colocados na ordem inversa, isto é, da forma
descendente.
Alguns elementos ganharam novos atributos:
63. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos
os filhos de fieldset são desativados.
• O novo atributo placeholder pode ser colocado em inputs e textareas.
• O elemento area agora suporta os atributos hreflang e rel como os
elementos a e link
• O elemento base agora suporta o atributo target assim como o elemento a. O
atributo target também não está mais descontinuado nos
elementos a e area porque são úteis para aplicações web.
Alguns elementos ganharam novos atributos:
64. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Outros Atributos descontinuados
• O atributo border utilizado na tag img.
• O atributo language na tag script.
• O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de
name.
• O atributo summary na tag table.
Os atributos abaixo foram descontinuados:
66. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
b
span
<b></b>
67. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
i span
<i></i>
68. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
a href
placeholder
<a></a>
69. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
address
<andress></andress>
70. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
hr
<hr />
71. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
strong
<strong></strong>
72. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
head child
<head></head >
73. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
basefont
big
center
font
s
strike
tt
u
Os elementos abaixo foram descontinuados por que seus efeitos são
apenas visuais:
74. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
frame
frameset
noframes
Os elementos abaixo foram descontinuados por que ferem os princípios
de acessibilidade e usabilidade:
75. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
• acronym não foi incluído porque criou um bocado de confusão
entre os desenvolvedores que preferiram utilizar a tag abbr.
• applet ficou obsoleto em favor da tag object.
• isindex foi substituído pelo uso de form controls.
• dir ficou obsoleto em favor da tag ul.
Os elementos abaixo não foram incluídos na especificação porque não
tiveram uso entre os desenvolvedores ou porque sua função foi substituída
por outro elemento:
78. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
Nomeações
Para a nomeação de referências precisamos respeitar 4 regras básicas:
1. Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas;
2. Sem caracteres especiais (@#$%&*()+[]ªº°<>/|);
3. Sem acentuação ou pontuação (“’!?¨´`^~.:;,);
4. Underlines (_) e Traços (-) ao invés de Espaço;
80. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
H1 a H6:
As TAGs H1 a H6 são utilizadas para a marcação semântica e hierárquica de
títulos, como no exemplo abaixo:
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
No HTML5 temos uma nova TAG chamada <hgroup> utilizada para
agrupar grupos de títulos que pertencem a uma mesma categoria:
<hgroup>
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
</hgroup>