Symfony Zgz
Generación de sitios estáticos con Sculpin
@symfony_zgz
Web dinámica
● Servidores
● Bases de datos
● Instalaciones
● Tiempo
● …
● $$$$$$$!!!!!!!!!!!!
Perfiles
Además…
¿Cuántos perfiles hacen falta?
Sysadmins
Backends
Frontends
Diseñadores
SEO/SEM/Marketing
Otros roles
Sinergia!!!
Valorañadido Forlayos derivables
Kill them all!!! (o casi)
● Sysadmin → Github pages
● Backend developers → Sculpin
● Frontend developers → Bootstrap
● Dis...
Github pages
● Por usuario/organización
○ Creando repositorio {{usuario}}.github.io
○ http://ericduran.github.io
● Por pro...
Github pages
● Permite dominio propio
○ Apuntando a 204.232.175.78
● Github lo verifica
○ Archivo “CNAME” en la raíz
del r...
Sculpin
● Generador de sitios estáticos
● https://sculpin.io/
● Utiliza:
○ YAML
○ Twig
○ Markdown
○ Archivos estáticos!!
○...
YAML
Archivos de configuración
sculpin_content_types:
posts:
type: path
path: _posts
permalink: blog/:year/:month/:day/:fi...
YAML
Metadatos en el propio archivo del post
---
title: Happy Birthday Sculpin!
tags:
- sculpin
- markdown
categories:
- p...
Twig
{% set year = '0' %}
<h2>Posts Archive</h2>
{% for post in page.pagination.items %}
{% set this_year %}{{ post.date |...
Markdown
Heading
=======
Sub-heading
-----------------
Paragraphs are separated
by a blank line.
Text attributes *italic*,...
Archivos estáticos
● Todo archivo en la carpeta correspondiente es el
equivalente a una entrada en base de datos (entidad)...
Archivos estáticos
● Mejor rendimiento no se puede!!
● Sistema de layouts jerárquico gracias a Twig
---
layout: default
--...
Archivos estáticos
● Gran control del HTML generado
● SEO guy loves you!
Dear frontend...
...dedica tu tiempo a cosas más divertidas!!!
¿Todo bien hasta aquí?
Consola!!!!
Consola
Composer
● Sculpin incluye embebido composer
○ Archivo sculpin.json para gestión de dependencias
● No son necesarios mucho...
Comandos
● Instalar/actualizar dependencias
○ sculpin install
● Montar servidor de desarrollo
○ sculpin generate --watch -...
Facilísimo!!!
Pero...
Externaliza!
● Comentarios
○ https://developers.facebook.
com/docs/plugins/comments
● Formularios
○ http://webform.com
○ h...
Backend guy is unhappy
También backend!!
● Sculpin utiliza el HTTP Kernel de Symfony.
● Sistema de eventos.
● Se pueden utilizar bundles de Symfo...
Eventos
● SculpinCoreSculpin::EVENT_BEFORE_RUN
● SculpinCoreSculpin::EVENT_BEFORE_CONVERT
● SculpinCoreSculpin::EVENT_AFTE...
Bundles de terceros
● Composer + Kernel… como en Symfony!!!
<?php
class SculpinKernel extends SculpinBundleSculpinBundleHt...
Que empiece la fiesta!!!
Sculpin
Upcoming SlideShare
Loading in …5
×

Sculpin

444 views
365 views

Published on

Presentación del grupo local de Zaragoza sobre generación de sitios web estáticos con Sculpin.

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
444
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sculpin

  1. 1. Symfony Zgz Generación de sitios estáticos con Sculpin @symfony_zgz
  2. 2. Web dinámica ● Servidores ● Bases de datos ● Instalaciones ● Tiempo ● … ● $$$$$$$!!!!!!!!!!!!
  3. 3. Perfiles Además… ¿Cuántos perfiles hacen falta?
  4. 4. Sysadmins
  5. 5. Backends
  6. 6. Frontends
  7. 7. Diseñadores
  8. 8. SEO/SEM/Marketing
  9. 9. Otros roles Sinergia!!! Valorañadido Forlayos derivables
  10. 10. Kill them all!!! (o casi) ● Sysadmin → Github pages ● Backend developers → Sculpin ● Frontend developers → Bootstrap ● Diseñadores → Themeforest ● SEO → Nibbler/Woorank ● Otros roles → Sentido común!!!
  11. 11. Github pages ● Por usuario/organización ○ Creando repositorio {{usuario}}.github.io ○ http://ericduran.github.io ● Por proyecto ○ Creando rama gh-pages ○ http://ericduran.github.io/drupalcores/
  12. 12. Github pages ● Permite dominio propio ○ Apuntando a 204.232.175.78 ● Github lo verifica ○ Archivo “CNAME” en la raíz del repositorio
  13. 13. Sculpin ● Generador de sitios estáticos ● https://sculpin.io/ ● Utiliza: ○ YAML ○ Twig ○ Markdown ○ Archivos estáticos!! ○ Consola
  14. 14. YAML Archivos de configuración sculpin_content_types: posts: type: path path: _posts permalink: blog/:year/:month/:day/:filename/ taxonomies: - tags - categories
  15. 15. YAML Metadatos en el propio archivo del post --- title: Happy Birthday Sculpin! tags: - sculpin - markdown categories: - personal ---
  16. 16. Twig {% set year = '0' %} <h2>Posts Archive</h2> {% for post in page.pagination.items %} {% set this_year %}{{ post.date | date("Y") }}{% endset %} {% if year != this_year %} {% set month = '0' %} {% set year = this_year %} {% endif %} {% set this_month %}{{ post.date | date("F") }}{% endset %} {% if month != this_month %} {% set month = this_month %} ...
  17. 17. Markdown Heading ======= Sub-heading ----------------- Paragraphs are separated by a blank line. Text attributes *italic*, **bold**, `monospace`. A [link](http://example.com). <<< No space between ] and ( >>> Shopping list: * apples * oranges * pears Numbered list: 1. apples 2. oranges 3. pears The rain---not the reign---in Spain. Reemplazo ASCII de código HTML
  18. 18. Archivos estáticos ● Todo archivo en la carpeta correspondiente es el equivalente a una entrada en base de datos (entidad). ● Generators: Páginas “plantilla” para mostrar estas entidades o listados de ellas. ○ { use: [posts_categories] } ■ { % for category,posts in data.posts_categories %} ○ { generator: pagination} ... { use: [posts] } ■ {% for post in page.pagination.items %}
  19. 19. Archivos estáticos ● Mejor rendimiento no se puede!! ● Sistema de layouts jerárquico gracias a Twig --- layout: default --- ● Árbol de directorios sencillo ○ app/config → YAML’s de configuraciones ○ source → Código fuente ○ source/_posts → Entidades “dinámicas” (en el ejemplo: posts) ○ output_prod → Salida HTML para subir
  20. 20. Archivos estáticos ● Gran control del HTML generado ● SEO guy loves you!
  21. 21. Dear frontend... ...dedica tu tiempo a cosas más divertidas!!!
  22. 22. ¿Todo bien hasta aquí?
  23. 23. Consola!!!!
  24. 24. Consola
  25. 25. Composer ● Sculpin incluye embebido composer ○ Archivo sculpin.json para gestión de dependencias ● No son necesarios muchos comandos
  26. 26. Comandos ● Instalar/actualizar dependencias ○ sculpin install ● Montar servidor de desarrollo ○ sculpin generate --watch --server ● Deploy ○ sculpin generate --env=prod
  27. 27. Facilísimo!!!
  28. 28. Pero...
  29. 29. Externaliza! ● Comentarios ○ https://developers.facebook. com/docs/plugins/comments ● Formularios ○ http://webform.com ○ https://www.surveymonkey.com/ ● Estadísticas ○ http://analytics.google.com
  30. 30. Backend guy is unhappy
  31. 31. También backend!! ● Sculpin utiliza el HTTP Kernel de Symfony. ● Sistema de eventos. ● Se pueden utilizar bundles de Symfony para extender Sculpin con funcionalidades más avanzadas!!!
  32. 32. Eventos ● SculpinCoreSculpin::EVENT_BEFORE_RUN ● SculpinCoreSculpin::EVENT_BEFORE_CONVERT ● SculpinCoreSculpin::EVENT_AFTER_CONVERT ● SculpinCoreSculpin::EVENT_BEFORE_FORMAT ● SculpinCoreSculpin::EVENT_AFTER_FORMAT ● SculpinCoreSculpin::EVENT_AFTER_RUN
  33. 33. Bundles de terceros ● Composer + Kernel… como en Symfony!!! <?php class SculpinKernel extends SculpinBundleSculpinBundleHttpKernelAbstractKernel { protected function getAdditionalSculpinBundles() { return array( 'MavimoSculpinBundleRedirectBundleSculpinRedirectBundle' ); } }
  34. 34. Que empiece la fiesta!!!

×