Java Corporativo (RIAs) HTML, CSS e Javascript. Edson Koiti Kudo Yasojima
|
|
|
- Melissa Domingos Aleixo
- 10 Há anos
- Visualizações:
Transcrição
1 Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima
2 Rich Internet Application (RIA) Oferece interfaces ricas e novas experiências ao usuário, tanto web como desktop. Web 2.0 Animações, Interação, Produtividade, Marketing
3 Rich Internet Application (RIA) Vantagens: Melhores Interfaces Equilíbrio Client/Server Comunicação Assíncrona (AJAX) Deficiências: Obrigatoriedade do uso de scripting Tempo de carregamento Novos paradigmas para arquitetura de aplicações Deficiência em indexação de busca
4 Rich Internet Application (RIA) Tecnologias: atualmente estas possuem a detenção de mais de 50% do mercado atual das RIAs: Adobe Flash HTML 5 (Scridb e Youtube) Java Microsoft (Silverlight) Fonte:
5 Rich Internet Application (RIA) Alguns exemplos: E mais milhares de outros por aí...
6 Rich Internet Application (RIA) O que se pode utilizar para criar RIAs? Adobe Flash/Flex Java Richfaces, Icefaces, Vaadim, Primefaces, JBossSeam, JavaFx Microsoft Silverlight HTML 5 Google GWT, SmartGWT. Jquery, DojoToolkit, Scriptaculous
7 Rich Internet Application (RIA) Conhecimentos desejáveis: HTML CSS Javascript (Jquery, Scriptaculous, etc.) Actionscript (Adobe) C# (Microsoft) JavaEE (Vários frameworks de RIA para Java)
8 HTML Hiper Text Markup Language Linguagem de marcação <a></a> <br/> Utiliza Tags para interpretar e processar texto
9 HTML Estrutura básica
10 HTML Algumas tags Importantes <div> - Definem e encapsulam estruturas. <table>, <tr>, <td> - Definem a construção de tabelas. <a> - Criam hiperlinks. <img> - Utilizada para carregar imagens <form> - Definem formulários <script> e <link> - Utilizados para invocar arquivos externos como CSS e Javascript
11 HTML - Sintaxe Uma sempre inicia e se fecha dentro da mesmo O conteúdo da página sempre estará entre tags A maioria das tags permitem o uso de atributos
12 HTML XHTML?? XHTML XML (extensible Markup Language) Mais regras Melhor padronização (W3C) Mais consistente Possibilidade de extensão da linguagem de marcação (JSF, Jboss Seam, etc.)
13 XHTML Algumas Padronizações Errado: <p><div><a></div></p></a> Certo: <p><div><a></a></div></p> Errado: <HTML></HTML> Certo: <html></html> Errado: <br> Certo: <br/> Errado: <td rowspan = 3> Certo: <td rowspan = 3 ou 3 >
14 XHTML - Continuação Cabeçalho de um documento XHTML Lista completa das tags XHTML
15 XHTML - IDEs Alguns interessantes ambientes para desenvolvimento em xhtml. Netbeans Eclipse Aptana Notepad++ Dreamweaver
16 HTML - Prática Definindo um projeto New > Web Project > Basic Template > Ok
17 HTML - Prática Adicionando o título <h1> e um paragrafo qualquer <p>.
18 HTML - Prática Experimente também utilizar tags como <b> e <i>, negrito e itálico respectivamente
19 HTML - Prática Utilizando a tag <a>, pode-se direcionar o usuário para outras páginas ou para seções dentro da própria página.
20 HTML - Prática Para carregar imagens utiliza-se a tag <img>, passando atributos da url (caminho) da imagem e opcionalmente o alt (texto complementar). Lembre de passar o caminho da imagem de acordo com a localização da página.
21 HTML - Prática Outro atributo importante é a <table> pra construção de tabelas. Esta tag utiliza outras duas tags <tr> e <td> para organizar as linhas e colunas.
22 HTML - Prática Formulários <form> são bastante utilizados em HTML para coletar dados. Dentro de cada formulário, pode haver várias tags <input> que serão de vários tipos e podem ter valores distintos. Como de costume, é sempre bom ter um editor que ofereça auxílio de código ou uma documentação HTML em mãos para entender todos os inputs e atributos.
23 HTML - Prática
24 HTML - Prática Os <iframe> permitem que você abra outras páginas dentro da sua página web. Além disso ele também é utilizado para incorporar materiais multimídia, como vídeos, jogo em flash, webservices (google maps) e etc.
25 HTML - Prática
26 CSS - Introdução Cascate Style Sheets Definem padrões de como elementos HTML serão mostrados ao usuário. Surgiram no HTML 4.0 como meio de resolver problemas de interface Permitem organizar estilos e estrutura de páginas web.
27 CSS - Organização A utilização de um CSS se dá por um arquivo separado ou por um bloco de comandos em parte da página através da tag <style>.
28 CSS - Organização Lembrando que por padrões de organização, é altamente recomendável que o CSS sempre fique em um arquivo separado do arquivo HTML. Para utilizar o arquivo CSS fora do documento HTML, basta linkar na página HTML com a tag <link>
29 CSS - Sintaxe A sintaxe do CSS é bastante simples, basicamente as são constituídas de seletores e declarações entre chaves ({ }) Propriedade Valor body { background-color: red; font-size: 20px; } Seletor Declaração Declaração
30 CSS - Sintaxe Exemplo: estilo.css pagina.html
31 CSS - Sintaxe O CSS também permite localizar e manipular elementos pelo seu atributo id e também criar e atribuir classes a estes elementos utilizando o atributo class. #id_do_elemento.nome_da_classe Seletor Seletor
32 CSS - Sintaxe ATENÇÃO!! Não escrever nomes de classes ou ids começando com números pelamordedeus!! O CSS, assim como o Javascript possui incopatibidade entre browsers, algumas coisas são permitidas por alguns, e outros não.
33 CSS - Sintaxe Exemplo
34 CSS - Sintaxe Beleza, mas qual a diferença entre class e id? Ambos funcionam da mesma maneira, no entanto, por padrões de boas práticas, utilizamos id em uma relação de 1-1 enquanto que no class utilizamos de 1-N, ou seja, uma classe X no CSS pode alterar muitos elementos que tenham o atributo class = X
35 CSS - Sintaxe #quadrado {...} 1..1 <div id= quadrado >.quadrado {...} 1..N <div class= quadrado > <p class= quadrado > <h1 class= quadrado >
36 CSS - Sintaxe É possível também utilizar a estrutura tag.nome_da_classe em um seletor CSS. Apenas as tags que tenham determinada classe irão sofrer as mudanças. Exemplo: div.quadrado {..} Quem se tornará um quadrado realmente, p ou div?
37 CSS - Sintaxe ATENÇÃO!! Não coloque espaço em valores que precisem especificar a unidade. Incompatibilidade de Browsers... Exemplo: Certo: font-size:20px Errado: font-size:20 px
38 CSS - Background Backgrounds ou fundo de tela, possuem vários sub-atributos, mais importantes: Background-color Background-image Background-repeat Background-position
39 CSS - Background Background-color, permite adicionar uma cor ao fundo de tela de um elemento. Os parâmetros podem ser passados através do nome da cor em inglês ou representação hexadecimal. Exemplo:
40 CSS - Background ATENÇÃO!! Quanto ao uso de cores, sempre é recomendável o uso de cores seguras para web, evitando erros na renderização de alguns browsers. Lista de cores seguras:
41 CSS - Background Background-image: adiciona uma imagem como fundo de um elemento. É representada por uma url onde indica o caminho da imagem local ou remoto.
42 CSS-Background
43 CSS-Background Caso a imagem seja menor que a área do elemento, ela irá se repetir até preencher toda a extensão do elemento. Imagem inicial
44 CSS-Background Para controlar a repetição de imagens, o atributo background-repeat pode ser utilizado. Podendo controlar se a repetição irá na horizontal ou vertical, ou se ela irá ou não acontecer de fato. Valores assumidos: no-repeat: não repete a imagem repeat-x: repete apenas na horizontal repeat-y: repete apenas na vertical repeat: repete vertical e horizontal (padrão)
45 CSS-Background Exemplo no-repeat: repeat-x: repeat-y:
46 CSS-Background Caso haja, a necessidade de posicionar o background, pode-se usar o atributo background-position, podendo indicar a posição inicial da imagem. Valores assumidos: bottom: abaixo right: direita left: esquerda top: acima É possível também a concatenação de valores (ex: direita e acima = right top)
47 CSS-Textos Texto são imprescindíveis na construção de páginas web. Eles são altamente customizáveis no CSS e possuem vários atributos, dentre os quais são: color: cor do texto text alignment: alinhamento do texto text decoration: decoração do texto (sublinhado, cortado, piscando..) text transformation: todas as letras minúsculas, maiúsculas, apenas a primeira letra maiúscula. text indentation: espaçamento no inicio do paragrafo em pixels.
48 CSS Textos Exemplo tudo-em-um:
49 CSS - Fontes Fontes são o tipo de forma que as letras do texto irão tomar. Fontes podem ser do tipo com serifa ou sem. Os que não tem serifa são mais fáceis para leitura. Alguns atributos: font-family: tipo da fonte (times, arial..) font-style: estilo (normal, itálico..) font-size: tamanho da fonte em pixels
50 CSS - Fontes ATENÇÃO!!! Ao escolher sua font-family, verifique a tabela de fontes seguras para web, evitando erros de renderização entre browsers. Tabelas de fontes seguras:
51 CSS - Fontes Exemplo completo:
52 CSS - Links Links possuem algumas características que indicam quando você já visitou o link, quando o mouse passa por cima, quando está ativo etc. É possivel customizar esses estado apenas mudando o seletor de um link: a:link {..} Link normal a:visited {..} Link visitado a:hover {..} Link com o mouse em cima a:active {..} Link ativo
53 CSS Atributos importantes Existem tambem outros atributos bastante importantes no uso do CSS. Eles são de extrema importancia na criação de layouts e posicionamento dos elementos CSS. Segue alguns: margin: espaçamento externo padding: espaçamento interno border: propriedades da borda width/height: largura/altura content: conteúdo
54 CSS Atributos importantes Esquema
55 CSS Atributos importantes Exemplo
56 CSS - Outros Existem vários outros elementos que possuem estados e podem ser editados via CSS. É claro que para ter um melhor domínio é fazendo uso de ferramentas que auxiliem a escrita de folhas de estilo. Muitas das IDEs já possuem auxilio ao CSS, cabe a cada um explorar mais estes elementos.
57 Javascript - Introdução Esta é uma das mais populares linguagens de programação para web. Baseado no ECMAScript. Tornou-se muito adotada pois é bastante leve, rápida e é suportada por todos os browsers existentes mais famosos no mercado.
58 Javascript - Características Dinâmica Linguagem fracamente tipificada Paradigmas funcional e OO MUITO diferente de Java Utiliza conceitos de prototipagem
59 Javascript - Sintaxe Exemplo
60 Javascript - Sintaxe O Javascript permite acessar a página html via um objeto chamado document. Com ele é possível acessar elementos da página como divs, links, etc. e alterá-los de acordo com o desejado em tempo de execução, sem precisa recarregar toda a página necessariamente.
61 Javascript - Sintaxe Exemplo
62 Javascript - Sintaxe O código javascript pode ser separado da página HTML, em um arquivo separado com extensão.js. É altamente recomendável fazer essa separação por padrões de organização de código. Para utilizar o arquivo separado basta utilizar a tag <script> para chama-lo dentro da página. Exemplo:
63 Javascript - Sintaxe Como não é uma linguagem fortemente tipificada, o conceito de variáveis é muito genérico. Uma variável é tratada como uma referência na memória e pode assumir várias formas (até mesmo de funções).
64 Javascript - Sintaxe Testem isso: Vai funcionar??
65 Javascript - Sintaxe Entendam funções no javascript como objetos. Cada função, quando chamada é instanciada (assim como um objeto) e passa a existir na memória, assim como variáveis criadas dentro dela. Estranho né? Veja um exemplo a seguir..
66 Javascript - Sintaxe Exemplo Resultado?
67 Javascript - Sintaxe O Javascript também admite instanciações de objetos (vulgo new Objeto() ) através do uso do new que nem em Java/C#. Mas com algumas pecularidades... Veja a seguir:
68 Javascript - Sintaxe user.name e name serão iguais??
69 Javascript - Sintaxe Condicionais não possuem muita diferença com outras linguagens, veja os exemplos:
70 Javascript - Sintaxe Loops também não diferem muito da linguagem Java:
71 Javascript - Sintaxe Basicamente o javascript, é utilizado da seguinte forma: Cria-se uma função Utiliza-se a função em eventos dos componentes onclick, onfocus, onselect.. Ou para alterar propriedades do design. document.getelement().innerhtml == blablabla
72 Javascript - Sintaxe Além disso é também utilizado para realizar chamadas AJAX (Assynchonous Javascript and XML), ou seja, acessar um serviço remotamente e mostrar ao usuário sem precisar recarregar toda a página HTML.
73 Javascript - Sintaxe Mostrar exemplo ajax
74 Javascript - Problemas Linguagem difícil de se aprender Pouca organização em relação a linguagens atuais (Java, C#..) O grande problema de Cross-Browser!! Não pense que seu código irá funcionar perfeitamente em todos os navegadores sem a devido teste! Isso é chato não é?
75 Javascript - JQuery Jquery é uma das mais famosas e utilizadas bibliotecas Javascript criadas inicialmente por John Resig. Simplifica a escrita e resolve a maioria dos problemas cross-browser Utiliza objeto próprio para fazer operações de forma efetiva e correta na maioria dos browsers
76 Jquery - Instalação Para instalar o jquery, basta fazer o download da biblioteca e adicioná-la na página web com a tag <script>
77 Jquery - Sintaxe A sintaxe do jquery se organiza de forma simples. $( div ).addclass( meucss ).show( slow ); Objeto JQuery Chamada de métodos concatenados
78 Jquery Seletores e Eventos Utilizando Jquery e expressões CSS e Xpath, podemos selecionar praticamente qualquer coisa de desejamos na página. Basta passar dentro do objeto do Jquery. Exemplo: $("#orderedlist").addclass("red"); $("#orderedlist > l i " ). addclass("blue");
79 Jquery Seletores e Eventos Se quisermos aplicar mudanças apenas quando o usuário passar o mouse em cima do link podemos utilizar a seguinte abordagem: $("#orderedlist li:last").hover(function() { $(this).addclass("green"); },function(){ $(this).r e m o v e C l a s s ("green"); });
80 Jquery Seletores e Eventos Caso a busca seja de multiplos objetos, o Jquery, tem um for implementado que otimiza nosso código. Vamos tentar: $ ( " # o r d e r e d l i s t " ). f i n d ( " l i " ). e a c h ( f u n c t i o n ( i ) { $(t h i s ). a p p e n d ( " A C H O U! " + i ); } ) ;
81 Jquery Seletores e Eventos Caso o Jquery ache mais de um elemento, ele retorna em forma de array, onde podemos selecionar como um array convencional: $ ( " # r e s e t " ). c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ) [ 0 ]. r e s e t ( ) ; } ) ; O método reset(), é do Javascript puro e ele reseta praticamente qualquer input ou form
82 Jquery Seletores e Eventos Este é para o caso de resetar todos os forms da página: $ ( " # r e s e t " ). c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ). e a c h ( f u n c t i o n ( ) { t h i s. r e s e t ( ) ; } ) ; } ) ; Pergunta: por quê não estamos utilizando $(this) acima?
83 Jquery Seletores e Eventos O Jquery também pode fazer buscas mais complexas como: $ ( " l i " ). n o t ( " : h a s ( ul) " ). c s s ( " b o r d e r ", " 1 p x s o l i d b l a c k " ) ; $ ( " a [ n a m e ] " ). c s s ( " b a c k g r o u n d ", b l u e " ) ; $ ( " a [ h r e f *=' / c o n t e n t / g a l l e r y ' ] " ). c l i c k ( f u n c t i on( ) { //f a ç a a l g o } ) ; Simples, não é?
84 Jquery Seletores e Eventos Criando um organizador de tópicos: $('#faq').find('dd').hide().end().find('dt'). click(function() { }); $(this).next().slidetoggle(); Conseguiram interpretar o código?
85 Jquery Seletores e Eventos Buscando por tags raiz de uma tag: $("a").hover(function(){ $(this).parents("p").addclass("highligh t "); },function(){ $(this).parents("p").removeclass("high light"); });
86 Jquery Usando Ajax Vamos ao exemplo prático!
87 Jquery Animando Jquery fornece funcionalidades para criar animações, ainda permite que você crie suas próprias animações. No website do jquery além de animações, existem vários outros plugins que podem ser muito úteis para determinados problemas.
88 Jquery Animando $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ }); $(".stuff").show('fast');
89 Jquery Animando Criando uma animação, exemplo: $("a").toggle( function(){ }); $(".stuff").animate({ height: ' hide', opacity: ' hide' }, 'slow'); }, function(){ $(".stuff").animate({ height: ' s h o w ', opacity: 'show' }, 'slow');
90 Jquery Utilizando plugins Plugins javascript são muito fáceis de se utilizar, basta baixar e salvar plugins com a extensão.js e importá-los na mesma página HTML do jquery utilizando a tag script. Como exemplo vamos utilizar o tablesorter plugin para organizar tabelas:
91 Jquery Utilizando plugins Após a chamada, o código do plugin já está integrado com o jquery. Basta chamar o método no código: $("#large").tablesorter(); $("#large").tablesorter({ }); widgets: [ ' z e b r a ' ]
92 Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima
CSS - Background, Color e Fontes. Prof. Bruno Medeiros [email protected] http://www.bruno.dump.com.br
Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros [email protected] http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades
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
Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1
Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem
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
Aula 5 Cabeçalhos, Imagens e Links
Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos
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
HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS
APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras
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
EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina
HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)
HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização
jquery Apostila Básica
jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO
Professor: Paulo Macos Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1
Professor: Paulo Macos Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem
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
MANUAL DE BOAS PRÁTICAS
MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail [email protected]. HTML
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
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
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
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:...
CSS - Parte 02. Prof. Marciano dos Santos Dionizio
CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio [email protected].
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio [email protected] #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
> Herbet Ferreira Rodrigues > [email protected]
Curso HTML & CSS > Herbet Ferreira Rodrigues > [email protected] Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
Web Design Aula 13: Introdução a CSS
Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene [email protected] Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas
7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
CSS Cascading Style Sheets Folhas de Estilo em Cascata
CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1
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.
WEBDESIGN. Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
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
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
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos
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
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Web Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene [email protected] Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Passa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
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
Posicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções.
13. Editor de leiautes Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. Neste capítulo uma breve explicação será apresentada sobre a organização
Desenvolvimento em Ambiente Web. HTML - Introdução
Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,
Introdução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael
CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:
Compêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.
3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao
CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: [email protected].
3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo
foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX
foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX é uma biblioteca Java Script crossbrowser desenvolvida para simplificar os scripts que interagem com a linguagem
WEBDESIGN. Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Novo projeto com NetBeans A partir de hoje, vamos trabalhar com projetos no NetBeans
4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e
Web Design Aula 02: HTML
Web Design Aula 02: HTML Professora: Priscilla Suene [email protected] Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando
Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.
Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés
Ferramentas Programáveis. Profº Ritielle Souza
Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline
Bem vindo ao ajuda do software QUICKFISH para criação de sites.
Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br [email protected] Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena! É engraçado como temos receio do novo. Me acostumei a desenvolver sites do zero, desde a primeira linha de código. Achava estranho
CRIAÇÃO DE SITES (AULA 7)
Prof. Breno Leonardo Gomes de Menezes Araújo [email protected] http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 7) CSS significa CascadingStyleSheetes(Folhas de Estilo em Cascata). Não seria ótimo
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
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
Programação para Internet
Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
WebDesign. Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual
Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO
MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas
Desenvolvimento de Sites. Subtítulo
Desenvolvimento de Sites Subtítulo Sobre a APTECH A Aptech é uma instituição global, modelo em capacitação profissional, que dispõe de diversos cursos com objetivo de preparar seus alunos para carreiras
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
Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
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
Apostila Site Personalizado
Apostila Site Personalizado Índice Para inserir informações sobre a empresa é utilizado o componente GERENCIADOR DE ARTIGOS. Através dele é possível inserir infomações como: - A EMPRESA - HISTÓRICO - ENDEREÇO
Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva
Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1
css Cascading Style Sheets CSS CASCADING STYLE SHEETS
css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação
NewAgent enterprise-brain
Manual NewAgent enterprise-brain Configuração Manual NewAgent enterprise-brain Configuração Este manual de uso irá ajudá-lo na utilização de todas as funções administrativas que a NewAgent possui e assim,
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
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
Unidade: O que é CSS? HTML e CSS? Boa aula!!!
Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação
Curso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...
Web Design Aula 01. No Caderno Responda as Questões abaixo
Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?
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
Banner Flutuante. Dreamweaver
Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir
ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes
ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando
Scriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
15. OLHA QUEM ESTÁ NA WEB!
7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER
Introdução à Cascading Style Sheets
Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas
Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.
3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao
Criando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa