Crear diseños web específicas para iPhone y iPad
Si desea optimizar sus páginas para lucir lo mejor posible, debe tener en cuenta las diferencias de tamaño y resolución de pantalla de entre el iPhone y el iPad. Observe el diagrama simplificado que ilustra una forma común diseñadores alteran sus páginas para cada dispositivo: la organización de la distribución para el mejor ajuste de los diferentes tamaños de pantalla.
Conteúdo
Simplifique sus diseños para la pantalla más pequeña iPhone
En el iPad, que se muestra en el lado izquierdo de la figura, se ve un montón de espacio para una segunda columna para que los apartes se pueden alinear a la derecha del artículo. En el lado derecho de la figura, se ve que la mejor práctica es limitar su diseño para una columna en las pantallas táctiles más pequeñas de iPhone y iPod.
Si nos fijamos en la figura y piensa, " Espera un minuto - el iPad es en modo horizontal y el iPhone está en modo retrato, y que hace una gran diferencia, " estás bien.
Ahora echa un vistazo a esta figura para ver cómo el sitio American Airlines utiliza sólo una columna para el diseño del iPhone, incluso en modo horizontal, y utiliza varias columnas en el iPad, incluso cuando está en el modo de retrato.
Observe en el iPhone que el equipo de American Airlines cambió no sólo el diseño, sino también la información que se muestra, se centra en los elementos más susceptibles de ser importante para una persona en movimiento, incluyendo fácil de vuelo check-ins.
Múltiples diseños Vista previa en Dreamweaver
Si utiliza Adobe Dreamweaver, asegúrese de obtener el HTML5 Pack de Dreamweaver. Esta extensión está incluida en cambios a Dreamweaver CS5 y versiones posteriores y se puede agregar como una extensión de Dreamweaver versiones 3 y 4. Como se puede ver en este ejemplo, la extensión HTML5 permite ver fácilmente tres versiones diferentes de hojas de estilo en una tiempo, colocando cada una en una sección separada de la pantalla.
El HTML5 Pack de Dreamweaver para Dreamweaver CS3 y CS4 es una forma útil para comprobar rápidamente sus diseños para ver cómo las diferentes hojas de estilo CSS afectan a ellos, pero no es compatible con todas las variaciones de HTML5 y CSS 3 todavía. También tenga en cuenta que la limitada " de bienes raíces " en la relación vertical de estas vistas previas hace que sea difícil para asegurarse de que usted está utilizando todo el espacio disponible en el modo de retrato.
Para utilizar Adobe Dreamweaver para ver un blog creado con WordPress, como el que se muestra en el ejemplo, es necesario configurar el ordenador como un servidor web - un proceso que no es tan difícil como se podría imaginar. Puede encontrar instrucciones detalladas para la toma de Dreamweaver y el trabajo de WordPress en su computadora de escritorio.
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 escribir código en nueva html5 Hay algo más que nuevos elementos semánticos en HTML5, que se puede utilizar para diseñar sitios web para ser mostradas en el iPhone y el iPad, así como monitores de ordenador. HTML5 fusiona HTML 4 y XHTML. HTML5 tiene dos versiones principales:…
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…
Propiedades de la tabla cs3 Dreamweaver Si usted está diseñando un sitio Web con Dreamweaver CS3 o cualquier otro software, es probable que utilice un montón de mesas en sus diseños de página. Barra de herramientas Propiedades de tabla de Dreamweaver CS3 le permite microgestión…
CS4 Dreamweaver para dummies El modo HTML del inspector de Dreamweaver CS4 propiedad ofrece herramientas para ayudarle a editar y formatear el texto o el objeto seleccionado en la ventana del documento. La siguiente figura muestra la barra de herramientas y cómo puede ayudarle…
CS5 Dreamweaver para dummies El Panel de Dreamweaver CS5 Común InsertarAl diseñar sus páginas Web en Dreamweaver, puede insertar un enlace, etiqueta, escritura, plantilla, o uno de muchos otros artículos, simplemente haciendo clic en su icono en el panel Insertar Común. En…
El panel de archivos de Dreamweaver CS5 El panel Archivos es una característica muy útil en Dreamweaver CS5. Utilice el panel Archivos para seleccionar el sitio que desea trabajar y para sincronizar archivos a sitios entre el ordenador y el sitio web de servicio de alojamiento. En la…
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 elegir un editor html Si eres un masoquista, que sin duda puede crear páginas web en un programa de procesamiento de textos. Todo lo que necesitas saber es que las etiquetas HTML que se utilizará para cada sección del documento. Sin embargo, tomar este camino, lector…
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…