Estatus Informática – Manutenção de computadores e Desenvolvimento de sites.

Alievi sites agora é ESTATUS Informática, vamos trabalhar com:

. Montagem e Manutenção de computadores
- Formatação
- Instalação de Sistema Operacional (Windows, Linux)
- Softwares diversos
- Antívirus
- Codecs Audio e Vídeo
e muito mais….

Seu PC pronto pra trabalhar e se divertir!!!

. Desenvolvimento de sites
- Site para sua empresa
- Site pessoal
- Portfólio
- Portais

Solução web completa para você ou sua empresa.

Visite: www.estatus.com.br
Região: Francisco Beltrão – PR
Jair – (46) 8805-6675
Marcos – (46) 9105-7137

Vídeo Aula como Fazer Layout Site Photoshop CS2 + CSS

Vocês poderão acompanhar o desenvolvimento de um Layout (modelo) de site no Photoshop CS 2, com topos, menus, conteúdo e rodapé. Quero fazer essa vídeo aula completa, desde o Photoshop até a montagem do mesmo no Dreamwaver, usando CSS.

Espero que todos q irem assistindo essas vídeo-aulas postem aqui seus comentários, sejam eles bons ou ruins, isso só vai fazer com que eu melhore cada vez mais meus trabalhos.

Observação: Algumas vídeo-aulas não possuem audio, mas são de fácil entendimento, só acompanhar.

Links para download:
Como Fazer Layout Site Photoshop  – 1
Como Fazer Layout Site Photoshop  – 2
Como Fazer Layout Site Photoshop  – 3
Preparar Layout Site Photoshop – 4
Montando Layout Site – Parte 5.1
Montando Layout Site – Parte 5.2
Montando Layout Site – Parte 5.3
Montando Layout Site – Parte 5.4 (Menus horizontais CSS)

Construindo um Website Básico no Photoshop e Montando no Dreamweaver em 4 vídeos

Vídeo-aula dividido em 4 partes.  Antes tinha separado uma vídeo-aula pra cada posts, reuni as 4 em um único post para facilitar a vida de vocês, mas ainda continuo com os post separados por aula se desejarem.

1ª parte - Construção do topo (cabeçalho) do site no phtotoshop.
2ª parte – Construindo os menus no Photoshop.
3ª parte - Desenvolvendo o rodapé no photoshop.
4ª parte – Montando a página no dreamweaver 8.

Abaixo segue os links dos videos:
Para uma resolução melhor do vídeo, estou colocando a disposição de vocês o link para download do mesmo com uma ótima resolução no formato swf.´
Antes que me perguntem, os vídeos não têm audio, mas são de fácil compreensão, só acompanhar e fazer.

Link para download da parte 01.
Link para download da parte 02.
Link para download da parte 03.
Link para download da parte 04.

» Link único Rapidshare

» Link único Easy-Share

Curso desenvolvido por Jair Alievi

O que é CSS (Cascading Style Sheets) e qual vantagem de ser usado?

OLá a todos. Um bom tempo sem escrever um post, volto a todo vapor e espero que consiga terminar o que estou iniciando. A pedidos de várias pessoas e alunos vou disponibilizar no blog conteúdos sobre CSS. Quero deixar claro a todos que também sou um aprendiz e que me ajudem comentando para que eu possa melhorar meu trabalho e de muitos que vierem visitar nossos posts. Vou tentar expôr de uma maneira fácil de ser entendida para que possa não deixá-los com dúvidas a respeito desse conteúdo. Sem enrolação então vamos a nossa introdução.

Não sou o primeiro a falar sobre CSS. Muitos blogs e sites defendem a muito tempo essa linguagem. Linguagem? É isso mesmo. Linguagem de estilo:

“Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.” Wikipédia

A idéia do CSS, como diz a citação anterior, é separar a formatação do site de seu conteúdo, trabalhando-os separadamente mas que tenham uma ligação entre si, através de um link. É craido um documento, ou melhor, uma folha de estilo com a extensão .css a qual iremos definir cores, tamanhos de fontes e blocos, títulos, subtítulos, bordas, espaços e etc.

Desenvolvimento de sites – ALIEVI

Alievi Desenvolvimento de sites - Portfólio

Cada vez mais as pessoas procuram estar em contato com esse novo universo, a utilização da internet esta crescendo cada vez mais, não somente dentro das empresas, mas dentro dos lares. O celular (tecnologia móvel) e outros aparelhos também estão tomando conta do mercado e o número de acessos a páginas por meio de computadores e aparelhos móveis está em grande alta. As pessoas a um clique encontram a informação que buscam. E se sua empresa não estiver na telinha quando alguém precisar de seus serviços?

Um site expõe idéias, serviços e entretenimento 24 horas ao dia durante 365 dias. A qualquer momento o seu cliente encontrará seus serviços e informações sobre sua empresa sem ter que sair de casa.

ALIEVI soluções trabalha para manter a sua empresa vista com bons olhos e transformar seu site em um meio de marketing poderoso para conquistar cada vez mais clientes em um território sem limites, o mundo.

Temos uma equipe experiente na área de desenvolvimento de sites, equipe formada por webdesigners e programadores que sempre estão em busca de aperfeiçoamento e novas têndencias que o mercado exige. Que busca satisfazer nossos clientes com sites leves atentando para acessibilidade e usabilidade buscando se adptar aos padrões web, além de trabalhar o conteúdo e estrutura para que buscadores encontrem de maneira mais fácil seu site na internet.

Deixar seu site em nossas mãos, é garantia de sucesso.

Obrigado.
Jair Alievi

Desenhando olho realista no Photoshop

Olho realista photoshop - ALIEVI

 Ola galera, depois de um bom tempo e pouco tempo pra atualizar meu blog, fiz mais uma vídeo aula do photoshop. É claro que não vou abandonar o blog, só peço desculpas pelo tempo de demora pra atualizá-lo, muito trabalho por aqui. Fiz esse vídeo baseado num tuto que tinha visto uma vez, mas ñ achei mais nem o link, era apenas imgens e texto e em inglês. Trago pra vocês em vídeo. Aproveitem e podem comentar. Ha! se alguém souber de um servidor melhor que o easy-share e que seja grátis pode me mandar dicas, eu aceito, realmente ta ficando ruim de hospedar no easy-share.

Abraço a todos.

• Formato do arquivo: Flash / .rar
  Tamanho: 103,21MB
  Autor: Jair Alievi
  Clique aqui para fazer o download.:
  Parte 1 - 95,78 MB
  Parte 2 – 7,43 MB

Novo Kit para Concurso Caixa Econômica e BB

Para o pessoal que está se preparando para concursos. Vai aí um Kit para estudarem.

Novo Kit de apostilas para o concurso da Caixa Econômica Federal e Banco do Brasil abordando os seguintes temas:

• Língua Portuguesa
• Noções de Informática
• Matemática
• Noções de Ética
• Conhecimentos Bancários
• Conhecimentos Gerais

 

• Tamanho: 44 MB
• Idioma: Português
• Formato: PDF | DOC
• Download: Rapidshare
• Créditos: BaixeBr

Fazendo Tabelas HTML – aula 6

Iniciaremos uma tabela usando as tags <table> e finalizamos usando </table>

<table>…</table>

A seguir vamos separar ela em linhas e células (colunas).

Para criarmos as linhas usaremos as tags <tr> …linha… </tr>, e para cada linha faremos as colunas usando <td>..célula ..</td>. Segue exemplo:

<table>
<tr>
        <td>Linha 01, célula 01</td>
        <td>Linha 01, célula 02</td>
        <td>Linha 01, célula 03</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Fica assim:

Linha 01, célula 01	Linha 01, célula 02	Linha 01, célula 03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Para definir uma largura usaremos widht e para altura height e border para inserir a espessura da borda da tabela:

Para a tabela toda:

<table widht=”770px “  height=”430px”  border=”1”>   - largura de 770 pixel`s por altura de 430 pixel`s </table>

Para a célula:

<td width=”270 px” height=”50px” border=”1”>…….</td>

 Como faço para chegar ao resultado a seguir:

Linha 01, célula 01, 02  03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Todos nós sabemos que são 3 células em cada linha. Vamos juntar essas 3 células da primeira linha usando colspan formando uma única célula:

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

E para juntarmos duas células em uma mesma coluna?

Linha 01, célula 01
Linha 02, célula 01 Linha 03, célula 01	Linha 02, célula 02	Linha 02, célula 03
	Linha 03, célula 02	Linha 03, célula 03

 

Agora usaremos rowspan , no exemplo acima foi juntado as células 01 e 01 das linhas 02 e 03:

Na célula 01 da linha 02 digitaremos rowspan=”2” para juntarmos as duas células, e na linha 3 eliminaremos a célula 01.

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td rowspan=”2”>Linha 02 – célula 01, Linha 03 – célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>     
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Espaçamento:

cellspacing: para inserir um espaço entre cada célula;

cellpadding: espaço entre a borda da tabela e o texto dentro da célula.

<table cellpadding=”5px” cellspacing=”5px”>…..</table>

Jair Alievi

Montando Layout Site – Parte 5.4 (Menus horizontais CSS)

Agora sim, o que faltava para nosso layout ficar pronto. Menus em forma de lista utilizando css. Os tipo de listas vocês encontram no post “Criando LIstas HTML – aula 5″, já no nosso exemplo de site, foi feito em Xhtml. Espero que gostem!

Podem comentar a vontade!

Informações:
Montando Layout Site – Parte 5.4 (menus horizontais+css)
Compactado: Winrar
Windows Media Player
Tamanho: 8,79 Mb
Autor: Jair Alievi
Link para download: Easy-share

Criando Listas HTML – aula 5

Seugue abaixo como criar listas utilizando html, tem o código e o resultado:

Lista Numerada (ordenada) :

<ol>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ol>

Fica assim:

1. Item 01
2. Item 02
3. Item 03
4. Item 04
5. Item 05
6. Item 06

Lista Não-numerada (Não-ordenada) :

<ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ul>

Fica assim:

• Item 01
• Item 02
• Item 03
• Item 04
• Item 05
• Item 06

Lista de Glossário:

<DL> Indica o início de uma lista em forma de um glossário
<DT>Termo a ser definido
<DD>Definição do termo

<dl>
          <dt>O que faz a tag UL ?</dt>
                  <dd>Cria uma lista com marcadores</dd>
          <dt>O que faz a tag OL ?</dt>
                  <dd>Cria uma lista ordenada utilizando números<dd>
</dl>

Fica assim:

O que faz a tag UL ?

Cria uma lista com marcadores

O que faz a tag OL ?

Cria uma lista ordenada utilizando números

 Misturando:

<dl>
<dt>Termo a ser definido</dt>
<dd>Definição do termo</dd>
         <ol>
                 <li>Item numerado 01</li>
                <li>Item numerado 02</li>
                       <ul>
                               <li>Item não ordenado (marcadores)</li>
                       </lu>
               <li>Item numerado 03</li>
         </ol>
<dt>Termo à definir</dt>
<dd>Definição do termo</dd>
</dl>

Fica assim: 

Termo a ser definido

Definição do termo

1. Item numerado 01
2. Item numerado 02
   • Item não ordenado (marcadores) 
3. Item numerado 03

Termo à definir

Definição do termo

Bom, é isso, essas listas vão ser muito úteis quando forem desenvolver páginas utilizando css, utilizadas muito para criação de menus.

Jair Alievi

Montando Layout Site – Parte 5.3 “Final”

Até que enfim, última parte do nosso site, espero que gostem e deixem seus comentários. Vídeo-aula com aúdio explicativo. Ótimo para quem está começando em CSS, e dessa forma podemos evoluirmos juntos. Em breve vem os menus em css.

Informações:
Montando Layout Site – Parte 5.3 (dreamweaver+css)
Compactado: .rar
Windows Media Player
Tamanho: 47,1 Mb
Autor: Jair Alievi
Link para download: HotShare.

Link 2 para download: 4Shared

Jair Alievi

Montando Layout Site – Parte 5.2 (Vídeo Aula c/ audio)

Mais uma parte esta pronta. Montando no dreamweaver sem uso de tabelas. Montando o conteúdo, ainda não acabou, vai mais umas duas vídeo-aulas.

Podem comentar a vontade!

Informações:
Montando Layout Site – Parte 5.2 (dreamweaver+css)
Compactado: Winrar
Windows Media Player
Tamanho: 11,53 Mb
Autor: Jair Alievi
Link para Download: Easy-share

Montando Layout Site – Parte 5.1 (Vídeo Aula)

Então, “em grão em grão a galinha enche o papo” (nd engraçado :/). O que eu quero dizer é que de vagarinho consiguiremos terminar nosso site. Está aí mais uma parte. Montando no dreamweaver sem uso de tabelas. Em breve vem o vídeo do conteúdo.

Podem comentar a vontade!

Informações:
Montando Layout Site – Parte 5.1 (dreamweaver+css)
Compactado: Winrar
Flash Player
Tamanho: 16,04 Mb
Autor: Jair Alievi
Link para download: Easy-share

HTML – Formatação de Texto – aula 4

Olá, mais uma sequência das nossas aulas de html. Na aula passada vimos títulos, parágrafos e quebra de linha. Vamos ver um pouco sobre formatação agora. Então veremos o seguinte:

Estilos:
b ► Negrito – <b>negrito</b>
i ► Itálico – <i>itálico</i>
u ► Sublinhado (underline) – <u>sublinhado</u>
sup ► Faz com que o texto fique Sobrescrito – ^sobrescrito
sub ► Faz com que o texto fique Subscrito – _subscrito
pre ► Utiliza a pré-formatação, ou seja, deixa o texto da maneira que foi digitado – <pre>…</pre>

negrito | itálico | sublinhado

Formatação da Fonte

Lembrando:
<tag atributo1=valor1 atributo2=valor2>texto</tag>

Tag <font>Texto</font>

COR:
<font color=”cor”>Texto</font>

<h1><font color=”red“>Meu Primeiro site em HTML</font></h1>

TAMANHO:
<font size=tamanho da letra>Texto</font>

<font size=3>Texto</font>

O tamanho 3 é o tamanho padrão, as outras medidas serão relativas ao tamanho 3.
<font size=+2>Letra Maior</font>
<font size=-2>Letra Menor</font>

Existem outros tipos de medidas detalhados mais a frente. Ex: 14px, 1em ….

FONTE:
O atributo FACE é o responsável pela fonte a ser utilizada da tag font:

<font face=“fonte da letra”>Texto</font>

Exemplos:

<font face=“arial” color=”blue”>Fonte Arial, azul.</font>

<font face=“arial” color=”#0000ff”>Fonte Arial, azul.</font>

Clique e veja a tabela de cores html.

Jair Alievi

Preparar Layout Site Photoshop – 4 (Vídeo Aula)

Ola galera, aos poucos vou fazendo as vídeo-aulas, essa é a sequência do layout que fizemos no Photoshop, essa vídeo-aula só mostra como preparar as imagens para depois montarmos no Dreamweaver. Mas não se preocupem, uma hora terminanos rssrss….
To fazendo nos meus tempos possíveis.

Podem comentar a vontade!

Informações:
Layout Psd (preparando layout) parte 4
Compactado: Winrar
Flash Player
Tamanho: 87,7 Mb
Autor: Jair Alievi

Link para Download: Easy-share