Share
En este tutorial, aprenderá cómo tomar un archivo de Photoshop y convertirlo en un sitio web integrado de Pagelime CMS válido y habilitado para jQuery, listo para entregar a sus clientes sin codificación, usando Photoshop, SiteGrinder 3 y Pagelime.
SiteGrinder 3 es una fantástica pieza de software repleto de funciones, realizada por los chicos de Media Lab, que le permite tomar un sitio web simulado en Adobe Photoshop y exportarlo a un sitio web totalmente válido, segmentado y en funcionamiento en minutos sin codificación. Conocimientos necesarios. Pagelime es un CMS simple, diseñado con sus clientes en mente, que permite la integración inmediata en un sitio web sin necesidad de conocimientos de codificación. Pagelime le permite a su cliente realizar ediciones de contenido de manera simple y sencilla, cambiar imágenes, agregar y eliminar páginas y, básicamente, administrar su propio sitio web de una manera que pueda entender, todo dentro de una aplicación basada en la web limpia y de marca.
El tutorial dura aproximadamente de 10 a 15 minutos y asume un conocimiento general de trabajo de SiteGrinder 3. Si no estás al tanto de tus habilidades de SiteGrinder, visita el sitio de TV SiteGrinder 3 de Media Lab para un excelente conjunto de tutoriales en video que más que ponerse al día sobre cómo implementar su sitio. En general, el sistema es realmente genial y tiene un montón de características. Recomendamos encarecidamente comenzar con Essentials 1 - Workflow, personalmente disfruté los botones y la animación, que detalla cómo agregar efectos jQuery sin esfuerzo y menús desplegables realmente agradables, y Essentials 2 - Content. Si solo tiene tiempo para uno, solo vea Essentials 1 - Flujo de trabajo para ponerse al día..
Le guiaré en general, instrucciones paso a paso con información más detallada dentro de cada paso..
Hoy usaremos una plantilla "Compani" que el equipo de SiteGrinder nos prestó generosamente, sin embargo, casi cualquier sitio web imitado en Photoshop puede convertirse en "listo para SiteGrinder", a través del proceso de agregar sugerencias de SiteGrinder y dar formato a sus capas de manera apropiada. Nuevamente, este tutorial asume que usted tiene conocimiento del marcado de SiteGrider y del uso de sugerencias. Si no lo hace, le recomendamos que visite SiteGrinder 3 TV y se ponga al día con las dos primeras partes de los elementos esenciales de SiteGrinder. Para descargar esta plantilla o un montón de otras plantillas, puede visitar su página wiki con las descargas de plantillas..
Debido a que SiteGrinder no hace que las clases de imágenes en CSS sean accesibles para el usuario de manera predeterminada, al agregar la sugerencia "-content", podemos forzar a SiteGrinder a representar la etiqueta de imagen (IMG) dentro de un DIV. Este DIV estará disponible más adelante en el Administrador de diseño de SiteGrinder 3 para agregarle una clase CSS. Esto es importante porque para que Pagelime funcione correctamente, todas las regiones editables, o "las cosas que desea que el cliente pueda cambiar", deben estar etiquetadas con la misma clase especial de CSS, lo veremos con más detalle en el paso 4.
Si el motor de SiteGrinder 3 aún no está abierto, esto iniciará el motor de SiteGrinder 3. Después de que se inicie el motor, SiteGrinder generará un informe sobre cualquier error o advertencia que pueda encontrar en la plantilla. Revise los errores y corrija los errores graves que se apliquen * (también puede optar por ignorarlos, el sitio aún debe crearse). Una vez que haya resuelto los errores, continúe en la página Generar e implementar. Aquí, debe marcar las páginas que desea crear con SiteGrinder. En este tutorial, solo construiremos la página de inicio. Después de seleccionar las páginas deseadas, haga clic en "Crear".
* Nota: Si está utilizando la plantilla de prueba de SiteGrinder 3 con una versión de demostración o básica de SiteGrinder 3, es posible que pueda encontrar un informe con 2 errores "graves". Mira a través de los errores con cuidado. Es muy probable que los errores se produzcan porque está haciendo referencia a etiquetas como - $ o -blog dentro de la plantilla que requieren complementos adicionales. El complemento de comercio para - $ y el complemento de control para -blog. Si ese es el caso, puedes continuar de todos modos. En este tutorial, no estamos construyendo la página de "tienda" o "blog", por lo que estos errores son irrelevantes.
El Administrador de diseño es donde puede realizar ediciones adicionales y declaraciones de estilo para el diseño y la implementación de la clase CSS. La mayoría de sus efectos de texto y bordes deben hacerse aquí y no en la PSD. Además, también podrá personalizar sus funciones de animación / jQuery desde esta pantalla. Nuevamente, para más detalles, visite Site Grinder TV.
Para este tutorial, no crearemos ningún estilo CSS real con atributos. En su lugar, simplemente estamos agregando un nombre de clase a algunas etiquetas en el sitio para que lo use Pagelime. En el Administrador de diseño, navegue hasta el menú desplegable "estilos de borde y fondo". Usando los menús desplegables junto a los elementos, agregue un nuevo estilo llamado "editable" sin atributos adicionales. Haga clic en Aplicar. Después de aplicar el estilo una vez, será accesible en todos los demás menús desplegables. Seleccione cada una de las regiones que le gustaría que edite Pagelime y luego aplíquelas a esos elementos.
Cuando el sitio se implemente en Pagelime en el paso 13, definiremos esta clase css como "editable" como la clase de señal para que Pagelime haga que las regiones sean editables por el usuario. Esencialmente, esta etiqueta puede llamarse como quieras, siempre que sea única, sin embargo, te sugerimos que la conviertas en algo comprensible para una referencia fácil..
En el área de despliegue, seleccione las páginas recién construidas. Una vez que haya revisado las páginas para implementar, seleccione el sitio que desea implementar en el menú desplegable inferior llamado "Implementar en". Es posible que deba crear un sitio nuevo si no tiene sitios anteriores. Simplemente dale un nombre, selecciona solo local y haz clic en Aceptar.
Este "sitio" simplemente se refiere a cómo se hará referencia al directorio en su computadora local. No te preocupes demasiado por lo que se llama; Solo necesitas poder identificarlo luego. El nombre tampoco puede tener espacios ni caracteres especiales..
En este punto, el HTML y el marcado del sitio ya están en competencia, esto se logró en la etapa "Generar", Sitegrinder ahora solo está compilando y guardando esos archivos .html y relacionados en su computadora en el directorio que seleccionó.
Se parece al administrador de diseño y tendrá una dirección local. Debe definir qué página será la página de carga predeterminada en su sitio, o el "Índice". Marque la casilla "índice" al lado de la página deseada, esto hará que SiteGrinder cambie el nombre de ese archivo a "index.html" luego de subir FTP a su servidor.
Una vez que haya ingresado todo esto, haga clic en Aceptar.
La dirección del servidor probablemente comenzará con ftp. Al configurar la ruta remota, se recomienda encarecidamente que utilice la función "Buscar" para obtener el directorio más preciso. La "Dirección HTTP" será donde SiteGrinder lo dirigirá después de la carga, por lo que probablemente sea mejor elegir el dominio o subdirectorio donde se está cargando.
En la primera carga, cualquiera de las opciones de carga hará exactamente lo mismo, ya que básicamente no hay archivos en su servidor. Sin embargo, solo para estar seguro, cuando cargue un nuevo despliegue por primera vez, siempre elijo Cargar todo para asegurarme de obtener una copia nueva y limpia en mi servidor.
>
Esto mostrará su página (o lo que haya ingresado como su dirección HTTP). Puedes ver que tu página está ahora en vivo. Eso es todo para la parte de SiteGrinder, luego pasaremos a implementar el sitio en Pagelime para facilitar la edición.
Si es nuevo en Pagelime, puede visitar la Página de registro para obtener una cuenta gratuita para usar con SiteGrinder. Pagelime es un excelente CMS simple que reducirá drásticamente el tiempo de implementación y le dará a su cliente algo que puede entender..
Cuando se registre para una cuenta PRO o Business, además de todas las funciones y complementos estándar de Pagelime, tendrá la posibilidad de personalizar completamente y marcar el backend. Pagelime le brinda la posibilidad de etiquetar completamente el CMS desde la URL hasta el logotipo y el esquema de color. Esto le permitirá ofrecer a su cliente una experiencia consistente y de marca mientras trabaja con usted y en su sitio. También le permitirá marcar el servicio y agregar flujo de efectivo a su flujo de ingresos. Puede configurar clientes en ciclos de facturación recurrentes automáticos para usar su CMS, también conocido como Pagelime, desde dentro de la cuenta de Pagelime / Administrador de facturación.
Si necesita más ayuda en esta página, Pagelime tiene algunas herramientas útiles que se muestran en el lado derecho cuando se selecciona cada campo. Utilice estos como referencia para saber qué introducir y cómo formatearlo. También puede probar su conexión en la parte inferior de la página. Se recomienda que utilice la función "Examinar" al seleccionar la ruta del archivo para garantizar la mayor precisión. Además, asegúrese de cambiar su configuración avanzada (próximo paso) antes de hacer clic en "Guardar configuración del sitio"
Esto se puede cambiar a cualquier clase especial que haya nombrado en el Administrador de diseño de SiteGrinder en el paso 4.
Así es como Pagelime identificará qué regiones deberían ser editables. Si este nombre de clase no coincide con la clase que agregó en el paso 4, o si las clases que agregó en el paso 4 son inconsistentes con este "Nombre de clase CSS editable" en sus páginas, no podrá editar esas regiones dentro de Pagelime. Editor del sitio. Sin embargo, si olvidó agregar la clase a una región, no se asuste, y si no le teme a un pequeño código HTML, entonces no tiene que volver al paso 4. No lo hace. Incluso hay que usar un editor externo como Dreamweaver. En su lugar, cuando haya seleccionado una página para editar en el Editor de sitios de Pagelime, use el menú desplegable de la derecha y seleccione el código de edición. Esto abrirá una rica vista de sintaxis resaltada de su código en bruto de sitios que le permitirá agregar clases CSS manualmente. Para obtener más detalles sobre este proceso, echa un vistazo a un tutorial al respecto, denominado Agregar manualmente clases de CSS a través del Editor de sitios de Pagelime
Si el motor de SiteGrinder 3 aún no está abierto, esto iniciará el motor de SiteGrinder 3. Después de que se inicie el motor, SiteGrinder generará un informe sobre cualquier error o advertencia que pueda encontrar en la plantilla. Revise los errores y corrija los errores graves que se apliquen * (también puede optar por ignorarlos, el sitio aún debe crearse). Una vez que haya resuelto los errores, continúe en la página Generar e implementar. Aquí, debe marcar las páginas que desea crear con SiteGrinder. En este tutorial, solo construiremos la página de inicio. Después de seleccionar las páginas deseadas, haga clic en "Crear".
* Nota: Si está utilizando la plantilla de prueba de SiteGrinder 3 con una versión de demostración o básica de SiteGrinder 3, es posible que pueda encontrar un informe con 2 errores "graves". Mira a través de los errores con cuidado. Es muy probable que los errores se produzcan porque está haciendo referencia a etiquetas como - $ o -blog dentro de la plantilla que requieren complementos adicionales. El complemento de comercio para - $ y el complemento de control para -blog. Si ese es el caso, puedes continuar de todos modos. En este tutorial, no estamos construyendo la página de "tienda" o "blog", por lo que estos errores son irrelevantes.
Guardar la configuración del sitio confirmará y guardará la configuración de FTP y Pagelime que acaba de ingresar. Esto también hará que Pagelime se vuelva a cargar. Una vez hecho esto, puedes volver al Panel del sitio.
Este complemento te permitirá cargar y administrar imágenes a través de Pagelime. Se requiere que tenga este complemento actualizado para administrar CUALQUIER imagen en un sitio habilitado para Pagelime. Si desea captar sus imágenes, le recomendamos que active la Optimización de imagen, que le permitirá controlar la calidad de la imagen y agregar efectos fotográficos desde Pagelime..
Desde el menú Características del sitio, también puede activar una serie de funciones adicionales, como Plantillas de página e Historial de contenido. El historial de contenido puede ser extremadamente útil cuando realiza ediciones continuas en un sitio, ya que registrará todas sus ediciones anteriores de una sesión y le permitirá revertir el contenido si se produce un error o un cambio incorrecto.
Simplemente haga clic en una imagen o texto, ya sea el área principal o la pequeña burbuja de edición negra. Esto abrirá un editor WYSIWYG (que también tiene una vista HTML) o el navegador ZoomCrop para imágenes. Desde aquí, simplemente edite el contenido, guarde y luego, cuando termine con todos los cambios en una página, haga clic en el botón Publicar en "Acciones de la página". Esto empujará todas sus ediciones en vivo a su sitio público.
Para pasar esto a su cliente, debe crear un nuevo usuario en su Administrador de cuentas y otorgarle permisos al sitio. Ese usuario luego iniciará sesión a través de su URL personalizada o cms.pagelime.com. Es así de simple. La edición real se trata en el video a continuación, o también tenemos un video más corto de 5 minutos que se puede editar directamente si necesita una actualización..
Tenga en cuenta que cuando edite las imágenes dentro de estos DIV, debe desplazarse sobre el centro de la imagen y buscar el pequeño icono de imagen. Haga clic en esta área para acceder al navegador ZoomCrop. Recuerda, el complemento de la galería de imágenes debe estar habilitado. Si hace clic en la etiqueta DIV, activa la imagen en un editor WYSIWYG que, aunque puede funcionar, no es lo que queremos y no nos dará el mejor control de edición para nuestras imágenes. Esta situación se crea porque SiteGrinder creó un DIV alrededor de la imagen. Si desea solucionar esto manualmente, puede editar el código y eliminar la etiqueta editable del div circundante y, en su lugar, mover la clase a la etiqueta IMG. De nuevo, esto se puede hacer todo dentro de Pagelime fácilmente, consulte nuestra publicación de blog / tutorial. al respecto, se llama agregar manualmente clases de CSS a través del editor de sitios de Pagelime
Para publicar, haga clic en el menú desplegable "Acciones de la página" y haga clic en publicar, luego, ¡BAM!!
Gracias por seguir en este tutorial. Si tiene alguna pregunta, comentario, solución de problemas, deseos, esperanzas o sueños sobre Pagelime, puede visitar los foros de PageLime o la wiki de documentación..
Accentsconagua