IOS6, XCode, Web inspector

Vaya «title» me acabo de marcar! 😀

Los usuarios de Apple suele tener actualizado su sistema operativo, tanto de escritorio MacOS como de dispositivos móviles iOS. Supongo que su facilidad en los procesos de actualización tiene mucho que ver en ello.

Por suerte la compi @chavalina tenía todavía su iPad con iOS6 y pudo reportarme un fallo de CSS que curiosamente solo se producía en esa versión, tanto con Chrome como Safari. Sin embargo en iOS7 y bajo los mismos navegadores todo perfecto, también en el resto de navegadores y dispositivos.

Ya puestos en contexto vamos al grano.
Como emulador iOS 6 si ya tenemos actualizados nuestro iPad podemos recurrir a Xcode. Tenemos que ir a «Preferences > Downloads > Components» y descargar «iOS 6.1 Simulator«. Nos pide instalar y reiniciar la aplicación Xcode. A continuación creamos un proyecto Xcode «vacio», al lado de los controles principales (Play y Stop) tenemos ahora la opción para seleccionar como sistema operativo iOS6.1 y hacemos clic en el botón Play.

Xcode con iOS6

Una vez emulado podemos usar la fabulosa herramienta Web Inspector de Safari, menú: Develop > iPad Simulator.

Web inspector

A partir de aquí a emular, probar y solucionar. Por curiosidad, os cuento que al final en mi caso, el problema era de CSS con la forma de interpretar -webkit-linear-gradient por parte de iOS6.

Al hilo del anterior post «Virtualización de WinXP + IE6, probando nuestro CSS» me ha llegado un comentario (gracias d2f) con otra herramienta que en su día deje pasar de largo (craso error Javi).

Xenocode nos permite en su web descargarnos un plugin y emular estos navegadores sin más complicaciones.

¿Un problema de usabilidad?

Hace un tiempo visite este sitio web, y me pareció «extraño» empezando por los banners y siguiendo por la estructura y diseño. Luego tras encontrar la web con todos los navegadores hice clic en cada título, por ejemplo «internet explorer 6» y esto me llevaba a la web de Microsoft, un simple enlace. Así que me fui y hasta hoy jejeje 😀

Como explicación creo que se debe a la comodidad de hacer clic en el texto del navegador (un poco más grande) y no en el botón verde que simula el «ON» pensando que sería una imagen y que al ir unidas llevaría al mismo destino.

Me gustaría saber a cuantos les ha pasado lo mismo 🙂   (no creo que sea el único rarito)

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado.

Sin embargo, las dos soluciones presentan algunos problemas.

  • El primero de ellos en determinados casos no suele emular muy certeramente.
  • El segundo no soporta Windows vista. Al menos no por ahora…
  • El soporte javascript es bastante pobre, incluso es bastante complejo llegar a probar soluciones del tipo PNGFIX.

Continue reading «Virtualización de WinXP + IE6, probando nuestro CSS»

De vuelta con el inseparable amigo de cualquier diseñador web: float.

Voy a resumir en este post 4 formas de contener los efectos colaterales evitando «desbordamientos» y la desorganizanción de los elementos fluidos.

Easy clearing (Big John)

Soluciona el problema creando la clase clearfix.
Esta técnica es eficiente, no obstante y de forma personal la he usado en algunas ocasiones y no me parece tan cross-browsing como otras técnicas. Por otro lado su implementación no me convence puesto que la separación estructura-estilo se ve un tanto afectada al requerir la inclusión de la clase.

Un contenedor fluido soluciona el contenido fluido (Meyer)

Suena un poco redundante pero no he conseguido explicarlo mejor 🙂 .
Cuando comencé con CSS descubrí fortuitamente este método (os ha pasado?) y quizás fue la que mas he usado. Su implementación tiene el problema de aplicar demasiado float al estilo, sin embargo tiene un buen nivel de cross-browsing.

Usar «clear: both;» en un salto de línea

Podemos hacer una clase clear que contenga el clear: both; de esta forma podemos mejorar su inclusión. Aunque su uso sea necesario en algunas ocasiones la separación estructura-estilo queda afectada al requerir de un extra que no aporta información al contenido al tratarse de un arreglo de diseño.

Overflow y width como clearfix

Totalmente cross-browsing y con una implementación muy sencilla. Cabe destacar que esta técnica mantiene la abstracción de la estructura y el estilo. Mi preferida 😉

¿Cuál es vuestra técnica favorita?