Converter milissegundos do tempo de video HTML 5 em minutos com javascript

Compartilhe este artigo:

A tag video do HTML 5 oferece vários atributos que ajudam o programador HTML montar um layout personalizado, porem ele trabalha com tempo em milisegundo, porem exemplo o tempo do video ao inves de vir 1:25 virá 85.5986445852 e agora, como fazer? Bem, a ideia é simples e vou dividir em duas funções, a primeira pega o tempo e divide em dois grupos, minuto e segundo, a segunda função verifica se o tempo resultante da primeira função tem apenas um caracter e adiciona um “zero” a frente dele. Vamos as funções:

Recebe tempo em milissegundos e transforma em minutos

var video = document.getElementById('video');
var tempo = coverteTempo(video.duration);
function coverteTempo(tempo) {
tempo = Math.round(tempo);
var segundo = tempo % 60;
var minuto = Math.round(tempo / 60);
verificaUnidade(minuto) + ':' + verificaUnidade(segundo);
}

Recebe o resultado e verifica se tem apenas um digito

function verificaUnidade(tempo) {
tempo += "";
if (tempo.length < 2) tempo = "0" + tempo;
return tempo;
}
Publicado em HTML 5, JavaScript, jQuery & Ajax, XHTML & CSS | Com a tag , , , | Deixar um comentário

CSS Personalizado para mudança de orientação no iPhone e iPad

Compartilhe este artigo:

Já fiz um post explicando como via JavaScript pegar essa mudança e colocar uma classe no body da página, além de ter um melhor resultado em performance ainda permite que seja testado no PC, mas se mesmo assim você ainda quer usar o recurso de @media do CSS, vamos lá, ele pode ser feito de algumas formas:

No HTML na tag Link

<link media="only screen and (max-device-width: 768px)" href="portrait.css" type="text/css" rel="stylesheet" />

<link media="only screen and (max-device-width: 1024px)" href="landscape.css" type="text/css" rel="stylesheet" />

No CSS no seletor @Media

@media only screen and (max-device-width: 768px) and (orientation:portrait) {
// Seletores para Landscape (Paisagem)
}

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
// Seletores para Portrait (Retrato)
}

Ficou na Dúvida? Precisa de Ajuda? Comenta ai que eu sempre respondo!

Publicado em XHTML & CSS | Com a tag , , , , | 2 comentários

Detectar mudança de orientação no iPhone e iPad com JavaScript

Compartilhe este artigo:

Para montar um layout personalizados para iPhone e iPad o programador HTML precisa ficar atento a alguns detalhes importantes, como a orientação, mesmo tendo um recurso do CSS muitas vezes precisamos que as funções JavaScript se comportem de forma diferente para cada orientação.

Primeiro vá ao body do seu HTML e coloque atribua uma função ao evento ‘onorientationchange’

<body onorientationchange="updateOrientation();">

Logo em seguida adicione ao seu JavaScript a seguinte função

function updateOrientation(){
	if (window.orientation == 90 || window.orientation == -90) {
		document.body.className = 'landscape';
	} else {
		document.body.className = 'portrait';
	}
}

Pronto, agora basta antes de executar uma função verificar qual a classe do body, também achei esse recuso melhor do que verificar com o CSS por que ele teve um desempenho bem melhor no CSS, deixando as classes com herança e dando um resultado bem mais agradável.

Publicado em HTML 5, iPhone, XHTML & CSS | Com a tag , , , | Deixar um comentário

Arquivo langs.xml corrompido Notepad++

Compartilhe este artigo:

Todo Programador HTML sabe que nenhuma IDE é capaz de superar o Notepad++, porém hoje o meu Notepad++ ficou maluco, toda vez que eu abria ele dava um erro no arquivo langs.xml e não “coloria” automaticamente o código.

A correção é extremamente simples, vá até o diretório de instalação do NotePad++ que normalmente é C:\Program Files\Notepad++ apague o arquivo langs.xml que está corrompido e duplique o arquivo langs.model.xml mudando o nome dele para langs.xml, pronto! seu Notpad++ já está funfando normalmente.

Publicado em Dicas | Deixar um comentário

Exibindo dados no navegador com PHP e as funções print(), echo() printf() e sprintf()

Compartilhe este artigo:

Print()

A Função print() imprime dados no navegador de algumas formas diferentes, seguem alguns exemplos:

<?php
	$clima1 = "Calor";
	$clima2 = "Frio";

	print("Prefiro o $clima1 do que $clima2<br/>");
	print "Prefiro o $clima1 do que $clima2<br/>";
	print "Prefiro o ".$clima1." do que ".$clima2."<br/>";
?>

Atenção: na documentação do PHP não possui nenhuma forma tomada como regra, mostrando apenas que pode ser usada de maneiras diferentes. Porem na sintaxe oficial a forma com parênteses é mostrada como preferencial, porem a grande maioria dos programadores prefere não usar para otimizar o tempo.

Echo()

Uma boa alternativa para o print() é a função echo() ele serve para os mesmos propositos de print e é bem adotada pelos programadores php embora hajam diferenças entre as duas sã quase que irrelevantes veremos a estrutura para comparar.

int print(argument)

void echo(string argument1 [, ...string argumentN])

como você pode ver pelo protótipo, echo() é capaz de imprimir diversas variáveis do tipo string separadas por virgula. Vejamos algumas formas de utilização do echo():

<?php
	$clima1 = "Calor";
	$clima2 = "Frio";

	echo("Prefiro o $clima1 do que $clima2<br/>");
	echo "Prefiro o $clima1 do que $clima2<br/>";
	echo "Prefiro o ".$clima1." do que ".$clima2."<br/>";
	echo $clima1, " e ", $clima2, " são tipos de climas.";
?>

Se a sua intenção for enviar texto estático misturado com dinâmico, dê preferencia para printf() que será abordada a seguir, caso contrario echo() ou print() darão conta do trabalho.

Atenção: Qual dos dois é mais rápido, note que echo é do tipo void e print retorna um inteiro, echo() apenas imprime o que está nele, já print(), retorna 0 para falha e 1 para sucesso.

Printf()

Como citado anteriormente a função printf() é ideal para quem quer enviar uma combinação de texto estático e informações dinâmicas através de uma ou diversas variáveis. Ela tem duas vantagens, separa de forma organizada as informações e te dá total controle sobre os tipos de informações que serão impressas. Vejamos o protótipo da função pintf():

boolean printf(string format [, mixed args])

por exemplo, você pode inserir um valor dinâmico dentro de uma string estática:

<?php
	printf("Estoque é de %d garrafas", 52);
?>

Note que %d representa um valor inteiro, se você tentar usar uma float ou um real ele não irá funcionar, segue uma tabela com alguns dos tipos aceitos:

Tipo Descrição
%b Argumento considerado um inteiro; apresentado com um numero binário
%c Argumento considerado um inteiro; apresentado com um valor correspondente em ASCII
%d Argumento considerado um inteiro; apresentado com um numero decimal
%f Argumento considerado numero de ponto flutuante; apresentado com um numero de ponto flutuante
%o Argumento considerado um inteiro; apresentado com um numero octal
%s Argumento considerado um string; apresentado com um numero string
%u Argumento considerado um inteiro; apresentado com um numero decimal não assinado
%x Argumento considerado um inteiro; apresentado com um numero hexadecimal em letras minusculas
%X Argumento considerado um inteiro; apresentado com um numero hexadecimal em letras maiusculas

Caso você queira utilizar mais de um valor pode passa os argumentos separados por virgulas repeitando a sequencia que foram declarados:

<?php
	printf("Estoque é de %d garrafas, a R$ %f cada", 52, 35.36);
?>

Para ajustar a precisão use “.<valor>” como no exemplo a seguir:

<?php
	printf("Estoque é de %d garrafas, a R$ %.2f cada", 52, 35.36);
?>

Sprintf()

A função sprintf() atribui o valor do resultado a uma variável ao invés de exibir na tela:

<?php
	$frase = sprintf("Estoque é de %d garrafas, a R$ %f cada", 52, 35.36);
?>
Publicado em PHP | Com a tag , , , , | Deixar um comentário