sábado, 1 de fevereiro de 2014

Introdução ao javascript

JavaScript

Um pouco de historia

    O javascript foi desenvolvido em 1995 pela equipe do Netscape com o objetivo de ser uma linguagem de script do lado cliente o que permite que sejam executados comandos sem que seja necessário passar pelo servidor.
    Originalmente concebido com o nome mocha e posteriormente batizado de livescript a linguagem foi renomeada como javascript alguns meses apenas o seu lançamento para aproveitar a popularidade da linguagem de programação recém lançada java. 

Onde colocar o javascript

    O javascript deve pode ser criado dentro do arquivo html ou pode vir de um arquivo externo de extensão .js, dentro do html ele deve estar entre as tags <script></script> que podem ser colocadas tanto no <head></head> quanto no <body></body>.
    No javascript você pode tanto criar uma linha de código direta que será executada quando o navegador carregar o documento como pode-se criar também funções que são blocos de códigos que serão executados quando chamados por algum evento como por exemplo o click em um botão ou o pressionar de uma tecla em uma área de texto, para isso basta escrever function nomeDaFuncao(){} e colocar o código entre as chaves. Para chamar a função basta adicionar o nome da função(nomeDaFuncao()) como valor de um atributo de evento de um elemento html. Observe o exemplo abaixo.
    

 <html>  
 <head>  
 <script type="text/javascript">  
 function exibirAlerta(){  
 window.alert("essa é uma menssagem");  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="click Aqui" onclick="exibirAlerta()"/>  
 </body>  
 </html>  

    Copie o exemplo, salve e execute o html, você vai ver que ao clicar no botão será exibido uma janela popup de alerta.


trabalhando com elementos html(getElementById())

    O método document.getElementById(id) permite selecionar o elemento que possui a id passada como valor no parâmetro, é possível mudar todos os atributos html ou de estilo do elemento, é possível também fazer marcações html com o atributo innerHTML.

 <html>  
 <head>  
 <script type="text/javascript">  
 function editarTexto(){  
 document.getElementById("texto").innerHTML = "texto editado com javascript";  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="clique Aqui" onclick="editarTexto()"/>  
 <span id="texto"></span>  
 </body>  
 </html>

    Para mudar o estilo de um documento use o atributo style.



 <html>  
 <head>  
 <script type="text/javascript">  
 function editarEstiloTexto(){  
 document.getElementById("texto").style.color = "#99CC33";  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="clique Aqui" onclick="editarEstiloTexto()"/>  
 <span id="texto">esse é um texto que vai mudar de cor</span>  
 </body> 
 </html> 


Conclusão

    Nesse primeiro post sobre javascript foi possível ver um pouco da historia dessa linguagem e também aprender alguns comandos básicos, no próximo post de javascript vamos ver um pouco mais da sintaxe da linguagem, conhecer as variáveis e os operadores.

quinta-feira, 30 de janeiro de 2014

Principais atributos do css

Css continuando...


As propriedades mais comuns do css

    O css3 possui dezenas de propriedades que podem ser alteradas, mas algumas são usadas com mais frequência e podem ser muito uteis para alterar o designer do seu html. vamos ver quais são:
  • fundo - a propriedade background permite alterar a aparência do fundo do elemento html alterando as cores, definindo imagens de fundo e como essa imagem sera apresentada.
  • textos - as propriedades text permitem definir a cor do texto, o alinhamento, se o texto vai ser sublinhado, se vai ser formado por letras maiúsculas ou minusculas e também a distancia que o texto vai começar da margem.
  • fontes - as propriedades font permite alterar a família da fonte, definir negrito e itálico, alem do tamanho da fonte
  • dimensões - o css permite definir a largura e altura e também as alturas e larguras máximas e minimas dos elementos.
  • bordas - é possível definir o tamanho, o lado, o tipo e a cor das bordas.
  • posicionamento - podem ser definidos posicionamentos fixo, estáticos, relativos ou absolutos. sendo que em caso de um elemento ocupar a mesma posição do outro a propriedade z-index define qual será exibido.

Background

background-color

    A propriedade background color permite mudar a cor de fundo do elemento. pode ser usado um valor hexadecimal(#FFAA99), um valor RGB (rgb(128,0,255)) ou nome de cor (yellow). 

 p{  
   background-color : #99AAFF;  
 }  
 #id{  
   background-color : rgb(128,0,255);  
 }  
 .classe{  
   background-color : blue;  
 }  

background-image

    A propriedade background image permite definir uma imagem para ser colocada como fundo de um elemento. alem de definir a imagem é possível definir se a imagem vai se repetir através da propriedade background-repeat que pode assumir os valores repeat-x, repeat-y e no-repeat, e também a posição da imagem através da propriedade background-position que pode assumir os valores right,center e left para o eixo x e top,center e bottom para o eixo y. É possível tambem definir todas as propriedades usando a propriedade background com os valores de cor, imagem, repetição e posição.


 div{  
    background-image : url('imagem.jpeg');  
    background-position: center top;  
    background-repeat : no-repeat;  
 }  
 #id{  
    background:#ffffff url('imgem.png') no-repeat right top;  
 }  

Textos

color

    A propriedade color permite mudar a cor do texto do elemento. É possível definir a cor com valores hexadecimal, com valores RGB ou com o nome de uma cor(em inglês).


 body{  
    color : #0066AA;  
 }  


Alinhamento

    A propriedade text-align define o alinhamento horizontal do texto e pode ser definido com os valores left(esquerdo),right(direito),center(centralizado) e justify(justificado).

 body{  
    text-align : center  
 }  

decoração

    A propriedade text-decoration define se o texto vai ser sublinhado(underline), se vai ser cortado ao meio(line-through)ou riscado por cima(overline), também pode não ter decoração(none).

 body{  
    text-decoration: overline;  
 }  

Transformação de texto

    A propriedade text-transform muda as letras de maiúsculas para minusculas ou vice-versa, pode assumir os valores uppercase(todas para maiúsculas), lowercase(todas para minusculas) e capitalize(a primeira letra de cada palavra para maiúscula).

 body{  
    text-transform: uppercase;  
 }  

Distancia da margem

    A propriedade text-indent define a distancia que o texto vai estar da margem, o valor pode ser positivo ou negativo.

 p{  
   text-indent : 50px;  
 }  

Fontes

Família da Fonte

    A propriedade font-family define a fonte do texto do elemento, o valor dessa propriedade pode ser uma fonte especifica como arial ou courier, ou nome genérico como monospace, serif.
    Pode-se definir no valor mais de uma fonte fazendo com que se o navegador não tiver suporte para uma ele passe para o próximo valor.

 p{  
   font-family : "Times New Roman", Times, serif;  
 }  

Estilo de fonte

    A propriedade font-style define o estilo, os valores podem ser italic, oblique ou normal

 p{  
   font-style : italic;  
 }  


Tamanho da fonte

    A propriedade font-size define o tamanho da fonte, seus valores podem ser definidos em px(pixel),em ou um valor predefinido(xx-small,x-small,smaller,small,medium,large,larger,x-large,xx-large).


 p{  
   font-size:2em;  
 }  

Dimensões

    As dimensões de um elemento são definidas pelas propriedades height(altura) e width(largura), os valores dessas propriedades podem ser em unidades de tamanho como px ou em, ou em porcentagem %, também é possível definir os valores mínimos(min-height,min-width) e valores máximos(max-height,max-width).

 div{  
   hight : 10%;  
   width : 50%;  
 }  


Bordas

    A propriedade border permite definir a borda de um elemento, seus valores são o tamanho em px, o estilo, que pode assumir os valores none, dotted, dashed, solid, double, groove, ridge, inset ou outset e também pode ser definido a cor da borda. pode se definir borda somente para um lado especifico de um elemento usando border-lado onde lado deve assumir o nome do lado left, right,top,bottom. Para definir somente o estilo da borda pode-se usar a propriedade borde-style, para se definir somente a cor usa-se border-color, para se definir o tamanho deve ser definido o valor de border-width.



 div{  
     border : 5px solid red ;  
 }  
 p{  
     border-left-style : groove;  
 }  
 #id{  
     border-top-color : #FFFFFF;  
 }  
 .classe{  
     border-right-width : 3px;  
 }  

Posicionamento

    Um elemento pode ser posicionado usando as propriedades top, bottom, right e left mas para que o posicionamento funcione deve-se definir o valor da propriedade position, essa propriedade pode assumir os valores static que é o valor padrão do html e não será afetado por nenhuma alteração nas propriedades de posicionamento, o valor fixed define um valor de posição relativa a janela, o posicionamento relativo define um valor relativo a posição normal do elemento, o posicionamento absoluto é relativo ao primeiro elemento pai que tenha um valor de posição não estático.


 div{  
     position : fixed ;  
     top : 150px;  
 }  
 #id{  
     position : absolute;  
     top : 30px;  
     left :50px;  
 }  
 .classe{  
     position : relative;  
     left : -50px;  
 }  

    Quando dois elementos ocupam a mesma posição é possível definir qual vai ser exibido usando a propriedade z-index quanto maior o valor mais a frente em uma pilha de elementos sobrepostos.


 #id{  
     position : absolute;  
     top : 30px;  
     left :50px;  
     height : 200px;  
     width : 300px;  
 }  
 .classe{  
     position : absolute;  
     top : 20px;  
     left : 70px;  
     height : 200px;  
     width : 300px;  
     z-index : 1;  
 }  

    No exemplo acima o elemento que usar a classe "classe" vai ser exibido na frente do elemento que usar o id "id".

Conclusão

    Nesse post nos vimos algumas propriedades importantes, o mais importante para fixar todas essas informações é praticar, crie seus próprios documentos html e aplique os estilos css, modificando seus valores e vendo os resultados, espero poder ter contribuído com algumas informações. Nos próximos posts vamos ver um pouco de javascript e mais pra frente vamos ver um pouco mais de css e css3. Até mais.

quarta-feira, 29 de janeiro de 2014

introdução a css

Introdução ao CSS


O que é css

    O css(cascading style sheet) é uma linguagem de estilo que é utilizada para formatar os documentos html, possibilitando formatar entre outras coisas o tamanho, a fonte, a cor de fundo, as bordas, as margens, a posição e muito mais dos elementos de um documento html.

Como usar o css

    O css pode ser usado de três formas nos documentos html:
  • a primeira forma é aplicar diretamente na linha do elemento html através do atributo style, essa forma limita muito o uso do css, mas pode ser útil quando se quer afetar somente um elemento
  • a segunda forma é inserir o css no cabeçalho do documento através da tag <style></style> entre as tags head, esta forma de inserir o css é um pouco mais ampla afetando todo o documento html.
  • a terceira e melhor forma de aplicar css em um documento é através de um arquivo .css externo, é feito um link no documento html a partir da tag <link /> que vai referir ao arquivo .css pelo atributo href e vai também utilizar o atributo rel que define a relação entre o html e o arquivo do link e deve ter o valor "stylesheet" e o atributo type que define o tipo do arquivo e deve ter o valor "text/css". A grande vantagem de se utilizar um arquivo css externo é a facilidade de manutenção, já que qualquer modificação no arquivo será aplicado a todos os documentos associados poupando tempo, alem da melhor padronização de todos os documentos.

A sintax da linguagem css

Seletores e bloco de declaração

    As regras da linguagem css são baseadas em dois pontos o seletor e um bloco de declaração, onde o seletor é um elemento do documento html e as declarações são atributos e valores desses elementos.

 body  
 {  
   background-color : #CC3333;  
 }  

    No exemplo acima body é o seletor e o background-color : #CC3333 é a declaração que vai mudar a cor de fundo do elemento body para vermelho, as cores em css podem ser definidas com notação hexadecimal usando o padrão RGB(red,green,Blue). 

Pseudo-classes

    Existe também no css as chamadas pseudo-classes que são formas de especificar por exemplo um estado de determinado elemento.

 p:hover  
 {  
   color:black;  
 }  

    O hover é uma pseudo-classe que vai mudar a cor da fonte do elemento paragrafo quando o mouse estiver sobre o mesmo.


ids e classes

    O css permite ainda que você crie seus próprios seletores utilizando os atributos html class e id, após definir esses atributos no documento html você pode usar #id ou .class no css para modificar o estilo dos elementos que estiverem usando o id ou a classe

 <body>  
 <div id="divId" ></div>  
 <div class="divClasse"></div>  
 </body>  


 #divId  
 {  
  background-color : yellow;  
 }  
 .divClasse  
 {  
  background-color : blue;  
 }  

    O seletor #divId vai definir a cor de fundo da primeira div como sendo amarelo e o seletor .divClasse define a cor de fundo do segundo div como azul.
    Essas são as principais regras da linguagem css, no próximo post vamos falar das principais propriedades do css. Ate a próxima.

segunda-feira, 27 de janeiro de 2014

Html - Um pouco mais de Html

Html Basico


O w3schools

    Existem diversas maneiras de se aprender html, você pode fazer um dos muitos cursos que existem por ai sobre o assunto, pode aprender sozinho pesquisando na internet, pode pedir a ajuda de um amigo, é improvável mas você pode aprender um pouco ate aqui no blog, mas na minha opinião um lugar que não pode ficar de fora para quem quer aprender a desenvolver para web é a w3schools, a w3schools é um site que é mantido pela w3c e que tem tudo o que você precisa sobre html, alem de css, javascript, jquery entre outros padrões web, vale a pena dar uma conferida você pode aprender muito lá.

Tags básicas Html

    O html tem uma grande quantidade de elementos mas alguns são utilizadas em praticamente todos os documentos html. São elas:
  • <br/> - é utilizado para inserir uma quebra de linha.
  • <p></p> - é utilizado para inserir um paragrafo.
  • <div></div> - é utilizado para inserir um bloco que normalmente contem outros elementos facilitando entre outras coisas a aplicação de estilos css.
  • <span></span> - é um elemento muito utilizado para facilitar a formatação de textos com estilos css.
  • <a></a> - é o elemento link, utilizado para definir uma ligação com outras paginas, a endereço da outra pagina é definida no atributo href.
  • as tags <h1>,<h2>,<h3>,<h4>,<h5> e <h6> - essas são as tags que define os cabeçalhos padrões de html, elas vão de h1 que é o cabeçalho mais importante geralmente atribuído ao título da pagina a h6 que é menos importante e possui o menor tamanho de fonte entre os cabeçalhos. A formatação do cabeçalho é definido ao texto entre as tags.
  • <img/> - Diferente das primeiras paginas da web, hoje as imagens se tornaram um elemento fundamental na internet, o elemento img define uma imagem, a fonte da imagem é definido no atributo src e um texto alternativo para a imagem é definido no atributo alt.
  • <table></table> - o elemento table define uma tabela que pode ser usado entre outras coisas para formatar e agrupar elementos no documento html. os elementos <tr></tr> e <td></td> são usados para definir as linhas e as celulas da tabela.
    Com os elementos acima e um pouco de criatividade é possível montar layouts web interessantes, sendo que principalmente os elementos div e table são usados para se criar layouts.

Exemplos

    Neste exemplo nos vamos criar 02 arquivos um exemplo.html e o outro exemplo.css, salve os dois na mesma pasta e depois execute o  arquivo html. Na próxima postagem veremos um pouco de css e eu explico com detalhes o arquivo css.

exemplo.html

 <html>  
 <head>  
   <title>Meu Exemplo Html</title>  
   <link href="exemplo.css" rel="Stylesheet" type="text/css" />  
 </head>  
 <body>  
   <div id="titulo">  
     <h1>Exemplo</h1>  
   </div>  
   <div id="conteudo">  
   <p>esse e um <span>esse e um texto definido com span com formataçao diferente do paragrafo </span>paragrafo em html.</p>  
   <br />  
   <h4>esse e um texto com cabeçalho h6, pode-se notar a diferença para o titulo</h4>  
   <img alt="html5.logo" src="http://www.w3.org/html/logo/img/html5-display.png" />  
   <h6>a imagem acima foi colocada com o elemento img e o texto com cabeçalho h6</h6>  
   <a href="http://inicianteprogramando.blogspot.com.br/">link</a>  
   </div>  
 </body>  
 </html>  

exemplo.css

 body {  
   color: White;  
 }  
 #titulo{  
   background-color:#AA66CC;  
 }  
 #conteudo{  
   background-color:white;  
   color : #AA66CC;  
 }  
 span{  
   color : Blue;  
   font-size : xx-small;  
 }  
 img{  
   width:300px;  
   height:300px;  
 }  
 p{  
   font-size : larger;  
 }  

    Modifique as propriedades do arquivo css e veja o que acontece,teste novas cores de fundo e de texto, o html combinado com css abre um mundo de possibilidade. No próximo post vamos ver um pouco de css.


domingo, 26 de janeiro de 2014

Html Primeiros passos

HTML

Um pouco de historia

    O html(HyperText Markup Linguage) é uma linguagem de marcação que é amplamente usada na criação de paginas web, criada no inicio da década de 90 por Tim Berners-Lee o padrão html foi definido em 1993 e a partir de 1996 passou a ser mantido pelo w3c que é um consorcio mantido por empresas de software. 
    O html esta hoje na sua versão 5 que revolucionou o padrão com novos elementos que permite entre outros beneficios desenhos com o elemento <canvas> </canvas> e audio com o elemento <audio></audio> alem de diversos outros elementos de conteúdo especifico, suporte para armazenamento local, elementos para melhor controle de formulário e suporte completo ao css3.0.

As tags Html

    O padrão html utiliza tags, que são palavras dentro de um sinal de menor "<" e de um sinal de maior ">" para definir os elementos. Os elementos possuem uma tag de abertura e uma de fechamento, a tag de fechamento possui uma barra apos o sinal de menor "</", alguns elementos não possuem uma tag de fechamento como por exemplo o elemento quebra de linha <br/>.

Elementos essenciais

    Todo documento html tem seus elementos básicos que são o <html></html> que define o escopo do documento, onde o documento começa e onde termina. 
    O elemento <head></head> que define o cabeçalho do documento onde deve ser inserido o título da pagina, os arquivos que serão usados na criação da pagina como scripts e folhas de estilos e os metatags que são utilizados entre outras coisas para que os robôs dos mecanismos de buscas encontrem o seu site.
    O elemento <title></title> define o título da pagina entre as tags. A tag title deve ficar entre as tags head.
    O elemento <body></body> define o corpo do documento onde todo o conteúdo devera ser adicionado. A tag body deve ser aberta após o fechamento da tag head.

Meu Primeiro Html

    Uma das vantagens do html é que a única coisa que precisa para se criar um documento é um editor de texto simples como o bloco de notas. Vou fazer um exemplo simples e quem quiser pode copiar e colar no bloco de notas e salvar como PrimeiroHtml.html


 <html>  
 <head>  
 <title>Meu Primeiro Html </title>  
  </head>  
 <body>  
 <p>meu primeiro Html</p>  
 </body>  
 </html>  

    Abra o arquivo que você salvou e veja o resultado. No próximo post iremos conhecer novos elementos e também os atributos básicos. Ate a próxima.