Linguagem Visual I

Introduo ao PHPOO e CSS

Resoluo tarefa formulrios

Introduo a Orientao a Objeto

Programao estruturada

Forma de programao onde todos os programas so

desenvolvidos sob trs estruturas: sequncia, deciso e
iterao (ou repetio).
Orientada a objeto
Forma de programao que visa um pensamento o mais
prximo possvel da vida rea

Objeto
Devemos ter em mente que tudo em nosso cotidiano
um objeto.
Considerando a chave na imagem, podemos
ressaltar algumas caractersticas.

Objeto Pessoa
Podemos dizer que uma pessoa um objeto porque toda a
pessoa possui caractersticas muito parecidas, porm, cada
pessoa nica!

Cor do cabelo
Tipo do cabelo
Cor dos olhos
Formato dos olhos
Dimenso do sorriso

Classes e objetos
Os objetos de nosso mundo, nosso domnio, sero
identificado dentro de nossos programas como classes.
As classes, como representantes dos objetos, tambm
possuem um comportamento e caractersticas.

Cria uma Classe

Conveno de nomes para classes

O ideal que voc sempre d nomes significativos para suas classes,
refletindo bem o que determinado objeto desse tipo representa em seu
sistema. Por esse motivo bastante recomendado que voc no use
muitas abreviaes ao declarar seu nome.

Alm disso, por padro, uma classe deve comear com letra maiscula e
ter seu case alterado a cada nova palavra (o
famoso CamelCase ou CamelCaps).

resultado

Classes e objetos so a mesma coisa?

completamente natural confundir esses dois
conceitos no incio, mas fundamental saber
distinguir o que classe e o que objeto.
Vimos que uma classe como um prottipo, um
molde para criar um objeto de determinado tipo.

Classes e objetos
Uma analogia interessante comparar uma classe com
uma receita de bolo. A pergunta certeira: voc come uma
receita de bolo? No.
Precisamos instanci-la, criar um objeto bolo a partir dessa
especificao (a classe) para utiliz-la. Podemos criar
centenas de bolos a partir dessa classe (a receita, no caso),
eles podem ser bem semelhantes, alguns at idnticos,
mas so objetos diferentes.

Introduo ao CSS

O que deixa uma pgina web bonita?

o CSS Cascading Style Sheets(Folhas de Estilo em
Cascata). Pense nele como a pele e a maquiagem que
cobre os ossos de HTML.

Fonte: http://chiefofdesign.com.br/css/

Sintaxe

CSS

<style>
p{
text-align: justify;
color: red;
font-family: Verdana, Arial, sans-serif;
}

h6 {
font-size: 30px;
}
h2{
font-size: 15px;
}
</style>

Lembra do Word?

As propriedades bsicas para fontes

Use as propriedades abaixo para personalizar o

texto

Exemplo:

h3 {
font-family: Times new Roman, serif;
font-style: italic;
font-weight: bolder;
font-size: 50px;
}

Tipos de fontes

Unidades
Medida relativa (%, em , rem)

So medidas calculadas em relao a uma outra unidade de medida. Usar

unidades de medidas relativas mais apropriado para se obter ajustes em
diferentes tipos de mdia. (por exemplo: ajustar de uma tela de monitor para um
smartphone).
Medida absoluta (px, pt, cm)
So medidas que no esto referenciadas a qualquer outra unidade. So as
unidades de medida de comprimento definidas nos sistemas de medidas pela
fsica, tais como, centmetro, polegada, etc... e a unidade pixel para o ngulo
visual. So indicadas para serem usadas quando as mdias de exibio so
perfeitamente conhecidas.

Cor do texto

Nome da cor em ingls.

Crie uma pasta em Meus Documentos

Nome da pasta: BlogReceitas

No arquivo index.html no notepad+ digite o

texto abaixo, utilizando as tags adequadas

1. Na sua pasta BlogReceitas crie uma pasta para imagens

2. Pesquise no google uma imagem de arroz carreteiro
3. Baixe para o computador e salve dentro dessa pasta

Use a tag img para inserir a foto escolhida no seu site

No esquea de colocar o atributo alt

Hora do CSS

Cor em hexadecimal

Cor em hexadecimal
Olhem no site: http://erikasarti.net/html/tabela-cores/

Resultado

Altera marcador da lista

As propriedades para textos so as listadas a seguir

Coloque na tag style

Pratique
Pargrafo
Altere para fonte: Cursiva;
Aumente a fonte para 30px;
Altere a cor para #696969
Ttulos
Altere a cor para #B22222
Adicione a fonte Script MT Bold
Imagem
Coloque e largura em 70%
Comente a altura
Link
Altere para cor
Lista ordenada
Retire o marcador da lista

Altere todos os valores do CSS criado.

Personalize a vontade e mostre o resultado
ao professor.

Site recomendado: http://www.maujor.com/