Introdução a Wordpress - David Arty - SENAC
16
Camadas Web Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados Tableless Camadas Web Exemplo: Camadas Web • Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); • Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...) • Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...) seletor { propriedade: valor; } Camadas Web O CSS foi uma revolução no design para web. - controle do layout de vários documentos a partir de uma simples folha de estilos; - controle preciso do layout; - aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.); - avançadas técnicas de desenvolvimento - separa a estrutura do design - agilidade e peformace Camadas Web CSS - Cascading Style Sheets (folha de estilos em cascata) Camadas Web Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address> Camadas Web Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div> Camadas Web HTML é semântica não é design Camadas Web Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas Web Camadas Web Desenvolvimento Web David Arty Camadas Web Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados Tableless Camadas Web Exemplo: Camadas Web • Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); • Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...) • Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...) seletor { propriedade: valor; } Camadas Web O CSS foi uma revolução no design para web. - controle do layout de vários documentos a partir de uma simples folha de estilos; - controle preciso do layout; - aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.); - avançadas técnicas de desenvolvimento - separa a estrutura do design - agilidade e peformace Camadas Web CSS - Cascading Style Sheets (folha de estilos em cascata) Camadas Web Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address> Camadas Web Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div> Camadas Web HTML é semântica não é design Camadas Web Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc Java Script DINAMISMO FORMA CONTEÚDO CSS HTML Camadas Web Camadas Web Desenvolvimento Web David Arty
-
Upload
david-arty -
Category
Internet
-
view
136 -
download
0
description
Apresentação para aulas de Wordpress ministradas no SENAC SP
Transcript of Introdução a Wordpress - David Arty - SENAC
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
CMS: CMS é a abreviatura de Content Management System
ou Gerenciamento de Conteúdo.
O que é CMS?
São plataformas que lhe permitem criar sites dinâmicos, com banco de dados, com gestão de conteúdo, sem a necessidade de se ter conhecimento sólidos em linguagem de programação. Com o CMS podemos produzir, armazenar ou administrar conteúdos de forma dinâmica, através da internet de qualquer lugar.
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
CMS: CMS é a abreviatura de Content Management System
ou Gerenciamento de Conteúdo.
O que é CMS?
São plataformas que lhe permitem criar sites dinâmicos, com banco de dados, com gestão de conteúdo, sem a necessidade de se ter conhecimento sólidos em linguagem de programação. Com o CMS podemos produzir, armazenar ou administrar conteúdos de forma dinâmica, através da internet de qualquer lugar.
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
Existem CMS Open Source ou de código fechado, pagos ou gratuitos. Existem vários CMS por aí e para todo tipo de projeto e gosto. Os CMS mais famosos são os Wordpress, Joomla e Drupal
O que é CMS?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
Existem CMS Open Source ou de código fechado, pagos ou gratuitos. Existem vários CMS por aí e para todo tipo de projeto e gosto. Os CMS mais famosos são os Wordpress, Joomla e Drupal
O que é CMS?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Suporte a múltiplos usuários : registro, gerenciamento e atribuição de responsabilidades. • Edição de conteúdo simplificada. • As funcionalidades iniciais podem ser ampliadas ou novas podem ser adicionadas através de plugins e/ou módulos. • Gerenciamento de versão dos conteúdos (publicação, revisão, arquivamento e exclusão de documentos).
Porque usar CMS?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Suporte a múltiplos usuários : registro, gerenciamento e atribuição de responsabilidades. • Edição de conteúdo simplificada. • As funcionalidades iniciais podem ser ampliadas ou novas podem ser adicionadas através de plugins e/ou módulos. • Gerenciamento de versão dos conteúdos (publicação, revisão, arquivamento e exclusão de documentos).
Porque usar CMS?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O que é o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O que é o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
É um CMS feito em PHP e MySQL inicialmente densenvolvido para a criação de blogs. É um poderoso CMS gratuito. É utilizado por milhões de sites no mundo todo e por várias grandes empresas.
O que é Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
É um CMS feito em PHP e MySQL inicialmente densenvolvido para a criação de blogs. É um poderoso CMS gratuito. É utilizado por milhões de sites no mundo todo e por várias grandes empresas.
O que é Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Por que usar o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Por que usar o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• O wordpress é super fácil de instalar • O wordpress é super fácil de usar • O wordpress é pré-otimizado (SEO, por exemplo) • Existem milhares de recursos • Integração com Redes Sociais • A comunidade é grande e extremamente ativa
Porque Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• O wordpress é super fácil de instalar • O wordpress é super fácil de usar • O wordpress é pré-otimizado (SEO, por exemplo) • Existem milhares de recursos • Integração com Redes Sociais • A comunidade é grande e extremamente ativa
Porque Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Wordpress é o CMS mais utlizado no mundo
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Wordpress é o CMS mais utlizado no mundo
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• É personalizável • Existem milhares de temas • É Open Source • É responsivo • É relativamente confiável e tem frequentes atualizaçãos de bugs • É disponível em português
Porque Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• É personalizável • Existem milhares de temas • É Open Source • É responsivo • É relativamente confiável e tem frequentes atualizaçãos de bugs • É disponível em português
Porque Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Desvantagens Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Desvantagens Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Necessário servidor PHP • Não existem regras eorganização no desenvolvimento de plugins pela comunidade • Como foi criado para blogs, a hierarquia das páginas e sua manipulação por vezes pode ser difícil dependendo do tipo de site
Desvantagens Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Necessário servidor PHP • Não existem regras eorganização no desenvolvimento de plugins pela comunidade • Como foi criado para blogs, a hierarquia das páginas e sua manipulação por vezes pode ser difícil dependendo do tipo de site
Desvantagens Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O que eu posso fazer com o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O que eu posso fazer com o Wordpress?
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Blogs • Sites • E-Commerces • Redes Sociais • Diretórios • Fóruns
O que eu posso fazer com Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Wordpress - Introdução
• Blogs • Sites • E-Commerces • Redes Sociais • Diretórios • Fóruns
O que eu posso fazer com Wordpress?Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O céu é o limite Tudo depende da sua capacidade criativa
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
O céu é o limite Tudo depende da sua capacidade criativa
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
www.davidarty.com www.chiefofdesign.com.br
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
www.davidarty.com www.chiefofdesign.com.br
