Creación de imaxes de baixa calidade mediante XnView

Cando se usan imaxes de gran peso en unha páxina web, é interesante a aplicación do atributo lowsrc, o cal realiza a carga de unha imaxe de baixa calidade, que se cargará con antelación á de calidade, dando a impresión de unha maior velocidade de carga.

Para crear de xeito sinxelo estas imaxes, é posible utilizar, entre outras ferramentas, o visor de imaxes gratuito XnView.

As imaxes obtidas mediante este método serán de menor calidade, pero do mesmo tamaño que as orixináis.

Neste caso, se crearán várias imaxes a menor calidade, en formato jpg o cal é un formato que permite a perda de información reducindo a calidade da imaxe no proceso.

Paso 1: Seleccionar todas as imaxes.

Paso 2 Seleccionar Herramientas -> Convertir por lotes...

Aparece unha venta que indica diversos parámetros

Paso 3 Modificar opcións de calidade.

Para iso é suficiente pulsar o botón Opciones.

Para modificar a calidade é suficiente con mover a barra de calidade, ou indicar un número entre 1 e 100 no cadro correspondente.

O valor proposto por defecto e de 80, para conseguir unha imaxe en baixa calidade, (do mesmo tamaño que a orixinal, pero de menor peso) será suficiente con baixar ese valor.

Paso 4 Finalizar o proceso

Pulsase o botón aceptar.

Seleccionase a carpeta de destino.

Finalmente púlsase o botón proceder.

Comezará o proceso de conversión, e unha vez finalizado, cerraráse a ventana.

Un exemplo do resultado sería o seguinte:

Imaxe a calidade orixinal

Imaxe coa calidade moi reducida

O proceso completo pódese apreciar no seguinte vídeo de youtube.

Creación de imaxes en miniatura (Thumbnail) mediante XnView

Mediante o visor de imaxes gratuito XnView, é posible a creación de imaxes en miniatura (Thumbnails) de forma masiva.

Este tipo de imaxes soen usarse nas galerías de imaxes.Para comezar é importante que as imaxes estean en unha carpeta, e ter creado a carpeta na que almacenaremos as imaxes en miniatura.

En este caso a carpeta coas imaxes a tamaño natural, é a denominada orixinais.

Neste exemplo usaranse imaxes con licencias Creative Commons obtidas da wikimedia.

O proceso é como se indica a continuación:
Paso 1, abriremos a carpeta das imaxes orixinais :

Paso 2, seleccionar todas as imaxes da carpeta, para o que teremos varias solucións :

1. Seleccionar co rato. 
2. Menú Editar -> Seleccionar Todo. 
3. Combinación de teclas CTRL + A. 

Paso 3, seleccionar a opción de conversión por lotes, para o que teremos varias solucións :

1. Botón dereito, seleccionar "Conversión por lotes...". 
2. Menú Herramientas-> "Conversión por lotes...". 
3. Combinación de teclas CTRL + U. 

Aparece unha ventá coas opcións de conversión.

Paso 5, seleccionar a pestana "Transformaciones" :

Paso 6, seleccionar a transformación Imagen -> Cambiar tamaño, e pulsar en "Añadir" :

Esto provoca que na parte dereita apareza a opción seleccionada.

Como se pode comprobar, aparece na lista superior a modificación que desexamos aplicar.

Pódense aplicar várias modificacións simultáneamente, ainda que neste caso só aplicaremos a de "Cambiar tamaño"

Unha vez seleccionado, na parte inferior aparece un apartado de parámetros, nos que indicaremos as novas dimensións, que poden ser en pixeles (na primeira columna de casillas), ou en porcentaxe (na segunda columna) .

Neste caso crearemos imaxes en miniatura de un tamaño de 150 x 100 pixeles.

Neste caso desmarcaremos a casilla "Mantener proporción", para forzar que todas as imaxes sexan do mesmo tamaño, en caso contrario, se mantería a relación entre ancho e alto de cada unha delas.

Paso 7, seleccionar a carpeta de destino.

Na pestana "General" seleccionaremos o directorio no que desexamos que se garden as imaxes modificadas. A mellor opción e seleccionar un directorio distinto para que non se sobreescriban as imaxes orixinais.

Paso 8, Pulsar no botón "Proceder".

Tras pulsar o botón aparecerá unha ventana indicativa do progreso do proceso.

En caso de que exista unha imaxe co mesmo nome na carpeta destino, se indicará mediante unha ventana, na que se solicitará se desexamos sobreescribila.

A continuación se amosa o proceso completo en un vídeo de youtube:

Contador de 0 a 99 mediante imaxes

Como variación do exercicio anterior (Contador de 0 a 9), se propón a modificación do mesmo para que alcance a cantidade de 99.

Para realizar isto, se amosan dúas imaxes na páxina, as cales executan a mesma función.

Na función é preciso obter por separado o valor da cifra das decenas e das unidades, para conseguir isto se utiliza a función parseInt e o operador módulo.

Outro xeito de resolvelo, sería convertir a variable en texto e acceder á "letra" correspondente ás decenas ou unidades.

//se crea a variable fora da funcion
//para que conserve o valor por ser 
//de tipo global
var contador = 0;

function contadorNumeros (){
 contador++;
 
 if (contador == 100) {
  contador = 0;
 }
 
 var contadorDecenas = parseInt(contador/10);
 var contadorUnidades = contador % 10;
 //alert(contadorDecenas + " " + contadorUnidades);
 
 var imaxeDecenas = document.getElementById("imgDecenas");
 var imaxeUnidades = document.getElementById("imgUnidades");

 imaxeDecenas.src="numeros/" + contadorDecenas + ".gif";
 imaxeUnidades.src="numeros/" +contadorUnidades + ".gif";
}

O resultado, pódese apreciar nesta captura de pantalla no navegador Apple Safari:

Como se aprecia no vídeo, as decenas só se modifican cada dez modificacións das unidades.

Contador de 0 a 9

Creación de un contador de cero a nove, mediante imaxes.

NOTA:
É preciso ter en conta que a variable contador, ten que manter o valor entre as distintas execucións do bucle, de tal xeito que para isto suceda é preciso que sexa de ámbito global, o que se logra declarándoa fora de calqueira función.

//se crea a variable fora da funcion
//para que conserve o valor por ser 
//de tipo global
var contador = 0;

function contadorNumeros (){
 
 contador++;
 
 if (contador == 10) {
  contador = 0;
 }
 
 var nomeArquivo = "numeros/" + contador + ".gif";
 var numerito = document.getElementById("img001");
 numerito.src = nomeArquivo;
}

O nome do arquivo se obtén concatenando o nome da carpeta, co valor da variable e coa extensión do arquivo, a fin de obter algo similar a src="numeros/0.gif".

En cada pulsación sobre a imaxe, se executa o evento onclick, que executa a función contadorNumeros, arriba indicada.

É preciso evitar que o contador alcance o valor de 10, para o que non se dispoñen de imaxes, polo que cando se alcanza, forzamos o contador de novo a cero para que se realice un ciclo de 0 a 9 e volta.

Acceso a elementos mediante document.getElementById

Mediante o obxecto document, é posible acceder, a través de método getElementById, a calquera elemento da páxina web mediante o atributo id.

NOTA:
O atributo "id" debe ser único, o que permite acceder a cada elemento da web de xeito directo.

function cambiarImaxelogofirefox(){
 var imaxe;
 
 imaxe = document.getElementById("img001");
 
 imaxe.src = "logofirefox.jpg"
 }

function cambiarImaxelogoopera(){
 var imaxe;
 
 imaxe = document.getElementById("img001");
 
 imaxe.src = "logoopera.jpg"
 }

No corpo da páxina web, se inclúen dous enlaces, un para chamar a cada unha das funcións, e unha imaxe, na que se inclúe o atributo id.

<a href="#" onclick="cambiarImaxelogoopera();">funcion cambiarImaxelogoopera</a><br><br>
<a href="#" onclick="cambiarImaxelogofirefox();">funcion cambiarImaxelogofirefox</a><br><br>

<img id="img001" src="logoopera.jpg" 
 onMouseOver="cambiarImaxelogofirefox();" 
  onMouseOut="cambiarImaxelogoopera();"/>

O aspecto orixinal da páxina, ou tras pulsar o enlace que chama á función cambiarImaxelogoopera(), é o seguinte:

Tras pulsar o enlace cambiarImaxelogofirefox(), o aspecto cambia ó seguinte:

Como se observa no código HTML, tamén se engaden os controladores de eventos para mouseOver e mouseOut, para conseguir o efecto de un rollover.

<img id="img001" src="logoopera.jpg" 
 onMouseOver="cambiarImaxelogofirefox();" 
  onMouseOut="cambiarImaxelogoopera();"/>

O efecto obtido pódese apreciar neste vídeo:

Como se pode ver, cando o punteiro do rato se coloca enriba da imaxe, aparece o logo de Firefox, e cando o punteiro sae de enriba da imaxe, volta a aparecer o logo de Opera.

Marquesina título de esquerda a dereita

Como variante do post titulado Marquesina título de dereita a esquerda, se propón un exercicio similar pero con un efecto en dirección contraria.

function titulo() {
 document.title=txt;
 
 //almacenamos na variable o contido da última letra
 //a continuación almacenamos o contido total exceptuando 
 //a primeira letra do texto
 txt = txt.substring(txt.length-1) + txt.substring(0,txt.length-1);
 
 setTimeout("titulo()",200);
}

O efecto conseguido é o que se pode apreciar no vídeo:

Marquesina título de dereita a esquerda

Mediante JavaScript e o uso de setTimeout, pódese crear un efecto de marquesina (texto desplazándose).

var txt="  Texto de exemplo   -";

function titulo() {
 document.title=txt;
 
 //asignamos na variable o contido dende a segunda posicion
 //(numero de posicion cero) ata o final
 //e engadimos o final o primeiro caracter do texto
 txt=txt.substring(1)+txt.substring(0,1);
 setTimeout("titulo()",200);
}

O efecto conseguido é o que se pode apreciar no vídeo:

Contido distinto para cada navegador

Grazas ó código da entrada Deteccion de navegador, é posible xerar contido a medida para cada navegador.

Neste exemplo, crearáse unha web que cargará unha imaxe distinta para cada navegador, usaremos o logotipo de cada navegador, e analizaremos como navegadores os seguintes:

1. Microsoft Internet Explorer.
2. Mozilla Firefox.
3. Google Chrome.
4. Apple Safari.
5. Opera.

Para solucionar este problema será preciso comprobar se na cadea user-agent se atopa algunha cadea identificativa do navegador, como se pode ver no seguinte algoritmo.

O código correspondente será o seguinte:

function cargarImaxeNavegador () {
 var axente = navigator.userAgent;
 axente = axente.toLowerCase();
 
 if (axente.indexOf("msie") >= 0) {
  //Microsoft Internet Explorer
  document.write("<IMG src='logoexplorer.jpg'/>");
 }
 else if (axente.indexOf("firefox") >= 0) {
  //Mozilla Firefox
  document.write("<IMG src='logofirefox.jpg'/>");
 }
 else if (axente.indexOf("opera") >= 0) {
  //Opera
  document.write("<IMG src='logoopera.jpg'/>");
 }
 else if (axente.indexOf("opr") >= 0) {
  //Opera
  document.write("<IMG src='logoopera.jpg'/>");
 }
 else if (axente.indexOf("safari") >= 0) {
  if (axente.indexOf("chrome") >= 0) {
  //si pon safari e ademais pon chrome enton e chrome
   document.write("<IMG src='logochrome.jpg'/>");
  } 
  else {
  //si pon safari pero NON pon chrome enton e safari
   document.write("<IMG src='logosafari.jpg'/>");    
  }
 }
 else {
  alert ("Navegador descoñecido");
 }
}

Deteccion de navegador

Captura de pantalla da info dos navegadores:


Google Chrome 28 (Windows 7):

Internet Explorer 8 (Windows XP):

Internet Explorer 9 (Windows 7):

Internet Explorer 10 (Windows 7):

Opera 12.16 (Windows XP):

Opera 15 (Windows 7):

Firefox 22 (Windows 7):

Firefox 23 (Windows XP):

Apple Safari 5.1.7 (Windows 7):

A información amosada, se obtén mediante a interrogación do obxecto navigator:

function infoNavegador () {
 alert(
 "appCodeName: " + navigator.appCodeName + 
 "\nappName: " + navigator.appName +
 "\nappVersion: " + navigator.appVersion +
 "\nappMinorVersion: " + navigator.appMinorVersion +
 "\nuserAgent: " + navigator.userAgent
 );
}

DOM

Enlaces a información sobre os obxectos do navegador:

Obxecto Window:
http://www.w3schools.com/jsref/obj_window.asp

Xerar números aleatórios

Exercicio JavaScript.


JavaScript dispón do método Math,random que xera un número aleatório con decimais entre 0 e 1.
Para convertir este número en un número enteiro entre dous dados é presico usar o seguinte alforitmo:

parseInt(((AleatorioEntre0y1*(nFinal-nInicial+1))+nInicial));

//parseInt(((AleatorioEntre0y1*(nFinal-nInicial+1))+nInicial));
var numeroInicial = 5, numeroFinal = 10;
var aleatorioInicial;
var auxiliar;

aleatorioInicial = Math.random();
auxiliar = numeroFinal - numeroInicial + 1;
auxiliar *= aleatorioInicial;
auxiliar += numeroInicial;
auxiliar = parseInt(auxiliar);
alert (auxiliar);