Uso de Adobe Device Central con Dreamweaver

Device Central permite a desarrolladores y diseñadores web que utilizan Dreamweaver saber cómo se mostrarán los archivos de Dreamweaver en diferentes dispositivos móviles. Device Central utiliza la tecnología Small-Screen Rendering™ de Opera para que los diseñadores y desarrolladores sepan cómo se mostrará su página web en una pantalla de dimensiones reducidas. Además permite a diseñadores y desarrolladores comprobar si su CSS funciona correctamente.

Por ejemplo, un desarrollador web tiene un cliente que necesita un sitio web al que pueda accederse desde teléfonos móviles. El desarrollador web puede utilizar Dreamweaver para crear páginas preliminares y Device Central para ver cómo se muestran esas páginas en diferentes dispositivos.

  1. Inicie Dreamweaver.
  2. Abra un archivo.
  3. Siga uno de estos procedimientos:
    • Seleccione Archivo > Previsualizar en navegador > Device Central.

    • En la barra de herramientas de la ventana del documento, mantenga presionado el botón de previsualización/depuración en el navegador  y seleccione la opción de previsualización en Device Central.

Sugerencias para la creación de contenido web de Dreamweaver para dispositivos móviles

Device Central permite previsualizar páginas web creadas en Dreamweaver mediante la tecnología Small-Screen Rendering de Opera. Esta previsualización puede darle una idea precisa del aspecto de una página web en un dispositivo móvil.

Nota: la tecnología Small-Screen Rendering de Opera puede o no estar preinstalada en un dispositivo emulado concreto. Device Central le permite saber cómo se vería el contenido si estuviera instalada la tecnología Small-Screen Rendering de Opera.

Los siguientes consejos le ayudarán a garantizar que las páginas web creadas en Dreamweaver se muestran correctamente en dispositivos móviles.

  • Si utiliza el framework de Spry de Adobe® para desarrollar contenido, añada la siguiente línea de HTML a sus páginas para que generen CSS y ejecuten JavaScript™ correctamente en Device Central:<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

  • La tecnología Small-Screen Rendering de Opera no admite fotogramas, menús emergentes, subrayados, tachados, círculos superpuestos, parpadeos ni marcos. Procure evitar esos elementos de diseño.

  • No recargue las páginas web para dispositivos móviles. Concretamente, utilice un número mínimo de fuentes, tamaños de fuente y colores.

  • Al reducir los tamaños de imagen y el número de colores necesarios, es más probable que las imágenes aparezcan como se desea. Utilice CSS o HTML para indicar la altura y anchura exactas de cada imagen empleada. Añada texto ALT a todas las imágenes.

Nota:

el sitio web de Opera Software es una buena fuente de información sobre la optimización de páginas web para dispositivos móviles.

Para obtener más sugerencias y técnicas para la creación de contenido para dispositivos y teléfonos móviles, consulte www.adobe.com/go/learn_cs_mobilewiki_es.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea