Protostar como framework

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

• CSS: responsive

• CSS: overrides

• CSS: clases personales

• CSS: animación

• CSS: FontAwesome

¡CSS está en todas partes!

2014: Rediseño web de OSTraining.com

http://OSTraining.com

FrameworkEs 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.

¿Ventajas de usar un Framework?

Sin Framework

• Desarrollado desde cero

(todo el CSS, HTML, PHP,

JS)

• 4 meses de desarrollo

• Flexibilidad limitada

• Menu de un sólo nivel

Con Framework

• 5 horas de desarrollo

• Excelente flexibilidad

• Menu de dos niveles

Sin Framework: 4 meses

Con Framework: 5 horas

Protostar Template

• Incluye Bootstrap

• Fácil de configurar

• Código nativo

• Responsive

• Fácil de modificar

• ¡Gratis!

ostraining.com/breeze

¿Qué haremos?

1.Duplicar Protostar

2.Predeterminar

miplantilla

3.Personalizar CSS

4.Editar modules.php

1. Duplicar Protostar

1.Extensiones

2.Gestor de Plantillas

3.Plantillas

4. Detalles y archivos de la plantilla Protostar

5. Copiar Plantilla

6. Nuevo nombre de plantilla: miplantilla

7. Copiar plantilla

¡Hecho!

2. Predeterminar miplantilla

1.Extensiones

2.Gestor de Plantillas

3.Estilos

4.Predeterminar

Lo siguiente no es sobre enseñar CSS ni PHP,

te voy a mostrar las posibilidades de crear

nuevos templates a partir de Protostar

3. Personalizar CSS

En un editor como Notepad++ o similar abre

el archivo:

templates/miplantilla/css/template.css

CSS PersonalizadoCambiar el diseño sin tocar PHP ni HTML

Modificar el ancho del template

Editar línea 7008 de

templates/miplantilla/css/template.css:

.container {

max-width: 760px;}

Guardar

Antes

Después de personalizar el CSS

Modificar la columna derecha

Modificar la columna derecha



.well {

min-height: 20px;

padding: 19px;

margin-bottom: 10px;

background-color: #e5f3fa;

border: none;}

Guardar

Modificar el link de “Leer más”

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;

}

Modificar el contenedor principal

Modificar el contenedor principal



.body .container {

background-color: #fff;

padding: 35px;

}

Guardar

Modificar el menu principal

Modificar el menu principal



.navigation {

padding: 3px 5px;

margin-bottom: 35px;

background: #badff2;

border-radius: 4px;

}

Guardar

Modificar el campo de búsqueda

Modificar el campo de búsqueda



input.search-query {

margin-bottom: 0;

}

Guardar

Modificar el ancho del pie

Modificar el ancho del pie

Agregar después de la última línea de código de


footer .container{

max-width: 830px;

}

Guardar

Agregar una imagen de fondo

Guardar imagen fondo.jpg en la carpeta:

/templates/miplantilla/images/

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

4. Editar modules.php

En un editor como Notepad++ o similar abre

el archivo:

templates/miplantilla/html/modules.php

Editar línea 44 de

templates/miplantilla/html/modules.php cambiar

de h3 a h4

echo "<h4 class=\"page-header\">" . $module->title . “</h4>";

Guardar

https://github.com/htmgarcia/miplantilla

https://github.com/htmgarcia/miplantilla

¿Qué más puedo

personalizar?• CSS

• Fuente de texto

• Colores

• Espaciado

• PHP

• Overrides

• Modulos

• Parámetros del template

Preguntas

@htmgarcia

¡Gracias!

Protostar como framework

Technology

Transcript of Protostar como framework