seja preciso usar vídeos de outras fontes (ou, até, mesmo, vídeos com hospedagem própria), existem algumas soluções:
Creating Intrinsic Ratios for Video. Artigo muito interessante de ThierryKoblentz que apresenta uma técnica que permite aos navegadores determi-narem as dimensões de vídeos com base na largura do elemento que estão
contidos: http://ow.ly/eqra4 .
FitVids.js. Plugin jQuery simplíssimo de usar que dá a qualidade da responsividade a vídeos incorporados em qualquer página: http://ow.ly/eqrpN .
Fluid Width Video. Artigo de Chris Coyier que aborda a inserção de vídeos com as tags iframe, object e embed: http://ow.ly/eqrT9 .
62
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
Exceção à velharia: imagens redimensionadas com qualidade em IE6`
Aproveitem a exceção do que acabou de ser devidamente enfatizado: uma solu-
ção de como melhorar a qualidade de imagens redimensionadas exibidas em ambi-
ente Windows (antes do 7), sobretudo com uso de IE6`.
Acontece que, usando a web sob estas condições, imagens redimensionadas fi-
cam com a qualidade muito comprometida. Com a devida referência a Ethan Mar-
cotte, reproduzo a imagem de exemplo em que o guru do web design responsivo
mostra um exemplo desta questão.
Existem muitas boas tentativas por parte da comunidade para solucionar isso.
Inclusive o próprio Ethan desenvolveu um JavaScript para tratar estas situações.
Basicamente o script varre todo o documento, troca as imagens pelo famoso
pixel transparente de 1px quadrado e aplica o filtro proprietário da Microsoft
AlphaImageLoader em cada uma. A partir disso, sempre que a janela do navega-
dor for redimensionada, o script recalcula, adequada e proporcionalmente, largura
e altura das imagens, redimensionando o pixel spacer. A seguir, o script de Ethan.
var imgSizer = {
Config : {
imgCache : []
,spacer : "/path/to/your/spacer.gif"
}
63
4.2. CSS para outros recursos flexíveis
Casa do Código
,collate : function(aScope) {
var isOldIE =
(document.all && !window.opera && !window.XDomainRequest)
? 1 : 0;
if (isOldIE && document.getElementsByTagName) {
var c = imgSizer;
var imgCache = c.Config.imgCache;
var images = (aScope && aScope.length) ? aScope :
document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].origWidth = images[i].offsetWidth;
images[i].origHeight = images[i].offsetHeight;
imgCache.push(images[i]);
c.ieAlpha(images[i]);
images[i].style.width = "100%";
}
if (imgCache.length) {
c.resize(function() {
for (var i = 0; i < imgCache.length; i++) {
var ratio = (imgCache[i].offsetWidth /
imgCache[i].origWidth);
imgCache[i].style.height =
(imgCache[i].origHeight * ratio) + "px";
}
});
}
}
}
,ieAlpha : function(img) {
var c = imgSizer;
if (img.oldSrc) {
img.src = img.oldSrc;
}
var src = img.src;
img.style.width = img.offsetWidth + "px";
img.style.height = img.offsetHeight + "px";
64
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='" + src + "', sizingMethod='scale')"
img.oldSrc = src;
img.src = c.Config.spacer;
}
// Ghettomodified version of Simon Willison's addLoadEvent() --
http://simonwillison.net/2004/May/26/addLoadEvent/
,resize : function(func) {
var oldonresize = window.onresize;
if (typeof window.onresize != 'function') {
window.onresize = func;
} else {
window.onresize = function() {
if (oldonresize) {
oldonresize();
}
func();
}
}
}
}
E, através de um comentário condicional, fazer o script entrar em ação somente
quando o browser for Internet Explorer:
<!--[if IE]>
<script src="imgsizer.js"></script>
<![endif]-->
Depois da implementação do script, a diferença na qualidade das imagens ren-
derizadas sob as condições expostas é nítida:
65
4.3. O problema de imagens em layouts fluídos
Casa do Código
Frequentemente, a partir de sugestões e casos da comunidade, o script é revi-
sado e atualizado. Portanto, passe a acompanhar o artigo em que, originalmente,
Ethan disponibilizou o script, Fluid Images (http://ow.ly/bg5hO), e aproveite para conhecer mais detalhes e pormenores de como a técnica foi desenvolvida e como
funciona.
4.3
O problema de imagens em layouts fluídos
Com as técnicas apresentadas para imagens flexíveis em web designs responsivos, é
possível fazer um bom número de testes para fixar os conhecimentos, pois isso já é a base a respeito de gráficos para a responsividade na web. Entretanto, surge uma questão (se não, a questão) sobre apresentar imagens em qualquer resolução: peso e tamanho!
Quando o acesso é tradicional, feito via desktop ou notebook, é justificável supor que o usuário está vendo a página através de um monitor de tamanho relativamente
confortável. Isso, juntamente com o fato de que a velocidade média de conexão à
internet no Brasil é de 512Kb a 2Mb (http://ow.ly/bg78j), não traz maiores problemas para a pessoa que navega em sites com imagens.
Já quando o acesso segue a tendência crescente de acesso mobile, temos questões