TiloWR

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

Corona SDK: Versão Windows e Novas Modalidades de Inscrição

willian — Mon, 28 Feb 2011 14:30:33 +0000

Há algum tempo, postei sobre o Corona SDK, um framework que gera builds tanto em iOS quanto Android utilizando a linguagem de script Lua. Pouco depois do meu post, saíram atualizações importantes sobre o framework:

Versão Windows - A versão beta pública do SDK para Windows já pode ser baixada. Porém, logicamente, só gera builds para Android.

Novas formas de inscrição - Além da versão Pro, que comentei no post anterior, que custa US$ 349/ano. Temos as versões Indie iOS Indie Android, cada uma US$ 199/ano. Isso é legal, pois se você pretende desenvolver só para um ou outro, pode pagar um valor menor (tendo a opção da plataforma Windows na versão Android).

Por enquanto é isso, estamos atentos a novas atualizações e postaremos elas aqui!

Até o próximo post e bom desenvolvimento!

ASP.NET MVC View Engines: WebForms, NHaml, Spark e Razor!

willian — Mon, 28 Feb 2011 09:30:10 +0000

Desde meu primeiro contato com desenvolvimento web, sempre utilizei tecnologias Microsoft. Lá em 2001 comecei a mexer com ASP3 e em 2004 comecei a trabalhar profissionalmente, já com ASP.NET. Desde o ASP3, as coisas não mudaram muito no que se refere ao HTML, a tecnologia avançou e mudou muito do lado do servidor, mas HTML sempre foi tratado da mesma forma.

Com a popularização dos frameworks MVC, uma nova abordagem veio em relação ao HTML, já que cada parte do MVC (Model, View, Controller) pode funcionar e agir da forma que for concebido no framework.

Um padrão que apareceu em relação a View, é que o HTML dela é gerado por meio de View Engines. Ou seja, você não usa mais HTML e sim uma estrutura que gera HTML.

Isso pode as vezes não estar claro na mente do desenvolvedor. Afinal, ao olhar uma View do ASP.NET MVC, o que está ali é basicamente HTML, salvo algumas marcações de código da Model, como era no ASP3.

Primeiramente é esse tipo de visão que precisa ser removido de sua cabeça. Aquilo não é HTML, é uma View Engine, mesmo que muitas delas utilizem HTML junto. A View Engine padrão utilizada pelo ASP.NET MVC é a WebForms (NÃO confundir com o ASP.NET Web Forms), que é basicamente a mesma do ASP3, porém com algumas coisas novas.

O que ajudará a entender como uma View Engine funciona é compará-las.

No caso do ASP.NET MVC, 4 View Engines se tornaram mais populares, ou por serem padrão e bem conhecidas, ou por mostrarem bons recursos de utilização. São elas:

WebForms - é a View Engine padrão do ASP.NET MVC e também a mais antiga. Existe desde 1996 quando veio com o ASP3 e desde lá não mudou muita coisa. Vejamos um exemplo do uso do WebForms:

Créditos: Channel 9

Podemos perceber que a principal característica do WebForms é a delimitação do trecho de código com <% e %>, o que é uma vantagem, já que fica bem visível onde começa e acaba HTML e código. Porém, dependendo da complexidade da vier, temos muita coisa escrita na página, muitos <% e %> abrindo e fechando sessões de código o tempo todo.

NHaml - O Haml é um padrão fortemente adotado no Framework Rails, que foi portado pra ASP.NET MVC na forma do NHaml.

A abordagem dele é bem interessante, já que nele você NÃO USA HTML. Ele é composto de marcações próprias que no final gerarão o código HTML. Vejamos o exemplo anterior agora em NHaml:

Créditos: Channel 9

Uma desvantagem do NHaml é que o projeto, apesar de open-source, não é muito ativo, tanto que ainda não temos NHaml compatível com o ASP.NET MVC 3. Algumas outras coisas dele não são tão “elegantes”, se o compararmos com as outras View Engines. Porém, se a idéia de não usar HTML e testar algo novo (desde que você não use MVC3) for interessante. Não perca tempo e experimente!

Spark - Essa é uma View Engine muito interessante e basicamente é o inverso do Nhaml. Enquanto no NHaml você não tem nenhum HTML, no Spark você trabalha dentro do HTML. As marcações do Spark são feitas dentro das tags HTML:

Créditos: Channel 9

Outra vantagem é que o projeto Spark é bem ativo e sempre o estão atualizando. Ele também já é compatível com ASP.NET MVC 3.

Além disso, o Spark fornece recursos próprio que ajudam na geração de código nas Views. Por meio de configurações você consegue criar tas próprias que irão gerar trechos específicos de HTML. É algo semelhante aos Helpers do MVC, porém você o escreve como se fosse uma tag HTML.

Se você tem vontade de testar algo novo e fora do universo Microsoft (Spark também é open-source), eu recomendo o Spark.

Razor - Deixado por último, porém não menos importante, o Razor é a View Engine mais nova de todas (2011) e vem junto com o ASP.NET MVC 3. Ou seja, ao criar uma View, você terá como opções de View Engine o WebForms e o Razor. Mas qual a idéia por trás do Razor?

Basicamente, a Microsoft resolveu atualizar o que vinha igual desde 1996, porém sem substituir o já tão conhecido WebForms. Você tem ele lá, porém tem uma outra View Engine mais fluida e prática pra experimentar, e essa, eu recomendo fortemente!

Fluidez, esse é o adjetivo que vem a mente ao ver uma View utilizando Razor. Reparem:

Créditos: Channel 9

Diferente do WebForms (que separa bem código e HTML), do NHaml (que não possui HTML) e do Spark (que coloca o código dentro das tas HTML), o Razor é fluido, o html e o código “conversam” de forma simples e direta. Isso pode ser visto de forma negativa, já que em uma View mais complexa, fica um tanto estranho perceber onde começa e acabam instruções e HTML. Porém, com o tempo isso deixa de ser um empecilho e no final passa a ser mais interessante desenvolver assim. Mas é questão de gosto, e de experimentar uma abordagem nova também.

Acho estranho alguns desenvolveres criticarem o Razor, pois quando chegou o ASP.NET MVC, a primeira crítica foi de ele usar WebForms nas Views.

Acho que o interessante, ao invés de pensar que as View Engines estão aí pra competir, deve-se pensar que elas estão aí pra te dar novas opções de desenvolver suas Views em MVC, ainda mais agora que esse padrão está virando uma realidade também dentro do mundo Microsoft.

Por enquanto é isso. Experimentem e digam aí nos comentários quais você mais gostou. Quem já usou View Engines em outras tecnologias (PHP, Rails, Django) também está convidado a participar! Até o próximo post e bom desenvolvimento!

TiloWR

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:

Corona SDK: Versão Windows e Novas Modalidades de Inscrição

Leia Também:

ASP.NET MVC View Engines: WebForms, NHaml, Spark e Razor!

Leia Também: