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

(x)html e css para design de interfaces

O papel desempenhado pelo (x)html e css para designers que fazem web parece bastante óbvio para muitos. Porém, ainda há uma grande quantidade de estudantes e envolvidos que relutam quando chega o momento de aprender estruturação.

O que é estruturação?

Trata-se de um termo comum na profissão, quer dizer fazer o código (x)html, desenvolver o css para formatação visual. Normalmente, parte-se de um layout pronto e aprovado, feito em algum programa para criação visual (o photoshop é o favorito). Assim, com os aspectos visuais definidos, a tarefa do profissional será a de transformar aqueles lindos arquivos .psd em páginas web que funcionem corretamente, de maneira satisfatória.

É realmente necessário saber (x)html e css?

Podemos citar uma analogia simples: trabalhar com web e não conhecer essas linguagens, equivale a uma viagem de, por exemplo, seis meses na Inglaterra, sem o mínimo conhecimento de inglês. Por mais que você se muna de todo o aparato-idiomático-fast-food (canetas com scanners tradutores, e-books, palms, smartphones, notebooks), chegará o momento em que sua falta de conhecimento o colocará, obviamente, em situações mais do que constrangedoras.

Portanto, trabalhar com web sem conhecer a sua língua-mãe é praticamente impossível, pois, apesar de haver diversos recursos para desenvolver (x)html e css sem digitar linhas de código, fatalmente chegará o momento em que a falta de conhecimento cobrará o seu preço.

Qual a melhor maneira de aprender?

Evidentemente, com a ajuda de um professor num bom curso, tudo fica bem mais fácil. Por incrível que pareça, existem diversas escolas (de informática ou não) que ensinam o ultrapassado html 4.0.1. O aluno aprende uma linguagem antiga e se baseia em técnicas não recomendadas no momento atual, como o uso de frames (divisão da página em partes distintas, trazendo um enorme obstáculo a acessibilidade), tabelas para lay-out (inserção do conteúdo da página em células de tabelas, gerando um código não semântico, não acessível e muito “sujo”, limitando a visualização das páginas em dispositivos de mídia que não os monitores dos PC´s), formatação visual dos elementos com comandos não recomendados de html e utilização de tags(comandos) proprietários sem padronização.

A melhor maneira de aprender é, portanto, aprender o que é certo, analisando o que é errado como se analisa um animal estranho num zoológico. Na web, terra das mudanças constantes e rápidas, ir contra a corrente pode trazer, como consequência final, a desvantagem competitiva.

A utilização de poderosos editores WYSIWYG como o Dreamweaver é praticamente indispensável no ambiente produtivo, porém seu uso deve vir após o conhecimento básico da estrutura da codificação (x)html e css. Assim, com o conhecimento solidificado e correto, torna-se mais fácil a trajetória profissional.

A dica é: aprender a base do (x)html/css, aprender Dreamweaver (ou outro robusto editor visual, por motivos de produtividade – sugiro o excelente Blue Fish) e aprofundar os conhecimentos cada vez mais. Aguarde a próxima parte deste artigo.

Um abraço!

Fonte: iMasters – Fabiano Pereira

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

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

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

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

HTML – Títulos e Parágrafos – aula 3

Bom, vimos anteriormente a estrutura html, agora tudo que iremos trabalhar vai ser entre as tags <body>……</body>, porque todo conteúdo que será mostrado na sua página deve estar entre elas:

Sabemos que todo documento têm Títulos, Sub-títulos e parágrafos. Mas como fica isso em html?

h1, h2, h3, h4, h5 e h6 são usados para inserir os títulos em suas páginas – h1 utiliza a fonte maior e h6 a menor -, e “p” vai especificar o que é parágrafo. Ficando assim:

…
<body>

<h1>HTML – aula 3</h1> ->mostra onde inicia e onde termina o título.
<h2>por Jair lievi</h2> ->Sub-título
<p>Isso aqui é um parágrafo. Estou fazendo uma sequência de aulas sobre meu amigo HTML, e em breve vou apresenta a vocês nosso amigo CSS. Os dois se tornaram grandes amigos! </p>
<p>Isso aqui é um segundo parágrafo. Estou fazendo uma sequência de aulas sobre meu amigo HTML, e em breve vou apresenta a vocês nosso amigo CSS. Os dois se tornaram grandes amigos! </p>

</body>
…

Tah! mas se eu quizer pular de linha dentro de um mesmo parágrafo, o que eu faço?

Simples, insira a tag <br> onde você quer fazer a quebra de linha. Essa tag não precisa especificar o final , simplesmente digite ela onde você quer que ocorra a quebra. Ex:

…
<body>

<p>Isso aqui é um segundo parágrafo. <br>
Estou fazendo uma sequência de aulas sobre meu amigo HTML, e em breve vou apresenta a vocês nosso amigo CSS. Os dois se tornaram grandes amigos! </p>

</body>
….

RESUMÃO:
h1, h2, h3 …. -> Títulos. Ex: <h1>Título 01</h1>
p -> Define os parágrafos. Ex: <p>Parágrafo de um texto qualquer. </p>
br -> Insere uma quebra de linha (força o que estiver a sua frente descer para baixo).
Ex: Linha1 <br> Linha 2 <br> Linha 3.

Clique para Baixar o exemplo.

Assista o vídeo

CORREÇÃO:
A tag br responsável pela quebra de linha em HTML fica assim <br> , já em XHTML (veremos á frente) é usado o fechamento – <br />. A minha intensão é ir preparando-os para o XHTML, mas já que o Michel comentou resolvi explicar o porquê do uso <br /> no tutorial.
Obrigado pela compreensão.
Até a próxima!

Jair Alievi

Explicando a Estrutura HTML – aula 2

Como vimos na aula 1, a estrutura HTML seria a seguinte:

<html> -> Início do código html.

<head> -> Cabeçalho da Página, o que vai aparecer na barra de Títulos da página.
             <title>Título da Página (Nome do site)</title> -> Título que irá aparecer.
</head> -> Fim do Cabeçalho da Página.

<body> – > Início do “corpo”, conteúdo a ser mostrado na página
Meu Primeiro site em HTML.
</body> – > Fim do “corpo”

</html> -> Fim do código html.

O código HTML não obriga você a escrever tudo maiúsculo ou minúsculo, não é case sensitive. Mas eu particularmente procuro escrever tudo em minúsculo para não correr o risco de não ser validado pela W3C (veremos mais a frente).

A página html será salva com a extensão .html ou .htm

No exemplo acima, podemos escrevê-lo no Notepad (bloco de notas do Windows), sem a parte cinza explicatica, e salvá-lo como index.html. O index define qual será a primeira página a ser aberta no site, ou seja, a página de entrada.
Após salvá-la, procure o local onde foi salvo a página, estará um ícone com seu browser padrão, seja ele Internet Explorer, Firefox e assim vai. Dê dois cliques e abrirá a sua primeira página html.

Até a próxima.

Jair Alievi

Apresentando o HTML – aula 1

Olá, Sou Jair Alievi, e vou apresentar pra vocês meu amigo HyperText Markup Language, ou seja, podemos chamá-lo de HTML. Seu significado em português seria “Linguagem de Marcação de Hipertexto”. O HTML é a linguagem responsável pela construção de páginas para serem visualizadas na internet.

O HTML é usado para estruturar  conteúdos de páginas para Web, criando vínculos (ligações) entre si. É claro que para formatar, vamos precisar da ajuda de outro amigo nosso, o CSS, o qual verá mais a frente.

Qual programa eu usarei para editar minhas páginas HTML?

Bom, os documentos em HTML são arquivos ASCII comuns, que pode ser editado em qualquer editor simples: textedit, notepad (bloco de notas) e etc. Mas existem editores que facilitam a inserção das etiquetas, chamados de Editores de texto fonte. Já existem outros que oferecem um ambiente de edição gráfico, chamados de Editores WYSIWYG. Um exemplo é o Dreamweaver.

Veremos a estrutura de um documento HTML.

No HTML existem comandos de formatação da linguagem, esses comandos são etiquetas (tags) HTML.

Ex.:
<etiqueta> – tag de abertura.
</etiqueta > tag de fechamento.

Necessário as tags de abertura e de fechamento para especificar onde começa e termina a formatação. Algumas tags dispensam o uso de fechamento:

<etiqueta> …. </etiqueta>

Todos elementos possuem atributos e o que estiver entre as tags receberá a formatação.

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

A Estrutura HTML é apresentada a seguir:

<html>
              <head>
                             <tiltle>Título da Página</tiltle>
             </head>

<body>
Conteúdo do site.
</body>
</html>

Em Breve vem a segunda parte, Aguarde!
Não se intimidem, também estou aprendendo e em busca cada vez mais de conhecimentos, e o que eu aprender vou tentar passar pra vocês. E quem quizer ajudar-nos, envie-nos um e-mail para jair_alievi@yahoo.com.br. Obrigado.

Jair Alievi