SlideShare uma empresa Scribd logo
Implementação em
HTML e CSS
@richarley
Um bicho de sete cabeças!

* Implementar um site exige dedicação
* (Quase) ninguém decora todas as regras
* Processo desafiador e, por isso, divertido
Então, como domar esse bicho?

* Pesquisar
* Experimentar
* Testar
Fontes de referência
www.w3c.br (Português e Inglês)
* Site do Consórcio World Wide Web (W3C), que
desenvolve os padrões de linguagem para internet
* Principal fonte de referência sobre especificações
técnicas e orientações quanto aos padrões Web
* Uma série de publicações (inclusive em
português) de referência para acesso direto e
download em PDF
Fontes de referência
www.w3schools.com (Inglês)
* O mais completo guia de referência para
desenvolvimento Web
* Tutoriais e bibliotecas de referências para
diversas linguagens e tecnologias
* Muito organizado e fácil de pesquisar
Fontes de referência
pt-br.html.net (Português)
* Versão traduzida para português deste ótimo site
de referência para desenvolvimento Web
* Muitos tutoriais em português de HTML e CSS
básico
* Tutoriais de tecnologias mais recentes apenas em
inglês
Fontes de referência
tableless.com.br (Português)
* Um dos principais blogs brasileiros sobre boas
práticas de desenvolvimento Web
* Sempre atualizado com as principais novidades
do meio
* Tutoriais e publicações diversas
Fontes de referência
http://net.tutsplus.com/ (Inglês)
* Blog de tutoriais diversos
* Conteúdo básico e avançado para
desenvolvedores
* Sempre atualizado com ótimos tutoriais de
HTML e CSS
Fontes de referência
www.google.com.br
* Não limite sua busca ao idioma de português,
sempre tem alguma solução em inglês
* Sempre novos sites, blogs e profissionais
dispostos a compartilhar conhecimento
Frameworks
* Estruturas já pré montadas de HTML5 e CSS3
* Exige conhecimento de HTML e CSS para
implementação e personalização
* Facilita no desenvolvimento de sites dentro dos
padrões web mais atuais, incluindo layouts
“responsivos” (adaptáveis a diferentes dispositivos
e resoluções)
* Exemplos

Bootstrap - getbootstrap.com
Foundation - foundation.zurb.com
Guia do trabalho da AP2
* Mockup da página inicial em PSD (ou qualquer
arquivo .AI ou .PNG, organizado em camadas)
* Site implementado em HTML e CSS básico,
contendo:
- 1 pág. inicial;
- 1 pág. índice (do portfólio);
- 1 pág. de exemplo de um elemento do portfólio;
- 1 pág. de contato.
OBS.: Deve ter alguma parte reservada a falar SOBRE de
quem se trata o portfólio, com sua biografia resumida (Na
página inicial ou alguma página específica)
Guia do trabalho da AP2
* Prazos:
- Site deve ser publicado (tema da próxima aula) até o dia
29/11 para que eu possa acessá-lo antes da apresentação;
- Alterações e correções depois do site publicado PODEM
ser feitas;
- Apresentação no dia 02/12.

* Orientações extra-classe:
- Estarei online, disponível no Facebook e Gtalk, para tirar
dúvidas nos seguintes horários:
Dia 16/11 - De 10h30 às 12h00 / De 15h00 às 16h30
Dia 30/11 - De 10h30 às 12h00 / De 15h00 às 16h30

Mais conteúdo relacionado

Mais procurados

Apresentação do grupo PHPMS
Apresentação do grupo PHPMSApresentação do grupo PHPMS
Apresentação do grupo PHPMS
Bruno Fernandes "PorKaria"
 
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
Renato Groff
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
Agrupamento de Escolas da Batalha
 
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
Renato Groff
 
Páginas dinâmicas
Páginas dinâmicasPáginas dinâmicas
Páginas dinâmicas
Luciano Crecente
 
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: JavascriptMódulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Agrupamento de Escolas da Batalha
 
Introducao-ao-ambiente-web
Introducao-ao-ambiente-webIntroducao-ao-ambiente-web
Introducao-ao-ambiente-web
André Moraes
 
Introdução a Tecnologias Web
Introdução a Tecnologias WebIntrodução a Tecnologias Web
Introdução a Tecnologias Web
Álvaro Farias Pinheiro
 
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
Renato Groff
 
Introdução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para DrupalIntrodução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para Drupal
UTFPR
 
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
martasantos718
 
Apresentacao Do Grupo Phpms
Apresentacao Do Grupo PhpmsApresentacao Do Grupo Phpms
Apresentacao Do Grupo Phpms
zehzinho
 
Interop Day 2011 - Construindo aplicações web com WebMatrix
Interop Day 2011 - Construindo aplicações web com WebMatrixInterop Day 2011 - Construindo aplicações web com WebMatrix
Interop Day 2011 - Construindo aplicações web com WebMatrix
Fabrício Lopes Sanchez
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
Fabio Moura Pereira
 
HTML 5 & JavaScript
HTML 5 & JavaScriptHTML 5 & JavaScript
HTML 5 & JavaScript
Giolvani de Matos
 
ASP.NET Core 2.0 - NESS - Outubro/2017
ASP.NET Core 2.0 - NESS - Outubro/2017ASP.NET Core 2.0 - NESS - Outubro/2017
ASP.NET Core 2.0 - NESS - Outubro/2017
Renato Groff
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
Luiz Felipe Fernandes Machado Costa
 
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e BowerASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
tdc-globalcode
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 

Mais procurados (20)

Apresentação do grupo PHPMS
Apresentação do grupo PHPMSApresentação do grupo PHPMS
Apresentação do grupo PHPMS
 
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - OneDay - Junho/2017
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
 
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
ASP.NET Core e Linux - ASP.NET Core Day - Maio/2017
 
Páginas dinâmicas
Páginas dinâmicasPáginas dinâmicas
Páginas dinâmicas
 
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: JavascriptMódulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
 
Introducao-ao-ambiente-web
Introducao-ao-ambiente-webIntroducao-ao-ambiente-web
Introducao-ao-ambiente-web
 
Introdução a Tecnologias Web
Introdução a Tecnologias WebIntrodução a Tecnologias Web
Introdução a Tecnologias Web
 
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
ASP.NET Core e Linux: Explorando novas fronteiras - Araras Dev - Julho/2017
 
Introdução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para DrupalIntrodução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para Drupal
 
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
 
Apresentacao Do Grupo Phpms
Apresentacao Do Grupo PhpmsApresentacao Do Grupo Phpms
Apresentacao Do Grupo Phpms
 
Interop Day 2011 - Construindo aplicações web com WebMatrix
Interop Day 2011 - Construindo aplicações web com WebMatrixInterop Day 2011 - Construindo aplicações web com WebMatrix
Interop Day 2011 - Construindo aplicações web com WebMatrix
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
HTML 5 & JavaScript
HTML 5 & JavaScriptHTML 5 & JavaScript
HTML 5 & JavaScript
 
ASP.NET Core 2.0 - NESS - Outubro/2017
ASP.NET Core 2.0 - NESS - Outubro/2017ASP.NET Core 2.0 - NESS - Outubro/2017
ASP.NET Core 2.0 - NESS - Outubro/2017
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e BowerASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
ASP.NET 5 MVC Gerenciando dependencias com Nuget, NPM, Gulp e Bower
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 

Destaque

Guia Aberto Android ed.2
Guia Aberto Android ed.2Guia Aberto Android ed.2
Guia Aberto Android ed.2
Átila Camurça
 
Proyecto tic meli final corregido
Proyecto tic meli final corregidoProyecto tic meli final corregido
Proyecto tic meli final corregido
melisanz2
 
Rock and roll
Rock and rollRock and roll
Rock and roll
Paúl Bonilla
 
Cuento de Oceanía 7
Cuento de Oceanía 7Cuento de Oceanía 7
Cuento de Oceanía 7
amg0728
 
Tecnicas de motivacion en el estudio
Tecnicas de motivacion en el estudioTecnicas de motivacion en el estudio
Tecnicas de motivacion en el estudio
Ileana Hernandez
 
Trabajo praactico numero 5
Trabajo praactico numero 5Trabajo praactico numero 5
Trabajo praactico numero 5
Jose Sanchez Predovic
 
Torres angelica aa7_colordigital
Torres  angelica aa7_colordigitalTorres  angelica aa7_colordigital
Torres angelica aa7_colordigital
Angelica Torres
 
Descartes (2ª parte)
Descartes (2ª parte)Descartes (2ª parte)
Descartes (2ª parte)
bctrsp
 
20121029088
2012102908820121029088
Torres angelica aa5_lápices_de_color
Torres angelica aa5_lápices_de_colorTorres angelica aa5_lápices_de_color
Torres angelica aa5_lápices_de_color
Angelica Torres
 
Apresentação de Desenvolvimento e Negócios para Windows Phone
Apresentação de Desenvolvimento e Negócios para Windows Phone Apresentação de Desenvolvimento e Negócios para Windows Phone
Apresentação de Desenvolvimento e Negócios para Windows Phone
WebCarioca
 
Bacon el nuevo organo
Bacon el nuevo organoBacon el nuevo organo
Bacon el nuevo organo
César Ortiz
 
La nueva iglesia se diseño en las logias masónicas
La nueva iglesia se diseño en las logias masónicasLa nueva iglesia se diseño en las logias masónicas
La nueva iglesia se diseño en las logias masónicas
Muro del Honor Patriotico
 
Exposicion lilia
Exposicion liliaExposicion lilia
Exposicion lilia
Mariialamilla
 
Cartagena
CartagenaCartagena
Consejo de la judicatura notario
Consejo de la judicatura notarioConsejo de la judicatura notario
Consejo de la judicatura notario
STALUC
 
Pre proposta trabalho final
Pre proposta trabalho finalPre proposta trabalho final
Pre proposta trabalho final
Sergio Chaves
 
Rafaela
RafaelaRafaela
Horario clases 2013
Horario clases 2013Horario clases 2013
Horario clases 2013
Liceo Matovelle
 
Apresentaçao informatica
Apresentaçao informaticaApresentaçao informatica
Apresentaçao informatica
mirirogge
 

Destaque (20)

Guia Aberto Android ed.2
Guia Aberto Android ed.2Guia Aberto Android ed.2
Guia Aberto Android ed.2
 
Proyecto tic meli final corregido
Proyecto tic meli final corregidoProyecto tic meli final corregido
Proyecto tic meli final corregido
 
Rock and roll
Rock and rollRock and roll
Rock and roll
 
Cuento de Oceanía 7
Cuento de Oceanía 7Cuento de Oceanía 7
Cuento de Oceanía 7
 
Tecnicas de motivacion en el estudio
Tecnicas de motivacion en el estudioTecnicas de motivacion en el estudio
Tecnicas de motivacion en el estudio
 
Trabajo praactico numero 5
Trabajo praactico numero 5Trabajo praactico numero 5
Trabajo praactico numero 5
 
Torres angelica aa7_colordigital
Torres  angelica aa7_colordigitalTorres  angelica aa7_colordigital
Torres angelica aa7_colordigital
 
Descartes (2ª parte)
Descartes (2ª parte)Descartes (2ª parte)
Descartes (2ª parte)
 
20121029088
2012102908820121029088
20121029088
 
Torres angelica aa5_lápices_de_color
Torres angelica aa5_lápices_de_colorTorres angelica aa5_lápices_de_color
Torres angelica aa5_lápices_de_color
 
Apresentação de Desenvolvimento e Negócios para Windows Phone
Apresentação de Desenvolvimento e Negócios para Windows Phone Apresentação de Desenvolvimento e Negócios para Windows Phone
Apresentação de Desenvolvimento e Negócios para Windows Phone
 
Bacon el nuevo organo
Bacon el nuevo organoBacon el nuevo organo
Bacon el nuevo organo
 
La nueva iglesia se diseño en las logias masónicas
La nueva iglesia se diseño en las logias masónicasLa nueva iglesia se diseño en las logias masónicas
La nueva iglesia se diseño en las logias masónicas
 
Exposicion lilia
Exposicion liliaExposicion lilia
Exposicion lilia
 
Cartagena
CartagenaCartagena
Cartagena
 
Consejo de la judicatura notario
Consejo de la judicatura notarioConsejo de la judicatura notario
Consejo de la judicatura notario
 
Pre proposta trabalho final
Pre proposta trabalho finalPre proposta trabalho final
Pre proposta trabalho final
 
Rafaela
RafaelaRafaela
Rafaela
 
Horario clases 2013
Horario clases 2013Horario clases 2013
Horario clases 2013
 
Apresentaçao informatica
Apresentaçao informaticaApresentaçao informatica
Apresentaçao informatica
 

Semelhante a Implementação html e css

Wordpress - Montagem de temas
Wordpress - Montagem de temasWordpress - Montagem de temas
Wordpress - Montagem de temas
Valter Rodrigues
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
Náiron Jcg
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
Ubiratan Z. do Nascimento
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
Paulo Mattos
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
NoSQL na nuvem: utilizando o DocumentDB
NoSQL na nuvem: utilizando o DocumentDBNoSQL na nuvem: utilizando o DocumentDB
NoSQL na nuvem: utilizando o DocumentDB
Renato Groff
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
Renato Groff
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
Horacio Diamante Mondlane
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Arlindo Santos
 
T@rget trust asp.net
T@rget trust   asp.netT@rget trust   asp.net
T@rget trust asp.net
Targettrust
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
Willian Marques
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
Dickson Henrique Justino Daniel
 

Semelhante a Implementação html e css (20)

Wordpress - Montagem de temas
Wordpress - Montagem de temasWordpress - Montagem de temas
Wordpress - Montagem de temas
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
NoSQL na nuvem: utilizando o DocumentDB
NoSQL na nuvem: utilizando o DocumentDBNoSQL na nuvem: utilizando o DocumentDB
NoSQL na nuvem: utilizando o DocumentDB
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
Tecnologias Microsoft em Linux: .NET Core, SQL Server e Visual Studio Code - ...
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
T@rget trust asp.net
T@rget trust   asp.netT@rget trust   asp.net
T@rget trust asp.net
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
 

Mais de Richarley Menescal

Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
Richarley Menescal
 
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
Richarley Menescal
 
Texturas para games
Texturas para gamesTexturas para games
Texturas para games
Richarley Menescal
 
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
Richarley Menescal
 
Web analytics
Web analyticsWeb analytics
Web analytics
Richarley Menescal
 
E commerce
E commerceE commerce
E commerce
Richarley Menescal
 
Brief(ing) digital
Brief(ing) digitalBrief(ing) digital
Brief(ing) digital
Richarley Menescal
 
Planejamento estratégico digital
Planejamento estratégico digitalPlanejamento estratégico digital
Planejamento estratégico digital
Richarley Menescal
 
Marketing viral nos meios digitais
Marketing viral nos meios digitaisMarketing viral nos meios digitais
Marketing viral nos meios digitais
Richarley Menescal
 
Estratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociaisEstratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociais
Richarley Menescal
 
Co-criação na web
Co-criação na webCo-criação na web
Co-criação na web
Richarley Menescal
 
Imagens para web
Imagens para webImagens para web
Imagens para web
Richarley Menescal
 
Cores para web
Cores para webCores para web
Cores para web
Richarley Menescal
 
Fundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout webFundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout web
Richarley Menescal
 

Mais de Richarley Menescal (14)

Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 2 da Workshop "Mídias sociais para criativos: como se di...
 
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
Apresentação - Parte 1 da Workshop "Mídias sociais para criativos: como se di...
 
Texturas para games
Texturas para gamesTexturas para games
Texturas para games
 
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
Las Características de la Convergencia Digital en los Nuevos Sistemas de Entr...
 
Web analytics
Web analyticsWeb analytics
Web analytics
 
E commerce
E commerceE commerce
E commerce
 
Brief(ing) digital
Brief(ing) digitalBrief(ing) digital
Brief(ing) digital
 
Planejamento estratégico digital
Planejamento estratégico digitalPlanejamento estratégico digital
Planejamento estratégico digital
 
Marketing viral nos meios digitais
Marketing viral nos meios digitaisMarketing viral nos meios digitais
Marketing viral nos meios digitais
 
Estratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociaisEstratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociais
 
Co-criação na web
Co-criação na webCo-criação na web
Co-criação na web
 
Imagens para web
Imagens para webImagens para web
Imagens para web
 
Cores para web
Cores para webCores para web
Cores para web
 
Fundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout webFundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout web
 

Implementação html e css

  • 1. Implementação em HTML e CSS @richarley
  • 2. Um bicho de sete cabeças! * Implementar um site exige dedicação * (Quase) ninguém decora todas as regras * Processo desafiador e, por isso, divertido
  • 3. Então, como domar esse bicho? * Pesquisar * Experimentar * Testar
  • 4. Fontes de referência www.w3c.br (Português e Inglês) * Site do Consórcio World Wide Web (W3C), que desenvolve os padrões de linguagem para internet * Principal fonte de referência sobre especificações técnicas e orientações quanto aos padrões Web * Uma série de publicações (inclusive em português) de referência para acesso direto e download em PDF
  • 5. Fontes de referência www.w3schools.com (Inglês) * O mais completo guia de referência para desenvolvimento Web * Tutoriais e bibliotecas de referências para diversas linguagens e tecnologias * Muito organizado e fácil de pesquisar
  • 6. Fontes de referência pt-br.html.net (Português) * Versão traduzida para português deste ótimo site de referência para desenvolvimento Web * Muitos tutoriais em português de HTML e CSS básico * Tutoriais de tecnologias mais recentes apenas em inglês
  • 7. Fontes de referência tableless.com.br (Português) * Um dos principais blogs brasileiros sobre boas práticas de desenvolvimento Web * Sempre atualizado com as principais novidades do meio * Tutoriais e publicações diversas
  • 8. Fontes de referência http://net.tutsplus.com/ (Inglês) * Blog de tutoriais diversos * Conteúdo básico e avançado para desenvolvedores * Sempre atualizado com ótimos tutoriais de HTML e CSS
  • 9. Fontes de referência www.google.com.br * Não limite sua busca ao idioma de português, sempre tem alguma solução em inglês * Sempre novos sites, blogs e profissionais dispostos a compartilhar conhecimento
  • 10. Frameworks * Estruturas já pré montadas de HTML5 e CSS3 * Exige conhecimento de HTML e CSS para implementação e personalização * Facilita no desenvolvimento de sites dentro dos padrões web mais atuais, incluindo layouts “responsivos” (adaptáveis a diferentes dispositivos e resoluções) * Exemplos
 Bootstrap - getbootstrap.com Foundation - foundation.zurb.com
  • 11. Guia do trabalho da AP2 * Mockup da página inicial em PSD (ou qualquer arquivo .AI ou .PNG, organizado em camadas) * Site implementado em HTML e CSS básico, contendo: - 1 pág. inicial; - 1 pág. índice (do portfólio); - 1 pág. de exemplo de um elemento do portfólio; - 1 pág. de contato. OBS.: Deve ter alguma parte reservada a falar SOBRE de quem se trata o portfólio, com sua biografia resumida (Na página inicial ou alguma página específica)
  • 12. Guia do trabalho da AP2 * Prazos: - Site deve ser publicado (tema da próxima aula) até o dia 29/11 para que eu possa acessá-lo antes da apresentação; - Alterações e correções depois do site publicado PODEM ser feitas; - Apresentação no dia 02/12. * Orientações extra-classe: - Estarei online, disponível no Facebook e Gtalk, para tirar dúvidas nos seguintes horários: Dia 16/11 - De 10h30 às 12h00 / De 15h00 às 16h30 Dia 30/11 - De 10h30 às 12h00 / De 15h00 às 16h30