SlideShare uma empresa Scribd logo
1 de 18
www.profroneysousa.blogspot.com.br
WEB DESIGNER
Introdução ao conteúdo • software • codigos
O que é um WEB DESIGNER
• O web designer é o profissional que desenvolve front-end de páginas
web.
• É o responsável pela beleza, harmonia, suavidade, diagramação, entre
outros artigos gráficos disponíveis.
O que é Front-end?
• Em programação existem dois termos principais, BACK-END e FRONT-
END.
• Front-END, é o visual enxergado pelos usuários e clientes, ou seja a
frente do site, é a parte de aparência do site.
• O BACK-END, é o código desenvolvido pelo programador para o site
ter uma função, fazer alguma coisa, é a parte pensante do site.
O que vamos aprender?
• Hospedagem de site
• HTML 5
• CSS 3
• Jquery
• PHP programado (Introdução)
Como ter o site na internet
• Para ter um site na internet, On-line, precisamos ter um Domínio, e
um servidor de hospedagem(HOST).
• Domínio é o endereço do site:
• www.domínio.com.br
• O WWW. Quer dizer WORD WIDE WEB, Rede de alcance mundial.
• O domínio é o nome do site.
• Domínio não pode conter acentos ou caracteres especiais.
• Existem alguns domínios especiais como o, .gov, .edu, .mil, que são
para sites governamentais, esses domínios não podem ser comprados
por qualquer pessoa.
Terminações
TERMINAÇÃO ENTIDADE
.AERO EMPRESA DE TRANSPORTE AERO
.BIZ BUSINESS NEGOCIO
.COM COMERCIAL, COMUNICAÇÃO
.EDU EDUCAÇÃO
.GOV GOVERNAMENTAL
.INFO INFORMAÇÃO
.JUS PODER JUDICIARIO
.MIL FORÇAS ARMADAS
.NET PROVEDOR DE INTERNET
.ORG ORGANIZAÇÃO SEM FINS LUCRATIVOS
HOST - HOSPEDAGEM
• A hospedagem é o local onde seu site fica hospedado.
Kkkk.
• É um espaço em um disco rígido de um computador
alugado ou comprado por você para armazena todos os
arquivos/dados do seu site.
• Muitas empresas alugam esses espaços, mas temos que
tomar cuidado e procurar com cuidado.
• Siga o link abaixo desse slide, ele te levara para um dos
melhores sites de hospedagens.
HTML 5
• O HTML não é linguagem de programação e sim uma linguagem
de marcação de hipertexto.
• Ou seja, o HTML é composto por TAG, que indicam Início e fim
de uma área onde vamos marcar alguma coisa..
• Por exemplo, na versão 5, existe uma tag para marcar a cabeça
do site, chama-se HEAD, existe uma para marcar o corpo
chamada BODY. Entre outras que vamos aprender.
• O HTML já foi uma linguagem para marcação e formatação, mas
isso hoje em dia não existe mais, agora usamos um folha de
estilos.
CSS
• O CSS, ou Cascade Style Sheet, ou folha de estilho em cascata, ou
ainda folha de estilho, serve para estilizar o código HTML.
• Com a invenção do CSS ficou muito mais leve e fácil criar o seu site,
pois o CSS usa um documento separado para estilizar ou formatar
seu site.
• Ou seja, o documento de marcação informando onde vai ficar cada
coisa fica em um documento, e as cores, fonte, dimensões, ficam
em outro documento.
• No CSS 3 além de formatar, também aplica-se alguns “Especiais”.
• Também é com o CSS3 que fazemos os sites RESPONSIVOS, sites
que adaptam a qualquer dispositivos.
??Bootstrap??
• Bootstrap é um framework front-end que facilita a vida dos
desenvolvedores web a criar sites com tecnologia mobile (responsivo)
sem ter que digitar uma linha de CSS para “fazer e acontecer”.
• Não é a toa que o termo “Bootstrap” em inglês significa “inicialização”,
algo que possui um ponto de partida..
• Além disso, o Bootstrap possui uma diversidade de componentes
(plugins) em JavaScript (jQuery) que auxiliam o designer a
implementar: tootlip, menu-dropdown, modal, carousel, slideshow,
entre outros sem a menor dificuldade, apenas acrescentando algumas
configurações no código, sem a necessidade de criar scripts e mais
scripts.
JQuery
• O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no
sentido “escrever menos, fazer mais”.
PHP- o elefante azul
• O PHP é uma linguagem de programação, ou seja é o BACK-END do
site.
• O Php pode ser PHP estruturado ou Orientado Objeto.
• Não pense que essa linguagem é apenas para construir sites, mas sim
para a construção de sistemas inteligentes, e com o uso de banco de
dados.
CMS - Custom Management System
• CMS Sistema de Gerenciamento de Conteúdo, são sistemas prontos, e pré-
montados, para gerenciamentos de sites.
• Normalmente consegue-se montar um site sem ajuda de um web designer,
o que tem derrubado muito a credibilidade dos profissionais, pois tem
muitos criando sites com CMS muito inferior aos preços de mercado.
• Mas lembre-se, para fazer modificações mais avançadas, é necessário o
conhecimento de HTML e CSS.
Vamos iniciar!?
Softwares necessários
• Para Criar arquivos em HTML, CSS ou Jquery, você vai precisar apenas
de um editor de textos simples e um navegador de internet.
• Então nessa primeira aula vamos utilizar o bloco de notas do
Windows, ou equivalente, e o Google Chrome, ou algum navegador
atualizado, como nosso navegador padrão.
Iniciando
• Crie uma pasta com o nome “Primeira aula”, iremos salvar nossos arquivos da
aula de hoje dentro da mesma.
• Abra o bloco de notas e vamos salvar seguindo os passos abaixo.
• O nome do arquivo deve ser index.html, sempre a primeira página deve carregar
esse nome.
1
2
3
4 5 6
Conhecendo TAG’s
TAG’s Utilização
<doctype html> Informa o tipo do documento, nesse caso HTML 5
<html>...</html> Abertura e fechamento do documento HTML
<head> ... </head> A tag que marca o espaço para informações do site
<title> ... </title> Tag para o título do site.
<body> ... </body> Tag para o corpo do site.
Digite
• A tag <meta charset=“UTF-8”>
serve para especificar o uso de
caracteres especiais, como
acentos.
• Aperte Ctrl+S.
• Vá até a pasta e abra o arquivo
em algum navegador.

Mais conteúdo relacionado

Mais procurados

Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas webarturramisio
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Principios do design
Principios do designPrincipios do design
Principios do designIuri Lammel
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?Sidney Roberto
 
Fundamentos básicos do Design gráfico
Fundamentos básicos do Design gráficoFundamentos básicos do Design gráfico
Fundamentos básicos do Design gráficonfeio
 

Mais procurados (20)

Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Principios do design
Principios do designPrincipios do design
Principios do design
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Aula 06 - Sistema Binário
Aula 06 - Sistema BinárioAula 06 - Sistema Binário
Aula 06 - Sistema Binário
 
Editores de texto
Editores de textoEditores de texto
Editores de texto
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Lógica de Programação
Lógica de ProgramaçãoLógica de Programação
Lógica de Programação
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
 
Informática Básica - Aula 04 - Software
Informática Básica - Aula 04 - SoftwareInformática Básica - Aula 04 - Software
Informática Básica - Aula 04 - Software
 
Fundamentos básicos do Design gráfico
Fundamentos básicos do Design gráficoFundamentos básicos do Design gráfico
Fundamentos básicos do Design gráfico
 
Teste PowerPoint
Teste PowerPointTeste PowerPoint
Teste PowerPoint
 

Semelhante a Aula 01- web designer

Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao WordpressAline Corso
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
E book conhecendo-o-wordpress
E book conhecendo-o-wordpressE book conhecendo-o-wordpress
E book conhecendo-o-wordpressJosé Salomão
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHPRangel Javier
 
Padrões Web & Code Standard
Padrões Web & Code StandardPadrões Web & Code Standard
Padrões Web & Code StandardToni Albuquerque
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPFlávio Lisboa
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp RioFellyph Cintra
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Rafael Pazini
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)Carlos Santos
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 

Semelhante a Aula 01- web designer (20)

Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
 
Wordpress
WordpressWordpress
Wordpress
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
E book conhecendo-o-wordpress
E book conhecendo-o-wordpressE book conhecendo-o-wordpress
E book conhecendo-o-wordpress
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
 
Aula 6
Aula 6Aula 6
Aula 6
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Padrões Web & Code Standard
Padrões Web & Code StandardPadrões Web & Code Standard
Padrões Web & Code Standard
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
Aula 6
Aula 6Aula 6
Aula 6
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 

Mais de Roney Sousa

Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney Sousa
Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney SousaAula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney Sousa
Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney SousaRoney Sousa
 
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney Sousa
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney SousaAula 01 - Curso de Suporte Técnico - IPD - Professor Roney Sousa
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney SousaRoney Sousa
 
Primeiro contato 2019
Primeiro contato 2019Primeiro contato 2019
Primeiro contato 2019Roney Sousa
 
03 php - operadores relacionais
03   php - operadores relacionais03   php - operadores relacionais
03 php - operadores relacionaisRoney Sousa
 
02 php - operadores de atribuição
02   php - operadores de atribuição02   php - operadores de atribuição
02 php - operadores de atribuiçãoRoney Sousa
 
01 php - introdução ao php
01   php - introdução ao php01   php - introdução ao php
01 php - introdução ao phpRoney Sousa
 
08 algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2
08   algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 208   algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2
08 algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2Roney Sousa
 
07 algoritmo - eSTRUTURA DE REPETIÇÃO
07   algoritmo - eSTRUTURA DE REPETIÇÃO07   algoritmo - eSTRUTURA DE REPETIÇÃO
07 algoritmo - eSTRUTURA DE REPETIÇÃORoney Sousa
 
Internet aula 04
Internet aula 04Internet aula 04
Internet aula 04Roney Sousa
 
Lógica de Programação - Algoritmos
Lógica de Programação - AlgoritmosLógica de Programação - Algoritmos
Lógica de Programação - AlgoritmosRoney Sousa
 
Hospedando site em host gratuito
Hospedando site em host gratuitoHospedando site em host gratuito
Hospedando site em host gratuitoRoney Sousa
 
Como instalar sublime text 3
Como instalar sublime text 3Como instalar sublime text 3
Como instalar sublime text 3Roney Sousa
 

Mais de Roney Sousa (20)

Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney Sousa
Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney SousaAula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney Sousa
Aula 02 - Curso de Suporte Técnico - Eletricidade - Professor Roney Sousa
 
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney Sousa
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney SousaAula 01 - Curso de Suporte Técnico - IPD - Professor Roney Sousa
Aula 01 - Curso de Suporte Técnico - IPD - Professor Roney Sousa
 
Primeiro contato 2019
Primeiro contato 2019Primeiro contato 2019
Primeiro contato 2019
 
03 php - operadores relacionais
03   php - operadores relacionais03   php - operadores relacionais
03 php - operadores relacionais
 
02 php - operadores de atribuição
02   php - operadores de atribuição02   php - operadores de atribuição
02 php - operadores de atribuição
 
01 php - introdução ao php
01   php - introdução ao php01   php - introdução ao php
01 php - introdução ao php
 
08 algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2
08   algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 208   algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2
08 algoritmo - eSTRUTURA DE REPETIÇÃO PARTE 2
 
07 algoritmo - eSTRUTURA DE REPETIÇÃO
07   algoritmo - eSTRUTURA DE REPETIÇÃO07   algoritmo - eSTRUTURA DE REPETIÇÃO
07 algoritmo - eSTRUTURA DE REPETIÇÃO
 
Internet aula 04
Internet aula 04Internet aula 04
Internet aula 04
 
06 algoritmo
06   algoritmo06   algoritmo
06 algoritmo
 
03 windows
03   windows03   windows
03 windows
 
05 algoritmo
05   algoritmo05   algoritmo
05 algoritmo
 
04 algoritmo
04   algoritmo04   algoritmo
04 algoritmo
 
03 algoritmo
03   algoritmo03   algoritmo
03 algoritmo
 
01 Windows
01 Windows01 Windows
01 Windows
 
02 algoritmo
02   algoritmo02   algoritmo
02 algoritmo
 
Lógica de Programação - Algoritmos
Lógica de Programação - AlgoritmosLógica de Programação - Algoritmos
Lógica de Programação - Algoritmos
 
Aula 01 - IPD
Aula 01 - IPDAula 01 - IPD
Aula 01 - IPD
 
Hospedando site em host gratuito
Hospedando site em host gratuitoHospedando site em host gratuito
Hospedando site em host gratuito
 
Como instalar sublime text 3
Como instalar sublime text 3Como instalar sublime text 3
Como instalar sublime text 3
 

Último

COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASMarcio Venturelli
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfInocencioHoracio3
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx2m Assessoria
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx2m Assessoria
 

Último (8)

COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 

Aula 01- web designer

  • 2. O que é um WEB DESIGNER • O web designer é o profissional que desenvolve front-end de páginas web. • É o responsável pela beleza, harmonia, suavidade, diagramação, entre outros artigos gráficos disponíveis.
  • 3. O que é Front-end? • Em programação existem dois termos principais, BACK-END e FRONT- END. • Front-END, é o visual enxergado pelos usuários e clientes, ou seja a frente do site, é a parte de aparência do site. • O BACK-END, é o código desenvolvido pelo programador para o site ter uma função, fazer alguma coisa, é a parte pensante do site.
  • 4. O que vamos aprender? • Hospedagem de site • HTML 5 • CSS 3 • Jquery • PHP programado (Introdução)
  • 5. Como ter o site na internet • Para ter um site na internet, On-line, precisamos ter um Domínio, e um servidor de hospedagem(HOST). • Domínio é o endereço do site: • www.domínio.com.br • O WWW. Quer dizer WORD WIDE WEB, Rede de alcance mundial. • O domínio é o nome do site. • Domínio não pode conter acentos ou caracteres especiais. • Existem alguns domínios especiais como o, .gov, .edu, .mil, que são para sites governamentais, esses domínios não podem ser comprados por qualquer pessoa.
  • 6. Terminações TERMINAÇÃO ENTIDADE .AERO EMPRESA DE TRANSPORTE AERO .BIZ BUSINESS NEGOCIO .COM COMERCIAL, COMUNICAÇÃO .EDU EDUCAÇÃO .GOV GOVERNAMENTAL .INFO INFORMAÇÃO .JUS PODER JUDICIARIO .MIL FORÇAS ARMADAS .NET PROVEDOR DE INTERNET .ORG ORGANIZAÇÃO SEM FINS LUCRATIVOS
  • 7. HOST - HOSPEDAGEM • A hospedagem é o local onde seu site fica hospedado. Kkkk. • É um espaço em um disco rígido de um computador alugado ou comprado por você para armazena todos os arquivos/dados do seu site. • Muitas empresas alugam esses espaços, mas temos que tomar cuidado e procurar com cuidado. • Siga o link abaixo desse slide, ele te levara para um dos melhores sites de hospedagens.
  • 8. HTML 5 • O HTML não é linguagem de programação e sim uma linguagem de marcação de hipertexto. • Ou seja, o HTML é composto por TAG, que indicam Início e fim de uma área onde vamos marcar alguma coisa.. • Por exemplo, na versão 5, existe uma tag para marcar a cabeça do site, chama-se HEAD, existe uma para marcar o corpo chamada BODY. Entre outras que vamos aprender. • O HTML já foi uma linguagem para marcação e formatação, mas isso hoje em dia não existe mais, agora usamos um folha de estilos.
  • 9. CSS • O CSS, ou Cascade Style Sheet, ou folha de estilho em cascata, ou ainda folha de estilho, serve para estilizar o código HTML. • Com a invenção do CSS ficou muito mais leve e fácil criar o seu site, pois o CSS usa um documento separado para estilizar ou formatar seu site. • Ou seja, o documento de marcação informando onde vai ficar cada coisa fica em um documento, e as cores, fonte, dimensões, ficam em outro documento. • No CSS 3 além de formatar, também aplica-se alguns “Especiais”. • Também é com o CSS3 que fazemos os sites RESPONSIVOS, sites que adaptam a qualquer dispositivos.
  • 10. ??Bootstrap?? • Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS para “fazer e acontecer”. • Não é a toa que o termo “Bootstrap” em inglês significa “inicialização”, algo que possui um ponto de partida.. • Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jQuery) que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.
  • 11. JQuery • O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no sentido “escrever menos, fazer mais”.
  • 12. PHP- o elefante azul • O PHP é uma linguagem de programação, ou seja é o BACK-END do site. • O Php pode ser PHP estruturado ou Orientado Objeto. • Não pense que essa linguagem é apenas para construir sites, mas sim para a construção de sistemas inteligentes, e com o uso de banco de dados.
  • 13. CMS - Custom Management System • CMS Sistema de Gerenciamento de Conteúdo, são sistemas prontos, e pré- montados, para gerenciamentos de sites. • Normalmente consegue-se montar um site sem ajuda de um web designer, o que tem derrubado muito a credibilidade dos profissionais, pois tem muitos criando sites com CMS muito inferior aos preços de mercado. • Mas lembre-se, para fazer modificações mais avançadas, é necessário o conhecimento de HTML e CSS.
  • 15. Softwares necessários • Para Criar arquivos em HTML, CSS ou Jquery, você vai precisar apenas de um editor de textos simples e um navegador de internet. • Então nessa primeira aula vamos utilizar o bloco de notas do Windows, ou equivalente, e o Google Chrome, ou algum navegador atualizado, como nosso navegador padrão.
  • 16. Iniciando • Crie uma pasta com o nome “Primeira aula”, iremos salvar nossos arquivos da aula de hoje dentro da mesma. • Abra o bloco de notas e vamos salvar seguindo os passos abaixo. • O nome do arquivo deve ser index.html, sempre a primeira página deve carregar esse nome. 1 2 3 4 5 6
  • 17. Conhecendo TAG’s TAG’s Utilização <doctype html> Informa o tipo do documento, nesse caso HTML 5 <html>...</html> Abertura e fechamento do documento HTML <head> ... </head> A tag que marca o espaço para informações do site <title> ... </title> Tag para o título do site. <body> ... </body> Tag para o corpo do site.
  • 18. Digite • A tag <meta charset=“UTF-8”> serve para especificar o uso de caracteres especiais, como acentos. • Aperte Ctrl+S. • Vá até a pasta e abra o arquivo em algum navegador.