tag:blogger.com,1999:blog-69610164789858256042024-03-05T13:19:27.331+01:00Triple clicTriple Clic - Trucos de PC, diseño, Internet y tecnología.Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.comBlogger108125tag:blogger.com,1999:blog-6961016478985825604.post-48628093945952735582018-11-13T13:17:00.000+01:002018-11-13T13:56:52.694+01:00Programa para leer archivos CBR, CBZ y PDF.<h3>Aplicaciones para leer Cbr, Cbz y Pdf en PC y Android.</h3>La mayoría de <b>cómics</b> en formato digital, suelen ser archivos con la extensión <b>CBR, CBZ, PDF, RAR o ZIP</b>.<br />
<br />
Para poder ver estos formatos en nuestro PC o dispositivo móvil tenemos muchas opciones, no vamos a entrar a enumerar todas sino a mencionar la que tras examinar varias, nos ha parecido más recomendable en cada sistema:<br />
<br />
<h3>PC, Windows, MacOSX, Linux e iOS:</h3><div style="width=100%; float:left; margin:15px 0 40px 0;"><div style="float:left; width:123px;height:158px;"><a href="http://www.dremin.com/tripleclic/imgs/comic-lector-cbr-yacreader.jpg" target="_blank"><img src="http://www.dremin.com/tripleclic/imgs/comic-lector-cbr-yacreader.jpg" height="185" width="140" /></a></div><div style="height:200px; padding-left:175px;"><a href="https://www.yacreader.com/downloads" target="blank" style="margin-left:10px; font-size:16px;">· YAC Reader</a><br />
<br />
- Es rápido al abrir y la interfaz ocupa lo mínimo necesario.<br />
- Te recuerda la última página vista de cada cómic.<br />
- Al terminar un cómic, pasa al siguiente archivo.<br />
- Puedes guardar o etiquetar páginas.<br />
- Menú inferior para ver miniaturas de página y navegar rápido. <br />
<br />
En iOS (iPhone, iPad e iPod Touch) es de pago, las versiones de ordenador son gratuitas.</div></div><br />
<h3>Android, móvil o tablet:</h3><br />
<div style="width=100%; float:left; margin:15px 0 40px 0;"><div style="float:left; width:170px;height:158px;"><a href="http://www.dremin.com/tripleclic/imgs/comic-lector-cbr-perfect-viewer.jpg" target=blank"><img src="http://www.dremin.com/tripleclic/imgs/comic-lector-cbr-perfect-viewer.jpg" height="185" width="140" /></a></div><div style="height:200px; padding-left:175px;"><a href="https://play.google.com/store/apps/details?id=com.rookiestudio.perfectviewer&hl=es" target="_blank" style="font-size:16px;">· Perfect Viewer</a><br />
<br />
Esta App junto a su <a href="https://play.google.com/store/apps/details?id=com.rookiestudio.perfectviewer.pdfplugin&hl=es">plugin para PDF</a>, es con diferencia una de las mejores maneras de leer cómics digitales en formato móvil.<br />
<br />
Esa App tiene recordar última página vista, indicador de qué archivos ya has abierto, biblioteca de cómics, marcadores... hasta aquí lo que tienen casi todas. Su punto fuerte es que puedes <b>configurar y personalizar</b> cada detalle. Como que tocando en determinado punto de la pantalla realice una acción concreta, además otra para pulsación larga que multiplica las acciones a realizar, todo ello en una cuadrícula "invisible" cuyas divisiones y posición también configuras.<br />
Personaliza dirección de lectura, orientación, tipos de filtro de enfoque, menús... de todo a tu gusto.<br />
</div></div><br />
Recordemos que también tenemos otro Post con información de cómo <a href="https://tripleclic.blogspot.com/2010/02/crear-archivos-crb.html" target="blank">crear archivo CBR</a> o extraer las imágenes del mismo.Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-81117836362449623232017-04-12T15:13:00.000+02:002017-04-12T15:14:59.764+02:00Solución a: Adobe Media Core dejó de Funcionar.<h3>Error: Adobe Media Core CS6 dejó de Funcionar.</h3><p>Si al abrir Adobe After Effects, Premier o Media Encoder, nos sale ese mensaje de error de MediaCore en CS5.5, CS6 o CC, esto se debe a un error de dynamiclinkmanager, encargado de la compatibilidad de formatos, que conecta con QuickTime.<br />
<br />
<ul><li><b>Solución rápida (temporal):</b><br />
<br />
Buscar en nuestro equipo el ejecutable <b>dynamiclinkmanager.exe</b><br />
<br />
Depende nuestra ruta de instalación su ubicación puede variar, usemos el buscardor del explorador, aunque suele estar en rutas como estas:<br />
<br />
<i>C:\Program Files (x86)\Common Files\Adobe\dynamiclink\CS6\<br />
C:\Archivos de pograma (x86)\Common Files\Adobe\dynamiclink\CS5.5\</i><br />
<br />
Seleccionar el archivo <i>dynamiclinkmanager.exe</i> y quitar o "eliminar" temporalmente <i>(no borrar del equipo, pues luego lo necesitaremos de nuevo)</i> enviándolo a la papelera para luego restaurarlo, o llevándonoslo a otra carpeta sacándolo de la suya original.<br />
Una vez sacado, abrir AfterFx, Premier o Media Encoder, y cuando ya haya abierto y cargado todo, devolver dynamiclinkmanager.exe a su carpeta original.<br />
<br />
Con esto solucionamos el poder abrir el programa sin el cartel del error si tenemos prisa, pero nos volerá a saltar la próxima vez que abramos el programa. Para solucionar el problema definitivamente:</li>
<br/>
<li><b>Solución definitiva (permanente):</b><br />
<br />
Desinstalar por completo Quick Time y volverlo a instalar. No sirve con dar a reparar o reinstalar, ha de ser instalado completo en limpio.<br />
<br />
Si tras esto el problema persiste, realizar la misma acción con After FX, Premier y Media Encoder, desinstalar e instalar de nuevo del paquete de Adobe.<br />
</li>
</ul><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-26797103671820097952017-01-12T17:27:00.000+01:002017-01-12T17:27:38.424+01:00Volver atrás con tecla Borrar en Chrome<h3>Regresar a la página anterior con Backspace.</h3><p>En el navegador Google Chrome podíamos regresar a la página anterior pulsando la tecla <b>Borrar</b> (como en el explorador de Windows, o en Firefox) desde su versión 52 en adelante Chrome ha eliminado esta característica, según dice la compañía porque un muy reducido porcentaje de usuarios la utilizaba correctamente, mientras que el resto perdía la página actual al querer borrar algo de un campo de texto, por no fijarse dónde tiene el foco.<br />
<br />
Esto nos dejó Chrome con el atajo de teclado para volver atrás: Alt+Flecha izquierda, o pulsando el propio botón. Pero en nuestra opinión, la tecla borrar era un atajo de teclado muy útil, y podemos recuperarlo:<br />
<br />
Para volver a activar esta característica, simplemente añadimos la extensión oficial de Google: <a href="https://chrome.google.com/webstore/detail/go-back-with-backspace/eekailopagacbcdloonjhbiecobagjci/related" target="_blank">Go back with backspace</a><br />
<br />
¡Y ya lo tenemos de nuevo!</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com1tag:blogger.com,1999:blog-6961016478985825604.post-69665061566664159142016-11-10T15:46:00.001+01:002016-11-12T04:15:22.905+01:00Camisetas Frikis<h3>Diseños de ropa con ilustraciones exclusivas.</h3><p>Se acercan las navidades y los reyes, ¿no sabes qué regalar o regalarte?, puedes acabar comprando algún objeto para acaparar polvo, o algo a lo que poder dar uso y que además mole. Regala una camiseta original en: <a href="http://www.latostadora.com/rael" target="_blank" title="Camisetas con ilustraciones exclusivas">Camisetas Frikis</a><br />
<br />
Selecciona un diseño y personaliza la prenda a tu gusto: camiseta manga corta o manga larga, sudadera (jerséy) con o sin capucha, bolso, ropa de niño... Elige el tipo de prenda en el color y talla que prefieras con el dibujo que más te guste.<br />
<br />
Con ilustraciones personalizadas del autor <a href="http://www.rael.es" title"Rael del Fraile - Diseñador gráfico multidisciplinar">Rael del Fraile</a> con caricaturas de cine y videojuegos con los que te sentirás identificado. Y te asegurarás de llevar una prenda con un dibujo exclusivo y original porque no se venden en ningún otro sitio.<br />
<br />
<a href="http://www.latostadora.com/rael" target="_blank"><img src="http://www.dremin.com/tripleclic/imgs/banner-tripleclic-camisetas.jpg" /></a><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-69454619073813181012016-11-03T04:18:00.000+01:002016-11-03T04:34:29.781+01:00Crear txt con listado de archivos.<h3>Guardar listado automático del contenido de una carpeta.</h3><p>Si queremos guardar en un archivo de texto una lista completa de los archivos de una carpeta en Windows, podemos hacer lo siguiente.<br />
<br />
En Menú de Inicio/Ejecutar (Tecla Windows+R), escribimos <b>cmd</b><br />
<br />
En esta ventana, escribimos el nombre de la unidad donde está la carpeta que contiene lo que queremos listar, por ejemplo C:<br />
Y pulsamos Enter. Estamos en la unidad seleccionada.<br />
<br />
Ahora supongamos que queremos listar el contenido de <i>C:\carpeta\subcarpeta\</i> "y el contenido aquí".<br />
<br />
Escribimos <b>cd</b> y un espacio, seguido de la ruta:<br />
<br />
<div class="programCode" style="width:500px;">cd <span class="remark">carpeta\subcarpeta</span></div><br />
Y pulsamos Enter. Ahora estamos en la carpeta que contiene lo que queremos listar. Podemos comprobar ese listado escribiendo <b>dir</b><br />
<br />
Para <b>crear un txt con el listado</b> de los archivos contenidos en esta carpeta (si copiamos y pegamos este texto en el cmd ha de ser con botón derecho/pegar, no funciona Ctrl + V), escribimos:<br />
<br />
<div class="programCode" style="width:500px;">dir/b><span class="remark">00-lista</span>.txt</div><br />
Y pulsamos Enter. Siendo <i>00-lista.txt</i> el txt (con el nombre que queramos, lo he nombrado como 00-lista para que aparezca arriba en orden alfabético) que nos creará en esa misma carpeta.<br />
<br />
Nos quedaría: <i>C:\carpeta\subcarpeta>dir/b>00-lista.txt</i> , y esto nos habría creado el txt con el contenido de subcarpeta.<br />
<br />
Si queremos que el listado de esta carpeta lo guarde en un txt en otra carpeta diferente, escribimos la unidad y ruta completa donde lo queremos guardar, tras <b>dir/b></b><br />
<br />
<div class="programCode" style="width:500px;">dir/b><span class="remark">E:\otro directorio\GuardadoAqui.txt</span></div><br />
Y pulsamos Enter. Nos quedaría: <i>C:\carpeta\subcarpeta>dir/b>E:\otro directorio\GuardadoAquí.txt</i> , con el listado del contenido de subcarpeta guardado en un txt en otro directorio.<br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-33710218454892560232015-11-23T02:15:00.002+01:002015-11-23T02:16:09.220+01:00Compatibilidad etiquetas HTML5 y propiedades CSS3 <h3>Cómo saber qué etiquetas HTML y propiedades CSS funcionan en cada navegador.</h3><p>Cuando escribimos código para web, y queremos comprobar qué <b>etiquetas y propiedades son compatibles con cada navegador</b>, sin tener que ir comprobando uno a uno, podemos utilizar la siguiente página:<br />
<br />
<a href="http://www.caniuse.com">www.caniuse.com</a><br />
<br />
Mediante su buscador, podemos ver un <b>listado de los navegadores compatibles</b> con cada etiqueta y propiedad, y qué versión de cada navegador.<br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-79847574747153993322015-03-01T00:29:00.001+01:002015-03-01T00:32:08.585+01:00Solución mensaje de error en Spotify.<h3>No es posible reproducir la canción actual.</h3><p>Si te sale el mensaje de error <i>"No es posible reproducir la canción actual"</i> en Spotify, y tienes una cuenta <b>Free</b>, pero provienes de una modalidad <b>Premium</b>, ya sea que la has cancelado, que estabas en la de prueba, o se acabó la suscripción, este mensaje puede deberse a lo siguiente:<br />
<br />
Con suscripción Premium puedes activar la casilla <i>Streaming de alta calidad</i>, que aumenta el bitrate de la música, opción que sólo deja activar en esa modalidad, pero que puede que al volver a suscripción Free, no se haya desactivo automáticamente. Por lo tanto tendríamos activada una casilla que en teoría no deberíamos poder activar. Es decir, que la tenemos activada pero no podemos utilizar su función, y por eso la música no se reproduce.<br />
<br />
Para solucionarlo vamos a preferencias y la desmarcamos.<br />
<br />
Abrimos el menú <b>Editar / Preferencias / Sonido</b><br />
<b>Desmarcamos</b> la casilla: <b>Streaming de alta calidad</b>. <br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com1tag:blogger.com,1999:blog-6961016478985825604.post-20772462587430526222015-02-25T01:51:00.002+01:002015-02-25T01:59:02.099+01:00Añadir programa en el menú contextual de Windows.<h3>Añadir opción de programa en botón derecho de Windows sobre un archivo.</h3><p>En Windows 7, al hacer clic con botón derecho del ratón sobre un archivo, sale un menú contextual con una serie de opciones como: <i>"enviar a, abrir con, copiar, pegar, propiedades, etc"</i>, y a veces algunos programas para abrir el archivo con ellos. Independientemente de los que aparecen en <i>Abrir con...</i>, que ahí no tenemos más que dar a <i>"elegir programa predeterminado"</i> para añadir uno más a la lista. Pero en el listado anterior de opciones (donde están "abrir, cambiar nombre, etc") para poder abrir el archivo directamente sin entrar en menú de "abrir con", si queremos añadir un nuevo programa, podemos hacerlo de una manera muy sencilla, editando el registro.<br />
<br />
En este tutorial <i>(para Windows 7, aunque podría funcionar también para otras versiones)</i> se explicará como ejemplo cómo añadir Abrir con Firefox y Editar en Notepad a las opciones de botón derecho sobre un archivo .html, pero puede realizarse sobre cualquier otra extensión de archivo, y añadir cualquier otro programa, simplemente con seguir los mismos pasos pero con sus otros respectivos archivos y programas.<br />
<br />
Primero, hacemos clic en el icono de inicio de Windows, o pulsamos la tecla Win. Escribimos <b>regedit</b> , y lo clicamos o pulsamos Enter.<br />
<br />
Una vez dentro del Editor de registro, desplegamos:<br />
<b>Equipo<br />
HKEY_CLASSES_ROOT</b><br />
<br />
Buscamos y desplegamos <b>.html</b><br />
Nos fijamos en la clave <i>Predeterminado</i>, lo que pone en el campo <b>datos</b>. En este caso concreto, como el navegador que abre los html por defecto es Chrome, pone <b>ChromeHTML</b>, ese es el nombre de los archivos con extensión .html<br />
<br />
<img src="http://www.dremin.com/tripleclic/imgs/html-file-1.png"><br />
<br />
Si el navegador que los abre es otro, el nombre será otro, o por defecto <b>htmlfile</b>.<br />
<br />
Según el nombre, en este caso ChromeHTML, buscamos más abajo ese nombre y lo desplegamos. Desplegamos la subclave <b>shell</b>, y en ella hacemos botón derecho <b>Crear nueva clave</b>, y ponemos el nombre que queremos que tenga la nueva opción que añadiremos al botón derecho de los html, por ejemplo <b>Abrir con Firefox</b>. Dentro de esta última creamos otra llamada <b>Command</b>. Y dentro de Command, en la clave que veremos a la derecha, la editamos haciendo doble clic <i>(o botón derecho / modificar)</i> y escribimos:<br />
<br />
<div class="programCode" style="width:500px;">"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" "file://%1"</div><br />
Y debería quedar así:<br />
<br />
<img src="http://www.dremin.com/tripleclic/imgs/html-file-2.png"><br />
<br />
Lo mismo podríamos hacer para añadir otros navegadores como Internet Explorer, etc. El <b>"file://%1"</b> es para que, al llamar al programa, éste abra el archivo seleccionado en su barra de dirección. En otros programas sin barra de dirección, que sólo abren el archivo, la sintaxis podría variar. Por ejemplo, para añadir Editar con Dreamweaver, habría que ponerlo de la siguiente manera:<br />
<br />
<div class="programCode" style="width:500px;">"C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\Dreamweaver.exe","%1"</div><br />
Y para añadir editar con Notepad, habría que ponerlo así:<br />
<br />
<div class="programCode" style="width:500px;">notepad.exe %1</div><br />
Recordemos que esto sirve para cualquier otro tipo de archivo, siguiendo la misma lógica y procedimiento.<br />
<br />
<i>Haz esto bajo tu propia responsabilidad, sabiendo que editar el registro de Windows de manera incorrecta podría causar daños en el sistema operativo. Así que es importante seguir los pasos detenida y correctamente, y buscando más información en caso de duda.</i><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-26989117002058311822014-12-29T13:20:00.000+01:002014-12-29T13:29:47.840+01:00Atajos útiles de Pincel en Photoshop.<h3>Atajos de teclado para la Herramienta Pincel en Photoshop.</h3><p>Para mejorar la productividad a la hora de utilizar la herramienta pincel, tenemos una serie de atajos de teclado que nos permiten cambiar el tamaño del pincel arrastrando, o seleccionar el color, la transparencia, y otras funciones para realizar acciones sin tener que ir a los menús ni dejar la herramienta, pulsando alguna tecla.<br />
<br />
Con la herramienta pincel activada, mantenemos pulsadas las siguientes combinaciones de teclas:</p><br />
<ul><li><b>ALT:</b> Aparece el cuentagotas, y con BIR seleccionamos color.</li>
<li><b>ALT + SHIFT + BDR:</b> Mientras mantenemos BDR, tenemos el selector de color flotante encima de nuestro puntero, y seleccionamos color al soltar.</li>
<li><b>ALT + BDR Arrastrando en Horizontal:</b> Al arrastrar en horizontal regulamos manualmente el diámetro del pincel.</li>
<li><b>ALT + BDR Arrastrando en Vertical:</b> Al arrastrar en vertical regulamos manualmente la dureza del borde.</li>
<li><b>BDR:</b> Con un clic en BDR sacamos un menú contextual de selección de tamaño, dureza y tipo de pincel.</li>
<li><b>Tecla '</b> y <b>Tecla ¡ :</b> Cambiamos el tamaño del pincel en píxels, de 1 en 1 hasta 10px, de 5 en 5 hasta 50px, de 10 en 10 hasta 100px, etc</li>
<li><b>Tecla ,</b> y <b>Tecla . :</b> Pasamos al anterior y siguiente tipo de pincel.</li>
<li><b>Spacebar + BIR:</b> Al mantener la barra espaciadora, podemos desplazarnos con la mano, y al soltar seguimos con el pincel .</li>
<li><b>Shift + BIR pulsado:</b> Mientras mantenemos Shift, la línea que dibujamos con el pincel será recta, en la dirección en la que hemos dirigido inicialmente la pincelada.</li>
<li><b>Shift + BIR clic:</b> Marcamos un punto metiante un clic de BIR, vamos a otra zona y realizamos un segundo clic esta vez con Shift pulsado, y nos unirá esos dos puntos con una línea recta.</li>
</ul><br />
<p><i>BIR = Botón izquierdo del ratón. BDR = Botón derecho del ratón.<br />
<br />
Estos atajos están probados en la versión de Photoshop 13.0 del CS6 para 64Bits.</i><p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-79996256134791317182014-12-19T22:23:00.003+01:002016-11-10T14:41:22.283+01:00¡Dentro vídeo!<h3>Vídeo de animación.</h3><p>Una animación 3D del animador <a href="http://www.rael.es" title="Rael del Fraile, animador 3D">Rael del Fraile</a>, que representa una divertida escena con los muñequitos de los carteles de las puertas de los baños.<br />
<br />
<iframe width="560" height="315" src="//www.youtube.com/embed/f_DyxxFT0qs?rel=0" frameborder="0" allowfullscreen></iframe><br />
<br />
A continuación algunas capturas del vídeo <a href="http://www.dremin.com/video/monigotes-wc.html" title="Monigotes WC, Animacion 3D">Animación: Monigotes de WC</a> :<br />
<br />
<a href="http://www.dremin.com/3d/3d-monigotes-wc-1.jpg" target="_blank" ><img src="http://www.dremin.com/3d/miniatura-3d-monigotes-wc-1.jpg" alt="Captura del vídeo 3D: Monigotes WC - 1" style="float:left; margin-left:5px;" /></a> <a href="http://www.dremin.com/3d/3d-monigotes-wc-2.jpg" target="_blank" ><img src="http://www.dremin.com/3d/miniatura-3d-monigotes-wc-2.jpg" alt="Captura del vídeo 3D: Monigotes WC - 2" style="float:left; margin-left:5px;" /></a><a href="http://www.dremin.com/3d/3d-monigotes-wc-3.jpg" target="_blank" ><img src="http://www.dremin.com/3d/miniatura-3d-monigotes-wc-3.jpg" alt="Captura del vídeo 3D: Monigotes WC - 3" style="margin-left:5px;" /></a><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-34495796081071280332014-12-03T14:19:00.001+01:002014-12-03T14:30:23.881+01:00Cambiar los atajos de teclado de After FX.<h3>Editar el keyboard shortcuts txt de Adobe After Effects.</h3><p>Podemos configurar nuestros propios métodos abreviados de After Effects editando un simple archivo de texto .txt. Lamentablemente AfterFx en no dispone de un menú de configuración para esto, pero podemos cambiarlos manualmente. Para ello vamos a la siguiente ruta:<br />
<div class="programCode" style="width:500px;">C:\Users\<span class="remark">usuario</span>\AppData\Roaming\Adobe\After Effects\<span class="remark">versión</span></div><i>Con el usuario y la versión del programa correspondiente en nuestro caso.</i><br />
<br />
Abrimos el <b>.txt</b> con los atajos de teclado, cuyo nombre puede variar dependiendo de la versión del programa y el idioma, pero estos suelen ser (cambiando a nuestro correspondiente número de versión):<br />
<ul><li>Adobe After Effects <i>10.5</i> Shortcuts.txt</li>
<li>Métodos abreviados Adobe After Effects <i>10.5</i>.txt</li>
</ul><i>Es recomendable realizar una copia de ese archivo de texto antes de modificarlo, para disponer del original y restaurarlo en caso de cometer algún error.</i><br />
<br />
El propio txt viene con unas pequeñas instrucciones de uso. Pero es muy sencillo, vale con buscar la acción que queremos realizar, e introducir entre paréntesis el atajo o atajos que deseemos. Por ejemplo, para añadir la coma y el punto para ir adelante y atrás en la línea de tiempo:<br />
<br />
<i>"TimeStepBack" = "(Ctrl+LeftArrow)(PageUP)<b>(Comma)</b>"<br />
"TimeStepForward" = "(Ctrl+RightArrow)(PageDOWN)<b>(.)</b>"</i><br />
<br />
Existen Scripts para realizar estos cambios, pero con un simple editor de texto como el Notepad podemos configurarlos a mano sin necesidad de un script.<br />
<br />
Podemos ver algunos <a href="http://tripleclic.blogspot.com.es/2014/05/atajos-de-teclado-en-after-effects.html" title="Keyboard shortcuts after fx">atajos de teclado útiles de After Effects</a><br />
<br />
O el listado completo en <a href="http://help.adobe.com/es_ES/aftereffects/cs/using/WSCEBCDB03-0A9C-459e-873E-F5A10520F24A.html">español</a> y en <a href="http://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html">inglés</a>.<br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-89759644664823805772014-11-30T15:05:00.001+01:002014-11-30T15:08:03.749+01:00Crear iconos y favicons.<h3>Trabajar con .ico en Photoshop.</h3><p>Para crear un icono en Photoshop, instalamos el Plugin <a href="http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat">ICO Format</a>, que hace que podamos leer y guardar en la extensión .ico en Photoshop.<br />
<br />
Es muy sencillo, bajamos nuestra versión compatible de ICO Format, que es un sólo archivo que copiamos en la carpeta:<br />
<i>C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats</i><br />
O la ruta equivalente de nuestra versión del programa, y con esto ya podemos leer y guardar en extensión .ico con Photoshop.<br />
</p><br />
<h3>Crear .ico con varias resoluciones.</h3><p>El formato .ico admite empaquetar en un sólo archivo el mismo icono en distintas resoluciones <i>(xcode, iconset)</i>, como pueden ser: 16x16, 24x24x 48x48, 64x64, 96x96x 128x128, 512x512, etc, para que en cada caso cargue el del tamaño que necesite.<br />
<br />
El anterior pluging de Photoshop permite leer estos archivos, y cuando abrimos un .ico con varias resoluciones, nos da a elegir cuál queremos visualizar o editar, pero recordemos que una vez modificado desde Photoshop sólo podremos guardar la versión de tamaño que estamos visualizando. No nos permite guardarlo en este modo de varias resoluciones.<br />
<br />
Sí queremos un .ico empaquetado con diferentes tamaños, podemos crear en Photoshop la imagen en las distintas resoluciones (16x16, 32x32, etc) guardar los archivos independientes <i>(en .ico, .png, o .gif)</i>, y luego juntarlos en un único .ico con un programa.<br />
</p><br />
<h3>Editores de Iconos.</h3><p>Aquí algunas aplicaciones gratuitas online:<br />
<br />
<a href="http://iconverticons.com/online">iConvert Icons Online</a> es una aplicación online que nos junta varios archivos en un único .ico <i>(su versión online es gratuita, aunque dispone de una aplicación de escritorio de pago por unos 4€)</i>.<br />
<br />
<a href="http://www.xiconeditor.com">X Icon Editor</a> es una aplicación online que te permite subir un icono de tu disco duro y te genera automáticamente hasta 4 resoluciones para tu .ico <i>(64, 32, 24 y 16)</i> que luego puedes exportar. O bien dibujar cada una de ellas directamente desde el navegador, con una interfaz tipo Paint.<br />
<br />
Y aquí otras aplicaciones gratuitas de escritorio:<br />
<br />
<a href="http://www.qualibyte.com/pixelformer">PixelFormer</a> es una aplicación de escritorio algo más avanzada, con capas, para crear iconos de cualquier tamaño. Muy recomendable y completa.<br />
<br />
<a href="http://www.free-icon-editor.com">Free Junior Icon Editor</a> es una aplicación muy básica para crear iconos, para quien busca algo más sencillo, con una interfaz muy similar al Paint, para crear iconos dedesde 16 hasta 64 px de tamaño. La versión gratuita abre 2 ventanas de publicidad de iconos al abrir y cerrar el programa. <br />
</p><br />
<h3>Establecer un favicon en una página web.</h3><p>El favicon que se muestra en la barra de dirección, la lista de marcadores/favoritos, o en las pestañas del navegador, suele tener una imagen con tamaño estándar de 16x16 px <i>(o un .ico de 16x16 + 32x32)</i>, y se guarda con el nombre <b>favicon.ico</b> en la carpeta raíz del directorio web. Este será el que los navegadores carguen por defecto en las páginas salvo que indiquemos lo contrario en el html.<br />
<br />
Para agregar un favicon en un html concreto, introducimos dentro del <head>, uno de los siguientes códigos, según la extensión de archivo que tenga:<br />
<br />
.ico: <i><link rel="shortcut icon" href="archivo.ico" /></i><br />
<br />
.ico con varias resoluciones: <i><link rel="icon" type="image/x-icon" href="archivo.ico" /></i><br />
<br />
.png, .gif, etc:<i> <link rel="icon" type="image/png" href="imagen.png" /></i><br />
(definimos extensión en <i>type</i>)<br />
</p><br />
Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-54455242894304510522014-11-27T00:21:00.001+01:002014-11-27T14:08:33.891+01:00Captain Icon: Iconos vectoriales gratuitos.<h3>Pack de iconos del Capitán Icono.</h3><br />
<p><a href="http://captainicon.com" title="Capitán Icono: Set gratuito de iconos vectoriales"><img src="http://www.dremin.com/tripleclic/imgs/captain-icon-tripleclic.gif" alt="Captain Icon: Free Vector icon set" /></a><br />
<br />
El diseñador <a href="https://dribbble.com/mariodelvalle" title="Diseñador Mario del Valle">Mario del Valle</a>, nos trae este set de iconos para descargar gratis, con más de 350 iconos vectoriales en múltiples formatos de imagen, EPS, PSD, PNG, SVG y Web Font, para utilizar en proyectos de diseño web, móvil e interfaces.<br />
<br />
Puedes descargarlo gratis en <a href="http://captainicon.com" title="Free vector icon set">captainicon.com</a><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-70354406815445928012014-10-14T10:53:00.000+02:002014-10-14T10:53:16.643+02:00Aplicación: Editor gráfico on-line.<h3>App online tipo Photoshop.</h3><p>A veces necesitamos hacer un retoque fotográfico, o realizar alguna pequeña edición gráfica desde un ordenador que no tiene un Photoshop o similar, y aunque existen alternativas como Paint Net, o Gimp, requieren descarga e instalación, y no es lo más rápido.<br />
<br />
Autodesk ha sacado <b>Pixlr</b>, una aplicación online para utilizar directamente desde nuestro navegador. Es sencilla, pero muy útil y completa, capas, filtros, niveles... con unas herramientas muy similares a las de Photoshop, incluso compartiendo muchos de sus atajos de teclado. Podemos utilizarlo directamente desde el siguiente enlace:<br />
<br />
<a href="https://pixlr.com">pixlr.com</a></p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-78081541843427199522014-09-28T13:05:00.000+02:002014-09-28T13:14:03.141+02:00Enlazar un vídeo de YouTube desde un minuto y segundo concreto<h3>Comenzar a reproducir un vídeo enlazado de YouTube desde un punto exacto.</h3><br />
<p>Para que la reproducción de un vídeo de YouTube comience desde el minuto y segundo que nosotros queremos, basta con agregar un pequeño código al final de la URL del vídeo. <br />
<br />
Pongamos por ejemplo, que queremos ir al minuto 1 y 8 segundos. Pues al final de la ruta del vídeo añadimos el siguiente código:</p><br />
<div class="programCode">#t=1m08s</div><br />
<p>El dígito antes de la <b>m</b> marca el minuto, y el dígito antes de la <b>s</b> marca el segundo. Si queremos comenzar en cualquier segundo antes del primer minuto, dejamos el minuto en 0.<br />
<br />
Por ejemplo, para el minuto 1:08, la URL quedaría así:</p><br />
<div class="programCode">http://www.youtube.com/watch?v=I9KruI7DKwQ<span class="remark">#t=1m08s</span></div><br />
<br />
<h3>Comenzar o finalizar la reproducción de un vídeo incrustado de YouTube en un tiempo concreto.</h3><br />
<p>Para controlar el momento en el que comienza o acaba la reproducción de un vídeo de YouTube incrustado en una página web, tenemos que añadir un código al final de la URL del vídeo, similar al ejemplo anterior, pero esta vez tenemos que escribirlo en segundos. Por ejemplo, si queremos ir al minuto <b>1:08</b>, tendremos que decirle que comience en el segundo <b>68</b>, dado que: <i>1 minuto = 60 segundos, + 8 segundos</i>. Y el código es el siguiente:</p><br />
<div class="programCode">?start=68</div><br />
<p>Con ese código es suficiente, y se reproducirá hasta acabar el vídeo, pero si queremos decirle también dónde finalizar, pongamos por ejemplo el minuto <b>1:20</b> <i>(60 + 20 = segundo <b>80</b>)</i>, tras el código anterior añadimos este otro:</p><br />
<div class="programCode">&end=80</div><br />
<p>Y el código incrustado nos quedaría así</p><br />
<div class="programCode"><iframe width="640" height="360" src="//www.youtube.com/embed/I9KruI7DKwQ<span class="remark">?start=68&end=80</span> "></iframe> </div>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-37270714194251473682014-07-03T21:02:00.003+02:002014-07-19T12:54:16.419+02:00Remapeo de tiempo de precompo en AfterFx.<h3>Time remapping preciso de precomposición en After Effects.</h3><p>Cuando arrastramos una composición dentro de otra, podemos remapear el tiempo de esta precomposición arrastrada, con ella seleccionada en la línea de tiempo, pulsamos <i>Ctrl + Alt + T, o menú Capa/Tiempo/Activar remapeo de tiempo</i>. Y ahora podemos añadir, mover y copiar claves para pausar, reducir, estirar, o crear bucles jugando con el tiempo de esta precomposición.<br />
<br />
Pero ojo, aún cuando ambas composiciones tienen el mismo número de fotogramas por segundo, podríamos encontrarnos con que algunas claves del remapeo de tiempo no muestran lo que realmente nosotros tenemos dentro de esa precomposición en el segundo que le estamos marcando.<br />
<br />
Para evitar esto, y asegurarnos de que el tiempo que le marcamos coincide con el que realmente hay dentro de esa precompo, vamos a sus ajustes <i>(haciendo clic derecho sobre ella en la ventana de proyecto)</i>, vamos a <b>Ajustes de composición</b>, y luego en la pestaña <b>Avanzado</b>, tenemos que tener marcada la casilla <b>Conservar velocidad de fotogramas cuando estén anidados o en la cola de procesamiento</b>. <br />
<br />
Con esto nos aseguramos de que el tiempo al que le llamemosm con el time remapping en la otra composición donde la habíamos arrastrado, coincide con el tiempo correcto.<br />
<br />
Recordemos que también tenemos <a href="http://tripleclic.blogspot.com.es/2011/09/loops-con-claves-en-after-effects.html">expresiones para crear bucles de remapeo de tiempo</a>.<br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-21469166764024869282014-06-07T13:54:00.003+02:002014-06-07T14:05:45.957+02:00Dimensión de píxel estirado vs píxel cuadrado.<h3>Relación de fotogramas en píxel estirado y píxel cuadrado en diferentes formatos.</h3><br />
<p>Tabla para relacionar el tamaño del fotograma de vídeo cuando está en píxel estirado o en píxel cuadrado, en diferentes formatos de vídeo:</p><br />
<table width="500" cellspacing="2" bgcolor="#eee" align="center" style="font-family:Verdana; font-size:12px; color:#333; box-shadow: 2px 2px 3px rgba(000,000,000,0.3), 2px 2px 15px rgba(000,000,000,0.3);
border: 1px solid #336666;
border-radius:15px 15px 15px 15px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px;"><tr><td height="5"></td></tr>
<tr valign="top"> <td width="100" ><b>Formato</b></td> <td><b>Dimensión de fotograma en pixel estirado</b></td> <td><b>Proporción de aspecto de píxel<br />
</b><span style="font-size:11px; font-style:italic">Pixel Aspect Ratio (PAR)</span></td> <td><b>Dimensión de fotograma en píxel cuadrado</b></td> </tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">PAL SD 4:3<br />
</td> <td bgcolor="#fff">720 x 576</td> <td bgcolor="#fff">1,07</td> <td bgcolor="#fff">768 x 576</td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">PAL SD 16:9 </td> <td bgcolor="#fff">720 x 576 </td> <td bgcolor="#fff">1,42 </td> <td bgcolor="#fff"> 1024 x 576 </td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">NTSC SD 4:3 </td> <td bgcolor="#fff">720 x 480 </td> <td bgcolor="#fff">0,9 </td> <td bgcolor="#fff">720 x 534 </td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">NTSC SD 16:9</td> <td bgcolor="#fff">720 x 480 </td> <td bgcolor="#fff">1,2 </td> <td bgcolor="#fff">854 x 480 </td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">HDV</td> <td bgcolor="#fff">1440 x 1080 </td> <td bgcolor="#fff">1,33</td> <td bgcolor="#fff">1920 x 1080 </td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">HD 720p</td> <td bgcolor="#fff">1280 x 720</td> <td bgcolor="#fff">1,0 </td> <td bgcolor="#fff">1280 x 720 </td> </tr>
<tr><td height="1"></td></tr>
<tr valign="top"> <td bgcolor="#fff"width="100" height="30" style="font-style:italic;">HD 1080p </td> <td bgcolor="#fff">1920 x 1080 </td> <td bgcolor="#fff">1,0 </td> <td bgcolor="#fff">1920 x 1080 </td> </tr>
<tr><td height="10"></td></tr>
</table>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-7849298013524352752014-05-30T20:53:00.003+02:002017-04-21T02:41:00.533+02:00Atajos de teclado en After Effects.<h3>Atajos útiles de teclado en After FX.</h3><br />
Recordemos que Adobe AfterFx no dispone de menú para configurarlos, pero podemos ver cómo editarlos manualmente en el siguiente artículo: <a href="http://tripleclic.blogspot.com.es/2014/12/cambiar-los-atajos-de-teclado-de-after.html" title="editar keyboard shortcuts" target="_blank">Configurar los atajos de teclado de AfterFX</a>.<br />
<br />
Hasta que demos con nuestros atajos ideales, aquí tenemos un pequeño listado resumen de algunos atajos muy útiles:<br />
<br />
<p>F3: Con capa seleccionada, muestra u oculta la ventana de Control de Efectos.<br />
F4: Muestra u oculta los Modos de fusión.<br />
Ctrl + Alt + T: Activa el remapeo de tiempo en la capa seleccionada.<br />
Ctrl + J: Resolución completa.<br />
Ctrl + Shift + J: Resolución Mitad.<br />
Ctrl+ Shift + Alt + J: Resolución Cuarto.<br />
<br />
<br />
<b> - En el timeline:</b><br />
<br />
Alt + Shift + J: Cuadro de diálogo para ir al tiempo marcado. <br />
Ctrl + Clic: Arrastrando por timeline, escuchas el audio sin necesidad de previsualización RAM.<br />
J o K: Coloca el indicador a la clave de animación anterior o posterior.<br />
I u O: Coloca el indicador en el inicio o final de la capa seleccionada.<br />
Inicio o Fin: Coloca el indicador en el inicio o al final de la composición.<br />
Shift + Inicio o Fin: Coloca el indicador en el inicio o el final del espacio de trabajo seleccionado.<br />
Alt + Inicio o Fin: Mueve la capa seleccionada al inicio o al final.<br />
Re Pag o Av Pag: Avananza o retrocede un fotograma con el indicador.<br />
Shift + Re Pag o Av Pag: Avananza o retrocede 10 fotogramas con el indicador.<br />
Alt + Re Pag o Av Pag: Mueve la capa seleccionada un fotograma.<br />
Alt + Shift + Re Pag o Av Pag: Mueve la capa seleccionada un fotograma.<br />
Flechas: Mueve 1px la capa seleccionada.<br />
Shift + Flechas: Mueve 10px la capa seleccionada.<br />
Ctrl + flechas izquierda o derecha: Avanza o retrocede un fotograma con el indicador.<br />
Ctrl + flechas arriba o abajo: Selecciona la capa superior o inferior (omite las candadas).<br />
Ctrl + Alt + flechas izquierda o derecha: Va al inicio o al final de la composición con el indicador.<br />
Ctrl + Alt + Shift + flechas izquierda o derecha: salta entre los inicios y los finales de cualquier capa en el timeline.<br />
Ctrl + Alt + Flechas arriba y abajo: Sube o baja la un nivel a la capa seleccionada.<br />
Ctrl + Shift + Flecha arriba o abajo: Suma la capa superior o inferior a la selección múltiple de capa.<br />
Clic central: Panning horizontal y vertical.<br />
Ruleta: Pannin vertical por capas.<br />
Ruleta + Ctrl: Panning vertical por espacio de 3 capas.<br />
Ruleta + Alt: Zoom (horizontal, en tiempo).<br />
Ruleta + Shift: Panning horizontal (en tiempo)<br />
* numérico: Crea un marcador en el punto actual de la capa seleccionada, o del timeline sin ninguna capa seleccionada.<br />
U: De la capa seleccionada, despliega sólo las propiedades que contengan alguna clave de animación.<br />
P: Despliega la de Posición<br />
S: Despliega la de Escala.<br />
T: Despliega la de Opacidad.<br />
A: Despliega la de punto de anclaje.<br />
<br />
<br />
<b>- Con clave de animación seleccionada:</b><br />
<br />
Ctrl + Clic: Convierte la clave (a cada clic alterna entre los modos de curva).<br />
Ctrl + Shift + F9: Convierte la clave en acelerada (sólo cuando la clave está en modo lineal)<br />
Shift + F9: Convierte la clave en decelerada (sólo cuando la clave está en modo lineal)<br />
F9: Convierte la clave en curva.<br />
<br />
<i>Esto es un resumen del</i> <a href="http://help.adobe.com/es_ES/aftereffects/cs/using/WSCEBCDB03-0A9C-459e-873E-F5A10520F24A.html">Listado completo de Adobe.com</a><br />
<i>(Mismo listado en <a href="http://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html">inglés</a>)</i><br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com2tag:blogger.com,1999:blog-6961016478985825604.post-53030727721934454242014-05-15T11:45:00.002+02:002014-05-15T12:07:55.949+02:00Exportar mp4 compatible con iPhone<h3>Valores de codificación H.264 para dispositivos móviles con iOS.</h3><p>No todos los vídeos en <b>MP4</b> reproducidos en <b>HTML5</b> se ven siempre en todos los dispositivos, sobre todo en los móviles con sistemas <b>iOS</b> antiguos, para ello hay que especificarle unos valores.<br />
<br />
Al exportar un vídeo de un programa de edición o codificarlo con el códec <b>H264</b>, hemos de tener en cuenta los siguientes valores:<br />
<br />
<div style="color:#777777; margin-left:30px; margin-bottom:7px;"><b>Multiplexador:</b></div><div style="margin-left:45px;">Multiplexación: <b>MP4</b><br />
Compatibilidad de flujo: <b>Estándar</b></div><br />
<div style="color:#777777; margin-left:30px; margin-bottom:7px;"><b>Vídeo:</b></div><div style="margin-left:45px;">Códec: <b>MainConcept H.264 Vídeo</b><br />
Perfil: <b>Línea de base</b><br />
Nivel: <b>3.0</b><br />
</div><br />
En Ajustes de la velocidad de bits, podemos poner tanto CBR (constante) como VBR (variable).<br />
<br />
A tener en cuenta que con el Perfíl Línea de base en Nivel 3,0 del compresor H.264 hay unas limitaciones de tamaño, que varían dependiendo del Píxel Aspect Ratio (PAR) del vídeo y de su velocidad de fotogramas por segundo (fps).<br />
<br />
Por ejemplo, en vídeos con PAR 1,00 (píxel cuadrado) y de hasta 25 fps, la resolucion del vídeo está limitada a <b>720x540</b> en el caso de 4:3, y <b>746x420</b> en 16:9.<br />
<br />
En <a href="http://es.wikipedia.org/wiki/H.264#Levels">H.264 Levels</a> de la Wikipedia, algunos ejemplos de limitación son 720×480@30.0fps y 720×576@25.0fps para salidas en PAR 1,00 de vídeo procedente de PAR 1,09 (píxel estirado DV PAL).<br />
</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-51474345434399017562014-01-13T01:20:00.001+01:002014-01-19T12:20:19.976+01:00Sincronizar elementos entre 3dsmax y AfterFX.<h3>Cómo enlazar una escena de 3ds Max a After Fx mediante Compositor Link.</h3><br />
<p>Podemos conectar una escena de 3D Studio Max con After Effects para llevarmos movimientos de cámara, objetos, etc, y sincronizar cosas en postproducción. Para enlazar ambas escenas vamos a utilizar el Compositor Link de AfterFx.<br />
<br />
Hay que tener en cuenta que After Fx trabaja con sprites planos, así que los elemenos que le enviemos deberían ser cámaras, nulls o planos, si son modelos 3D, AfterFx nos los mostrará simplemente como planos tomando sus ejes locales.<br />
<br />
Vamos a 3dsMax, Seleccionamos los elemenos que queremos llevarnos, y creamos un State. <i>Menú Rendering / State Sets</i>.<br />
<br />
Una vez en la ventana de State Sets, con los elementos seleccionados damos al botón de grabación, el icono redondo a la derecha de "Objects", esto nos añadirá los elementos seleccionados a un State.<br />
<br />
Y en esa misma ventana, un poco más abajo, en Compositor Link, damos a <i>Create Link</i>, y guardamos el archivo .sof<br />
<br />
Vamos a AfterFx, abrimos el menú <i>Archivo / Open Compositor Link (Autodesk)</i> y damos a <i>Create Link</i>, para seleccionar el archivo .sof que acabamos de guardar.<br />
<br />
Y con esto tendremos los objetos (representados como planos) con sus parámetros de animación y cámaras de la escena de 3ds max.</p><br />
<h3>Peculiaridades</h3><br />
<p>Los objetos enviados de 3dsmax a After, no llevarán las curvas de animación originales, lo que hará será respetar la animación que tiene, pero con una clave por cada fotograma. Los enviados de After a 3dsmax sí mantendrán las claves que tenían en After, pero con valores lineales, omitiendo los in/out de las curvas.<br />
<br />
Para enviar de After Fx a 3ds Max, hacemos lo mismo pero en orden inverso, primero creamos el link en el compositor Link de After Fx, y después, en 3ds Max, damos a crear link en el State Sets. Pero hay que tener en cuenta 3 cosas:<br />
<br />
- Que sólo nos enviará las capas de After que tengan el definidor de capa 3d activado.<br />
<br />
- Que los objetos en el espacio 3D de After tienen unos valores internos de colocación para ese espacio, al llevarlos a 3dsmax es muy probable que nos aparezcan todos ignorando estos valores, sobre todo los de rotación, o posados todos sobre el espacio 2D del suelo. En el espacio 2D del suelo sí mantendrán su posición y animación.<br />
<br />
- Que sólo nos llevará un objeto por cada referencia en el proyecto, es decir, que ignorará las copias. Si en el timeline tenemos 2 planos que son copia uno del otro y ambos hacen referencia a un mismo sólido en la biblioteca, sólo nos llevará uno. Si queremos llevarnos 2, tendremos que tener 2 sólidos en la biblioteca, y cada plano hacer referencia a uno.<br />
<br />
Cuando enviamos objetos de 3dsmax a After esto no pasa, ya que todas las instancias las interpreta como objetos independientes, cada una con su referencia en la biblioteca.<br />
<br />
Esta conexión es útil principalmente para enviar de 3dsmax a After, no tanto a la inversa. En 3dsmax podemos tocar la escena y en After actualizar esta conexión, pero en una escena llevada a 3dxmax y tocada en After no es recomendable volverla a llevar a 3dsmax, pues los objetos perderán sus rotaciones originales y se perderán algunos valores.</p><br />
<h3>Cómo instalar el Compositor Link en After Effects</h3><p>Para instalar o activar el Compositor Link en After Effects, debemos copiar unos archivos que vienen en las carpetas de 3dsMax, que por defecto deberían estar en:<br />
<br />
<i>C:\Program Files\Autodesk\3ds Max 2013\ExternalPlugins\CS5\Windows\</i><br />
<br />
Adobe.AfterFX.dll<br />
Autodesk.Plugins.Adobe.AfterFX.SceneIO.dll<br />
Autodesk.Plugins.Adobe.AfterFX.SceneIO.Loader<br />
<br />
Y hemos de copiarlos respectivamente en las siguientes carpetas los siguientes archivos:<br />
<br />
<i>C:\Program Files\Adobe\Adobe After Effects CS5\Support Files</i><br />
Adobe.AfterFX.dll<br />
Autodesk.Plugins.Adobe.AfterFX.SceneIO.dll<br />
<br />
<i>C:\Program Files\Adobe\Adobe After Effects CS5\Support Files\Plug-ins\AEGP</i><br />
Autodesk.Plugins.Adobe.AfterFX.SceneIO.Loader<br />
<br />
<i>La carpeta "AEGP", debemos crearla</i>.<br />
<br />
Ahora, al abrir AfterFx, en el menú <i>Archivo</i> aparecerá <i>Open Compositor Link (Autodesk)</i> que antes no nos aparecía.<br />
<br />
Nota: los mismos archivos del 3dsMax 2013 para el AfterFx CS5 sirven para el CS6, copiando los archivos en la misma ruta correspondiente al CS6.</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-7907562139548366422014-01-13T01:05:00.001+01:002014-01-13T01:05:50.829+01:00Morpher procedente de simetría, bajo el Skin.<h3>Crear Morphers en objetos con Skin, a partir de simetría en 3DS Max.</h3><p>En <b>3dsmax</b>, cuando tenemos un objeto con <b>Skin</b>, y debajo de ese Skin queremos aplicar un <b>Morpher</b>, a veces éstos no funcionan bien si proceden de objetos modelados con el modificador <b>Symmetry Tool</b>, y se rompen. Cuando esto sucede puede es porque el modificador de simetría, a veces, sobre todo en los vértices de unión, puede cambiar el número de ID de los vértices en la malla, que el Skin utiliza de referencia para el pesado a los Huesos, y esto hace que aunque la topología de malla es visualmente idéntica, los números asignados a los vértices de una y otra son distintos.<br />
<br />
Si utilizamos mallas 3D con el modificador de simetría, corremos el riesgo de mover vértices del centro, y es muy sensible a cambiar la numeración de la topología de vértices, y entonces ya no funciona bien en el Morph.<br />
<br />
Para modelar con simetría, podemos usar la herramienta <i>(no modificador)</i> de simetría, que está en: <b>Graphite Modeling Tools / Polygon Modeling / Symmetry Tools</b>, que nos permite (sobre objetos simétricos) modelar sólo un lado, y aplicar los cambios al opuesto. Para que esta herramienta funcione, hay que hacer clic con ella en <b>pick object</b> sobre el objeto simétrico, antes de tocar ningún lado (mientras aún es simétrico), de otra manera no detectaría la simetría, y después modelar, y hacer clic en <b>"+ to -"</b> o en <b>"- to +"</b> para pasar la forma de un lado al otro.<br />
<br />
Podemos utilizar el modificador de simetría sobre esa malla si queremos como referencia para después borrarlo y aplicar la simetría del Symmetry Tools.</p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-55285371411400538202013-07-28T21:38:00.001+02:002013-07-28T21:38:43.676+02:00Usar el teclado de su ordenador como MIDI en Cakewalk Music Creator 6<h3>Cómo usar el teclado de su ordenador para tocar música en Cakewalk Music Creator 6 Touch</h3>
<p>¿Alguna vez ha querido tocar música utilizando el teclado de su ordenador, en esas ocasiones en que no tiene un teclado de música MIDI disponible? Componer canciones añadiendo notas con las pulsaciones de su teclad es una característica de la que disponen la mayor parte de programas de creación de música. Pero por desgracia, esta característica no está disponible en Cakewalk Music Creator 6 Touch, más pensado para las pantallas táctiles o los teclados MIDI reales.</p>
<br/>
<p>Por ello, parecía interesante y necesario encontrar una forma de <strong>utilizar el teclado de su ordenador como teclado MIDI</strong> que pudiera ser <strong>reconocido por Music Creator 6</strong>, como una forma de componer borradores de canciones incluso en su ordenador portátil u otras situaciones en que no tuviera un teclado MIDI a mano.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbKPZSixmxB4ys79e3zR4LVBbrpVherMS8iyCPMg_xGHfgZnq9NtBmZyIJ6lYBBTePlAfIpwvia_ilBhyphenhyphenWsBd31XbW-KEcFcXv80XAxkljMp-_Lw764H_Ch3BoDWisaT5Bfmj42AXKt4/s1600/Computer-keyboard-as-music-keyboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Usar teclado de ordenador como teclado de música" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbKPZSixmxB4ys79e3zR4LVBbrpVherMS8iyCPMg_xGHfgZnq9NtBmZyIJ6lYBBTePlAfIpwvia_ilBhyphenhyphenWsBd31XbW-KEcFcXv80XAxkljMp-_Lw764H_Ch3BoDWisaT5Bfmj42AXKt4/s1600/Computer-keyboard-as-music-keyboard.jpg" /></a></div>
<h3>Cómo hacer que Cakewalk Music Creator 6 Touch reconozca el teclado de su ordenador como una entrada MIDI</h3>
<p>El procedimiento necesario para que, en general, cualquier aplicación de creación musical reconozca el teclado de su ordenador como un teclado MIDI, debería seguir los siguientes pasos:</p>
<ul>
<li>Un teclado MIDI virtual debería <strong>capturar las pulsaciones de teclas</strong> del teclado de su ordenador, interpretándolas como MIDI.</li>
<li>Esta información MIDI debería ser <strong>redirigida</strong> de la salida del teclado virtual a la <strong>entrada MIDI</strong> de su programa de creación musical.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWQicX5GnZYsJBigZZpa2FTRIGfAkG8s7Kf7LTA4hLDQnEaO_n67GVV4w06ppCdrhg4o6AmZFMHnEYER5N0dXz1HEIxvcltgNsMRDhc2DZwhundakBHmlfAB-u6e-rpbX5V9PvDJqvbk/s1600/Teclado-ordenador-MIDI.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWQicX5GnZYsJBigZZpa2FTRIGfAkG8s7Kf7LTA4hLDQnEaO_n67GVV4w06ppCdrhg4o6AmZFMHnEYER5N0dXz1HEIxvcltgNsMRDhc2DZwhundakBHmlfAB-u6e-rpbX5V9PvDJqvbk/s1600/Teclado-ordenador-MIDI.jpg" alt="Usar teclado de ordenador como MIDI" /></a></div>
<p>Así pues, hacer que su teclado funcione con Music Creator es más sencillo de lo que parece, una vez que dispone de los siguientes programas gratuitos instalados:</p>
<ul>
<li><b>VMPK</b>. Se trata de un proyecto de código abierto, cuyo nombre significa <i>Teclado de Piano MIDI Virtual</i> (Virtual MIDI Piano Keyboard). VMPK reconocerá las pulsaciones de tecla que se produzcan en el teclado de su ordenador como si fuesen una entrada MIDI. Este programa puede descargarse <a href="http://vmpk.sourceforge.net/">en este enlace</a>, habiendo también otras descripciones avanzadas de su uso y configuración en su propia página oficial.</li>
<li><b>loopMIDI</b>. Este programa, creado por Tobias Erichsen, proporciona una forma fiable y extremadamente sencilla para redirigir sus cables MIDI virtuales entre sus programas y dispositivos. A diferencia de otros programas populares pero actualmente desactualizados, como MIDIYoke, loopMidi funcionará con sistemas que van desde Windows XP a Windows 8, con soporte para versiones de 32 y de 64 bits. El programa puede descargarse de la página web del autor, <a href="http://www.tobias-erichsen.de/software/loopmidi.html">en este enlace</a>.</li>
</ul>
<br/>
<h3>Pasos detallados para utilizar el teclado de su ordenador como un dispositivo de entrada MIDI en Music Creator 6 Touch</h3>
<p>Una vez que tenga Cakewalk Music Creator 6 Touch instalado en su ordenador, junto con las otras dos utilidades de software previamente mencionadas, sólo tendrá que seguir los pasos que se mencionan a continuación para poder tocar y grabar música utilizando el teclado de su ordenador.</p>
<br/>
<p>En primer lugar, <strong>ejecute loopMIDI</strong> arrancando el archivo loopMIDI.exe. La primera vez que lo arranque deberá <strong>crear un nuevo puerto de redirección MIDI</strong>. Para ello, pulse el botón con el símbolo de más (<strong>+</strong>) para crear este nuevo puerto MIDI. En el ejemplo, utilizamos el nombre por defecto para el puerto de redirección, <i>loopMIDI Port</i>.</p>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMuzjJIVF22-C7Cu9RP_9QrB0rVWJK1eHbHo3ZVFezBzTA8JGeFK3uOBtGjnLBU_4oiyNNVsQt6YDDDgVuH7dBk0T-VAe3VDI9YXLxlQH_0bohXNABWTYURFU4oD5xJhDiY5mDdgHGP4/s1600/add-new-MIDI-port.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMuzjJIVF22-C7Cu9RP_9QrB0rVWJK1eHbHo3ZVFezBzTA8JGeFK3uOBtGjnLBU_4oiyNNVsQt6YDDDgVuH7dBk0T-VAe3VDI9YXLxlQH_0bohXNABWTYURFU4oD5xJhDiY5mDdgHGP4/s1600/add-new-MIDI-port.jpg" alt="Añadir un nuevo puerto MIDI" /></a></div>
<br/>
<p>Tenga en cuenta que <strong>no debe cerrar loopMIDI</strong>, ya que este programa tiene que seguir ejecutándose para que el redireccionamiento MIDI surta efecto.</p>
<br/>
<p>El siguiente paso consiste en ejecutar <b>VMPK.exe</b> para arrancar el software que actúa como el teclado MIDI virtual. Desde ese momento, VPMK comenzará a capturar las pulsaciones del teclado de su ordenador como si se tratase de una entrada MIDI, siempre y cuando su ventana se encuentre seleccionada como la ventana activa actual de Windows. Seleccione <b><i>Edit > MIDI Connections</i></b> (editar conexiones MIDI) para configurar la salida MIDI de este programa en cuestión.</p>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dq3ptNx3yb3fnOsxPc4zX1pqYd8T45n43CcVbPdO-SObwRt_EbcnOcEAMl9IQwF67GKXozvl8ZiK3dMXXm0AmAsf41mjCuhiR5Zyz-NhVQQcMuueOm7h_PWLIxyTVNAzWsDFwX00QQA/s1600/edit-keyboard-MIDI-connections.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="editar conexiones MIDI virtuales" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dq3ptNx3yb3fnOsxPc4zX1pqYd8T45n43CcVbPdO-SObwRt_EbcnOcEAMl9IQwF67GKXozvl8ZiK3dMXXm0AmAsf41mjCuhiR5Zyz-NhVQQcMuueOm7h_PWLIxyTVNAzWsDFwX00QQA/s1600/edit-keyboard-MIDI-connections.jpg" /></a></div>
<br/>
<p>Necesitamos que la salida de este teclado virtual vaya hacia el puerto de redirección MIDI que acabamos de crear. Por ello, dentro del menú de configuración MIDI de VMPK seleccionaremos el nombre del nuevo puerto de loopMIDI como <b><i>Output MIDI Connection</i></b> (conexión de salida MIDI). En este ejemplo, seleccionaremos el puerto de redirección recién creado, de nombre “<i>loopMIDI Port</i>”, y pulsaremos OK.</p>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLncyeV79FBKNdnAB6bHWS6dwfi03xOl7ZH-pI54BUm8WF7sUkEEU4xyeXxzKs-uyq3aswR2yF8yjfClPS54bAgInBBZy-qXVZrTRRcYky2cpBVyH1VOyJf65QkTOwzbtLGCTBFoQ-g84/s1600/VMPK-output-MIDI-configuration.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="conexión MIDI de salida" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLncyeV79FBKNdnAB6bHWS6dwfi03xOl7ZH-pI54BUm8WF7sUkEEU4xyeXxzKs-uyq3aswR2yF8yjfClPS54bAgInBBZy-qXVZrTRRcYky2cpBVyH1VOyJf65QkTOwzbtLGCTBFoQ-g84/s1600/VMPK-output-MIDI-configuration.jpg" /></a></div>
<br/>
<p>He aquí cuando llegamos a <b>Cakewalk Music Creator 6 Touch</b>. En este punto, reconocemos las pulsaciones del teclado, y las enviamos a un puerto MIDI que las redirecciona como una nueva entrada MIDI. Así que el próximo paso consiste en configurar Music Creator 6 para que utilice este puerto virtual como su <b>entrada MIDI</b>. Dentro de Music Creator, abra el menú de preferencias seleccionando <b><i>Edit > Preferences</i></b>.</p>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NnaC5yk90mHpiOWScm-JrlHxpQUONv_hex8EiOpiCsGviAG_XnQJnsB-AZoNc13dWupK2hIIkexfjPpqtu6-mBbQ2TeE5-8ghtKCKhx3pHxFkFbnmaPIlmP9iXnv1wVwGQVpNt0Glvo/s1600/edit-music-creator-6-preferences.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="editar las preferencias de Music Creator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NnaC5yk90mHpiOWScm-JrlHxpQUONv_hex8EiOpiCsGviAG_XnQJnsB-AZoNc13dWupK2hIIkexfjPpqtu6-mBbQ2TeE5-8ghtKCKhx3pHxFkFbnmaPIlmP9iXnv1wVwGQVpNt0Glvo/s1600/edit-music-creator-6-preferences.jpg" /></a></div>
<br/>
<p>Dentro de la ventana de preferencias de Music Creator, seleccione<b><i>Devices</i></b> (dispositivos) dentro de la categoría <i>Inputs</i> (entradas). Busque el nombre del <strong>puerto MIDI virtual</strong> que acabase de crear - en nuestro ejemplo, su nombre es <i>loopMIDI Port</i>. Seleccione este puerto marcando la casilla a la izquierda de su nombre en la categoría de entradas MIDI, y pulse OK.</p>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXdbZleTudDkzzGaCtiRIzfxzi5MWST54Izg2-uNxOlAVefXKd8lSiCE_fSW7FWiDIH_E8FYCmDwT7C5PrCOn37Vppq66w5cVYvCfbpWeNA8dxTnZmZwlGDTB4Cie8gGP-jScv42MCzs/s1600/input-loop-MIDI-port-cakewalk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Dispositivos MIDI de entrada en Cakewalk Music Creator" border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXdbZleTudDkzzGaCtiRIzfxzi5MWST54Izg2-uNxOlAVefXKd8lSiCE_fSW7FWiDIH_E8FYCmDwT7C5PrCOn37Vppq66w5cVYvCfbpWeNA8dxTnZmZwlGDTB4Cie8gGP-jScv42MCzs/s400/input-loop-MIDI-port-cakewalk.jpg" width="400" /></a></div>
<br/>
<iframe align="left" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-na.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=eserranocom-20&o=1&p=8&l=as1&m=amazon&f=ifr&ref=tf_til&asins=B00466HM28" style="align: left; height: 245px; padding-right: 20px; padding-top: 5px; width: 131px;"></iframe>
<br/>
<p>¡Y eso es todo! <b>Cakewalk Music Creator reconocerá las pulsaciones en el teclado como una entrada MIDI</b> (siempre y cuando la ventana del teclado virtual VMPK sea la ventana activa de Windows, y siempre que el software de loopMIDI siga ejecutándose) permitiéndole grabar las notas (e incluso grabaciones nota a nota) de sus canciones, introducidas directamente desde el teclado de su ordenador.</p>
<br/>
<p>Incluso cuando no hay nada más adecuado que un teclado de música MIDI completo, esta solución es bastante efectiva para ahorrar tiempo si no tiene un teclado MIDI a mano, o si está creando música con su portátil mientras viaja.</p>ESVhttp://www.blogger.com/profile/00378746204489625224noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-63138387255249634432013-05-23T21:00:00.001+02:002013-05-23T21:01:01.528+02:00¡Dentro Vídeo!<h3>Vídeo 3D Frikimusical.</h3>
<p>
De la mano de uno de nuestros redactores y diseñadores <a href="http://www.dremin.com" target="blank" title="Rael del Fraile - Diseñador y Animador 3D">Rael del Fraile</a>, nos llega este vídeo 3D del pequeño <i>robot cabezudo</i> de Star Wars, bailando al <i>Rey del Pop</i>:</p>
<br/>
<iframe width="560" height="315" src="http://www.youtube.com/embed/I9KruI7DKwQ?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
<br/>
<p>Bien, ya podéis comentar por ahí que vosotros habéis visto a <a href="http://www.dremin.com/video/r2-dance.html" title="R2 Dance">R2D2 bailando a Michael Jackson</a>.
</p>ESVhttp://www.blogger.com/profile/00378746204489625224noreply@blogger.com0tag:blogger.com,1999:blog-6961016478985825604.post-21697687684392887492013-05-22T16:11:00.000+02:002013-05-30T04:31:25.237+02:00Auriculares: Guía rápida, dB, Ohm, Hz.<h3>¿Qué Auriculares / Cascos comprar?</h3><p>Vamos a simplificar todo lo de los <b>Ohm</b> (Ohmios), <b>dB</b> (Decibelios) y <b>Hz</b> (Hertzios). Hay mucha información técnica por internet explicando qué son, pero no responde a la pregunta rápida de <b>¿qué necesito valorar a la hora de comprar unos auriculares?</b>, TripleClic pretende hacer la vida más sencilla, así que vamos a simplificar todo eso a un lenguaje más humano:<br />
<br />
<h3>¿Qué son, para qué sirven y qué importancia tienen los Ohm, dB y Hz?</h3><ul><li><b>Ohm:</b> Los Ohmios son la <b>Impedancia</b> de los cascos, o en castellano: la resistencia que ofrecen al paso de la corriente, esto determina la potencia que llega con respecto a la que se le envía. A más Ohms más potencia necesita para funcionar. Si la resistencia es muy alta, necesita de un amplificador. En las características técnicas suelen venir en valor nominal, 16, 24 o 32 es lo habitual y para nuestros propósitos está bien.<br />
<br />
</li>
<li><b>dB:</b> Los Decibelios son el <b>Nivel de presión de sonido (SPL)</b>, o la <b>potencia de volumen</b>. Valores de dB más altos hacen que el auricular se escuche más alto, pero también que distorsione antes, a más volumen más cerca de la distorsión.<br />
<br />
</li>
<li><b>Hz:</b> Hertzios son la <b>Frecuencia de audio</b>, y realmente es el <b>dato importante</b> a tener en cuenta a la hora de determinar la calidad. Es el rango de frecuencias que reproduce el auricular, para escuchar más los agudos y graves, suele venir en valores de mínimo y máximo, mejor a rangos más grandes con el mínimo más bajo y el máximo más alto. El oído humano capta rangos entre 20 a 20.000 Hz.<br />
</li>
</ul><br />
<h3>Conclusión, ¿qué necesito?.</h3><br />
Pues si eres un técnico de sonido, o un entendido y tienes un equipo de sonido considerable, probablemente no necesites leer esto, e incluso discrepes con algunos puntos, pero si eres un usuario de ordenadores, un jugón o un diseñador, y lo que quieres son unos cascos para el PC o el portátil, lo único que necesitas valorar es:<br />
<ul><li>A mayor dB más volumen. Entorno a 112 dB/mW es lo habitual.<br />
<br />
</li>
<li>A mayor Ohm más resistencia y requiere más potencia o menos volumen alcanza, 16, 24 o 32 nominal es lo habitual.<br />
<br />
</li>
<li>A mayor rango de Hz capta más frecuencias de sonido y es más calidad. <b>Este es el dato a valorar</b> 20-20.000 Hz está bien, a partir de ahí, mayor rango <i>(12-28.000 Hz, por ejemplo)</i> da más calidad, y menor rango <i>(21-18.000 Hz, por ejemplo)</i> da menos.</li>
</ul></p>Dreminhttp://www.blogger.com/profile/11119627208961403852noreply@blogger.com7tag:blogger.com,1999:blog-6961016478985825604.post-3604486117838735102013-03-25T18:36:00.000+01:002013-07-28T22:01:00.456+02:00Preguntas Frecuentes Acerca de Páginas Web Móviles<h3>Cómo optimizar la versión móvil de un sitio web</h3>
<p>Hace algunos años, los teléfonos móviles eran accesorios comunes, pero sólo usados para realizar llamadas telefónicas. Pero a día de hoy, el tráfico que nuestras páginas web reciben de los teléfonos móviles no deja de incrementar, encontrándose ya a un nivel en que su importancia no puede pasarse por alto. Y con nuevas oportunidades surgen también nuevos desafíos – y preguntas.</p><br/>
<p>Para facilitar las cosas, incluimos a continuación una lista de preguntas frecuentes, junto con sus respuestas, acerca de cómo optimizar las versiones sólo para móviles de sus páginas web, teniendo en cuenta tanto factores técnicos como de optimización en buscadores y experiencia de usuario.</p><br/>
<ul>
<li><a href="#preguntaMovil1">¿Por qué puede tener sentido redirigir a una versión sólo para móviles?</a><br/><br/></li>
<li><a href="#preguntaMovil2">¿Debería mostrar contenidos distintos para navegadores web móviles en la misma URL, o debería redirigirlos a una URL diferente, sólo para móviles?</a><br/><br/></li>
<li><a href="#preguntaMovil3">¿Debería crear versiones distintas para móviles antiguos y para smartphones?</a><br/><br/></li>
<li><a href="#preguntaMovil4">¿Cómo se etiqueta una URL móvil como una versión alternativa?</a><br/><br/></li>
<li><a href="#preguntaMovil5">Si la versión móvil de una página no se corresponde con una página del sitio web principal, ¿a dónde debe apuntar su etiqueta canonical?</a><br/><br/></li>
<li><a href="#preguntaMovil6">¿Cómo puede detectar usuarios móviles para enviarles contenidos diferentes?</a><br/><br/></li>
<li><a href="#preguntaMovil7">¿Debería tener en cuenta a la versión móvil del rastreador de Google en el código de redirección para móviles?</a><br/><br/></li>
<li><a href="#preguntaMovil8">¿Redirigir en el servidor, o redirigir usando Javascript?</a><br/><br/></li>
<li><a href="#preguntaMovil9">¿Redirección permanente 301 o redirección temporal 302?</a><br/><br/></li>
<li><a href="#preguntaMovil10">¿Debería incluir una cabecera HTTP Vary en las URLs móviles?</a><br/><br/></li>
<li><a href="#preguntaMovil11">¿Debería incluir un enlace a su versión normal desde la versión optimizada sólo para móviles?</a><br/><br/></li>
<li><a href="#preguntaMovil12">¿A qué página exacta debería apuntar un enlace desde la versión móvil hacia la versión normal?</a><br/><br/></li>
<li><a href="#preguntaMovil13">¿Cómo se puede permitir navegar la versión normal a los usuarios móviles si se está redirigiendo?</a><br/><br/></li>
<li><a href="#preguntaMovil14">¿Se debe redirigir hacia la versión normal a los usuarios de ordenadores de sobremesa que intenten entrar en la versión móvil?</a><br/><br/></li>
<li><a href="#preguntaMovil15">¿Se deben considerar los navegadores de las tabletas como navegadores móviles?</a><br/><br/></li>
</ul>
<h3 id="preguntaMovil1">¿Por qué puede tener sentido redirigir a una versión sólo para móviles?</h3>
<p>El diseño web adaptativo presenta ciertas ventajas en comparación con crear una versión independiente y alternativa sólo para sus usuarios móviles:</p><br/>
<ul>
<li><b>El mantenimiento se simplifica</b>. Incluso cuando la programación de páginas web adaptativas puede incrementar el nivel de complejidad, sólo sería necesario realizar modificaciones en un único sitio web. En cuanto a los contenidos se refiere, todos sus contenidos se encontrarían en un solo lugar, haciendo que fuera más sencillo expandir y actualizar su página simultáneamente para todo tipo de usuarios (tanto móviles como regulares.)<br/><br/></li>
<li><b>El SEO puede simplificarse</b>. Presentar una única versión de su página web a todos sus usuarios, con los mismos contenidos (en general), evita tener que gestionar cómo se notifican ambas versiones a los motores de búsqueda, dejando bien claro cuál es la versión principal y cuál es aquella optimizada para móviles.<br/><br/></li>
</ul>
<a href="#preguntaMovil1"><img src="http://eserrano.com/treble-click/images/mobile/es/1-web-adaptativo.jpg" alt="Diseño web adaptativo" height="333" width="536" /></a>
<p>No obstante, incluso cuando el diseño web adaptativo será probablemente la única tendencia que sobreviva en un futuro no muy lejano, crear una página web adaptativa en lugar de una página web alternativa optimizada sólo para móviles podría no ser la mejor opción si se dan unas circunstancias determinadas:</p><br/>
<ul>
<li><b>Presupuesto ajustado</b>. Los diseños web adaptativos requieren un grado adicional de planificación previa, así como una fase de pruebas en la que se deben tener en cuenta múltiples dispositivos y resoluciones de pantalla, para todas las clases de contenido.<br/><br/></li>
<li><b>Teléfonos móviles antiguos</b>. Si la mayor parte de sus usuarios aún utilizan smartphones de cierta antigüedad, pero quieren navegar en su página web en una versión móvil, entonces lo mejor será que dicha versión optimizada para móviles sea muy rápida y ligera, específicamente diseñada con la simplicidad y la velocidad como objetivos principales.<br/><br/></li>
<li><b>Compatibilidad con código antiguo</b>. Si su página web ya disponía de una versión móvil, o si su página web sería difícilmente convertible en una página web adaptativa, entonces trabajar con la versión móvil existente tendría bastante sentido.<br/><br/></li>
<li><b>Consideraciones del contexto</b>. Los objetivos de sus usuarios, mientras se desplazan y utilizan sus teléfonos móviles, pueden ser bastante distintos de los objetivos de otros usuarios que accedan a su página web desde un ordenador de sobremesa. Hay algunas restricciones adicionales acerca de la interfaz y del contexto en que están utilizando sus navegadores que también influirán en lo que debería mostrárseles: escribir en una pequeña pantalla táctil mientras se anda por la calle es francamente complicado, con lo que sus formularios online resultarían bastante inútiles; leer en una pequeña pantalla móvil puede hacer que sus páginas, largas y detalladas, se conviertan en abrumadores chorros de texto inmanejables en un dispositivo móvil.<br/><br/></li>
</ul>
<p>Si su situación es la contemplada en uno de los escenarios anteriormente mencionados, entonces lo más recomendable es que utilice una versión para móviles, separada de las páginas web de su sitio principal, y que optimice esta versión móvil tanto como sea posible. Esto quiere decir que:</p><br/>
<ul>
<li>Siempre mostrará contenido fácil de navegar a sus usuarios.<br/><br/></li>
<li>Sus páginas serán fácilmente indexables para los motores de búsqueda.<br/><br/></li>
<li>Su <i>versión móvil no competirá con su página web principal</i>, canibalizando sus resultados de búsqueda.<br/><br/></li>
</ul>
<p>A continuación se presentan otras preguntas frecuentes acerca de cómo optimizar el rendimiento de la versión móvil de una página web.</p><br/>
<h3 id="preguntaMovil2">¿Debería mostrar contenidos originales y optimizados para móviles en la misma URL, o redirigirlos a una URL distinta, sólo para móviles?</h3>
<p>Existen dos enfoques para servir contenido optimizado para móviles a los usuarios de su página web: mantenerlos en la URL original, pero ofreciéndoles un contenido distinto, optimizado para móviles, o bien redirigirlos a una URL distinta en que podrían acceder a contenidos optimizados para móviles.</p><br/>
<a href="#preguntaMovil2"><img src="http://eserrano.com/treble-click/images/mobile/es/2-redireccion-url.jpg" alt="Redirección URL móvil" height="333" width="536" /></a>
<p>El primer enfoque tiene una ventaja desde el punto de vista de la optimización en buscadores: todos los enlaces que apuntasen a una de sus versiones móviles también apuntarían a su versión principal, pasando directamente su ranking a las URLs principales, puesto que ambas serían coincidentes.</p><br/>
<p>No obstante, este enfoque también conlleva algunos riesgos mayores. En caso de tener problemas con esta configuración, como no identificar claramente cuáles son sus contenidos móviles y cuáles sus contenidos originales (en general, más completos) de cara a los buscadores, puede llevar a los motores de búsqueda a pensar que está enviando únicamente contenido muy resumido a todos sus usuarios, o que está utilizando tácticas de optimización reprobables como la ocultación de contenidos o enmascaramiento de URL.</p><br/>
<p>También podrían presentarse problemas de cara a cómo sus usuarios móviles interactuarían con su página web. Si la URL no proporcionara información adicional a sus usuarios acerca de en qué versión de su página web se encuentran, algunos de sus usuarios podrían pensar que ésa es la única versión de su página web (sobre todo, si careciera de un enlace de "visitar la versión original" o si este no fuera lo bastante visible.)</p><br/>
<p>Ése es el motivo de que redirigir a una versión optimizada sólo para móviles tenga sentido, ya que puede resultar más sencillo trabajar con ella, resultando esta muy clara y bien organizada. Pero para ello tiene que asegurarse de que esa URL queda identificada como sólo para usuarios móviles de cara a los motores de búsqueda de Internet, marcada como una versión alternativa, que no compita con sus URLs principales en los resultados de búsqueda.</p><br/>
<h3 id="preguntaMovil3">¿Debería crear versiones distintas para teléfonos móviles antiguos y smartphones de última generación?</h3>
<p>Mientras que los smartphones de última generación vienen equipados con pantallas táctiles que ya no son tan pequeñas y con potentes procesadores, los teléfonos móviles tradicionales y los smartphones más antiguos pueden carecer de suficiente espacio en su pantalla, o de potencia suficiente en sus procesadores como para ofrecer una buena experiencia de navegación como para que navegar con ellos sea una experiencia lo bastante cómoda en la mayoría de sitios web.</p><br/>
<p>La respuesta a esta pregunta depende de su negocio en particular. Sus estadísticas de navegación resultarán de gran ayuda a la hora de dar con la respuesta adecuada para su caso concreto. Las estadísticas de su servidor deberían darle detalles acerca de los dispositivos que los usuarios de su página web estén utilizando para acceder a ella. Si esa lista contuviera un porcentaje nada despreciable de usuarios utilizando teléfonos móviles antiguos, entonces crear una versión móvil específicamente optimizada para ellos tendría bastante sentido.</p><br/>
<p>Sin embargo, los teléfonos móviles se encuentran en rápida evolución. Dependerá mucho de su mercado objetivo, y del país con el que esté haciendo la mayor parte de sus negocios, pero lo más probable es que los modelos obsoletos desaparezcan rápidamente, quedando sólo una generación de smartphones bastante más potentes, que se asemejarán bastante a pequeños ordenadores de sobremesa en cuanto a su capacidad de proceso se refiere. A causa de lo anterior, en el medio o no tan largo plazo, debería contemplar desarrollar su página web con ese tipo de smartphones en mente.</p><br/>
<a href="#preguntaMovil3"><img src="http://eserrano.com/treble-click/images/mobile/es/16-moviles-smartphones.jpg" alt="Móviles vs smartphones" height="333" width="536" /></a>
<p>Después de todo, esto es a lo que apunta la tendencia actual del diseño web adaptativo: en un futuro no tan lejano, las versiones móviles y las versiones pensadas para ordenadores de sobremesa sólo se diferenciarán en la forma en que coloquen en pantalla la información. Mientras tanto, disponer de una única versión alternativa para teléfonos móviles, que sea concisa, rápida de cargar y fácil de navegar, debería satisfacer sin problema las necesidades de sus usuarios móviles.</p><br/>
<h3 id="preguntaMovil4">¿Cómo se marca una URL como una versión alternativa sólo para móviles?</h3>
<a href="#preguntaMovil4"><img src="http://eserrano.com/treble-click/images/mobile/es/3-etiquetar-version-movil.jpg" alt="etiquetar la versión móvil" height="333" width="536" /></a>
<p>Google <a href="https://developers.google.com/webmasters/smartphone-sites/details">recomienda</a> etiquetar páginas que sean versiones alternativas para móviles siguiendo el planteamiento que se muestra a continuación:</p><br/>
<ul>
<li>La página original debería señalar que existe una versión optimizada para móviles en la que se puede acceder a contenido similar.<br/><br/></li>
<li>Las versiones optimizadas para móviles deberían apuntar a sus páginas web originales relacionadas, marcándolas como las páginas principales, como las URL canónicas.<br/><br/></li>
</ul>
<p>El tamaño de pantalla se utiliza para distinguir a los dispositivos móviles, mientras que el tipo <i>handheld</i> se aplica para hacer referencia a modelos de teléfono móvil más antiguos. En el escenario más frecuente en que sólo se tiene una versión optimizada para móviles, estos indicadores serán etiquetas de <b>enlaces alternativos</b> que debería incluir en su versión original:</p><br/>
<div class="programCode">
<link rel="alternate" media="only screen and (max-width: 640px)" href="<span class="remark">http://www.URLmovil</span>" /><br />
<link rel="alternate" media="handheld" href="<span class="remark">http://www.URLmovil</span>" /></div>
<p>Y este es el <b>enlace canónico</b> que debería incluir en su versión móvil:</p><br/>
<div class="programCode">
<link rel="canonical" href="<span class="remark">http://www.URLoriginal</span>" /></div>
<p>También puede etiquetar las versiones para móviles dentro de su sitemap.xml, marcándolas como versiones alternativas de una página principal. Cada versión alternativa para móviles debería ser asociada con la página web original con la que se encuentra relacionada. Con lo que el sitemap de su sitio quedaría algo así:</p><br/>
<div class="programCode">
<?xml version="1.0" encoding="UTF-8"?><br />
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"<br />
xmlns:xhtml="http://www.w3.org/1999/xhtml"><br />
<url><br />
<loc><span class="remark">http://www.URLoriginal</span></loc><br />
<xhtml:link<br />
rel="alternate"<br />
media="only screen and (max-width: 640px)"<br />
href="<span class="remark">http://www.URLmovil</span>" /><br />
</url><br />
</urlset></div>
<p>Es importante asegurarse de que esté redirigiendo exactamente a la URL especificada en estas etiquetas alternativas, o podría estar enviando información confusa a los motores de búsqueda, con lo que podría arriesgarse de que marcasen a su página web como spam.</p><br/>
<h3 id="preguntaMovil5">Si no hubiera una página web original que se correspondiese con una página específica de la versión móvil, ¿a dónde debería apuntar su etiqueta canónica?</h3>
<p>Si su sitio web móvil no fuera un reflejo exacto de su sitio web original (es decir, si no tuviera una página web optimizada para móviles por cada una de las páginas web originales de su sitio web principal) entonces el enfoque más rápido sería también el más seguro: los sitios web móviles pequeños pueden redirigir todas sus páginas a la URL principal de la versión original de su página web, asegurándose de este modo de que todas las páginas web móviles de su sitio web ayudan a pasar pagerank a su página web principal.</p><br/>
<a href="#preguntaMovil5"><img src="http://eserrano.com/treble-click/images/mobile/es/4-URL-canonica.jpg" alt="URL canónica" height="333" width="536" /></a>
<p>Tenga en cuenta que, en un escenario ideal, todas y cada una de las páginas web de su sitio web se correspondería con una página web optimizada para móviles. Si no fuera así, se correría cierto riesgo de que marcadores de página guardados en un dispositivo concreto no llevasen al contenido esperado en otros dispositivos, o a otro casos que, en palabras de Google, serían redirecciones no relevantes — a menos que su página web ofrezca una solución muy concreta pensada en el contexto y segmento de mercado de sus usuarios móviles.</p><br/>
<p><strong>Actualización:</strong> en este artículo publicado por Google en su blog oficial, <a href="http://googlewebmastercentral.blogspot.com.es/2013/06/changes-in-rankings-of-smartphone_11.html">Changes in rankings of smartphone search results</a> (cambios en los ranking de los resultados de búsqueda de los smartphones), Google actualizó lo que consideraría como una redirección no relevante. Según este informe, las páginas a las que se accediera desde un dispositivo móvil, y para las que no hubiera una versión específica optimizada para móvil, no deberían redireccionar a la página principal de su versión móvil, ya que eso sería considerado una redirección irrelevante a partir de ahora.</p><br/>
<p>El enfoque recomendado para páginas que carecieran de versiones móviles consistiría en dejar al usuario acceder directamente a la versión original de la página, aunque no estuviera optimizada para móviles. El formato podría no estar optimizado, pero se garantizaría que el contenido al que el usuario accediera siguiera siendo tan relevante como fuera posible de acuerdo con su consulta de búsqueda original.</p><br/>
<p>Aparte de esto, el enfoque subóptimo recomendado por Google consiste en tener una versión optimizada para móviles de todas y cada una de las páginas de su sitio web (lo que elimina por completo el riesgo de una redirección hacia contenido irrelevante). Mientras que el enfoque óptimo consistiría en utilizar un diseño web adaptativo en todo su sitio web, con una única versión que se vería de una forma adecuada en todo dispositivo posible.</p>
<br/>
<h3 id="preguntaMovil6">¿Cómo puede detectar a los usuarios que acceden desde móviles para enviarles contenidos distintos?</h3>
<p>Los navegadores de los móviles se identifican a sí mismos mediante sus <i>user agents</i> cuando solicitan la carga de una página. Discriminando según sus user agent puede enviarles contenidos distintos, o redirigirlos a una página web apropiada.</p><br/>
<p>No necesita crear un listado completo de user agents desde cero. Ya existen fragmentos de código que se encargarán de eso por usted. <a href="http://detectmobilebrowsers.com/">Detectmobilebrowsers.com</a> es un conjunto de programas de código abierto que se encarga precisamente de eso, ofreciendo fragmentos de código que funcionan en muy diversos lenguajes de programación (código para servidores Apache, Javascript, ASP, PHP, etc.)</p><br/>
<a href="#preguntaMovil6"><img src="http://eserrano.com/treble-click/images/mobile/es/5-detectar-moviles.jpg" alt="Detectar dispositivos móviles" height="333" width="536" /></a>
<p>Tenga cuidado con esta táctica, puesto que en el futuro pueden surgir nuevos dispositivos móviles. Existe una posibilidad de que el código que utilice para detectar dispositivos móviles se quede desactualizado y que no clasifique ciertos dispositivos dentro de la categoría correcta. Así que, asegúrese de que mantiene actualizadas sus reglas de detección.</p><br/>
<h3 id="preguntaMovil7">¿Debería redirigir al rastreador móvil de Google considerándolo específicamente en su código de redirección?</h3>
<p>Aparte del indexador de páginas web convencional, Google también tiene un rastreador web para webs móviles, <i>Googlebot-mobile</i>, independiente del Googlebot tradicional. Así que tendría sentido que este rastreador móvil accediese a la versión optimizada para móviles de su página web.</p><br/>
<a href="#preguntaMovil7"><img src="http://eserrano.com/treble-click/images/mobile/es/6-indexar-movil.jpg" alt="Rastreador para indexar versión móvil" height="333" width="536" /></a>
<p>Sin embargo, Googlebot-mobile se presenta a sí mismo usando el <a href="https://developers.google.com/webmasters/smartphone-sites/googlebot-mobile">user agent de smartphones populares</a>. <i>No tiene que considerar a Googlebot-mobile como un caso de redirección específico</i> en el código de detección de navegador que esté usando. <a href="https://developers.google.com/webmasters/smartphone-sites/detecting-user-agents">Google advierte</a> que discriminar específicamente el rastreador móvil puede considerarse ocultación de URLs, lo que le podría acarrear una penalización a su rendimiento en los motores de búsqueda.</p><br/>
<h3 id="preguntaMovil8">¿Redirección en el servidor o redirección mediante Javascript?</h3>
<p>Existen un par de enfoques distintos a la hora de redireccionar a sus usuarios móviles hacia la versión optimizada para móviles. Puede realizar las comprobaciones apropiadas del <i>user agent</i> dentro del propio navegador web de su usuario utilizando una redirección Javascript. O puede utilizar en su lugar redirección en el propio servidor web, de manera que sería este servidor quien comprobase el <i>user agent</i> del dispositivo que le solicita una página web (directamente en el código del servidor utilizando reglas .htaccess en el caso de Apache, o en un lenguaje de programación que se ejecute en el servidor, como .NET, PHP, Ruby o similares).</p><br/>
<a href="#preguntaMovil8"><img src="http://eserrano.com/treble-click/images/mobile/es/7-redireccion-javascript.jpg" alt="Redirección Javascript" height="333" width="536" /></a>
<a href="#preguntaMovil8"><img src="http://eserrano.com/treble-click/images/mobile/es/8-redireccion-servidor.jpg" alt="Redirección desde el servidor" height="333" width="536" /></a>
<p>El problema con una redirección Javascript es que parte de su página web original debería cargarse antes de que su usuario móvil fuera redirigido a la versión adecuada. Por otra parte, una redirección que tuviera lugar en el propio servidor dejaría para el servidor las comprobaciones y proceso relacionado con la redirección, evitando además la carga de contenido innecesario por parte de su usuario móvil.</p><br/>
<p>Teniendo en cuenta que los usuarios móviles disponen de escaso ancho de banda y de capacidad de proceso limitada, <i>las redirecciones que se realizan en el servidor son el enfoque más adecuado</i> puesto que resultarán bastante más rápidas para sus usuarios.</p><br/>
<h3 id="preguntaMovil9">¿Redirección permanente 301 o redirección temporal 302?</h3>
<p>Existen dos tipos principales distintos de redirecciones que se envían como respuesta del servidor a modo de cabeceras HTTP específicas:</p><br/>
<ul>
<li>Una redirección 301 es una redirección permanente, que indica que la URL original ya no estará activa, con lo que todas las consultas deberían redirigirse ya a la nueva URL especificada.<br/><br/></li>
<li>Una redirección 302 es una redirección temporal, la cual simplemente señaliza que las visitas a la URL original deben dirigirse de momento a la URL especificada, pero que se trata sólo de una situación temporal que se devolverá a su estado original en el futuro.<br/><br/></li>
</ul>
<p>Si utiliza cabeceras de repuesta para redirigir a sus usuarios móviles hacia la versión móvil adecuada, en las propias palabras de Google:</p><br/>
<blockquote class="tr_bq"><i>Para este propósito, no importa si el servidor redirige con un código de estado HTTP 301 o con un código de estado 302.</i></blockquote>
<p>Así que no importa qué tipo de redirección se utilice para enviar a sus usuarios móviles hacia su versión optimizada para móviles.</p><br/>
<a href="#preguntaMovil9"><img src="http://eserrano.com/treble-click/images/mobile/es/9-redireccion-temporal-302.jpg" alt="Redirección temporal 302" height="333" width="536" /></a>
<p>Sin embargo, consideremos un escenario correspondiente al caso peor. Si hubiera alguna configuración inadecuada o problema en el proceso, según el cual los motores de búsqueda no entendieran adecuadamente cuál es la versión principal de su página web, y cuál es la versión optimizada para móviles, entonces utilizar redirecciones permanentes 301 desde su versión original hacia su versión móvil enviaría la mayor parte de su <i>pagerank</i>, tráfico o, en definitiva, usuarios, hacia una versión diseñada como alternativa, más sencilla, optimizada sólo para móviles. Un escenario como tal podría tener consecuencias desastrosas para su versión principal, y por tanto, para su estrategia de optimización en buscadores.</p><br/>
<p>Ese es el motivo de que <i>utilizar una redirección temporal 302</i> que apunte hacia su versión móvil <i>sea una estrategia más adecuada en términos de prevención de posibles riesgos</i>.</p><br/>
<h3 id="preguntaMovil10">¿Debería inclur una cabecera HTTP Vary en sus URL móviles?</h3>
<p>Google menciona como parte de <a href="https://developers.google.com/webmasters/smartphone-sites/redirects">sus directrices para móviles</a> que, en caso de que use cualquier tipo de redirección, <i>cualquier página que esté redirigiendo hacia otra debería incluir una cabecera HTTP Vary</i> para notificar a potenciales rastreadores móviles que explorar esas páginas simulando ser un dispositivo móvil tendría sentido, puesto que distintos dispositivos verían resultados distintos. De ese modo, Google indexaría todas sus páginas móviles, entendiendo mejor la estructura de su página web.</p><br/>
<p>Esto es también cierto para las páginas web que utilizan la misma URL para enviar tanto contenido optimizado para móviles como el contenido principal pensado para el resto de sus usuarios (lo que normalmente se conoce como <i>dynamic serving</i> o envío dinámico). En este caso, utilizar la cabecera Vary se convierte en algo incluso más importante, puesto que los buscadores no dispondrían de ninguna otra forma de saber si existe una versión móvil para la página actual (al encontrarse todas las versiones bajo la misma URL.) También debería asegurarse de que la versión optimizada para móviles no fuera considerada como contenido oculto o enmascarado, o que el contenido de la versión móvil fuera confundido con el contenido de su versión principal. Anunciar diferencias de contenido según el navegador del usuario le vendría muy bien para aclarar estos posibles escenarios.</p><br/>
<a href="#preguntaMovil10"><img src="http://eserrano.com/treble-click/images/mobile/es/10-cabecera-vary.jpg" alt="Cabecera Vary" height="333" width="536" /></a>
<p>La cabecera <b>Vary</b> debería enviarse indicando que los contenidos de esa página pueden variar dependiendo del <b>user-agent</b>, con lo que ése debería ser precisamente su valor:</p><br/>
<div class="programCode">
Vary: <span class="remark">User-Agent</span></div>
<h3 id="preguntaMovil11">¿Debería incluir en su versión móvil un enlace que apuntase a su versión principal?</h3>
<p>Definitivamente. Algunos de sus usuarios aún querrán acceder a los contenidos completos de su versión principal si tienen la sensación de que no están viendo todos los contenidos de que podrían, y de que su smartphone de última generación podría ser lo bastante potente como para navegar sin problema en la versión principal de su página web.</p><br/>
<p>Si su versión optimizada para móviles fuera lo bastante corta y sencilla (como debería ser), entonces debería incluirse un enlace que apuntase al artículo original relacionado de la versión principal, hacia el final de la página: no habría necesidad de ir hacia la versión regular de la página web si la versión móvil ya facilitase suficiente información por sí misma. No es habitual que un usuario móvil decida ir a la versión principal de una página web nada más aterrizar en dicha versión móvil.</p><br/>
<a href="#preguntaMovil11"><img src="http://eserrano.com/treble-click/images/mobile/es/11-enlace-normal.jpg" alt="Enlace normal" height="333" width="536" /></a>
<p>Sin embargo, asegúrese de mostrar este enlace de una forma fácil de ver para sus usuarios. Es verdaderamente importante que haga saber a sus usuarios que existe una versión distinta, <i>potencialmente más completa y vistosa</i>, que también podrían visitar si así lo quisieran.</p><br/>
<p>Esto se vuelve especialmente crítico si sus contenidos optimizados para móviles se proporcionan desde la misma URL que utilizaría para mostrar sus contenidos originales, ya que en este caso ni siquiera la URL daría alguna pista acerca de la existencia de otra versión normal, no optimizada para móviles.</p><br/>
<h3 id="preguntaMovil12">¿A qué punto concreto de la versión normal debería enlazar cada página de la versión móvil?</h3>
<p>En un escenario ideal en que cada página de la versión original tuviera asociada una página optimizada para móviles, los enlaces que llevasen a la versión original desde las páginas móviles deberían precisamente apuntar a la página relacionada correspondiente, la cual hablará de un tema similar y presentará también un contenido similar.</p><br/>
<p>Ahora bien: la situación puede ser algo más delicada si la parte de su sitio web optimizada para móviles sólo comprendiera un subconjunto del contenido total de la versión original. Este escenario puede tener sentido si lo que busca es ofrecer a sus usuarios una versión móvil simplificada y directa, que fuera adecuada para el segmento de mercado representado por sus usuarios móviles.</p><br/>
<p>Si no hubiera una página web asociada, entonces el modo más adecuado de enlazar a la versión completa original sería apuntar a la página de inicio de su sitio web. Puesto que esta página de inicio resulta el punto de entrada más adecuado para cualquier otra sección de su sitio web, esto debería facilitar las cosas a la hora de encontrar información relevante o ampliada acerca de lo que se estaba consultando.</p><br/>
<a href="#preguntaMovil12"><img src="http://eserrano.com/treble-click/images/mobile/es/12-enlace-movil.jpg" alt="Enlace móvil" height="333" width="536" /></a>
<p>Sin embargo, eso no sería suficiente. Tenga en cuenta el caso siguiente: un usuario realiza una búsqueda utilizando su teléfono móvil, pulsa en un resultado de búsqueda concreto, y es entonces redirigido a la página principal de su versión móvil, en lugar de ir a la página concreta de la versión original que inicialmente eligió. Puede que no haya ningún problema con esto si su usuario móvil aprecia la facilidad y velocidad de navegación en su versión móvil, asumiendo también que encuentre información relacionada con sus intereses y objetivos iniciales. Pero, ¿qué sucede cuando este usuario no encuentra la respuesta que buscaba a su consulta inicial, y pensase que su smartphone sí sería capaz de navegar en la versión completa original de su página web, en lugar de tener que verse restringido a los contenidos de la versión para móviles? Enviarlo de vuelta a la página de inicio de la versión original sería una barrera de uso para él, actuando como un paso intermedio innecesario.</p><br/>
<p>Por eso debería ofrecer también como parte de su versión móvil un enlace a la página que sus usuarios intentaban visitar inicialmente, y desde la que fueron redirigidos a la versión móvil de su sitio web.</p><br/>
<p>Técnicamente, esto se consigue anotando la dirección de la página donde comenzó el proceso de redirección (por ejemplo, utilizando un parámetro, una cookie o una variable de sesión). Los usuarios móviles que prefieran la facilidad de uso de la versión optimizada para móviles permanecerán ahí sin problema alguno. Y los usuarios móviles que quieran consultar los contenidos originales, hacia los que debería haber dirigido su clic inicial, aún tendrían la opción de consultar exactamente lo que captó su atención en los resultados de búsqueda, sin más que pulsar este enlace adicional.</p><br/>
<h3 id="preguntaMovil13">¿Cómo se puede permitir navegar la versión normal a los usuarios móviles si se está redirigiendo</h3>
<p>Los usuarios móviles deberían ser redirigidos hacia la versión optimizada para móviles de su página web. Por lo tanto, cuando uno de sus usuarios móviles prefiera navegar la versión completa de su página web en lugar de la versión optimizada para móviles, porque considere que su smartphone será lo bastante potente como para manejarla sin problema, y pulse sobre un enlace que lleve a su versión original, ¿cómo puede prevenirse que sea redireccionado de nuevo desde la versión original a la versión optimizada para móviles, en un bucle infinito?</p><br/>
<p>Uno de los enfoques más directos para resolver este problema consiste en añadir un parámetro adicional para que no se lleve a cabo esta redirección en el caso de estos usuarios que explícitamente solicitan visitar la versión original desde su teléfono móvil. Añadir un simple parámetro en la URL destino debería bastar. La página web objetivo, parte de la versión original de su sitio web, debería comprobar si la petición original contuviera este parámetro adicional. En caso de encontrarse este parámetro, no se llevaría a cabo redirección alguna, permitiendo a su usuario móvil navegar la versión original de la página.</p><br/>
<a href="#preguntaMovil13"><img src="http://eserrano.com/treble-click/images/mobile/es/13-guardar-preferencias-moviles.jpg" alt="Guardar preferencias móviles" height="333" width="536" /></a>
<p>No obstante, eso puede no ser suficiente. Ese mismo usuario podría querer seguir navegando a otras secciones dentro de la versión original de su página web. Por ello guardar el parámetro que actúa como indicador de que las redirecciones a la versión móvil deben ignorarse en este caso se convierte en algo esencial. Si no se mantuviera ese parámetro, cuando su usuario móvil pulsase un enlace dentro de la versión original, podría se redirigido de nuevo a la versión móvil, que ya había decidido explícitamente no usar.</p><br/>
<p>Así que una vez que se solicite navegar la versión original de la página desde un dispositivo móvil mediante la inclusión de un parámetro adicional como parte de la URL, esta preferencia del usuario debería ser guardada dentro de una cookie, por ejemplo, o incluso dentro de una variable de sesión. Con lo que ése usuario concreto no tendrá que preocuparse acerca de ser redireccionado a la versión móvil de nuevo - al menos, durante esa sesión de navegación.</p><br/>
<p>Estableciendo así una cookie o variable de sesión para ese usuario se evitaría que cualquier página redirigiera en modo alguno a ese usuario móvil.</p><br/>
<p>Por lo tanto, este usuario aún podría volver a la versión móvil siempre que quisiera - no a través de una redirección automática, sino pulsado el botón “atrás” de su navegador web. Este escenario no es muy habitual, pero aún puede darse si el usuario móvil se da cuenta de que su versión original no resulta cómoda de navegar en su teléfono móvil, después de todo. Pero incluso tratándose de un caso no habitual, también conviene estar cubierto para garantizar una experiencia de usuario óptima en todo caso.</p><br/>
<h3 id="preguntaMovil14">¿Se debe redirigir hacia la versión normal a los usuarios de ordenadores de sobremesa que intenten entrar en la versión móvil?</h3>
<p>Este es el caso que Google llama <i>redirecciones bidireccionales</i>. La ventaja de este enfoque es que impediría que sus usuarios de ordenadores de sobremesa acabasen por error en una página optimizada para móviles, la cual, dentro de sus pantallas más grandes, podría parecer bastante limitada o vacía, y por lo tanto, podría no causar una primera impresión adecuada.</p><br/>
<p>Si está seguro de que la detección de los navegadores móviles que realiza su sitio web está actualizada y no comete errores, entonces estas redirecciones bidireccionales pueden tener sentido. Resultaría muy extraño que un usuario de un ordenador de sobremesa prefiriera ver una versión móvil, más limitada o incompleta, en lugar de navegar en la versión completa y original de su página web.</p><br/>
<a href="#preguntaMovil14"><img src="http://eserrano.com/treble-click/images/mobile/es/14-redirigir-usuarios-PC.jpg" alt="Redirigir usuarios de PC" height="333" width="536" /></a>
<p>Por otra parte, algunos usuarios de teléfonos móviles aún podrían estar interesados en navegar la versión completa de su sitio web. Y es aquí donde ese enlace desde la versión móvil hacia la versión original resultaría de utilidad, quedando todo posible caso cubierto.</p><br/>
<p>El único inconveniente de las redirecciones bidireccionales es que resulta de vital importancia asegurarse de que la redirección funciona perfectamente. En caso contrario, podría dejar a sus usuarios bloqueados dentro de un bucle de redirecciones.</p><br/>
<h3 id="preguntaMovil15">¿Se deben considerar los navegadores de las tabletas como navegadores móviles?</h3>
<p>Las tabletas tienen unos cuantos puntos en común con los móviles: proporcionan cierta movilidad a sus usuarios, disponen de pantallas táctiles que no tienen por qué ser demasiado grandes, y tienen menos capacidad de proceso que los ordenadores de sobremesa.</p><br/>
<p>Dicho esto, lo cierto es que la mayor parte de tabletas modernas ya permiten navegar en páginas web normales sin ningún tipo de problema. Su capacidad de proceso es suficiente como para poder manejar páginas web normales, y sus pantallas (incluso las menores, de unas 7 pulgadas) ya son lo bastante grandes como para proporcionar un nivel decente de legibilidad en cualquier página web.</p><br/>
<a href="#preguntaMovil15"><img src="http://eserrano.com/treble-click/images/mobile/es/15-usuarios-tableta.jpg" alt="Usuarios de tabletas" height="333" width="536" /></a>
<p>Es por ello que sugiero no tratar a las tabletas como si fueran teléfonos móviles, y por tanto, excluirlas del código de detección de <i>user agent</i> móviles.</p><br/>
<p>No obstante, sí que es posible dirigir a los usuarios de tabletas a su versión optimizada para móviles. Esto puede tener sentido en el caso de que su versión original no ofrezca una experiencia demasiado optimizada para tabletas (si tardase mucho en cargar, si tuviera contenido en Flash que no funcionaría en los iPad, o si estuviera principalmente dirigida a un segmento de mercado en que no englobaría a los usuarios de tabletas).</p><br/>
<p>Si está usando el código de detección de navegadores previamente mencionado, <a href="http://detectmobilebrowsers.com/">detectmobilebrowsers.com</a>, sólo tendría que añadir el siguiente código a la primera expresión regular para tratar a los iPads, Kindle Fire, Playbooks y tabletas Android como si fueran parte del conjunto de dispositivos móviles:</p><br/>
<div class="programCode">
|android|ipad|playbook|silk</div>
<br />ESVhttp://www.blogger.com/profile/00378746204489625224noreply@blogger.com0