HTML5: crea un OnePager de primer nivel con diapositivas

OnePagers, sitios web que consisten en una página dividida en dos o más segmentos, siguen creciendo en popularidad. Si no recuerdo mal, Apple fue quien inició esa locura con la presentación de uno de los últimos iPhones hace unos años. El OnePager clásico consiste en una presentación de pantalla completa de un tema, recopilada con imágenes grandes, un encabezado sutil con navegación, un pie de página sutil y puntos de navegación junto a las respectivas pantallas de presentación. El nuevo marco de diseño Slides de Designmodo es su ayudante perfecto para poner en marcha un sitio web de este tipo en muy poco tiempo.

Diapositivas: Consíguelo el Black Friday y ahorra mucho

Antes de mostrarte un poco de lo que Slides puede hacer por ti, no olvides mencionar que ahora es el momento de comprarlo. En honor de viernes negro Designmodo ofrece un descuento del 60 por ciento en todos sus productos. Para Slides, esto significa que en lugar de 249 dólares, solo tendrás que pagar 99 dólares, lo cual es una ganga para lo que te ofrece Slides. Mantener el código de cupón NEGRO cerca de tu corazón y solo ingrésalo durante el proceso de pago en la Tienda Designmodo.

Diapositivas: ¿Powerpoint con esteroides?

Cuando me encontré por primera vez Diapositivas, no pude evitar sentir que recordaba a Powerpoint, el dinosaurio de Microsoft con una acumulación de millones de reuniones aburridas que empeoraban con las supuestas presentaciones que Powerpoint podía ofrecer en manos de presentadores no calificados. No hay problema. Las diapositivas no son tan aburridas como Powerpoint, aunque hay algunas similitudes.

Slides le proporciona presentaciones basadas en diapositivas al igual que lo hace Powerpoint. Una diapositiva representa una pantalla completa. Esto es bastante diferente al sitio web regular con su división por encima y por debajo del pliegue y su área de desplazamiento potencialmente interminable. En Presentaciones, crea contenido basado en páginas, una página a la vez.

Y esto es perfecto para muchas cosas, en primer lugar – nos enseñó Apple – para productos, como smartphones o apps o lavadoras o cualquier producto o servicio que quieras promocionar. El rastro lineal de la narración es una forma ideal de transmitir el mensaje sin demasiado desorden y sin necesidad de tomar demasiadas decisiones de diseño. Los dispositivos móviles son compatibles sin esfuerzo adicional, ya que los sitios se escalan de forma completamente receptiva a la resolución requerida.

Si bien es factible crear un OnePager atractivo usando sus habilidades de HTML5/CSS3, crear uno usando Presentaciones es mucho más fácil. Ni siquiera es mucho más fácil; es una verdadera obviedad. Si desea crear un OnePager sofisticado para un producto o servicio que desea vender, tome Presentaciones. Período.

Diapositivas: el concepto se explica por sí mismo

Slides Framework es un extenso conjunto de herramientas para crear rápidamente un sitio web. Consiste en alrededor de 70 diapositivas individuales, muchos encabezados y pies de página, algunas animaciones y casi una docena de plantillas para empezar. Slides es una descarga que pesa casi 800 megabytes, pero también se puede adaptar al tamaño en el Generador de plantillas en línea en Designmodo. Esto le ahorra la descarga completa y solo entrega las partes y los parámetros elegidos del marco completo.

El proceso que utiliza el generador de plantillas es tan simple como puede ser. Primero, elige cualquier combinación de diapositivas que considere adecuada para su proyecto previsto. Luego selecciona un diseño para las barras superior y de pie de página. Configure la animación que desea aplicar a su presentación y haga clic en «Descargar». Esto enviará una versión personalizada del marco a su escritorio local. Antes de descargar el subconjunto del marco más grande, puede modificar algunos ajustes preestablecidos del Generador y ver los resultados haciendo clic en «Vista previa».

Una vez que el marco de diapositivas personalizado haya llegado a su disco duro local en forma de archivo zip, descomprímalo. Encontrará una estructura de carpetas que contiene todos los activos y scripts necesarios, así como el index.html en la raíz de la estructura de carpetas. Este idex.html es lo que querrá editar con su editor de HTML favorito. Recientemente hemos reunido colecciones de los mejores editores para Windows y Mac OSX.

El HTML es perfectamente comprensible siempre que no seas un completo novato. El código fuente está estructurado por comentarios que se relacionan con los nombres y números utilizados en todo el marco. Por lo tanto, si ha elegido la diapositiva con el número 18 para incluirla en su index.html, simplemente busque esa diapositiva en el código fuente y aplique los cambios previstos. Otros recursos, como las imágenes, siguen la misma convención de nomenclatura. Una imagen utilizada para la diapositiva 18 se llamará img–18.jpg. Creo que entiendes el concepto?!

Sin embargo, la sustitución de los activos debe hacerse manualmente, pero es tan fácil como reemplazar un archivo por otro archivo diferente con el mismo nombre. Esta es la forma apropiada ya que se apega a las convenciones y mantiene el concepto intacto. Por supuesto, puede optar por cambiar los nombres e incluso las rutas a los activos desde index.html, si lo desea. Bien hecho, no encontrará ninguna diferencia en la funcionalidad.

Tómese su tiempo para ver el siguiente video. Te guía a través de todo el proceso en aproximadamente ocho minutos. Esto es todo lo que necesitas saber:

El ejemplo de mejores prácticas de lo que Slides puede hacer es su propia página de producto. Si aún no has revisado Presentaciones, definitivamente deberías haz eso ahora mientras que su descuento del 60% todavía está disponible. Apuesto a que no te arrepentirás.

Antes de que lo olvide. Puede crear tantos proyectos con Presentaciones como desee. La licencia no está limitada de ninguna manera. Lo único que no puede hacer es distribuir el marco como tal. Pero esas son las reglas simples del juego limpio de todos modos. Además de todos los activos necesarios para dar vida a su OnePager, Designmodo también proporciona los archivos de diseño subyacentes en sus formatos editables. Todas las diapositivas se entregan no solo en HTML, sino también en formato Photoshop y Sketch.

Para abreviar una larga historia: Slides es una herramienta fantástica para crear fácilmente OnePagers atractivos con HTML5, CSS3 y JavaScript. Si es rápido para decidir, puede ahorrar 150 dólares y obtener el producto por solo 99 dólares. Ya lo hice.