IPOD Video Converter for Free 2.9.2
Descargar Gratis
IPOD Video Converter for Free soporta los siguientes formatos:
Para utilizar IPOD Video Converter for Free necesitas:
Mostrando entradas con la etiqueta IOS. Mostrar todas las entradas
Mostrando entradas con la etiqueta IOS. Mostrar todas las entradas
IPOD Video Converter for Free es un sencillo conversor de vídeo que pasa los archivos al formato compatible con el reproductor iPod.
Todas las configuraciones para la transformación se pueden ver en la pantalla, no son demasiadas, por lo que no se necesitan menús de preferencias. Como consecuencia, el proceso resulta sencillo y rápido.
Además, IPOD Video Converter for Free aporta una novedad con respecto a otros programas parecidos: permite descargar vídeos de YouTube desde su interfaz y convertirlos directamente al formato del iPod.
FLV, DIVX, XVID, MPG, MP4, DVD, VOB, AVI, WMV, ASF
Añadir un icono para iPhone a nuestra web
¿Qué necesitamos?
En principio, solo necesitamos acceso al FTP de nuestra web para subir la imagen. Si se trata por ejemplo de un blog en WordPress bastará con subir una imagen al ftp. En otros casos más avanzados puede hacer falta editar el HTML de nuestra web.¿Cómo funciona?
Nuestro iPhone buscará un archivo llamado apple-touch-icon.png en el directorio raíz de nuestra web y si lo encuentra lo usará como icono. Para obtener el mejor resultado esta imagen tiene que cumplir estas características:- Medir 57 x 57 píxeles, con las esquinas cuadradas (si la imagen tiene otro tamaño el iPhone la reescalará)
- Sin efectos de brillo o relieve de botón (el iPhone ya los añade por ti)
- Sin transparencias (el iPhone se encarga de redondear las esquinas)
<link href="/imagenes/apple-touch-icon.png" rel="apple-touch-icon"></link>
Fuente: tutoblog.es
Detectar la rotacion de una web en soporte móvil con javascript
El JS detecta si el dispositivo móvil (iOS o Android) está en vertical u horizontal, asignando un comportamiento dependiendo de la disposición del mismo. El código es el siguiente:
Para la página vertical:
<script type="text/javascript">
detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
//Do Something In Portrait Mode
}
else if ( orientation == 90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == -90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == 180 ) {
//Do Something In Landscape Mode
}
}
}
</script>
detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
//Do Something In Portrait Mode
}
else if ( orientation == 90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == -90 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/horizontal.html")
}
else if ( orientation == 180 ) {
//Do Something In Landscape Mode
}
}
}
</script>
Y para la horizontal:
<script type="text/javascript">
function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
else if ( orientation == 90 ) {
}
else if ( orientation == -90 ) {
}
else if ( orientation == 180 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
}
}
window.onorientationchange = detectOrientation;
</script>
function detectOrientation(){
if(typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
else if ( orientation == 90 ) {
}
else if ( orientation == -90 ) {
}
else if ( orientation == 180 ) {
window.location.replace ("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/vertical.html")
}
}
}
window.onorientationchange = detectOrientation;
</script>
Etiquetas:
IOS
,
javascript
,
Movil
Detectar mediante javascript la navegación web através de un iPhone
Para detectar mediante JS que navegamos através de un iPhone, podemos usar el siguiente código:
<script>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{location.replace("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/Home_HORZTL.html");}
</script>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{location.replace("http://pruebas.unidadeditorial.com/prototipos/maite/mundomovil/Home_HORZTL.html");}
</script>
IPad y iPhone: consideraciones para desarrollo web
Consideraciones específicas que debemos tener en cuenta en páginas web orientadas al navegador Safari en dispositivos iPhone OS e IPAD.Traducción libre de la nota técnica TN2262 de Apple.
Aspectos que debemos tener en cuenta
1. Probar nuestro sitio web en el IPAD y actualizar el código de detección de agente de usuario si es necesario
Muchos sitios web realizan controles en el servidor para la detección del User Agent utilizado por el navegador del usuario. En función de este este parámetro determinan, por ejemplo, si deben o no servir una versión nóvil de la página web. Si tenemos una versión de nuestro sitio web optimizada para dispositivos móviles con pantallas pequeñas, no debemos servir esta versión móvil a usuarios de IPAD. Esta cadena muestra el User Agent de Safari en IPAD ( IPAD iPhone OS 3.2 beta 3 SDK):Mozilla/5.0 (IPAD; U; CPU OS 3_2 como Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Se debe tener en cuenta que en la cadena del User Agent de Safari en IPAD aparece el valor “mobile”, pero no contiene la palabra “iPhone”. Si actualmente estamos sirviendo el contenido optimizado para dispositivos nóviles a cualquier navegador que identifica a sí mismo como “Mobile”, debemos modificar los controles del User Agent para adecuarlos al IPAD. Los números de versión de esta cadena están sujetos a cambios en el tiempo en función de que las nuevas versiones de Safari en IPAD estén disponibles, por lo que cualquier código que comprueba la cadena de agente de usuario no debe confiar en los números de versión. Simulando peticiones HTTP de Safari en IPAD
Si no tenemos a nuestra disposición un IPAD o un iPhone, podemos simular las peticiones de los navegadores Safari desde otras plataformas. Para ello podemos descargar el navegador a nuestro PC y, a continuación, habilitar la casilla junto a “Show Develop menu in menu bar” en el panel de preferencias avanzadas:Figura 1: Habilitar nuestro navegador Safari para simular las peticiones de un IPAD o un iPhone
Figura 2: Personalización de la cadena de agente de usuario.
Figura 3: Inspección de las cabeceras HTTP en Safari con Web Inspector
2. Utilizar estándares del W3C Web en lugar de plug-ins
Los Plug-ins no son compatibles con Safari en IPAD e iPhone.Si estamos utilizando un plug-in para mostrar elementos de la interfaz web, como menús de navegación u otros elementos en su sitio web, estos elementos no serán accesibles para Safari en IPAD o Safari para los usuarios de iPhone.
Si estamos utilizando un plug-in para integrar audio o vídeo en una página web, puede utilizar las etiquetas HTML5
HTMLMediaElement, HTMLVideoElement, HTMLAudioElement en la Guía de referencia de Extensiones DOM para Safari.Si utilizamos algún plug-in para dibujar animaciones en nuestras páginas web, podemos utilizar una combinación de JavaScript y CSS 3 para crear animaciones en Safari en el iPhone OS. Para obtener más información sobre cómo utilizar CSS para crear animaciones en páginas web, podemos acceder a Safari CSS, la Guía Visual de efectos en Safari o los códigos de ejemplo que aparecen en Safari Dev Center.
Como comprobar nuestras páginas en Safari deshabilitando los plug-ins
Podemos comprobar como quedan nuestras páginas para IPAD o iPhone deshabilitando los plugins del navegador Safari en Windows o Mac OS. Para ello, desactivamos la casilla “Enable plug-ins” del panel de Preferencias de Seguridad del navegador:Figura 4: Desactivación de plug-ins en Safari
3. Comprobar la configuración de etiqueta viewport
Si estamos utilizando la etiqueta viewport en nuestra página web en su versión para iPhone, debemos comprobar que sus valores son adecuados para Safari en IPAD. En concreto, si deseamos ajustar el ancho de la página para que coincida con la anchura del dispositivo, debemos utilizar la contsantedevice-width en lugar de un valor en pixeles. Aquí tenemos dos ejemplos de uso incorrecto y correcto del atributo width:Incorrecto: El uso de un valor en píxeles de ancho de ventana.
name=”viewport”
Correcto: El uso de una constante para el ancho de ventana.
name=”viewport”
4. Modificar el código que se basa en el posicionamiento fijo mediante CSS
En Safari para iPhone y el IPAD funcionan los selectores CSS para fijar el posicionamiento de los elementos en nuestras páginas web, pero no como se podría esperar. Para las plataformas Mac OS y Windows, los elementos con posición fija apareceran en los lugares desados, el problema viene cuando lo utilizamos para IPAD o iPhone, ya que estos objetos pueden quedar fuera de la pantalla.Por definición, el bloque de contenido de un elemento en una página web que utiliza el selector CSS de posicionamiento fijo es el viewport. Por ejemplo, cuando se establece
position: fixed con valores para los atributos bottom y right de 20px, se “fijado” la posición del elemento 20 píxeles por encima del borde inferior de la ventana y píxeles 20 desde el borde derecho del viewport.Uso de CSS position: fixed.
#fixed {
position: fixed;
right: 20px;
bottom: 20px;
height: 100px;
width: 100px;
background-color: purple;
}
En Safari para plataforma Mac OS o Windows, el concepto de viewport es análogo al de la ventana del navegador, de forma que si cambiamos el tamaño de esta, se modifica, de igual manera, el del viewpor y el elemento con el selector fixed siempre permanece en la pantalla.position: fixed;
right: 20px;
bottom: 20px;
height: 100px;
width: 100px;
background-color: purple;
}
En Safari para IPAD e iPhone no se dispone de ventanas de tamaño ajustable. El tamaño de la ventana viene dado por el tamaño de la pantalla del dispositivo y no puede ser modificado por el usuario. Para desplazarse por una página web, el usuario cambia el nivel de zoom y la posición del viewport utilizando los controles táctiles. Cuando un usuario cambia el nivel de zoom y la posición del siewport lo está realizando dentro de un área de contenido visible de tamaño fijo (es decir, la ventana). Esto significa que los elementos de página web que tienen su posición “fija” para el viewport puede acabar fuera del área de contenido visible, fuera de la pantalla.
5. Prepárese para la interfaz táctil
A pesar de que se puede utilizar teclado externo con el IPAD, el principal medio de interacción con los contenidos web en Safari en IPAD es a través de la pantalla táctil. El teclado software aparece en Safari en IPAD y en iPhone, cuando, por ejemplo, se requiere la introducción de texto en un formulario — como en elementosFuente: desarrollowebaws.com
Etiquetas:
Diseño web
,
IOS
Orientación IPAD CSS
En su mayor parte, Mobile Safari en el IPAD es el mismo que en el iPhone. Una diferencia que he encontrado es que Webkit en los honores IPAD CSS declaraciones los medios de consulta basada en la orientación.
He construido una página de ejemplo que demuestra CSS orientación de IPAD.
El uso de la orientación en CSS es muy simple. El código es el siguiente:
En este ejemplo, la única diferencia entre las dos hojas de estilo es que se esconden uno de los dos títulos. El HTML de la página tiene el siguiente código:
que estás viendo en modo vertical
que estás viendo en el Paisaje
que estás viendo en modo vertical
que estás viendo en el Paisaje
paisaje:
# Paisaje {display: none}
Y, por supuesto, landscape.css hace lo contrario.Puedes ver esta consulta CSS en las versiones actuales de Safari y Firefox en su máquina de escritorio. Simplemente cambia el tamaño de la ventana del navegador hasta la altura es más alto que el ancho.
Consejos para diseñar pensando en IPad
Ipad cuenta con una resolución de 1024×768 en landscape y con su respectiva resolución al rotarlo. Lo cual es un punto a nuestro favor, ya que la mayoría diseñamos Sites teniendo en cuenta esta resolución de pantalla.
Otra cosa muy importante que debemos saber, que Ipad, como su hermanito Iphone no soportan Flash. Se acuerdan cuando decía que teníamos que alejarnos lo más posible de esta tecnología? Bueno, si me hicieron caso, esto no nos demandara mayor esfuerzo alguno, ya que no usamos Flash. Pero si no me hiciste caso y estas trabajando en Flash, es un buen momento para que te hagas amigo de HTML5 CSS3 y Javascript.
Primeros pasos
Si diseñaste tu sitio siguiendo las practicas modernas: XHTML, CSS3, HTML5,etc. probablemente no tengas que arreglar nada ya que tu sitio es perfectamente amigable. Lo único que debes tener en cuenta es el ancho de tu container principal, que no debe exceder el viewport de Ipad. Muchos de nosotros nos guiamos trabajando con un sistema de grilla, donde nuestro container es de 960px, pixeles mas pixeles menos.Tambien tenemos que tener mucho cauidado al usar al propiedad position:fixed dado que no se comporta de manera uniforme dentro de Safa.
Usando el método
@media, dentro de nuestra hoja de estilo podemos hacer el siguiente markup@media only screen and (max-width: 999px) { /* aquí reglas donde el ancho es menor a 1000px */ } @media only screen and (device-width: 768px) and (orientation: landscape) { /* reglas para Ipad en modo landscape (768px) */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* reglas iPhone, Android y otros dispositivos */ }
Estos condicionales indican que si se trata de un agente donde su viewport es menor a 1000px (Ipad en landscape) se aplique las reglas dentro de esta querie. De tratarse de un agente con un viewport de 768px (Ipad en su rotacion para este ejemplo), esas reglas, y el mismo procedimiento para dispositivos donde el width es igual o menor a 320px. De esta forma nos aseguramos de brindar un estilo determinado para cada viewport.
Recursos
Si no dispones de Ipad tenemos un par de opciones para emular este dispositivo en nuestro escritorio. Una de las formas mas simple es dirigirnos a Ipadpeek e ingresar la dirección de nuestro sitio y tendremos una idea de como se ve nuestro sitios, junto con la opción de rotar el dispositivo.Otra forma más completa y recomendable a la hora de diseñar pensando en Ipad, es cambiar nuestro user agent, es decir que el navegador que estamos utilizando nos reconozca como si estuviéramos navegando con Ipad.
El user agent para Ipad es el siguiente
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10Dentro de Safari solo tenemos que crear un nuevo user agent con los datos brindados mas arriba, desde la pestaña de Desarrollo. Y en el caso de Firefox podemos usar el plugin User Agent Switcher para lograr la emulación.
Links recomendados
Si queres leer un poco sobre este tema, te dejo los siguientes links donde encontraras mucha información para desarrollar pensado en Ipad.- Detecting device size & orientation in CSS
- Preparing Your Web Content for iPad
- User Experience Coding How-To's for Safari on iPhone
- iPad Orientation CSS
Espero que encuentren esta información útil y se animen a comenzar a diseñar pensando en las tecnologías del día de hoy.
Suscribirse a:
Entradas
(
Atom
)