Com HTML

quarta-feira, 24 de julho de 2013

Curso de HTML5

Faça conosco o curso de HTML5.

O HTML5 é a ultima versão da HTML mais atualizado, e para você poder acompanhar a evolução e estar atualizado o Super facil elaborou um curso de HTML5.

Veja mais informações desse curso: Clique aqui

Ou

https://www.buzzero.com/cursos-online-de-informatica-e-internet/cursos-de-linguagens-de-programacao/curso-online-html5_43644?a=superfacil&keep=true

Assista ao vídeo do Professor explicando o curso:

No curso será abordado:

    1 - Apresentação do Curso
    2 - O Que É HTML5
    3 - Cronograma da tecnologias web
    4 - Requisitos
    5 - Analisando A Estrutura De Um Documento HTML
    5.1 - DOCTYPE
    5.2 - Charset
    5.3 - Utf-8
    6 - Layout pelas novas tags HTML 5
    6.1 - Section
    6.2 - Nav
    6.3 - Article
    6.4 - Aside
    6.5 - Header
    6.6 - Footer
    7 - Formulários
    8 - Elementos Áudio e Vídeo
    9 - Elementos Canvas
    9.1 - Definição
    9.2 - Desenhando uma figura simples
    9.3 - Compatibilidade
    9.3 - Sistema de Coordenadas
    9.4 - Desenhar retângulos em um Canvas
    9.5 - Desenho de curvas com arcos em canvas
    9.6 - Textos
    9.7 - Gradientes
    9.8 - Usar imagens no Canvas
    10 - SVG
    11 - Web Storage
    11.1 - Definição
    11.2 - Detecção no navegador
    11.3 - Objeto Storage
    11.4 - Operações básicas
    12 - Drag and Drop API
    13 - Geolocalização
    13.1 - O que é Geolocalização
    13.2 - Detecção e suporte dos navegadores
    13.3 - Obtendo as coordenadas
    13.4 - Tratamento de erros
    13.5 - Geolocalização e a API do Google Maps

sexta-feira, 5 de julho de 2013

Elemento canvas em HTML5

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:

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

Atributo required no HTML5

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:

Formulário pronto com HTML5

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;
}

Como usar Placeholder no HTML5

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:

Validar CEP com HTML5 usando Pattern

O atributo pattern nos permite definir expressões regulares de validação, sem Javascript. Aqui vamos validar o CEP:

<!DOCTYPE html>

<head>

<title>O atributo pattern</title>

</head>

<body>

<form>

<label for="CEP">CEP:

</label>

</form>

</body>

</html>

Veja Mais:

Com HTML

Pages

Cursos PHP e MySQLi

Curso de HTML5

Posts Popular

Arquivos do Blog

quarta-feira, 24 de julho de 2013

Curso de HTML5

sexta-feira, 5 de julho de 2013

Elemento canvas em HTML5

Atributo required no HTML5

Formulário pronto com HTML5

Como usar Placeholder no HTML5

Validar CEP com HTML5 usando Pattern

Concursos

Web