A punto de publicarse wordpress 4.0

A punto de publicarse wordpress 4.0

A punto de publicarse wordpress 4.0 y siguen llegando noticias sobre el futuro WordPress 4.0 y una muy buena noticia ya confirmada es que WordPress 4.0 será multilenguaje desde el momento de su instalación. Esta internacionalización de WordPress es sin duda algo muy esperado y que no sólo será de gran ayuda a los usuarios de WordPress sino que ayudará a la expansión de este fantástico CMS.

wordpress-multilenguaje

Como funcionará WordPress 4.0 multilenguaje

Según el desarrollador principal de WordPress, Andrew Nacin, los objetivos de WordPress 4.0 multilenguaje serán:

  • El primer objetivo es que se pueda elegir idioma en WordPress desde la instalación y a partir de ahí, todos los pasos de la instalación se mostrarán en el idioma seleccionado. Cuando la instalación finalice tendremos el escritorio de WordPress totalmente en nuestro idioma.
  • El idioma seleccionado se podrá cambiar desde la pantalla de ajustes generales de WordPress.
  • Otra opción será la de buscar plugins o temas que estén en el idioma seleccionado. De esta forma si hemos instalado WordPress en español podremos buscar directamente temas o plugins que ofrezcan una traducción al español.
  • Los “paquetes de localización” consistirán en archivos del de core WordPress, algunos archivos traducidos (readme.html, el archivo de licencia o el archivo de configuración wp-config-sample.php) y el archivo de traducción PO/MO del idioma seleccionado. Estos paquetes de localización deberán estar disponibles con cada nueva versión de WordPress de forma inmediata.
  • Los paquetes de localización antes descritos sólo se emplearán para la descargas iniciales, es decir, para instalaciones desde cero. En las actualizaciones se emplearán los “paquetes de idioma” ya que no hay motivo alguno para volver a instalar todos los archivos de los paquetes de localización.
    Para que quede claro, van a existir dos tipos de traducciones: 

    • Los “paquetes de localización” empleados en instalaciones iniciales (incluirán todos los archivos de la traducción).
    • Los “paquetes de idioma” empleados para actualizaciones (sólo incluirán las traducciones necesarias para cada actualización).

Cambios de WordPress 4.0 beta 2

WordPress 4.0 incluirá una nueva vista de rejilla de la librería multimedia, pues estos dos componentes han sido objeto de la solución de múltiples bugs, algo normal cuando se introduce nuevas funcionalidades.

Se ha mejorado el uso de cookies y ahora están enlazadas con una sesión interna para ofrecer una mayor seguridad.

El cambio más significativo introducido en esta versión beta 2 es la inclusión del selector de color(color picker) en el editor de entradas. Recordemos que este selector de colores se había retirado pero por demanda popular se ha vuelto a incluir. Ahora cuando accedemos al botón de acceso a la paleta de colores se nos muestra ademas de la paleta por defecto, las letras “Custom…”, que al hacer click en ellas nos lleva al selector de color. A través de este selector de color podemos seleccionar un color personalizado de tres modos:

  • Desplazando manualmente la cruceta con el ratón.
  • A través del valor hexadecimal del color.
  • A través del valor RGB del color.

color-picker-wordpress-4

Este selector de color seguramente será de utilidad a más de uno. El resto de novedades son más de 170 bugssolucionados.

Nueva legislación en la venta de medicamentos online

Nueva legislación en la venta de medicamentos online

Nueva legislación en la venta de medicamentos online

La nueva ley de venta de medicamentos online va a cambiar totalmente el panorama del e-commerce español. A partir de ahora se inicia una época de venta de medicamentos muy diferente frente a la que conocíamos tradicionalmente.

El  Real Decreto 870/2013, por el que se regula la venta a distancia al público, a través de sitios web, de medicamentos de uso humano no sujetos a prescripción médica”  nos dice que en un mes se podrán empezar a vender medicamentos por internet sin una titulación farmacéutica; ten en cuenta que hasta ahora sólo se vendía parafarmacia. La parafarmacia y los medicamentos son un caso paradigmático de venta cruzada, es decir cuando te compras el Ibuprofeno aprovechas para llevarte también unos caramelitos sabor hierbabuena con limón. Esto transforma por completo el panorama del comercio electrónico.

¿Cómo afectará la nueva ley del medicamento al eCommerce?

¿Por qué abre nuevas posibilidades al comercio electrónico? Recuerda que Amazon empezó vendiendo libros. El libro es no-perecedero, fácil de transportar y está estandarizado estandarizado, es decir prácticamente se puede comprar con un número de referencia. Al medicamento le ocurre exactamente lo mismo pero además el medicamento tiene (ha tenido hasta ahora) unos márgenes sensacionales que justifican grandes inversiones en marketing, logística, informática, etcétera.

¿Qué modelos de venta de medicamentos tenemos hoy por internet? Ninguno, hasta ahora sólo eran legal vender parafarmacia por internet. Pero en parafarmacia tenemos dos modelos diferentes según la perspectiva del cliente:

  • El primero es la la tienda electrónica que crea la propia farmacia
  • El segundo es un agregador de farmacias.

Es decir, podemos sólo comprarle a una única marca como PromoFarma que luego sirve desde diferentes farmacias o bien podemos comprar a una farmacia concreta, como puede ser la Palomera de León

¿Cuál ganará de los dos? No tengo ni la más remota idea tal vez con vivan los dos tal vez para haya farmacias que renuncien a estar online, es simplemente que sigan offline apoyados por promocionesFarma, tal vez suceda en este sector lo mismo que ha ocurrido hasta hoy: que la regulación marque la forma del negocio.

Herramientas de diseño web: Webflow, Edge reflow y Macaw

Herramientas de diseño web: Webflow, Edge reflow y Macaw

Herramientas de diseño web: Webflow, Edge reflow y Macaw

Para prepararse para una charla sobre los papeles cambiantes de los diseñadores y desarrolladores, dadas en CÓMO interactivo hace unos meses, me entrevisté con más de 20 tiendas web . Validado por mi propia experiencia, he encontrado que muchos de ellos enfrentan desafíos encajan diseño de respuesta en su flujo de trabajo y el papel de la mayoría de los diseñadores web había cambiado para incluir la programación de una forma u otra. Al menos la mitad de los diseñadores sabían HTML y CSS bien pero quería una forma más visual para llegar a ella. Bueno, una nueva generación de herramientas de diseño visuales sensibles ha llegado. Estas herramientas de diseño que responden son para cualquier persona que entiende de HTML y CSS (o está dispuesto a aprender ) y quiere diseñar visualmente una página web de respuesta – y tienen código para mostrar. Algunas de las más nuevas y visuales constructores de sitio web de respuesta son Webflow, Adobe Edge Reflujo CC y Macaw. Sí , un millón de personas están ahí fuera, incluyendo Squarespace , FROONT y caballete, pero nos centraremos en unos pocos en este artículo. Mi intención no es campeón de estas herramientas, sino más bien para que se familiarice con ellos y discutir sus puntos fuertes y débiles . Para que conste , soy un desarrollador de front-end que -creo sitios web que responden utilizando varios marcos y mi propio código como punto de partida (junto con WordPress). Siempre he sido recelosos de código generado, por una buena razón (recuerde GoLive ? ), Pero también entiendo que herramientas como éstas tienen un tiempo, un lugar y, sí, un público. Usted podría utilizar una de estas herramientas en el proceso de diseño para crear composiciones que responden , sin importar si usted tiene la intención de usar el código generado. Incluso me he tomado a través de algunos de prototipado rápido. ¡Blasfemia! Por lo tanto, vamos a echar un vistazo, a partir de Webflow.

Webflow

Al igual que todas las herramientas que discutiremos, Webflow es un recién llegado a la escena. Es un editor de arrastrar y soltar en el navegador para crear sitios web que responden sin tener que mirar el código . Se requiere una suscripción mensual y tiene múltiples niveles de precios para los individuos y equipos . Incluido en todas las suscripciones está organizando en una red de distribución de contenidos mediante un subdominio ( yoursite.webflow.com ), a menos que quieras pagar unos dólares más para el hospedaje de dominio personalizado . Pero es posible también exportar simplemente el código generado y llevarlo donde quiera. ¿Cómo va el código que genera Webflow , usted pide? Se basa en Bootstrap 3.0, y, sí , algunos de nosotros podría escribir más limpio, más claro , más código semántico, pero dijo todo , el código de Webflow es relativamente limpio. Después de registrarse y el registro, es llegar al salpicadero del Webflow . Esto es donde el control de su cuenta , administrar la configuración del sitio web y comenzar su sitio web. Por defecto, no hay mucho excepto un gran botón azul que mira a la cara , que le insta a crear un sitio web . Puede utilizar una plantilla o empezar de cero. Incluso hay un mercado para las plantillas, de pago y gratuitos , donde se puede vender sus propias plantillas WebFlow .

Primeros pasos con Webflow

Primeros pasos con Webflow

Bloques de construcción

Una vez que haya comenzado un sitio web, te llevan en el diseñador de Webflow, donde sucede la magia. En el diseñador, que actualmente es reconocida sólo en Chrome y Google Canary (que es básicamente Chrome para desarrolladores, con nuevas características que se agregan casi todos los días), se le está mirando fijamente a su primera página en el explorador , con una barra de herramientas a la izquierda y varios los paneles de la derecha. Operaciones genéricos (por ejemplo, agregar páginas , la edición y vista previa) están a la izquierda, y los contenidos y opciones de formato meollo de la cuestión están a la derecha. Desde el panel de “+ ” a la derecha, puede arrastrar elementos de diseño (divs o elementos HTML5 fijados a un max-width o un ancho de 100 %) y una cuadrícula personalizable en el diseño de escritorio por defecto. Con su estructura básica en su lugar, usted puede comenzar a insertar contenido de la página. Webflow viene con un conjunto de componentes web estándar (incluyendo listas , enlaces y bloques de texto ) y una serie de widgets personalizables (como iconos de redes sociales y deslizadores sensibles ) que puede arrastrar en la estructura de la página. Para las imágenes , puede utilizar GIF , JPG , PNG o SVG , así como imágenes optimizadas para la retina y Hi- DPI pantallas. También puedes arrastrar el widget ”

Diseñador de Webflow

Diseñador de Webflow

Insertar ” en el diseño para añadir su propio código.

DISEÑO

Mientras Webflow es arrastrar y soltar, la experiencia no es como el diseño en Photoshop o Illustrator. El contenido se genera encaja más como un rompecabezas y se posiciona utilizando propiedades CSS típicos como el padding, margen y posición. Como un codificador , agradezco la eficacia con Webflow muestra visualmente la estructura HTML y CSS propiedades. Como resultado , el conocimiento de HTML y CSS de trabajo es necesaria, y constructores de sitio web por primera vez puede ser un poco perplejo por algunas de las opciones, pero eso es lo que la ayuda video es para , junto con los iconos en línea de ayuda (“?” ) por todas partes. Para ser honesto , el panel de estilo a la derecha, donde se ajusta la mayoría de las propiedades de CSS , es relativamente intuitivo, y la forma en que maneja las propiedades CSS , como relleno y el margen es muy inteligente . Codificadores de CSS podrían sentir que carece y quiere ver el código . Contenido compartido entre páginas es bastante simple , y algunos contenidos relacionados con SEO- , como los títulos y descripciones , se puede establecer por página .

Editar estilo

Editar estilo

DEFINIR SU DISEÑO DE RESPUESTA

Cuando se trata de cómo el contenido responde realmente a la medida del navegador, sigue Webflow cómo la industria inicialmente se acercó el diseño de respuesta : durante tres dispositivos o puntos de interrupción. A medida que agrega y diseñar su contenido y áreas, se puede determinar los tamaños de los dispositivos ( de tres) que van a aparecer en . También puede previsualizar fácilmente el diseño en los tres tamaños desde dentro de la interfaz . En la actualidad, los puntos de corte no se pueden editar en el diseñador, a menos que agregue su propio código en el tablero de instrumentos o exportar el código y editar el CSS a otra parte.

El cambio entre los puntos de interrupción

El cambio entre los puntos de interrupción

Las fuentes, los medios de comunicación, FORMAS Y VINCULACIÓN

  • Fuentes

En estos días , las fuentes alojadas son una necesidad para cualquier diseñador que se precie . La integración de Google Fuentes o un kit de una cuenta Typekit se pueden hacer en el tablero de instrumentos , y esas fuentes serán entonces accesibles en el menú “Fuente” en el área de diseño .

  • Medios de comunicación

Adición de medios (incluyendo vídeo de Vimeo y YouTube ) es bastante fácil, también. Webflow utiliza Embedly incrustar el contenido de una larga lista de proveedores.

  • Formas

Formularios de contacto simples también están disponibles y se pueden instalar y diseñados con bastante facilidad. Usted puede tener los datos que se envían por correo electrónico: Sólo tienes que arrastrar los datos capturados del formulario de la configuración en el panel de control , o el gancho de la forma a otra secuencia de comandos (o simplemente insertar su propio código de formulario).

  • Vínculos

Aparte de las opciones de vínculos típicos (como entre las páginas de sitios web , correo electrónico y teléfono ) , Webflow permite vincular a las secciones de las páginas, con desplazamiento suave entre anclajes insertados automáticamente. También puede insertar un bloque de enlace, que es un área de contenido con un solo vínculo que se le aplica . También puede ajustar fácilmente la apariencia de sus vínculos por el estilo de ellos.

TRABAJANDO CON EL CÓDIGO

Al igual que con la mayoría de otras herramientas, algunas de las características de HTML y CSS más avanzadas están ocultos de manera predeterminada en el espacio de trabajo , pero se puede activar . Si te sientes aventurero , también puede asignar sus propias clases de contenido y cambiar el nombre y eliminar en el Administrador de estilos . Si usted es hábil con el código, puede insertar su propio en las etiquetas de la cabeza y el cuerpo en el salpicadero. Esto abre la puerta a la adición de los componentes personalizados , como plugins jQuery y mucho más . código de Inserción

Insertar código

Insertar código

Webflow es actualmente un constructor de sitio web estático y no está vinculado a un sistema de gestión de contenidos ( CMS) o el sistema de blogs. Usted puede exportar el código de su diseño Webflow utilizar como punto de partida para un WordPress (u otro) de proyecto o incluso como un archivo plano CMS. Pero una vez que se exporta el código, que pierde su conexión con el diseño original en Webflow . Una característica útil de Webflow es la posibilidad de guardar versiones de sitios web. En estos días, la mayoría de nosotros que desarrollan sitios web para ganarse la vida utilizan algún tipo de control de versiones , por lo que, en su forma más simple , podemos volver a versiones anteriores si se produce un problema. En el diseño de Webflow , puede crear manualmente una versión o dejar que WebFlow crear uno de forma automática cada 20 de salvar. Un punto de restauración se creará en la configuración de la página Web del tablero de instrumentos, y se puede añadir una nota en cada punto de restauración. Entonces , si pasa algo, puede restaurar el archivo completo (es decir, sitio web) a una versión guardada anteriormente. Por lo tanto, escribir una nota recordatoria en cada punto de restauración para explicar que la página web es una buena idea.

Restaurando versiones en CMS

Restaurando versiones en CMS

Publicando y exportando

La publicación en la red de entrega de contenido de Webflow (incluido en el presupuesto) es bastante simple , ya que está exportando , si usted prefiere tomar otra parte del código . Puedo imaginar varios usos para esto: las personas que lo usan para crear su propio sitio web de respuesta estática ; diseñadores lo utilizan de demostración de un diseño de respuesta o para pasar el archivo de código exportado a un desarrollador ; y desarrolladores usando piezas del código generado en sus proyectos. Webflow también permite a los usuarios trabajar en colaboración (que cuesta más), incluso mediante el intercambio de plantillas, la transferencia de sitios web para clientes y mucho más.

Exportando el código

Exportando el código

Adobe Edge Reflug CC

Edge reflug es parte de la familia de herramientas de borde y servicios que Adobe ha introducido en los últimos años . La familia incluye Edge Reflow , Edge Animate y Edge Inspeccione , y es una parte de la Creative Cloud , que está basado en suscripciones . A diferencia Webflow , que está basado en el navegador , Borde de reflujo es actualmente una aplicación que se descarga e instala en el disco duro . Debido a reflujo es todavía técnicamente en modo de vista previa pública (como una beta que está disponible para el mundo ) , no está todavía plenamente al horno , y las cosas cambiarán muy probablemente en versiones futuras sobre la base de sugerencias de los usuarios . Edge reflujo es una herramienta de diseño que captura las “de intermediarios” de un diseño de respuesta , que a menudo son difíciles de transmitir al dar el relevo un proyecto a un desarrollador o en la presentación de los conceptos de diseño a un cliente. En otras palabras, Edge reflujo hace que los archivos de Photoshop más sensible amigable.

Bloques de construcción

Al comenzar un proyecto en el reflujo , puede seguir uno de varios métodos . Usted puede crear un proyecto de reflujo que contiene las páginas de su sitio web y empezar a partir de un lienzo en blanco, por así decirlo. Puede importar imágenes de la web y el contenido de Photoshop y luego construir su diseño; hacer esto , incluso se podría importar el contenido en su proyecto de reflujo directamente desde un archivo CC Photoshop (ersión 14.1 + only – CS6 y anteriores no funciona) si el archivo de Photoshop (PSD) se ha establecido correctamente.

Un tercer método es exportar un proyecto de reflujo desde Photoshop CC ( 14.1 + ) como punto de partida para un diseño de respuesta en reflujo . Esto le permite importar las formas , el texto y los activos que ha definido en el documento de Photoshop. Utilizando la tecnología de generador integrado en Photoshop CC (14.1 +), las imágenes optimizadas en la web se generan automáticamente a partir de los nombres de capa en Photoshop. Esta conexión es uno de los grandes puntos de venta de reflujo para aquellos de nosotros que confían en Photoshop para el diseño web .

Copiando CSS de Reflow

Copiando CSS de Reflow

  • DISEÑO

Cuando se trata de diseño , reflujo es bastante similar a Photoshop e InDesign . Cambia la posición de los elementos visuales , en lugar de editar el CSS y HTML para moverlos. Reflujo también requiere que se dibuje contienen elementos en el espacio de diseño , en lugar de arrastrarlos en (como en Webflow) . El flotador : izquierda declaración se aplica a todos los elementos en reflujo por defecto, así que arrastrar el contenido que se encuentra en la página puede ser doloroso al principio. Una vez más , sin embargo, la aplicación que obliga a entender los conceptos de HTML y CSS , porque la mayoría de las funcionalidades relacionadas con el diseño se basa en ellos. Para ayudar a su diseño, Reflujo viene con una rejilla editable que le permite editar las columnas, canalones y opacidad. Cada punto de interrupción de respuesta puede tener un ajuste de rejilla diferente. Puede crear múltiples páginas, y lo más parecido a la adición de CSS es copiar y pegar los estilos visuales de un elemento a otro . Reflujo también le permite acceder a las opciones de base de CSS para el estilo del cuerpo (llamada la ” página” ) y el div que contiene (que todas las páginas tienen reflujo ).

  • DEFINIR SU DISEÑO

Debido a que el diseño de respuesta es el propósito de reflujo en la vida, la única cosa que realmente llama la atención es cómo se defina visualmente los puntos de interrupción . En Reflow , está representado todo el espectro de respuesta ( no sólo los tres tamaños de los dispositivos , como en Webflow ) . Si partes de su rotura de diseño entre el móvil y la tableta , por ejemplo , puede agregar fácilmente un punto de interrupción haciendo clic en un botón y hacer los cambios necesarios . Reflujo incluso le permite establecer puntos de interrupción máxima y mínima , lo que significa que usted puede diseñar móvil primero , si quieres. Definición de los puntos de interrupción en Reflow Definición de los puntos de interrupción en reflujo (Grande vista previa) Las fuentes, los medios de comunicación.

  • Fuentes

Fuentes de una cuenta Typekit se puede utilizar fácilmente en la interfaz al conectar el kit. Reflujo también viene con acceso a Edge Web Fonts (una colección de fuentes web hospedados de Adobe, Google y otros) . medios de comunicación Porque no se puede inyectar su propio código a menos que modifique el código generado , la adición de medios en el borde de reflujo no es posible. Se puede establecer un marcador de posición para los medios de comunicación (como imágenes ) , usándolo como una señal visual para el sitio web de producción. Formas En Reflow , puede añadir una serie de elementos típicos de formulario , como botones , campos de texto y botones de radio (entre otros) . Inserción de estos elementos de formulario en la página no añadir una etiqueta de formulario con el código generado ; así, los elementos de formulario no están hechas para ser funcional fuera de la caja . Esto nos recuerda una vez más que de reflujo es actualmente una herramienta maqueta , más adecuado para la creación de un diseño a prueba de concepto de que para generar código listo para la producción . enlace En la última versión de Edge Reflujo CC , se puede enlazar a páginas dentro del proyecto y a direcciones URL externas , así como los estados de control como la libración y activa en cualquier objeto en el diseño.

INTEGRACIÓN CON UN CMS

Reflug actualmente no tiene manera de integrar con un CMS a menos que tome el código que se genera y lo hace usted mismo fuera de la aplicación .

TRABAJO CON EL CÓDIGO

Edición de código no es el propósito de reflujo , ya que está destinado a ser utilizado como una herramienta de diseño visual . Sin embargo , utilizando el panel Elementos , puede nombrar a los elementos y organizar el código (es decir, para el DOM) en una jerarquía que tenga sentido para usted ( y tal vez a su desarrollador) .

Si usted está mirando para agregar cosas como una presentación de diapositivas jQuery, desplazamiento suave o un video o insertar su propio código HTML , entonces tendrá que modificar el código generado en otra aplicación. El panel Elementos El panel Elementos (Grande vista previa) Publicación y exportación Tenga en cuenta que el borde de reflujo tiene actualmente ningún exportador o funcionalidad de publicación . Al previsualizar la página web en un navegador compatible , reflujo genera el código HTML y CSS, pero los comentarios en línea que advierten contra el uso del código en un entorno de producción.

Editar tags en el outline

Editar tags en el outline

 

A juzgar por la respuesta en los foros de Edge de reflug, esto no ha impedido que la gente lo intente. Reflug te permite mostrar, copie y pegue el código CSS generado utilizar más aguas abajo en su página web real. Copiado CSS del reflujo Copiado CSS del reflujo (Grande vista previa) Para una mirada al interior de cómo Reflujo produjo, echa un vistazo en cuenta el proceso de Aaron Shekey.

Macaw

La última aplicación de la escena es Macaw, que acaba de ser lanzado al público como la versión 1.0 el 31 de marzo. Macaw se posiciona como una herramienta de diseño web que también escribe HTML semántico y CSS. Creo que el lema lo dice todo : “Deja de escribir código, empezar a dibujar ella. ” Como Edge Reflow, Macaw también es una aplicación que se descarga e instala en el disco duro y está vinculada a una cuenta registrada. Pero a diferencia de Webflow y Edge Reflujo CC , no hay ninguna cuota mensual. Usted sólo paga un precio por una sola vez.

Después de pasar unos días con Macaw , te puedo decir que tiene un gran potencial como herramienta de diseño de páginas web sensibles . Esa es una buena manera de decir que es un bastante impresionante versión 1.0 , con algunos errores . Viniendo de un fondo de la web , puedo decir que la interfaz es bastante intuitiva , aunque me encuentro que faltan características básicas como los menús de contexto del botón derecho y zoom. Pero teniendo en cuenta que un puñado de personas inició esta cosa , no una corporación grande , estoy impresionado.

La interfaz del Macaw Interfaz (vista previa Large) del Macaw Bloques de construcción Cuando se inicia un proyecto Macaw, que se enfrentan a una página en blanco , que es el lienzo de diseño. Usted puede empezar a añadir elementos de diseño a la página mediante la importación de imágenes y añadir marcos de texto y el formato a ir con ellos, o usted puede ir directamente a la adición de puntos de interrupción que se podría esperar de su uso. La interfaz del Macaw es bastante simple, y el diseñador promedio realmente no se necesita mucho tiempo para descifrar dónde están las cosas – es decir, el tiempo que tienen un conocimiento de HTML y CSS de trabajo . Como Reflow , Macaw es bastante similar a Photoshop e InDesign en su acercamiento al diseño. Usted dibuja y recolocar los elementos visuales , en lugar de tener que editar el CSS y HTML. Stream es el nombre del motor que calcula todas las propiedades que colocan los elementos de diseño en el flujo del documento estático.

Al igual que con Webflow y reflujo , usted tiene que entender HTML y CSS conceptualmente , porque la mayoría de la funcionalidad de diseño se basa en ellos. Elementos de diseño en Macaw Elementos de diseño en Macaw (Large vista previa) DISEÑO Macaw tiene lo que parece ser una característica muy útil, llamado modo de visualización , que muestra los elementos de diseño en la página como ” normal” o ” contorno ” o ” alambre “. Debido a que muchos de nosotros va a utilizar Macaw como wireframing y maqueta herramienta , al ver el contenido como contornos negros ( “perfil “) o cajas de color gris ( ” alambre “) será útil. El modo de vista del Macaw El modo de vista del Macaw (Large vista previa)

DEFINIR SU DISEÑO

Después de haber trabajado en el borde de reflujo durante un tiempo , me sorprendió la forma en que el espacio de trabajo Macaw similar . Como Reflow , Macaw permite definir puntos de interrupción visual , aunque su interfaz no es tan elegante como reflujo de en mi opinión. Todo el espectro de respuesta se representa ( no sólo los tres tamaños de los dispositivos , como en Webflow ) . Si partes de su rotura de diseño entre los puntos de interrupción , puede agregar fácilmente un punto de interrupción y hacer los cambios necesarios . Tristemente, Macaw actualmente no permite el diseño móvil primero porque no se puede establecer puntos de interrupción máximo y mínimo . El DOM también se bloquea en los puntos de corte más pequeñas , lo que impide la adición de contenido ( las herramientas están aún en gris ) . Pero la gente está charlando en foros del Macaw que los puntos de corte min- width (por diseño -mobile primero ) están llegando. Establecer puntos de interrupción en Macaw Establecer puntos de interrupción en Macaw (Large vista previa) Las fuentes, los medios de comunicación,

FORMAS Y VINCULACIÓN

Fuentes Fuentes web de Google se integran en el espacio de trabajo, y también se puede acceder a las fuentes Typekit conectando su cuenta en el menú “Fuente” del área de diseño . medios de comunicación Actualmente, Macaw ofrece una manera fácil de insertar los medios de comunicación , tales como videos de YouTube. Puede, sin embargo , introducir un elemento de marcador de posición y ate algo de JavaScript a la misma, a través del ” scripts ” del panel. Formas Macaw tiene una variedad de elementos de forma típica , incluyendo botones, campos de texto y botones de radio, que se pueden agregar a un diseño . Al igual que en reflujo , se trata de representar visualmente un formulario, no para crear una forma de trabajo real . Si te sientes aventurero , puedes elementos de forma de agrupar y cambiar la etiqueta a formarse en el editor de esquema. Esto por lo menos le dará las bases para una forma funcional si tiene la intención de usar el código generado en su sitio de producción. enlace Puedes enlazar a páginas creadas en un proyecto, así como el tipo de enlaces en el menú ” Vínculos”.

TRABAJO CON EL CÓDIGO

Lo más parecido a trabajar con código en Macaw (aparte de editar el código publicado) es editar elementos en el panel de esquema, que es una representación del DOM. En el panel de esquema , puede cambiar las etiquetas HTML , jerarquía y el contenido de pedido, solicitar nombres de CSS y más. También se pueden crear estilos globales (CSS) que se pueden aplicar a su contenido. Edición de etiquetas en el panel Contorno Edición de etiquetas en el panel Contorno (Grande vista previa)

INTEGRACIÓN CON UN CMS

Como Reflow , Macaw no se integra con un CMS. Algunas personas en la comunidad Macaw están tratando de averiguar un flujo de trabajo de Macaw para WordPress (y otros plataformas ) , pero no hay una conexión directa todavía. Publicación y exportación Macaw tiene una opción de publicación que lleva a una ventana de vista previa . A diferencia de reflujo, Macaw ofrece opciones para la exportación , en “Configuración de publicación.” En el cuadro de diálogo de ahí, puede elegir las páginas para exportar , inyectar código (como Google Analytics) en la cabeza o el cuerpo , adaptar el CSS a sus necesidades (escribiendo abreviaturas , la adición de prefijos de proveedores , la consolidación de estilos , etc), genera imágenes optimizadas para pantallas de alta definición y más. Los ajustes que dicen que el código generado no es sólo para mostrar. Una vez publicada , se le llevará a una ventana de vista previa , donde se puede ver todo el código (HTML , CSS , JavaScript ) e incluso ir a la vista previa de la página en el navegador predeterminado . De las tres aplicaciones , el código del Macaw es el más conciso y lo más cercano a lo que un desarrollador de front-end en realidad podría escribir.

Opciones para publicar código

Opciones para publicar código

CONCLUSIÓN

Estas herramientas de diseño están aquí para quedarse de una forma u otra. Desde dispositivos móviles llegaron a la escena, que hemos estado tratando de configurar nuestros flujos de trabajo para dar cabida a los diseños sensibles. Estas herramientas podrían potencialmente salvar esa brecha cuando es usado como punto de partida para el diseño de aplicaciones para usuario o simplemente para wireframes y prototipos.
Como era de esperar, ya he visto la gente trata de construir un gran sitio web basado en CMS con reflug y luego se quejan cuando no pueden inyectar su slideshow de respuesta preferida o lamentarse de que el código no es lo que iban a escribir. Tenga en cuenta que el guacamayo y reflujo tienen el propósito de ser parte de un flujo de trabajo, no al principio y al final. Mediante el uso de estas herramientas, ya que tienen por objeto (y no obligarlas a nuestro flujo de trabajo), podemos cruzar el umbral de la capacidad de respuesta, que puede salvar a nosotros mismos ya nuestro tiempo y dolores de cabeza clientes.

Estrategias para vender un libro electrónico

Estrategias para vender un libro electrónico

Cómo diseñar, editar y vender tu libro electrónico

Con la editorial ItsBook he tenido mucha experiencia en la venta de libros digitales y en papel autoeditados. Hay mucha gente que desconoce que el mercado editorial es un lugar en el que no abundan las ventas, exceptuando en contadas excepciones. En el caso de la autoedición (y este es el caso del 95% de los libros electrónicos que existen), hay diversos puntos a tener en cuenta antes de lanzarse a vender un libro. Son estrategias que bien he usado o voy a llevar a cabo para mi propio libro “Órbita Final: Éxodo” y con las que he conseguido que en tres días, se sitúe entre los cinco más vendidos de ciencia ficción de Amazon.

Órbita Final en Amazon

Órbita Final en Amazon

Parecen obvios, pero no se suelen tener en cuenta:

Corrección del texto

Éste es un blog de diseño y estoy poniendo esto. El diseño cuenta historias y jamás verás un logotipo que antes no haya pasado por una y otra y otras revisión. ¿Por qué publicar un libro que se van a leer en el peor de los casos varias decenas de personas y no revisarlo? La corrección del texto no es tan sólo los fallos gramaticales. Normalmente cuando un autor lo lee por octava vez, descubre que hay un parón en el ritmo de lectura, que sobran o faltan diálogos o que simplemente hay que eliminar un capítulo por completo. Revisa antes de pensar en publicar.

Diseño y maquetación

Personalmente uso varios programas. Para la redacción resulta bastante cómodo uno llamado Scrivener. Es importante que se respeten las normas como el guión largo para los diálogos. Es habitual entre escritores que autoeditan que al no contratar a diseñadores se salten muchas normas de maquetación básicas, por lo que recomiendo conocer el uso de las comillas españolas y otros símbolos. En su caso podéis contactar conmigo para realizar la maquetación profesional del libro.

Una vez terminado el texto, hay que maquetarlo. El formato electrónico es algo similar a una página web encapsulada en un archivo .rar, pero renombrado como epub, mobi o el formato que use el lector en particular. Antes era especialmente importante tener cuidado con la tipografía escogida, puesto que las tipografías de palo seco no eran adecuadas para la lectura y las que tenían serifa, perdían detalle porque los dispositivos de tinta electrónico apenas tenían detalle. La elección ideal son las egipcias, especialmente Rockwell, que al tener serifas anchas y con trazos rectos y rectos, no pierden detalle en los dispositivos. De hecho, el kindle (el lector de Amazon), viene configurado para que todos los libros se lean inicialmente con una rockwell modificada. Aunque he de decir que los últimos lectores que han salido al mercado tienen suficiente resolución para usar tipos con serif, mi recomendación es tener cuidado con esto porque hay muchas personas que compraron un lector en el pasado y no van a comprar uno nuevo en mucho tiempo.

Una vez escogida la tipografía, la maquetación final se puede realizar con Sigil, un programa gratuito del que no nos tenemos que preocupar de que vaya  desaparecer porque google ha dejado un hueco en sus servidores a los desarrolladores del mismo. Permite insertar la portada de manera cómoda, crear TOC (Table Of Content), separar la información por capítulos, insertar pequeñas imágenes en el texto y comprobar si todo está correcto. Después exporta a epub. El código que devuelve es limpio y el archivo pesa lo menos posible. Si notas que tu libro pesa en exceso es posible que sea por la portada o imágenes que hayas insertado. Anteriormente he escrito un artículo con consejos para realizar una portada para un libro electrónico.

Maquetación con Sigil

Maquetación con Sigil

Para pasar el libro de epub a mobi (el formato elegido por Amazon), recomiendo no usar el famoso Calibre, porque no es el mejor conversor. Amazon pone a disposición de los usuarios el programa Kindle previewer que viene con las características de la mayoría de sus lectores preprogramadas. Basta con abrirlo, escoger el lector al que se quiere traducir el epub y arrastrar el libro sobre el programa. El kindle previewer se encargará de generar un archivo mobi limpio y preparado para el sistema de Amazon. Si quieres crear un mobi es exclusivamente para los lectores de Amazon, así que usa sus programas.

Publicidad y ventas

El tema más importante. Podrás leer en multitud de foros quejas de autores que no paran de comentar que no venden ni un ejemplar. En primer lugar tienen que comprarte el libro los AFC, es decir amigos, familia y conocidos. Si no eres capaz de vendérselo a ellos sin hacer de comercial pesado, es mejor que abandones. Con eso deberías de haberte garantizo unas decenas de ventas. Una vez has hecho la publicidad entre los AFC, que se queda en facebook, redes sociales, foros que suelas visitar y el cara a cara, toca la publicidad entre los blogueros. El consejo es que regales el libro a los blogueros o podcasteros que creas que tienen relación con el mundo o que comentarán algo sobre tu libro. Si el libro es bueno, lo harán y será una publicidad efectiva. Puedes pasar a los concursos, aunque no te lo recomiendo. Normalmente en el caso de la autoedición, no conviene poner precios bajos porque no harás que tu libro, escrito por alguien prácticamente anónimo tenga un añadido frente al de un escritor famoso; por lo tanto un concurso para regalar un libro que puede costar como mucho euro y medio o dos euros, no es algo en lo que la gente vaya a poner esfuerzo.

Las promociones gratuitas es algo que funciona. Tendrás cientos de descargas y si el libro es bueno obtendrás valoraciones en aquellas tiendas en donde lo hayas puesto. Las valoraciones son muy importantes de cara a posibles compradores porque leerán la opinión de alguien ajeno al libro y si es positiva, los motivará a comprarlo.

Por último una estrategia en Amazon considerada rastrera, pero efectiva es la compra de tu propio libro. No lo he experimentado, pero un autor inglés se convirtió en un best-seller y escribió un libro al respecto. Su truco, crearse 270 cuentas ficticias y comprar su propio libro poniéndose 270 opiniones positivas. Pasó a estar en el primer puesto de los más vendidos de Amazon con una valoración estupenda, lo que arrastró más ventas. Es posible “hackear” Amazon si pagas por ello (muy parecido al posicionamiento en google).

Estos son varios consejos básicos para empezar la venta de tu libro electrónico. También advertirte que en un mar lleno de libros a bajo precio, no puedes pretender ser un best-seller aunque tu obra sea perfecta. Es un mundo muy complicado en donde la suerte también influye.

Qué es un megamenú y su uso

Qué es un megamenú y su uso

Qué es un megamenú y su uso en páginas web.

El megamenú es un menú enriquecido nacido de una evolución de los menús desplegables. El megamenú permite dividir el contenido en secciones, mostrar imágenes, widgetizarlo, incluir un formulario de contacto o cualquier otra cosa que se incluya en una web normal. Permitiendo así mostrar mucha más información y dar un orden lógico a menús que antes se desplegaban hasta el infinito. Además conseguimos tener una nueva herramienta de marketing mostrando banners publicitarios que enganchen a las personas que simplemente estaban navegando por el menú.

Captura de pantalla 2014-03-17 a la(s) 09.48.48

Toda gran empresa debería de usar los megamenús para simplificar la navegación dentro de su web. Haciendo así que las personas tengan claras las diferentes secciones dentro de las que están y reduciendo el número de clics.

¡Puedes reducir la cantidad de clics necesarios para llegar a un formulario de contacto de tres golpes de ratón a uno!

Es importante que los megamenús estén diseñados como listas con las etiquetas <ul> y <li> para que google indexe correctamente el contenido y que dentro de cada menú, esté clasificado correctamente con sus etiquetas <h2> y subsiguientes.

Normalmente, debido a esta forma de lista, los megamenús están divididos en bloques, podemos modificar el ancho y el alto de estos bloques. Se puede permitir que cada bloque tenga un alto diferente, aunque es aconsejable que todos los bloques tengan la misma altura para no descolocar al visitante aunque una sección tenga menos elementos que otra. También es importante que el megamenú cargue rápidamente porque el usuario entiende que está cargando un menú normal y no otro trozo de html y es importante el escaneo vertical, por encima del horizontal porque el uso habitual es leerlo de arriba a abajo y en orden alfabético.

Sitios como la casa blanca en su web whitehouse.gov han implantado el megamenu para facilitar la navegación por la web. Nosotros lo hemos implantado en diseños propios como la editorial ItsBook como se puede ver en la siguiente imagen.

Editorial ItsBook sin mostrar el megamenú

Editorial ItsBook sin mostrar el megamenú

 

Editorial ItsBook mostrando el megamenú

Editorial ItsBook mostrando el megamenú