junho 2013 ~ Help do Desenvolvedor

segunda-feira, 24 de junho de 2013

Gradiente com canvas no HTML5

17:56

Os gradientes podem ser usados para preencher retângulos, círculos, linhas, texto, etc formas na tela não estão limitados a cores sólidas.

Existem dois tipos diferentes de gradientes:

createLinearGradient ( X, Y, x1, y1 ) - cria um gradiente linear

createRadialGradient ( x, y, r, x1, y1, r1 ) - cria um gradiente radial / circular

Uma vez que temos um objeto gradiente, devemos adicionar duas ou mais paradas de cor.

O método addColorStop () especifica os limites de cor, e sua posição ao longo do gradiente. Posições de inclinação pode ser em qualquer lugar entre 0-1.

Para usar o gradiente, defina a propriedade fillStyle ou strokeStyle ao gradiente, e então desenhar a forma, como um retângulo, um texto ou uma linha.

Usando createLinearGradient ():

Exemplo

Criar um gradiente linear. Preencha o retângulo com gradiente:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:

1px solid #d3d3d3;">

O navegador não suporta a tag canvas do HTML5

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Usando createRadialGradient ():

Exemplo

Criar um gradiente radial / circular. Preencha o retângulo com gradiente:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:

1px solid #d3d3d3;">

O navegador não suporta a tag canvas do HTML5

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Veja Mais:

- Desenhando texto usando canvas no HTML5
- Desenhar curvas ou arcos em canvas com HTML5
- Criar um retangulo sobre outro transparente com canvas no HTML5
- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

Leia Mais »

Desenhando texto usando canvas no HTML5

17:36

No comments

HTML5 inclui um mecanismo para a colocação de texto na tag <canvas>. Isso fornece uma maneira muito mais dinâmica, flexível para apresentar o texto que as versões anteriores.Você pode criar alguns bons efeitos combinando a colocação do texto com o desenho de retângulos, linhas, arcos, e as imagens que já demonstrou.

Para desenhar texto em uma tela, a propriedade mais importante e métodos são:

fonte - define as propriedades da fonte de texto

fillText ( texto, x, y ) - Desenha texto "cheio" na tela

strokeText ( texto, x, y ) - Desenha o texto na tela (não preencher)

Usando fillText ():

Exemplo

Escrever um texto cheio de alta 30px na tela, usando a fonte "Arial":

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:

1px solid #d3d3d3;">

O navegador não suporta a tag canvas do HTML5

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Olá mundo",10,50);

</script>

</body>

</html>

Usando strokeText ():

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:

1px solid #d3d3d3;">

O navegador não suporta a tag canvas do HTML5

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("Olá Mundo",10,50);

</script>

</body>

</html>

Veja Mais:

- Desenhar curvas ou arcos em canvas com HTML5
- Criar um retangulo sobre outro transparente com canvas no HTML5
- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

Leia Mais »

O que é informática?

10:21

No comments

Chama-se genericamente informática ao conjunto das ciências da informação, estando incluídas neste grupo: a ciência da computação, a teoria da informação, o processo de cálculo, a análise numérica e os métodos teóricos da representação dos conhecimentos e de modelagem dos problemas.

O termo informática, sendo dicionarizado com o mesmo significado amplo nos dois lados do Atlântico, assume em Portugal o sentido sinônimo de ciência da computação enquanto que no Brasil é habitualmente usado para referir especificamente o processo de tratamento da informação por meio de máquinas eletrônicas definidas como computadores.

O estudo da informação começou na matemática quando nomes como Alan Turing, Kurt Gödel e Alonzo Church, começaram a estudar que tipos de problemas poderiam ser resolvidos, ou computados, por elementos humanos que seguissem uma série de instruções simples de forma , independente do tempo requerido para isso.

A motivação por trás destas pesquisas era o avanço durante a revolução industrial e da promessa que máquinas poderiam futuramente conseguir resolver os mesmos problemas de forma mais rápida e mais eficaz. Do mesmo jeito que as indústrias manuseiam matéria-prima para transformá-la em um produto final, os algoritmos foram desenhados para que um dia uma máquina pudesse tratar informações. Assim nasceu a informática.

Veja mais!!!
- Informática e História da Informática
- A história da informática
- Google Chrome pode ultrapassar Firefox até o fim do ano
- Instalar Ubuntu em uma máquina virtual no Windows
- O que é informática?
- APPLE - Logomarca - Maçã Mordida ???
- Apple vende toques musicais para iPhone e iPad via iTunes - Samsung anuncia Galaxy S4 com tela de 5 polegadas e conexão à rede 4G

Leia Mais »

Desenhar curvas ou arcos em canvas com HTML5

10:18

No comments

Agora vamos como criar caminhos com arcos. Os arcos são segmentos de circunferências, ou uma circunferência inteira, no caso de um arco completo.

O método que utilizamos para desenhar e fazer um arco é arc().

Estes são os parâmetros que devemos enviar ao método arc():
arc(x, y, raio, angulo_inicio, angulo_final, sentido_contrario_do_relogio)

Os parâmetros x, y correspondem às coordenadas do centro do arco.

O parâmetro raio é o número de píxels que tem o arco como raio.

Por sua parte ângulo_início e ângulo_final são os ângulos onde começa e acaba o raio. Estão tomados como se o eixo da horizontal tivesse o ângulo zero.

Sentido_contrário_do_relógio é um parâmetro booleano, onde true significa que o traço vai desde um ângulo de início ao do fim no sentido contrário dos ponteiros do relógio. False indica que esse caminho é em direção contrária.

Código para realizar somente o contorno:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"

        style="border:1px solid #d3d3d3;">
            O navegador não suporta canvas
        </canvas>
        <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
        </script>
    </body>
</html>

Veja Mais:

- Criar um retangulo sobre outro transparente com canvas no HTML5
- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

Leia Mais »

Criar um retangulo sobre outro transparente com canvas no HTML5

08:14

No comments

Agora vamos desenhar um par de retângulos, um verde e outro amarelo para mostrar como fazer uma cor semitransparente.

A explicação com realizar está no código:

<html>
    <head>
        <title>Canvas segundo exemplo</title>
        <script>
            //Recebe um identificador do elemento canvas e carrega o canvas
            //Devolve o contexto do canvas ou FALSE se não pode conseguir
            function cargaContextoCanvas(idCanvas){
               var elemento = document.getElementById(idCanvas);
               if(elemento && elemento.getContext){
                var contexto = elemento.getContext('2d');
                if(contexto){
                    return contexto;
                }
               }
               return FALSE;
            }

            window.onload = function(){
               //Recebemos o elemento canvas
               var contexto = cargaContextoCanvas('meucanvas');
               if(contexto){
            //Se tenho o contexto
            //mudo a cor de desenho a verde
            contexto.fillStyle = '#458B00';
            //desenho um retângulo verde
            contexto.fillRect(10,10,50,50);
            //mudo a cor a amarelo com um pouco de transparência
            contexto.fillStyle = 'rgba(255,255,0,0.7)';
            //pinto um retângulo amarelo semitransparente
            contexto.fillRect(35,35,50,50);
               }
            }
        </script>
    </head>
    <body>
        <canvas id="meucanvas" width="100" height="100">
            Seu navegador não suporta canvas.
        </canvas>
    </body>
</html>

Veja Mais:

- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

Leia Mais »

Coordenadas do Canvas no HTML5

07:59

No comments

Para posicionar elementos no canvas temos que ter em conta seu eixo de coordenadas em duas dimensões, que começa na esquina superior esquerda da tela.

contexto.fillRect(0, 0, 100, 100);

Representado na figura em verde o (0, 0) significa o posição relacionada ao (X e Y).
Em seguida colocamos a dimensão em relação a largura e altura do canvas, aqui está dimensionado com (100, 100).

Em conclusão temos (0, 0, 100, 100), exemplo prático.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <title>Criar canvas no HTML5</title>
    </head>
    <body>
        <canvas id="meucanvas" width="100" height="100" style="border:1px solid
        #000000;">
            Navegadore não compatível com canvas.
            <br>
            Por favor, utilize Firefox, Chrome, Safari ou Opera.
        </canvas>
        <script>
            //Recebemos o elemento canvas
            var canvas = document.getElementById('meucanvas');
            //Acesso ao contexto de '2d' deste canvas, necessário para desenhar
            var contexto = canvas.getContext('2d');
            // Pintar a figura
            contexto.fillStyle="#9FB6CD";
            //Desenho no contexto do canvas
            contexto.fillRect(0, 0, 100, 100);
        </script>
    </body>
</html>

Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

Leia Mais »

Elemento canvas em HTML5

07:23

No comments

Canvas é um novo e poderoso elemento do HTML 5. Com o canvas você consegue de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript.

Primeiro vamos verificar se o navegador suporta o Canvas.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <title>Criar canvas no HTML5</title>
    </head>
    <body>
        <canvas id="meucanvas" width="200" height="100" style="border:1px solid
        #000000;">
            Este texto se mostra para os navegadores não compatíveis com canvas.
            <br>
            Por favor, utilize Firefox, Chrome, Safari ou Opera.
        </canvas>
    </body>
</html>
Para especificar as características deste canvas temos vários atributos:

Atributo id:
Para atribuir-lhe um nome único e logo nos referirmos a este canvas desde Javascript.

Atributos width e height:
Para indicar a largura e altura da área do canvas.

Outros atributos se podem colocar de maneira opcional, como por exemplo style, para indicar atributos de folhas de estilo para definir o aspecto da tela. Neste exemplo foi colocado como borda 1 pixel.

Agora vamos pintar nosso canvas.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
       <meta charset="UTF-8" />
       <title>Criar canvas no HTML5</title>
    </head>
    <body>
       <canvas id="meucanvas" width="200" height="100" style="border:1px solid
#000000;">
           Navegadore não compatível com canvas.
           <br>
           Por favor, utilize Firefox, Chrome, Safari ou Opera.
       </canvas>
       <script>
           //Recebemos o elemento canvas
           var canvas = document.getElementById('meucanvas');
           //Acesso ao contexto de '2d' deste canvas, necessário para desenhar
           var contexto = canvas.getContext('2d');
           // Pintar a figura
           contexto.fillStyle="red";
           //Desenho no contexto do canvas
           contexto.fillRect(50, 0, 70, 150);
       </script>
    </body>
</html>

Primeiro, com o método getElementById() obtenho o elemento da página que se passa como parâmetro, que é o canvas. Em seguida acessa contexto 2D do canvas, que é o que tem vários métodos que servem para desenhar na tela. Em seguida defenimos a cor que desejamos que seja pintado nosso canvas. Por último, posso executar o que desejo desenhar, neste exemplo defenimos cordenada primeiro as cordenadas (x e y) como (50, 0), depois a dimensão em largura e altura (70,150).

Resultado final:

Veja Mais:

Leia Mais »

Atributo required no HTML5

06:58

No comments

No HTML5 os formulários ganharam recursos muito interessantes e importantes para otimização do trabalho. Por exemplo, é possível fazer validação de campos sem o uso de JavaScript, fazer validação através de ER (expressões regulares) diretamente no código HTML entre muitas outras.

Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

Exemplo prático:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <title>O atributo required</title>
    </head>
    <body>
        <form>
            Nome: <input name="nome" id="nome" type="text" required /></br></br>
            E-mail: <input name="email" id="email" type="email" required /></br></br>
            <input type="submit" value="Enviar" />
        </form>
    </body>
</html>

Quando o usuário tenta enviar sem preencher será apresentado a mensagem de obrigatoriedade:

O usuário preenche o nome mas deixa o e-mail em branco:

O usuário preenche qualquer coisa no campo email, sem as características de e-mail:

O usuário preenche corretamente os campos:

Veja Mais:

Leia Mais »

Formulário de contato pronto com HTML5

06:35

No comments

Criar seu próprio formulário de contato com HTML5 e CSS3. Nós estaremos usando os novos recursos úteis em HTML5 para adicionar funcionalidade legais.

Criar uma página com o nome (index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Contact Form</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="contact">
    <h1>Envie a Mensagem</h1>
    <form action="#" method="post">
       <fieldset>
           <label for="name">Nome:</label>
           <input type="text" id="name" placeholder="Nome" />

           <label for="email">E-mail:</label>
           <input type="email" id="email" placeholder="E-mail" />

           <label for="message">Mensagem:</label>
           <textarea id="message" placeholder="Mensagem"></textarea>

           <input type="submit" value="Enviar" />

       </fieldset>
    </form>
</div>

</body>
</html>

Criar outra página contendo o estilo (style.css)

body, div, h1, form, fieldset, input, textarea {
    margin: 0; padding: 0; border: 0; outline: none;
}

html {
    height: 100%;
}

body {
    background: #728eaa;
    background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
    font-family: sans-serif;
}

#contact {
    width: 430px; margin: 60px auto; padding: 60px 30px;
    background: #c9d0de; border: 1px solid #e1e1e1;
    -moz-box-shadow: 0px 0px 8px #444;
    -webkit-box-shadow: 0px 0px 8px #444;
}

h1 {
    font-size: 35px; color: #445668; text-transform: uppercase;
    text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
}

label {
    float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
    text-align: right; font-size: 16px; color: #445668;
    text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}

input {
    width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
    background: #5E768D;
    background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
    input::-webkit-input-placeholder {
        color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
    }
    input:-moz-placeholder {
        color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
    }

textarea {
    width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
    background: #5E768D;
    background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
    textarea::-webkit-input-placeholder {
        color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
    }
    textarea:-moz-placeholder {
        color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
    }

input:focus, textarea:focus {
    background: #728eaa;
    background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}

input[type=submit] {
    width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0;
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
    border: 1px solid #556f8c;
    background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
    cursor: pointer;
}

Veja Mais:

Leia Mais »

Como usar Placeholder no HTML5

05:57

No comments

Nesse artigo vamos ver o funcionamento do atributo PLACEHOLDER implementado a TAGs do HTML5.
Esse atributo é usado para auxiliar o usuário no preenchimento do campo, pois ele dá uma dica do que deve ser inserido.

Quem nunca precisou colocar um valor padrão dentro do input e teve que fazer uma gambiarra, digo, adaptação técnica do tipo:

<input name=”q” value=”Search here” onfocus=”if(this.value==’Search here’)this.value=’’”>

HTML5 nos permite fazer isso de maneira muito mais elegante:

<input name=”q” placeholder=”Search here”>

Ou

<input name="pesquisar" type="search" placeholder="Pesquisar"/>

Exemplo Prático do Placeholder:

<!DOCTYPE html>

<head>

<title>Placeholder, HTML5 way</title>

</head>

<body>

</body>

</html>

Veja Mais:

Leia Mais »

Help do Desenvolvedor

Categorias

web

Curso de HTML5

Curso de HTML5

Curso de HTML5

Curso de HTML5

Curso de HTML5

segunda-feira, 24 de junho de 2013

Gradiente com canvas no HTML5

Desenhando texto usando canvas no HTML5

O que é informática?

Desenhar curvas ou arcos em canvas com HTML5

Criar um retangulo sobre outro transparente com canvas no HTML5

Coordenadas do Canvas no HTML5

Elemento canvas em HTML5

Atributo required no HTML5

Formulário de contato pronto com HTML5

Como usar Placeholder no HTML5

Cursos PHP e MySQLi

Posts Popular

Curso de HTML5

Archives