 |
|
||||
 Código-Fonte Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
||||
Como acessar sua webcam, retornar o MediaStream retornado e usá-lo na propriedade srcObject do elemento video do HTML5Quantidade de visualizações: 1912 vezes |
||||
|
Nesta dica vou mostrar como é possível acessar sua webcam (câmera) usando o método getUserMedia() do objeto mediaDevices. Se o usuário concordar em permitir o acesso, nós vamos obter o objeto MediaStream retornado e vamos usá-lo para exibir a imagem da câmera em um elemento video. O código ficará mais fácil de ser entendido se você ler as outras dicas na seção dedicada ao HTML5. Veja o código completo:
Veja que aqui nós não nos preocupamos com as dimensões do vídeo. Em outras dicas dessa seção você aprenderá a fazer isso sem muitas dificuldades. |
||||
 Link para compartilhar na Internet ou com seus amigos: |
||||
HTML5 ::: Referência Tags/Elementos HTML5 ::: Tag/Elemento <Video> |
||||
Como usar a tag/elemento <video> do HTML5 em suas aplicações webQuantidade de visualizações: 1635 vezes |
||||
|
A tag/elemento <video> do HTML5 é usada quando queremos incorporar um vídeo em nossos documentos HTML sem incluir plugs adicionais, tais como o Flash Player. Contudo, o suporte a este elemento pode variar de navegador para navegador (faça testes com seus navegadores alvos antes). Em geral, navegadores que dão suporte ao elemento <video> suportam os seguintes formatos de vídeo: MP4, Ogg e WebM. Veja um documento HTML que carrega um vídeo MP4:
Quando você abrir esta página HTML, você verá um vídeo na tela já com os controles para iniciar, pausar, e parar a execução (contanto que você tenha informado um endereço válido para o vídeo). Note que não especificamos o tamanho do vídeo na página, o que fará com que o elemento <video> tenha as dimensões do vídeo que foi carregado. | ||||
HTML5 ::: HTML5 + JavaScript ::: Canvas |
||||||||||||
Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculosQuantidade de visualizações: 4184 vezes |
||||||||||||
O método arc() do objeto Canvas do HTML5 nos permite criar figuras tais como arcos, curvas e círculos. Para isso é importante entender os seus parâmetros:arc(x, y, radius, ang1, ang2, direction); Os parâmetros x e y indicam as coordenadas do centro do círculo. O parâmetro radius indica o raio do círculo. Os parâmetros ang1 e ang2 indicam o ângulo inicial e o ângulo final. O parâmetro direction indica a direção do desenho. Se o valor true for informado, a direção será anti-horário. Se for false, o desenho será no sentido horário. É importante observar que os ângulos são medidos em radianos, não em graus. Assim, o ângulo 0 representa a posição 3 horas no relógio. A posição de 9 horas é (1 * PI), 12 horas é (1.5 * PI) e 6 horas é (0.5 * PI). Portanto, se você quiser desenhar um círculo completo, deverá sair do ângulo 0 e ir até (2 * PI). Veja um trecho de código que desenha um arco equivalente a um quarto de uma pizza, ou seja, 25%, saindo do ângulo 90º (em graus) e indo até 180º (graus):
Execute este código e veja que o arco realmente foi desenhado. Seu resultado deverá ser parecido com:  No entanto, para parecer um pedação de pizza, ou seja, o ponto de partida para um gráfico de pizza, é preciso que tenhamos duas linhas ligado esse arco ao centro do círculo. Veja a modificação que fiz:
Execute novamente e veja que agora o efeito ficou bem melhor. Seu resultado deverá ser parecido com:  Para finalizar, vamos colorir o pedação de pizza. Veja a nova versão (com o código completo):
Agora o resultado será:  | ||||||||||||
HTML5 ::: Dicas & Truques ::: Meta Tags |
||||||||
HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTMLQuantidade de visualizações: 5882 vezes |
||||||||
|
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5. Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário. Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet. A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos: width: É a largura do viewport virtual no dispositivo. height: É a altura do viewport virtual do dispositivo. initial-scale: É o nível de zoom quando a página é acessada. maximum-scale: É o limite máximo de zoom que pode ser aplicado à página. user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no. Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1:
No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página. Veja uma página HTML completa usando esta abordagem:
Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais. | ||||||||
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
