Crear un marco adaptable con html5
Antes de crear un marco para un sitio web que se mostrará en el iPhone y el iPad, es útil pensar en el futuro acerca de cómo desea que sus páginas se ven cuando se agrega los estilos. Aquí es donde wireframes pueden realmente ayudar.
En las siguientes figuras, se ve tres diseños de alambre diferentes para la primera página de un sitio web simple blog - el primero es para el iPhone, y los dos siguientes son para el iPad (uno para el modo horizontal y el otro para el modo retrato).
Vamos a explorar tres diseños relativamente simples de alambre que sería ideal para un blog básico. Diseños de carcasa, como los que se muestran, pueden ayudar a guiar a medida que crea un marco para su sitio en HTML.
Al decidir la forma de desarrollar su sitio, tenga en cuenta que se pueden crear tres páginas HTML completamente diferentes, cada uno con su propia hoja de estilo para lograr estos tres pantallas diferentes.
Si usted tomó esa ruta, que había necesidad de utilizar un script de detección de dispositivos, un programa complicado que puede detectar el tipo de dispositivo utilizado por los visitantes a su sitio y luego dirigirlos a la mejor versión de cada página para ese dispositivo. Si usted está diseñando un sitio web para móviles que necesita para llegar al público más amplio, que es el mejor camino a seguir.
La ventaja de centrarse en el iPhone y el iPad es que usted no tiene que ir a todos los problemas de crear un script de detección de dispositivo. Eso es porque el navegador Safari en el iPhone y el iPad puede leer varios archivos CSS, algo que muchos otros navegadores de teléfonos celulares no son capaces de hacer.
Así, se puede usar CSS para crear diseños que funcionan bien en los navegadores más recientes en los equipos de escritorio y portátiles, así como el iPhone y el iPad.
Aunque puede crear completamente diferentes páginas para la exhibición en cada dispositivo, la opción más eficiente es crear una página en HTML y luego usar tres conjuntos diferentes de hojas de estilo para ajustar el diseño. Con ese objetivo en mente, primero cree una página de marco, y luego usar CSS para crear diferentes diseños de la que la primera página HTML.
Ahora aquí está la parte que puede parecer un poco loco si no estás familiarizado con todas las cosas que puede hacer con CSS. El mismo código HTML se puede utilizar para crear los tres de los diseños mostrados en las figuras. El posicionamiento de los elementos, tales como el aparte, se realiza con CSS.
Diseño para el safari y navegadores cromo Safari y Chrome son los navegadores WebKit, basado en el mismo WebKit desgarrarering motor, que controla cómo el navegador interpreta HTML, CSS y otros códigos. Todos los navegadores WebKit siguen las mismas reglas (por lo menos la mayor parte del…
Imágenes del diseño para el iphone y el ipad Tener imágenes llamativas en su sitio web es una de las mejores maneras de atraer iPhone y iPad entusiastas conscientes de la imagen. Pero abarrotar una imagen de alta resolución que puede ser volado hasta tamaño póster sobre una pantalla del…
Cómo crear un sitio web con HTML5 Los diseñadores web a menudo utilizan términos como architecting, edificio, y construcción cuando hablan de la creación de páginas web, porque hay una gran cantidad de similitudes entre la construcción de una casa y el diseño de un sitio web…
Cómo diseñar para diferentes navegadores web Aunque su público puede ser diferente, puede crear sitios web que se ven bien en Safari en el iPhone y el iPad, sin comprometer el diseño de la página cuando se ve en cualquiera de los navegadores web más populares en Internet.Si usted desea…
Mover a HTML5 y CSS 3 para el diseño web Cuando se planifica un nuevo diseño web, recuerde que muchas versiones diferentes de HTML están ahora en uso en la web. Todas las versiones más recientes trabajar en el (sistema operativo de Apple en el iPhone y el iPad) iOS, así que tienes que…
Optimizar diseños web para el iphone La pantalla del iPhone es pequeño, pero trate de dejar de pensar en las limitaciones y empezar a centrarse en las increíbles nuevas oportunidades - como atraer a una audiencia de personas en movimiento - personas que puedan estar de pie justo…
Diseños de página para vista horizontal y vertical Al encender un iPhone o iPad, la orientación de una página web se ajusta automáticamente en consecuencia. El navegador web Safari amplía inteligentemente (o reduce) las páginas web para ajustarse a la pantalla, pero no es perfecto. Incluso si…
Pruebas de control de calidad para sitios web móviles Antes de lanzar un nuevo sitio destinado para el iPhone y el iPad, siempre probar completamente su diseño y funcionalidad en el iPhone o el iPad, para asegurarse de que el sitio se ve y funciona de la manera que usted piensa que debería. El uso de…
Prueba iphone diseños con safari Lo más cerca que se puede llegar a tener Safari en un iPhone o iPad es Safari en un ordenador. Cuenta con algunas diferencias notables, incluyendo el tamaño de pantalla más grande que la mayoría de la gente utiliza en las computadoras y el hecho…
Pon a prueba tu sitio con el iphone y el ipad Una gran ventaja de centrarse en el iPad / iPhone al diseñar un sitio web es que relativamente puede probar fácilmente sus diseños. Incluso si sólo tiene la versión de escritorio de Safari (disponible en los sistemas operativos Mac y Windows),…
La elección de una estrategia para el diseño de su web móvil Ahora la gente ver las páginas web en todo, desde pequeñas pantallas de teléfonos celulares a los proyectores que iluminan el lado de un granero. Las limitaciones que enfrenta en el diseño web móvil para la pantalla del iPhone pequeños pueden…
Cómo crear diseños web móvil-ipad amigable El iPad, con su hermosa pantalla grande, puede llevar a creer que no es necesario hacer nada especial en el diseño de su web móvil, pero las mejores técnicas de diseño web para el iPad no son los mismos que para el escritorio.Aunque el iPad…