TiloWR » Tilo

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

Tilo — Wed, 15 Jun 2011 18:19:40 +0000

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

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

Tilo — Tue, 14 Jun 2011 19:23:24 +0000

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

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!

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

Tilo — Tue, 14 Jun 2011 19:03:03 +0000

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’

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.

Arquivo langs.xml corrompido Notepad++

Tilo — Tue, 24 May 2011 16:25:07 +0000

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.

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

Tilo — Thu, 07 Apr 2011 16:34:00 +0000

Print()

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

");
	print "Prefiro o $clima1 do que $clima2
";
	print "Prefiro o ".$clima1." do que ".$clima2."
";
?>

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():

");
	echo "Prefiro o $clima1 do que $clima2
";
	echo "Prefiro o ".$clima1." do que ".$clima2."
";
	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:

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:

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

Sprintf()

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

Comentar código em PHP com Sintaxe C++, Shell e C

Tilo — Thu, 07 Apr 2011 12:09:52 +0000

Comentar código é sempre importante, pois você nunca sabe quem vai ler seu código depois de você e também, porque depois de alguns meses é quase impossível você lembrar pra que serve cada coisa que você criou.

O PHP possui três formas de comentário, sintaxe C++ de linha única, sintaxe Shell e sintaxe C de linhas múltiplas.

Sintaxe C++ de Linha Única

Frequentemente os comentários possuem apenas uma linha por isso vamos começar pela sintaxe mais comum, a do C++ que o PHP suporta, ela é feita por duas barras (//) assim:

Sintaxe Shell

A Sintaxe Shell utiliza uma Hash Mark para fazer o comentário e não precisa delimitar onde acaba o comentário pois o PHP interpreta apenas uma linha.

Sintaxe C de Linhas Múltiplas

Muitas vezes montamos um métodos mais complexo e precisamos detalhar seu script ou até deixar comentários que sirvam de documentação futuramente.

Habilitando Short-Tags no PHP

Tilo — Wed, 06 Apr 2011 19:13:08 +0000

Você pode habilitar short-tags de três formas diferentes:

Configurando no arquivo php.ini:

vá onde você instalou o php abra o arquivo php.ini procure a linha

short_open_tag = off e mude para on.

Nos arquivos httpd.conf ou .htaccess inserindo a seguinte linha:

php_admin_flag short_open_tag on

Ou direto no script de execução com o seguinte comando:

ini_set(“short_open_tag”,”on”);

PHP – Sintaxe Padrão, Short-Tags e Short-Circuit

Tilo — Wed, 06 Apr 2011 18:19:43 +0000

Sintaxe Padrão:

A Sintaxe delimitadora padrão do PHP abre com assim:

Texto de Marcação”;
?>

Short-Tags

Para quem não está muito afim de “gastar” teclado pode fazer isso de uma forma reduzida, utilizando da seguinte forma:

porém, para poder utilizar as Short-Tags é preciso ativar a diretriz short_open_tag no php.ini, mas isso fica pra um próximo post.

Quando as Short-tags estiverem ativas, você pode omitir trechos do código para ser mais ágil, esta técnica é conhecida como short-circuit, vejam os exemplos à seguir:

Atenção: Short-Tags ajudam a reduzir código, porem eles conflitam com XML logo conflitaram com a sintaxe XHTM.

É bom lembrar que alguns editores (Front-Page) davam conflito com essa sintaxe e por isso poderia ser feito de outra forma, delimitando a àrea de script dessa forma:

é bom lembrar que o Front-Page tambem reconhece a sintaxe do ASP ficando assim:

<%
	print “Exemplo”;
%>

Atenção: A Sintaxe do estilo ASP foi removida do PHP 6

Pinch zoom com javascript (ongesturechange e style.zoom)

Tilo — Fri, 04 Feb 2011 10:22:10 +0000

O Zoom com pinça é um recurso nativo do iphone porem você precisa capturar esse evento no javascript para poder manipular objetos específicos dentro do safari, hoje vou ensinar como capturar esse evento e como fazer o “scale” de um objeto com javascript.

Vamos utilizar o mesmo HTML e CSS do post anterior, o de “Movendo objetos com ontouchstart e ontouchmove para iPad/iPhone”, vou colocar o HTML e o CSS aqui para facilitar a sua compreensão.

HTML:





Touch Events

CSS:

#item {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
}

e vamos ao javascipt, primeiro declaramos o objeto:

var obj = document.getElementById('item');

e depois atribuímos o evento a ele:

obj.ongesturechange = function(){ escala(event); };

crie a função escala:

function escala(e){
}

O evento ongesturechange possui um atributo scale, esses valores são representados da seguinte forma, 1 é o tamanho natural do objeto 0.1 é 10% do tamanho, dessa forma sabemos que 2 é o dobro do tamanho e asism sucessivamente.

Vamos utilizar o valor do scale, e atribui-lo ao Zoom.

function escala(e){
obj.style.zoom = e.scale;
}

E para finalizar colocamos e.preventDefault(); return false; para evitar a área de seleção indesejada

function escala(e){
obj.style.zoom = e.scale;

e.preventDefault();
return false;
}

no final seu javascript estará assim:

var obj = document.getElementById('item');
obj.ongesturechange = function(){ escala(event); };

function escala(e){
obj.style.zoom = e.scale;

e.preventDefault();
return false;
}

pronto, simples né, bem se esse post te ajudou não esquece de deixar um comentário.

Manipulando a área de seleção do usuário com CSS para iPhone e iPad

Tilo — Thu, 03 Feb 2011 10:31:14 +0000

Sabe quando você toca a tela do iPhone/iPad e ele cria uma área de seleção, pois bem, isso é muito útil em formulários e coisas do tipo, porém quando você está manipulando objetos com ontouchmove ou ongesturechange isso é realmente desagradável, principalmente quando a área toda é selecionada, hoje vou ensinar como desabilitar isso com apenas uma linha de CSS para Webkit

Basta esolher o objeto que você deseja desabilitar (no meu caso vou fazer em todos), e manipule o atributo -webkit-user-select, ele pode receber 3 valores;

none – Para desabilitar.
auto – Para selecionar a caixa inteira.
text – Para selecionar apenas o texto tocado.

No exemplo vou tirar a seleção de todos os objetos:

* {
-webkit-user-select: none;
}

Simples não? Se isso te ajudou, deixe um comentário

TiloWR » Tilo

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

Leia Também:

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

Leia Também:

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

Leia Também:

Arquivo langs.xml corrompido Notepad++

Leia Também:

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

Leia Também:

Comentar código em PHP com Sintaxe C++, Shell e C

Leia Também:

Habilitando Short-Tags no PHP

Leia Também:

PHP – Sintaxe Padrão, Short-Tags e Short-Circuit

Leia Também:

Pinch zoom com javascript (ongesturechange e style.zoom)

Leia Também:

Manipulando a área de seleção do usuário com CSS para iPhone e iPad

Leia Também: