Proceso para crear templates HTML en Stacksavings

Trabaja para nosotros como un desarrollador de layouts HTML, creando plantillas personalizadas que puedan ser usadas en Stacksavings.com. Nuestro proceso proporciona una forma de crear diseños que pueden reutilizarse fácilmente para diferentes páginas. Objetivo El objetivo de esta tarea inicial es crear un diseño responsive, lo que significa que funciona en la vista de escritorio y móvil. Debes de tener buena experiencia con CSS y HTML para trabajar con nosotros en este tipo de tareas. Este layout o diseño debe contener texto e imagenes con el objetivo de que los usuarios se registren ingresando su correo electrónico. Un ejemplo de layout es este: http://stacksavings.com/detail-post/stand-out-and-get-better-landing-page-conversions-1DlwG7/en (Este no es necesariamente de alta calidad en terminos de diseño, es solamente un ejemplo de una página con funcionalidad similar para lo que queremos hacer) Cosas que son permitidas hacer Para iniciar con este punto use código y plantillas de código abierto, no hay problema si usted desea usar parte de estos templates como parte de su diseño. No hacer No use codigo que no es open source o código abierto o que no seas el propietario. Por ejemplo, no debes tomar un tema que tenga algún costo para adquirirlo o comprarlo, ya que esto puede causar problemas legales. Cómo te pagamos Nosotros podemos discutir el pago con más detalle via email, por favor revisar esta página para obtener información adicional acerca de los métodos de pago que ofrecemos: https://stacksavings.com/detail-post/Our-payment-Information-and-methods-17ST2c/en Paso 1 Crea una cuenta: http://stacksavings.com/register/es si aún no la has hecho e inicia sesión. Luego nos brindas el nombre de tu cuenta para que nosotros podamos agregarte dentro de nuestro repositorio. Paso 2 Revisa el código de nuestro repositorio en github para nuestros layouts, aquí: https://github.com/StackSavingsTeam/stacksavings.com_templates Luego nos brindas tu cuenta para que te agregemos a este repositorio: https://github.com/StackSavingsTeam/stacksavings.com_templates Paso 3 - Inicia a trabajar en tu nuevo layout Una vez que te hemos agregado en el proyecto de github, tu deberías subir cualquier archivo css, imagen, etc, que forme parte de los componentes básicos del layout dentro del repositorio, pudes hacerlo yendo a: https://github.com/StackSavingsTeam/stacksavings.com_templates y luego click en el botón "Upload files" para subir los archivos, asegúrese de subir un folder completo y no subir archivos individuales. Debe elegir un nombre para el folder que describa tu layout. Una vez que los hayas subido, deberian de ser visibles en una url como esta: https://layouts.herokuapp.com// Por favor revise que la ruta este trabajando para que pueda ver sus archivos. Los nombres de los repositorios no deben tener ningún tipo de separador en caso de que tenga mas de una palabra, por ejemplo: custom-layouts, en lugar use camelcase: customLayouts, ya que el navegador reemplazará los separadores por símbolos extraños. Paso 4 - Trabajando tu layout en el editor de Stacksavings El editor de Stacksavings es usado para crear un nuevo post y para integrarlo con los archivos que subió a Github. En la vista de creacion/edición, tú debes de ir a la pestaña "Código", entonces podrá observar los campos de abajo: Editar JSON Este camo es usado para crear una estructura JSON, que contiene variables para la página. Esto hace que el diseño se pueda reutilizar fácilmente para diferentes contenidos. Estas variables que se definen aquí se pueden usar en los campos Custom CSS y Escribe tu post Custom CSS Este campo es para CSS que se puede personalizar utilizando los valores del campo Editar JSON . Por ejemplo, si se usa CSS para mostrar una imagen en una página, entonces se debe definir aquí y usar una variable JSON, como $ {someImage} para que esto pueda cambiarse fácilmente. Escribe tu post Este campo contendrá el HTML para el diseño y también debe usar las variables JSON para cualquier texto que se muestre en la página, así como también imágenes, etc. para que se puedan cambiar dentro del campo JSON fácilmente. Ejemplo: Esta publicación muestra un ejemplo de contenido para cada uno de los tres campos para que pueda hacerse una idea de cómo funciona esto. http://stacksavings.com/detail-post/example-post-json-css-and-html-for-layout-developers-2qzmDb/en Observe cómo se usan variables como $ {header.image} y cómo se corresponden con los valores en el campo Editar JSON . Recuerde: Agregar la etiqueta link con la url de los archivos css y las etiquetas script, estas URL corresponden al nombre del diseño, por ejemplo: https://layouts.herokuapp.com/customlayout/css/style.css o https://layouts.herokuapp.com/customlayout/js/jquery.min.css Realizar los cambios de estas URL en cada llamada a estos archivos, esto incluye los importados en los archivos css, por ejemplo: antes: @import('../css/master.css') después: @import('https://layouts.herokuapp.com/customlayout/css/master.css') En el campo del Post puedes agregar etiquetas head y body:

... ... No es necesario agregar el Doctype: , te recomendamos eliminarla. Los archivos o librerias de terceros como jquery, bootstrap.min.css, es recomendable siempre usar el cdn original de ellos y dejar unicamente los archivos js y css propios del layout, puede buscar la librerias en https://cdnjs.com Paso 5 Puede trabajar para personalizar su diseño y hacerlo de modo que todo el texto y las imágenes se definan en el campo Editar JSON . Una vez que sienta que ha completado el diseño, envíenos un correo electrónico para que nos actualice el estado con una url en su diseño. Asegúrese de marcar la casilla "Deshabilitar plantilla por defecto", ya que esto es necesario cuando se usa HTML personalizado para que la página se visualice correctamente. Si vinistes a esta página y aún no se ha comunicado con nosotros, y está interesado en trabajar potencialmente con nosotros, envíe el siguiente formulario: