Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Protostar como framework

3.310 visualizaciones

Publicado el

Taller impartido por Valentín García para:
Joomla World Conference 2014
Cancún, Quinatana Roo. Noviembre 8, 2014
#JWC14

Publicado en: Tecnología
  • Sé el primero en comentar

Protostar como framework

  1. 1. Protostar como Framework Por Valentín García
  2. 2. Valentín García • TSU Informática Administrativa • Ingeniero en Tecnologías de la Información • Director de Diseño en OSTraining • Desarrollador de Templates comerciales para Joomla!
  3. 3. Experiencia con Joomla! • 2010: conocí Joomla! • 2011: creé mi primer template para Joomla! 1.5
  4. 4. Experiencia con Joomla! 2012: desarrollé templates y módulos para Joomla! 2.5
  5. 5. Experiencia con Joomla! 2013: me uní a OSTraining como Director de Diseño. Empecé a vender templates comerciales para Joomla! 2.5 y 3
  6. 6. Experiencia con Joomla! 2014: me convertí en author Elite en Envato al vender más de 3,000 licencias de plantillas en Themeforest
  7. 7. 2014: Rediseño web de OSTraining.com • CSS: responsive • CSS: overrides • CSS: clases personales • CSS: animación • CSS: FontAwesome ¡CSS está en todas partes!
  8. 8. Framework Es un marco de trabajo diseñado para apoyar el desarrollo de sitios web dinámicos, aplicaciones web y servicios web. Los archivos PHP y CSS de Protostar contienen elementos reusables.
  9. 9. ¿Ventajas de usar un Framework?
  10. 10. Sin Framework • Desarrollado desde cero (todo el CSS, HTML, PHP, JS) • 4 meses de desarrollo • Flexibilidad limitada • Menu de un sólo nivel
  11. 11. Con Framework • 5 horas de desarrollo • Excelente flexibilidad • Menu de dos niveles
  12. 12. Sin Framework: 4 meses Con Framework: 5 horas
  13. 13. Protostar Template • Incluye Bootstrap • Fácil de configurar • Código nativo • Responsive • Fácil de modificar • ¡Gratis!
  14. 14. ostraining.com/breeze
  15. 15. ¿Qué haremos? 1.Duplicar Protostar 2.Predeterminar miplantilla 3.Personalizar CSS 4.Editar modules.php
  16. 16. 1. Duplicar Protostar 1.Extensiones 2.Gestor de Plantillas 3.Plantillas
  17. 17. 4. Detalles y archivos de la plantilla Protostar 5. Copiar Plantilla
  18. 18. 6. Nuevo nombre de plantilla: miplantilla 7. Copiar plantilla ¡Hecho!
  19. 19. 2. Predeterminar miplantilla 1.Extensiones 2.Gestor de Plantillas 3.Estilos 4.Predeterminar
  20. 20. Lo siguiente no es sobre enseñar CSS ni PHP, te voy a mostrar las posibilidades de crear nuevos templates a partir de Protostar
  21. 21. 3. Personalizar CSS En un editor como Notepad++ o similar abre el archivo: templates/miplantilla/css/template.css
  22. 22. CSS Personalizado Cambiar el diseño sin tocar PHP ni HTML
  23. 23. Modificar el ancho del template Editar línea 7008 de templates/miplantilla/css/template.css: .container { max-width: 760px; } Guardar
  24. 24. Antes Después de personalizar el CSS
  25. 25. Modificar la columna derecha
  26. 26. Modificar la columna derecha Editar línea 2117 de templates/miplantilla/css/template.css: .well { min-height: 20px; padding: 19px; margin-bottom: 10px; background-color: #e5f3fa; border: none; } Guardar
  27. 27. Modificar el link de “Leer más”
  28. 28. Modificar el link de “Leer más” Editar línea 2187 de templates/miplantilla/css/template.css: .btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 12px; margin-bottom: 0; font-size: 13px; line-height: 18px; text-align: center; vertical-align: middle; cursor: pointer; color: #fff; background-color: #0088cc; *background-color: #0088cc; border: none; *border: 0; border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *margin-left: .3em; }
  29. 29. Modificar el contenedor principal
  30. 30. Modificar el contenedor principal Editar línea 6992 de templates/miplantilla/css/template.css: .body .container { background-color: #fff; padding: 35px; } Guardar
  31. 31. Modificar el menu principal
  32. 32. Modificar el menu principal Editar línea 6973 de templates/miplantilla/css/template.css: .navigation { padding: 3px 5px; margin-bottom: 35px; background: #badff2; border-radius: 4px; } Guardar
  33. 33. Modificar el campo de búsqueda
  34. 34. Modificar el campo de búsqueda Editar línea 1529 de templates/miplantilla/css/template.css: input.search-query { margin-bottom: 0; } Guardar
  35. 35. Modificar el ancho del pie
  36. 36. Modificar el ancho del pie Agregar después de la última línea de código de templates/miplantilla/css/template.css: footer .container{ max-width: 830px; } Guardar
  37. 37. Agregar una imagen de fondo Guardar imagen fondo.jpg en la carpeta: /templates/miplantilla/images/
  38. 38. Agregar una imagen de fondo Editar línea 6927 de templates/miplantilla/css/template.css: body.site { border-top: 3px solid #0088cc; padding: 20px; background-color: #f4f6f7; background-image: url("../images/fondo.jpg"); background-position: center top; background-repeat: no-repeat; background-size: 100% auto; background-attachment: fixed; } Guardar
  39. 39. 4. Editar modules.php En un editor como Notepad++ o similar abre el archivo: templates/miplantilla/html/modules.php
  40. 40. Editar línea 44 de templates/miplantilla/html/modules.php cambiar de h3 a h4 echo "<h4 class="page-header">" . $module->title . “</h4>"; Guardar
  41. 41. https://github.com/htmgarcia/miplantilla
  42. 42. ¿Qué más puedo personalizar? • CSS • Fuente de texto • Colores • Espaciado • PHP • Overrides • Modulos • Parámetros del template
  43. 43. Preguntas
  44. 44. ¡Gracias! @htmgarcia

×