SlideShare una empresa de Scribd logo

Protostar como framework

V
V
Valentín GarcíaJED Blog Writer en Joomla!

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

Protostar como framework

1 de 54
Descargar para leer sin conexión
Protostar como 
Framework 
Por Valentín García
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!
Experiencia con Joomla! 
• 2010: conocí Joomla! 
• 2011: creé mi primer template 
para Joomla! 1.5
Experiencia con Joomla! 
2012: desarrollé templates y módulos para Joomla! 2.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
Experiencia con Joomla! 
2014: me convertí en author Elite 
en Envato al vender más de 3,000 
licencias de plantillas en 
Themeforest

Recomendados

Cambio apariencia a menu joomla con css
Cambio apariencia a menu joomla con cssCambio apariencia a menu joomla con css
Cambio apariencia a menu joomla con csshuelva_Es
 
Publicación de páginas web parte 2
Publicación de páginas web parte 2Publicación de páginas web parte 2
Publicación de páginas web parte 2Alejandro Colcha
 
Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapWorkshop Digital
 
Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Emerson Garay
 

Más contenido relacionado

La actualidad más candente

Curso WordPress desde Cero, parte 1
Curso WordPress desde Cero, parte 1Curso WordPress desde Cero, parte 1
Curso WordPress desde Cero, parte 1Sergio Nouvel Castro
 
Smacss. Organizando css
Smacss. Organizando cssSmacss. Organizando css
Smacss. Organizando cssMedio y forma
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modularrodboc
 
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDesarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDarío BF
 
Sesion3 curso avanzado SPIPEDU
Sesion3 curso avanzado SPIPEDUSesion3 curso avanzado SPIPEDU
Sesion3 curso avanzado SPIPEDUspipedu
 
Cómo aprovechar mejor Wordpress - Daniel Monleón
Cómo aprovechar mejor Wordpress - Daniel Monleón Cómo aprovechar mejor Wordpress - Daniel Monleón
Cómo aprovechar mejor Wordpress - Daniel Monleón Comunica2 Campus Gandia
 
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para Odoo
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para OdooJornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para Odoo
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para OdooPedro Manuel Baeza Romero
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notasSandra Meza
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación WebBruno Garcia
 
Etiquetas de código html
Etiquetas de código htmlEtiquetas de código html
Etiquetas de código htmlBryan Guaitara
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página webadri9610
 
Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Sergio Nouvel Castro
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Julio Camarero
 
Wordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaWordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaDarío BF
 
Usando Bootstrap correctamente con LESS
Usando Bootstrap correctamente con LESSUsando Bootstrap correctamente con LESS
Usando Bootstrap correctamente con LESSRené Olivo
 

La actualidad más candente (20)

Curso WordPress desde Cero, parte 1
Curso WordPress desde Cero, parte 1Curso WordPress desde Cero, parte 1
Curso WordPress desde Cero, parte 1
 
Smacss. Organizando css
Smacss. Organizando cssSmacss. Organizando css
Smacss. Organizando css
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
Html
HtmlHtml
Html
 
Bootstrap, un framework CSS
Bootstrap, un framework CSSBootstrap, un framework CSS
Bootstrap, un framework CSS
 
Bootstrap menues, contenedores y formularios
Bootstrap   menues, contenedores y formulariosBootstrap   menues, contenedores y formularios
Bootstrap menues, contenedores y formularios
 
Html
HtmlHtml
Html
 
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDesarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
 
Sesion3 curso avanzado SPIPEDU
Sesion3 curso avanzado SPIPEDUSesion3 curso avanzado SPIPEDU
Sesion3 curso avanzado SPIPEDU
 
Cómo aprovechar mejor Wordpress - Daniel Monleón
Cómo aprovechar mejor Wordpress - Daniel Monleón Cómo aprovechar mejor Wordpress - Daniel Monleón
Cómo aprovechar mejor Wordpress - Daniel Monleón
 
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para Odoo
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para OdooJornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para Odoo
Jornadas Odoo 2015 - Diseño y creación de un tema Bootstrap para Odoo
 
Conceptos basicos prog web introduccion a html y css
Conceptos basicos prog web   introduccion a html y cssConceptos basicos prog web   introduccion a html y css
Conceptos basicos prog web introduccion a html y css
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación Web
 
Etiquetas de código html
Etiquetas de código htmlEtiquetas de código html
Etiquetas de código html
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2Curso Wordpress desde Cero, parte 2
Curso Wordpress desde Cero, parte 2
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1
 
Wordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaWordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp Barcelona
 
Usando Bootstrap correctamente con LESS
Usando Bootstrap correctamente con LESSUsando Bootstrap correctamente con LESS
Usando Bootstrap correctamente con LESS
 

Similar a Protostar como framework

MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!SergioIglesiasNET
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!SergioIglesiasNET
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2Raúl Carrión
 
Creación de tiendas woo commerce y páginas web - Ender, Factoría de Software
Creación de tiendas woo commerce y páginas web - Ender, Factoría de SoftwareCreación de tiendas woo commerce y páginas web - Ender, Factoría de Software
Creación de tiendas woo commerce y páginas web - Ender, Factoría de SoftwareJonathan Estrella
 
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...SergioIglesiasNET
 
Creando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilCreando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilTito Alvarez
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5Cycle-IT
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5Cycle-IT
 
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...SergioIglesiasNET
 
229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficialJavier Fonseca
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child ThemesAmit Kvint
 
Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0Juan Gallardo Ortiz
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseJuan Hernando García
 
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endIntroducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endJames Wilson
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascadajazmin Vazquez
 
Curso cei 339 dreamweaver, nivel básico
Curso cei 339   dreamweaver, nivel básicoCurso cei 339   dreamweaver, nivel básico
Curso cei 339 dreamweaver, nivel básicoProcasecapacita
 

Similar a Protostar como framework (20)

MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2
 
Creación de tiendas woo commerce y páginas web - Ender, Factoría de Software
Creación de tiendas woo commerce y páginas web - Ender, Factoría de SoftwareCreación de tiendas woo commerce y páginas web - Ender, Factoría de Software
Creación de tiendas woo commerce y páginas web - Ender, Factoría de Software
 
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
 
Exposicion Mambo
Exposicion  MamboExposicion  Mambo
Exposicion Mambo
 
Creando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilCreando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácil
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
 
229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0
 
Drupal
DrupalDrupal
Drupal
 
Seo para prestashop
Seo para prestashopSeo para prestashop
Seo para prestashop
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP Ourense
 
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endIntroducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
 
En 20 minutos ... Responsive Design
En 20 minutos ... Responsive DesignEn 20 minutos ... Responsive Design
En 20 minutos ... Responsive Design
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascada
 
Curso cei 339 dreamweaver, nivel básico
Curso cei 339   dreamweaver, nivel básicoCurso cei 339   dreamweaver, nivel básico
Curso cei 339 dreamweaver, nivel básico
 

Último

Breve Resumen Modelos Evaluación REDs e Instrumentos
Breve Resumen Modelos Evaluación REDs e InstrumentosBreve Resumen Modelos Evaluación REDs e Instrumentos
Breve Resumen Modelos Evaluación REDs e Instrumentosdarkcrow08
 
Diapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDiapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDannyErazo5
 
Detalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxDetalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxLuisChili1
 
Práctica 4. Ejercicios de búsqueda eficaz(2).pdf
Práctica 4. Ejercicios de búsqueda eficaz(2).pdfPráctica 4. Ejercicios de búsqueda eficaz(2).pdf
Práctica 4. Ejercicios de búsqueda eficaz(2).pdfFernandoCalapaqui
 
IA aplicada a las aulas. Aumentame EDU 2024
IA aplicada a las aulas. Aumentame EDU 2024IA aplicada a las aulas. Aumentame EDU 2024
IA aplicada a las aulas. Aumentame EDU 2024Isidro Navarro
 
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfPráctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfFernandoCalapaqui
 
Tarea 2. Ensayo sobre "La internet y su evolución"
Tarea 2. Ensayo sobre "La internet y su evolución"Tarea 2. Ensayo sobre "La internet y su evolución"
Tarea 2. Ensayo sobre "La internet y su evolución"ferpatfut1109
 
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.FernandoCalapaqui
 
Cherubini Meta Z-Wave Double Switch A510083-84-90
Cherubini Meta Z-Wave Double Switch A510083-84-90Cherubini Meta Z-Wave Double Switch A510083-84-90
Cherubini Meta Z-Wave Double Switch A510083-84-90Domotica daVinci
 
Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...DannyErazo5
 
Detalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxDetalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxLuisChili1
 
BIG DATA EJEMPLOS. desarrrollo de curso.pdf
BIG DATA EJEMPLOS. desarrrollo de curso.pdfBIG DATA EJEMPLOS. desarrrollo de curso.pdf
BIG DATA EJEMPLOS. desarrrollo de curso.pdfexpertoleonelmartine
 
Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletFernandoCalapaqui
 
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfPS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfvguzman1
 
Ejercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresEjercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresDannyErazo5
 
Detalles Constructivos bebedero con temporizador.pptx
Detalles Constructivos bebedero con temporizador.pptxDetalles Constructivos bebedero con temporizador.pptx
Detalles Constructivos bebedero con temporizador.pptxLuisChili1
 
Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"DannyErazo5
 
Cherubini Meta Z-Wave Smart Plug Manual A510068
Cherubini Meta Z-Wave Smart Plug Manual A510068Cherubini Meta Z-Wave Smart Plug Manual A510068
Cherubini Meta Z-Wave Smart Plug Manual A510068Domotica daVinci
 
Diagramas de Comportamiento: Caso Práctico
Diagramas  de Comportamiento: Caso PrácticoDiagramas  de Comportamiento: Caso Práctico
Diagramas de Comportamiento: Caso PrácticoMaricarmen Sánchez Ruiz
 
Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletDannyErazo5
 

Último (20)

Breve Resumen Modelos Evaluación REDs e Instrumentos
Breve Resumen Modelos Evaluación REDs e InstrumentosBreve Resumen Modelos Evaluación REDs e Instrumentos
Breve Resumen Modelos Evaluación REDs e Instrumentos
 
Diapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDiapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdf
 
Detalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxDetalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptx
 
Práctica 4. Ejercicios de búsqueda eficaz(2).pdf
Práctica 4. Ejercicios de búsqueda eficaz(2).pdfPráctica 4. Ejercicios de búsqueda eficaz(2).pdf
Práctica 4. Ejercicios de búsqueda eficaz(2).pdf
 
IA aplicada a las aulas. Aumentame EDU 2024
IA aplicada a las aulas. Aumentame EDU 2024IA aplicada a las aulas. Aumentame EDU 2024
IA aplicada a las aulas. Aumentame EDU 2024
 
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfPráctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
 
Tarea 2. Ensayo sobre "La internet y su evolución"
Tarea 2. Ensayo sobre "La internet y su evolución"Tarea 2. Ensayo sobre "La internet y su evolución"
Tarea 2. Ensayo sobre "La internet y su evolución"
 
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.
Tarea 1. Desarrollo de un mapa conceptual con herramientas colaborativas.
 
Cherubini Meta Z-Wave Double Switch A510083-84-90
Cherubini Meta Z-Wave Double Switch A510083-84-90Cherubini Meta Z-Wave Double Switch A510083-84-90
Cherubini Meta Z-Wave Double Switch A510083-84-90
 
Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...
 
Detalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxDetalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptx
 
BIG DATA EJEMPLOS. desarrrollo de curso.pdf
BIG DATA EJEMPLOS. desarrrollo de curso.pdfBIG DATA EJEMPLOS. desarrrollo de curso.pdf
BIG DATA EJEMPLOS. desarrrollo de curso.pdf
 
Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta Padlet
 
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfPS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
 
Ejercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresEjercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. Navegadores
 
Detalles Constructivos bebedero con temporizador.pptx
Detalles Constructivos bebedero con temporizador.pptxDetalles Constructivos bebedero con temporizador.pptx
Detalles Constructivos bebedero con temporizador.pptx
 
Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"
 
Cherubini Meta Z-Wave Smart Plug Manual A510068
Cherubini Meta Z-Wave Smart Plug Manual A510068Cherubini Meta Z-Wave Smart Plug Manual A510068
Cherubini Meta Z-Wave Smart Plug Manual A510068
 
Diagramas de Comportamiento: Caso Práctico
Diagramas  de Comportamiento: Caso PrácticoDiagramas  de Comportamiento: Caso Práctico
Diagramas de Comportamiento: Caso Práctico
 
Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta Padlet
 

Protostar como framework

  • 1. Protostar como Framework Por Valentín García
  • 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. Experiencia con Joomla! • 2010: conocí Joomla! • 2011: creé mi primer template para Joomla! 1.5
  • 4. Experiencia con Joomla! 2012: desarrollé templates y módulos para Joomla! 2.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. Experiencia con Joomla! 2014: me convertí en author Elite en Envato al vender más de 3,000 licencias de plantillas en Themeforest
  • 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. 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. ¿Ventajas de usar un Framework?
  • 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. Con Framework • 5 horas de desarrollo • Excelente flexibilidad • Menu de dos niveles
  • 12. Sin Framework: 4 meses Con Framework: 5 horas
  • 13. Protostar Template • Incluye Bootstrap • Fácil de configurar • Código nativo • Responsive • Fácil de modificar • ¡Gratis!
  • 16. ¿Qué haremos? 1.Duplicar Protostar 2.Predeterminar miplantilla 3.Personalizar CSS 4.Editar modules.php
  • 17. 1. Duplicar Protostar 1.Extensiones 2.Gestor de Plantillas 3.Plantillas
  • 18. 4. Detalles y archivos de la plantilla Protostar 5. Copiar Plantilla
  • 19. 6. Nuevo nombre de plantilla: miplantilla 7. Copiar plantilla ¡Hecho!
  • 20. 2. Predeterminar miplantilla 1.Extensiones 2.Gestor de Plantillas 3.Estilos 4.Predeterminar
  • 21. Lo siguiente no es sobre enseñar CSS ni PHP, te voy a mostrar las posibilidades de crear nuevos templates a partir de Protostar
  • 22. 3. Personalizar CSS En un editor como Notepad++ o similar abre el archivo: templates/miplantilla/css/template.css
  • 23. CSS Personalizado Cambiar el diseño sin tocar PHP ni HTML
  • 24. Modificar el ancho del template Editar línea 7008 de templates/miplantilla/css/template.css: .container { max-width: 760px; } Guardar
  • 25. Antes Después de personalizar el CSS
  • 27. 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
  • 29. Modificar el link de “Leer más”
  • 30. 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; }
  • 33. Modificar el contenedor principal Editar línea 6992 de templates/miplantilla/css/template.css: .body .container { background-color: #fff; padding: 35px; } Guardar
  • 35. Modificar el menu principal
  • 36. 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
  • 38. Modificar el campo de búsqueda
  • 39. Modificar el campo de búsqueda Editar línea 1529 de templates/miplantilla/css/template.css: input.search-query { margin-bottom: 0; } Guardar
  • 42. 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
  • 44. Agregar una imagen de fondo Guardar imagen fondo.jpg en la carpeta: /templates/miplantilla/images/
  • 45. 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
  • 47. 4. Editar modules.php En un editor como Notepad++ o similar abre el archivo: templates/miplantilla/html/modules.php
  • 48. Editar línea 44 de templates/miplantilla/html/modules.php cambiar de h3 a h4 echo "<h4 class="page-header">" . $module->title . “</h4>"; Guardar
  • 52. ¿Qué más puedo personalizar? • CSS • Fuente de texto • Colores • Espaciado • PHP • Overrides • Modulos • Parámetros del template