Tel: (21) 2557.3810
O curso mais completo de XHTML e CSS do mercado aborda todos os aspectos necessários para a criação de páginas em conformidade com as recomendações do W3C.
Como único centro de treinamento filiado ao W3C, o iLearn oferece a mais completa abordagem de como implementar layouts com as melhores práticas de mercado.
Ao final deste curso o aluno saberá criar páginas aplicando as técnicas mais atuais e estará preparado para provas de concursos públicos, que em sua totalidade estão exigindo estes conhecimentos.
Próximas Turmas
| Frequencia | Turno | Data Inicio | Data Fim |
|---|---|---|---|
| 2as., 4as. e 6as. | Noite | 13/09/2010 | 29/09/2010 |
| Sábado | Integral | 02/10/2010 | 23/10/2010 |
| 2as., 4as. e 6as. | Manhã | 15/10/2010 | 01/11/2010 |
Pré-requisitos
- Noções Basicas de Internet
- Domínio do windows
Carga horária
32 horas
Ementa
- Unidade 1: Apresentação do curso
- Unidade 2: ferramentas utilizadas durante o curso
- Navegadores
- Ferramentas de edição de código
- Plugins importantes para o desenvolvimento de sites
- Considerações para os desenvolvedores em Mac e Linux
- Unidade 3: Introdução ao (X)HTML
- O poder dos Web Standards
- Linguagens de marcação
- As recomendações do W3C
- Elementos e atributos do (X)HTM
- Incluindo comentários no (X)HTML
- Porque usar o XHTML
- Unidade 4: Principais elementos estruturais
- Anatomia de uma página
- Elemento "head"
- Elemento "body"
- Raiz do documento
- Unidade 5: Como os Padrões Web são importantes para o SEO
- O que é SEO
- O que é relevante para o Google e que só os Padrões Web podem ajudar
- Exemplos de importância de uma boa marcação para o SEO
- Unidade 6: Declaração “DOCTYPE”
- Como escolhendo o DOCTYPE adequado ao seu projeto
- Criando um documento “HTML 4.01 Transictional”
- Criando um documento “HTML 4.01 Strict”
- Criando um documento “HTML 4.01 Frameset”
- Criando um documento “XHTML 1.0 Transictional”
- Criando um documento “XHTML 1.0 Strict”
- Criando um documento “XHTML 1.0 Frameset”
- Criando um documento “XHTML 1.1”
- Prática para fixar o conteúdo - Exercício
- Unidade 7: Validando seu código
- Por que validar código (X)HTML?
- Quais outras tecnologias que podem tirar proveito de um código válido
- Quais as vantagens de ter um código validado?
- Como validar um código
- Interpretando o relatório fornecido pelo validador do W3C
- Incluindo o selo do W3C em documentos válidos
- Prática para fixar o conteúdo - Exercício
- Por que validar código (X)HTML?
- Unidade 8: Introdução ao CSS
- Definição de CSS
- Os dispositivos que implementam CSS
- Vantagens obtidas com CSS
- Separando o conteúdo da formatação
- unidade 9: A sintaxe do CSS
- A estrutura elementar de uma folha de estilo
- Seletores, atributos e valores
- Criando Regras de estilo
- Criando Declarações de estilo
- Criando Seletores simples e complexos
- Seletor simples
- Seletor do tipo “id”
- Seletor do tipo “class”
- Seletores agrupados
- Seletores descendentes
- Seletores de contexto
- Outros tipos de seletores
- Considerações sobre IE e Firefox
- unidade 10: Como testar meu CSS em outros navegadores
- Navegadores e dispositivos modernos
- Analisando as estatísticas
- Compreendendo o novo cenário
- Desenvolvendo para múltiplos dispositivos
- Considerações sobre o Internet Explorer
- Considerações sobre o FireFox
- Como instalar várias versões do IE em Windows XP e Windows Vista
- Como renderizar os diversos navegadores com Mac e Linux
- Ferramentas para análise de layout em diversos navegadores diferentes
- unidade 11: Elementos complementares ao "head"
- Elemento "Title"
- Dados sobre dados: o elemento “meta”
- Estudos dos mais principais "metas"
- Elemento “script”
- CSS Interno x CSS Externo X CSS Inline
- Vinculando regras de estilo "CSS" a um documento
- Elemento “link”
- Elemento “style”
- Elemento @import
- Aplicando regras de estilo diretamente em um elemento
- Prática para fixar o conteúdo - Exercício
- Elemento "Title"
- unidade 12: Elemento “body”
- Como podemos usar o elemento body para incorporar estilo a minha página?
- Exemplos de mercado
- unidade 13: Tipos de mídia
- Os diferentes tipos de mídia
- Especificando um tipo de mídia via elemento link e @import
- Criando um CSS para impressão
- Imprimindo e analisando as diferenças
- Considerações especiais sobre a mídia de impressão e celula
- unidade 14: CSS - Propriedades de background
- Definindo a cor de fundo de uma página
- Definindo a imagem para o fundo de uma página
- Configurando o posicionamento da imagem de fundo
- Configurando as propriedades de repetição da imagem de fundo
- Configurando o comportamento do background em relação ao “scroll” da página
- Considerações sobre o background de uma página
- O papel do background em sites modernos
- Fazendo arte com background
- Tipos de layouts e considerações sobre background
- Unidade 15: Natureza dos elementos
- Conceito importante sobre elementos: “inline”, “block” e “empty”
- Conceito importante sobre elementos: “inline”, “block” e “empty”
- unidade 16: XML
- Introdução ao XML
- Sintaxe e regras do XML
- Aplicações práticas do XML
- unidade 17: Elementos complementares ao "body" - início
- Preocupando-se com a semântica
- A hierarquia dos elementos: “h1”, “h2”, “h3”, “h4”, “h5” e “h6”
- Elemento “p”
- Como o XHTML pode ajudar na acessibilidade para deficientes visuais
- Elemento “br”
- Elemento “hr”
- Prática para fixar o conteúdo - Exercício
- unidade 18: Formatando texto com CSS
- Definindo a cor de um texto
- Definindo a direção de um texto
- Definindo o espaçamento entre as letras de uma palavra
- Definindo o alinhamento de um texto
- Definindo as propriedades de decoração
- Criando recuos de texto
- Transformando letras maiúsculas em minúsculas
- unidade 19: Inserindo multimídia ao (X)HTML
- O elemento "Object"
- Inserindo vídeo do Youtube válido em seu código
- Inserindo vídeo do Vimeo válido em seu código
- Inserindo Flash válido em seu código
- unidade 20: Formatando fonte com CSS
- Definindo a família da fonte
- Definindo o tamanho da fonte
- Definindo o estilo da fonte
- Definindo a variação da fonte
- Definindo a espessura da fonte
- Definindo a entrelinhas
- Unidade 21: Criando links
- Sintaxe do elemento “a” e seus atributos
- Criando links para pontos específicos na mesma página
- Criando links para pontos específicos de outros documentos
- Criando links para download de arquivos
- Analise da criação de link para logomarca em um site
- Trabalhando com links e CSS
- Prática para fixar o conteúdo - Exercício
- Unidade 22: Inserindo imagens em um documento
- Padrões de tipos de imagens: Bitmap x Vetor
- Tipos de imagens bitmaps possíveis na Web
- Tipos de imagens vetoriais na Web
- SVG
- Flash
- Formatos e compressão de imagem para web
- Aspectos do elemento “img” e seus atributos
- O atributo “alt” e sua importãncia
- Truques para fazer uma imagem carregar mais rápido
- Mapeamento de imagens
- Ferramentas de auxílio ao mapeamento de imagens
- Como usar o mapeamento de imagens com acessibilidade ao deficientes visuais
- Como o CSS pode trabalhar com imagens.
- Análise e considerações importantes
- unidade 23: Técnicas de CSS para uso de imagens e acessibilidade
- Usando a técnica Image Replacement
- Considerações sobre acessibilidade usada nesta técnica
- Prática para fixar o conteúdo - Exercício
- unidade 24: Listas
- Criando listas não ordenadas
- Elemento “ul”
- Criando ítens de lista com o elemento “li”
- Criando listas ordenadas: elemento “ol”
- Criando listas de definição: elemento “dl”
- Criando um termo: elemento “dt”
- Criando uma descrição: elemento “dd”
- unidade 25: Formatando listas com CSS
- Tipos de estilos às listas com CSS (diversos tipos de marcadores)
- Criando marcadores personalizados com imagens
- Posicionando marcadores
- Técnicas para a criação de menus com listas
- Exemplos de mercado
- unidade 26: Trabalhando e formatando bordas
- Definindo a espessura de uma borda
- Definindo o estilo de uma borda
- Definindo a cor de uma borda
- Bordas como elemento de depuração de código
- Unidade 27: Construindo tabelas
- Quando e porque criar tabelas
- A semãntica de uma tabela
- Usando tabelas com eficiência
- Tabelas e softwares de acessibilidade para deficientes visuais
- Criando o elemento raiz: Elemento “table”
- Criando linhas: Elemento “tr”
- Criando células: Elemento “td”
- Criando cabeçalhos: Elemento “th”
- Criando seções com os elementos “tbody”, “thead” e “tfoot
- Descrevendo a tabela com o elemento “caption”
- Unidade 28: Formatando tabelas com CSS
- Formatando as bordas
- Formatando os espaços
- Formatando as cores de fundo
- Criando variações de formatação
- Usando pseudo-classes para criar efeitos de destaque
- Prática para fixar o conteúdo - Exercício
- Unidade 29: Construindo formulários
- Exemplos de formulários e casos de uso
- Criando o elemento raiz de um formulário: elemento “form”
- Criando campos de texto, de senha e botões com o elemento “input”
- Criando listas de opções com os elementos “select” e “option”
- Criando botões de opção com o tipo “radiobutton”
- Criando caixas de seleção com o tipo “checkbox”
- Criando áreas de texto com o elemento “textarea”
- Criando variáveis escondidas com o tipo “hiden”
- Criando campo de upload de arquivos (fotos, doc, pdf, etc) com o elemento “file”
- Criando o botão de enviar dados
- Prática para fixar o conteúdo - Exercício: Enviando dados reais por um formulário e recebendo resposta
- Exemplos de formulários e casos de uso
- unidade 30: Formatando formulários simples com CSS
- Planejando e preparando um formulário para ser formatado
- Formatando formulários simples com CSS
- unidade 31: Incrementando a Semântica e acessibilidade de um documento
- Enfatizando um trecho de texto com os elementos “em” e “strong”
- Criando abreviações com o elemento “abbr”
- Criando acrônimos com o elemento “acronym”
- Criando citações longas com o elemento “blockquote"
- Criando citações curtas e epigrafes com o elemento “q” e “cite”
- Criando endereços com o elemento “address”
- Unidade 32: Formatando um layout em CSS - básico
- Elementos genéricos para criar divisões
- Elementos genéricos e formatação
- Divisões “inline” e “block”
- Criando divisões com o elemento “div”
- Criando divisões com o elemento “span”
- Elementos genéricos para criar divisões
- unidade 33: Definindo as dimensões de um elemento
- Definindo a largura de um elemento de forma absoluta e relativa
- Definindo a altura de um elemento de forma absoluta e relativa
- Unidade 34: Criando margens
- Definindo a margem de um elemento
- Definindo a margem de um elemento
- Unidade 35: Criando espaçamentos internos
- Definindo o espaçamento interno de um elemento
- Unidade 36: Pseudo classes
- Formatando link
- Formatando um elemento baseado em sua posição
- Definindo o idioma para um elemento específico
- Unidade 37: Pseudo elementos
- Formatando a primeira letra de um texto
- Formatando a primeira linha de um texto
- Inserindo conteúdo antes de um elemento
- Inserindo conteúdo depois de um elemento
- Formatando a primeira letra de um texto
- unidade 38: Propriedades de posicionamento
- Compreendendo o fluxo normal de um documento
- Os diferentes tipos de posicionamentos
- Elementos estáticos
- Posicionando elementos de forma relativa
- Posicionando elementos de forma absoluta
- Fixando elementos
- Análise de viabiidade nos diversos navegadores
- Unidade 39: Propriedades de classificação
- Definindo a visibilidade de um elemento
- Determinando se um elemento será exibido como um “bloco” ou uma “linha”
- Especificando o tipo de posicionamento de um elemento no fluxo de um documento
- Considerações na aplicação de layouts
- Definindo a visibilidade de um elemento
- unidade 40: Analisando o modelo de caixas (box model) do W3C
- Criando para o “box model” padrão
- Criando para o “box model” quebrado
- Usando uma solução unificada que atende aos dois tipos de “box model”
- Exercício prático: Como resolver o problema do Box Model em um layout fornecido
- Criando para o “box model” padrão
- Unidade 41: Trabalhando com Hacks
- O que são e para que servem os hacks?
- Usar hacks com economia, cautela e organização
- O que são e para que servem os hacks?
- unidade 42: Planejando a criação de layout comercial
- Soluções práticas para os principais tipos de layout
- Layouts fixos ou flexíveis, quando utilizá-los?
- Análise das diversas variações de layout possíveis
- Construindo layouts fixos de uma, duas e três colunas
- Layouts centralizados
- Layouts alinhados a esquerda e a direita
- Construindo layouts flexíveis de uma, duas e três colunas
- Preparando portfolio comercial
- unidade 43: Formatação avançada
- Comando Float
- Comando Clear
- Comando Overflow
- unidade 44: Mais importante que todos
- !important
- !important
- unidade 45: Formatação avançada de listas com CSS
- Criando um menu vertical de mercado com CSS
- Escolha do site com o menu a ser reproduzido em sala
- Produção do menu escolhido
- Técnica “swap image” para troca de imagens sem uso de Javascript
- Aplicando a técnica “swap image” na construção do menu vertical
- Construindo um menu de navegação horizontal
- Usando imagens sem comprometer a semântica e a acessibilidade de um projeto
- Acelerando o carregamento de imagens
- Qual é a melhor abordagem para os softwares leitores de tela?
- Vantagens desta técnica sobre as ultrapassadas técnicas de “slices”
- Aspectos de acessibilidade
- Aspectos de usabilidade
- Aspectos de flexibilidade
- Aspectos de portabilidade
- Aplicando a técnica
- Exercicio: Construindo uma galeria de imagens (ex: página para exibir produtos)
- Vantagens da técnica sobre a tradicional abordagem com tabelas
- Aspectos de acessibilidade
- Aspectos de usabilidade
- Aspectos de flexibilidade
- Aspectos de portabilidade
- Aplicando a técnica
- unidade 46: Formatação avançada de Formulários com CSS
- Formatando formulários complexos com elementos de acessibilidade
- Exemplos de formulários complexos
- Formatando formulários complexos com elementos de acessibilidade
- Unidade 47: Elementos e práticas obsoletos
- Porque alguns elementos e práticas são contra indicados
- Quais são as conseqüências de se usar elementos e práticas obsoletos
- Atributos e elementos de formatação no HTML
- Atributos ultrapassados: “align”, “bgcolor”, “background”, “bgproperties”, “text”, “link”, “vlink” e “alink”
- Elementos ultrapassados: “font”, “b”, “i”, “s”, “u”
- Abolir o elemento “font”
- O elemento “font” e suas conseqüências prejudiciais
- Porque o elemento “font” foi largamente usado no passado?
- Frames nunca mais! e seus problemas com acessibilidade
- Porque os frames são contra indicados pelo prisma da acessibilidade
- Porque os frames são contra indicados pelo prisma da usabilidade
- Mapas de imagem e acessibilidade
- Sobre mapas de imagem
- Alternativas para os mapas de imagem
- Unidade 48: Dicas e considerações finais
Cadastre-se e receba nossas promoções e informativos!
Indique este Site
Indique este Site
Home |
Quem Somos |
Cursos |
Formações |
Calendário |
Cadastro |
Localização |
Fale conosco |
FAQ |
Mapa do Site
iLearn - Travessa do Ouvidor, 17 - 3º andar - Centro - Rio de Janeiro - RJ - Tel. e Fax: 21 2557.3810
Horário de atendimento da Secretaria: segunda à sexta das 9h30 às 13h e 14h30 às 17h30.
Copyright © 2003-2009 iLearn Educação e Informática
Horário de atendimento da Secretaria: segunda à sexta das 9h30 às 13h e 14h30 às 17h30.
Copyright © 2003-2009 iLearn Educação e Informática