7/11/2016

DocumentacinBoston

introduccin
JDBostonMultipurposeplantillaJoomla
JDBostonesunaplantillaJoomlamultipropsitomsadecuadoparalaagenciaositiowebdeinicio.Estaplantillatieneundiseoprofesional,
modernoyexclusivo,elmsadecuadoparamostrarsutrabajo,mostrarsuproductoenlnea,perfildelaempresaydecarteraprofesional.Vienecon
diseodelblogimpresionantedondesepuedeparticiparconsuclienteatravsdesucontenido.

Requerimientostcnicos
Apache2.2+oMicrosoftIIS7
PHP5.4+(PHP5.5osuperiorrecomendado)
MySQL5.1+
3.4+Joomla

Caractersticasprincipales
totalmenteResponsive
NavegadorCruzcompatibles
TotalmenteSEOFriendly
plantilladecargaligerayrpida
Menmvil
diseodelblogmltiple
Iconossociales
Custom404yPrximamentepginas
Losiconosimpresionantesdefuente
PoweredbyT3Frameworkpoderosa
PrimaSmartSlider3
SoporteMegaMenu
tipografa
BoletndesuscripcinatravsAcyMailingymuchoms.

Cmoinstalarunpaquetedeiniciorpido?
Algunosdenuestrosnuevosusuariosdebenestarpreguntndoseloqueesdeiniciorpido??Siesas,vamosaconoceralgomssobreella.de
iniciorpidoesunsitiodedemostracincompletaqueincluye:Plantillas,basesdedatos,extensiones"(seutilizaparaampliarlafuncionalidadde
Joomla),imgenesytodoloquevemosenlaspginaswebdedemostracin.Ahora,somosconscientesdeloquedeiniciorpidoes?
Vamosaseguiradelanteyvercmopodemosinstalarlo.

Paso1Comienceconelpaquetededescarga.
ElprimerpasoesdescargarelpaquetedeiniciorpidodesdeelsitioJoomdev.com.
JDBoston(https://www.joomdev.com/products/templates/jdbostontemplate)

Step2anfitrinlocalosuhosting?
Unavezquetengaelpaquete,extraerelpaquetedescargado.
hostlocal
Siesttrabajandoenlamquinalocal...copiarlacarpetaextradaa:...\xampp\htdocs.Sinoesas"xampp"sepuedetratar"wamp"ycopiarla
mismacarpetaextradaa...\wamp\www

Cmoinstalarunpaquetedeiniciorpido?
xampp:

https://www.joomdev.com/documentation/boston.html

1/26

7/11/2016

DocumentacinBoston

servidor
Asegratedequetieneselpaquetedescargadodesdeelsitiocorrectamente.
Bien,ahoraporfavor,extraigaelpaquetedescargadoycargartodaslascarpetasenlacarpetaqueacabadeextraerala(public_html)
Nota*usandoFileZilla(FTP)

Cmoinstalarunpaquetedeiniciorpido?

CrearbasededatosStep3
Paralacreacindeunabasededatos,vayaalacPanel.Y,crearunanuevabasededatos.

Cmoinstalarunpaquetedeiniciorpido?
Paso4Instalacindeiniciorpido
Ejecutarelasistentedeinstalacindeplantilla
AbrasunavegadorWebyvayaalacarpetaquehacargadoelpaquetedeiniciorpido.
AhorahagaclicenSiguienteenlaprimeraetapa.
Hayalgunasopcionesparaeditarantesdequepodamosestablecerdeiniciorpidoalavida.
Verlasiguientecapturadepantallaparalaconfiguracin.

https://www.joomdev.com/documentation/boston.html

2/26

7/11/2016

DocumentacinBoston

Cmoinstalarunpaquetedeiniciorpido?
1.Seleccioneeltipodebasededatospara"MySQLi(preferido)"
2.Escribaelnombredehostdelservidordebasededatosa"localhost"
3.Escribaelnombredehostdelservidordebasededatosa"localhost"
4.Nombredelabaseesmuyimportante.Enlospasosanteriores,hemoscreadounanuevabasededatosylollam"demotest"paraescribiren
elmismonombredelabaseaqu.
5.HitSIGUIENTE:D
Tanprontocomohayamosterminadoconnuestrasconfiguracionesyxitosiguiente,nosveramosalgoascomo,enlasiguienteimagen:

Cuandoelprocesoanteriorhafinalizado.Unpequeocuadroemergenteaparecerconelmensaje
"Larestauracindebasededatosseharealizadocorrectamente"yhagaclicensiguiente.

Cmoinstalarunpaquetedeiniciorpido?
Estamoshaciendobastantebienhastaahora.Vamosapasaralasiguienteetapa.Unavezquehemoshechoconxitolarestauracin.Pantallase
veras:

https://www.joomdev.com/documentation/boston.html

3/26

7/11/2016

DocumentacinBoston

Enlamismapantalla.Porfavor,pongalossiguientesdetallesen"ajustesdesuperusuario"
Puedeestablecerlacontraseaquedeseeopuededejarloenblancotambin.Siestenblancolicenciaquedebetenerelnombredeusuario
predeterminadoylacontraseaesdecir,

Cmoinstalarunpaquetedeiniciorpido?
Nombredeusuario:admin
Contrasea:admin
Elltimopasoeseliminareldirectoriodeinstalacin.Estamoscasialli!!!!

Enelmomentoenquegolpeamoseldirectorioquitarlodebetraerunpopupennuestrapantalladeinterfazparavisitarelsitio.
AUGE!!Somosbuenos!!

Pginadeiniciodeslizante

https://www.joomdev.com/documentation/boston.html

4/26

7/11/2016

DocumentacinBoston

Podemostenerelmismodiseodenuestrapginaweb:
Antesdeempezar,hayqueinstalarelcomponenteslider3inteligenteparanuestrositiowebJoomla.Descargarelmismocomponentedesdeel
siguienteenlace:
Inteligentedeslizante3(https://smartslider3.com/)
UnavezquetenemoselcomponenteestablecidoennuestroJoomla.Vamosapasarhaciaelsiguientepasoesdecir,aadirunanuevadiapositiva
EnelbackenddeJoomla,podemosencontrarestecomponentepresenteenlaseccindecomponentesenelmensuperiorJoomlabajoelnombre
decursor3inteligente.

#1HagaclicenCrearSlider.

Paso2
Aadirnombredesudeslizadoryseleccionareldiseohastalaactualidad.Hagaclicencrear.Encuantohayamosterminadoconelnuevocontrol
deslizantedeberaempezaraaparecerenlaparteizquierdadelapantalla.Hazclickeneso

https://www.joomdev.com/documentation/boston.html

5/26

7/11/2016

DocumentacinBoston

Porejemplo,tenemosunoenelnombredelcontroldeslizantepginadeinicio.

Haymuchasmanerasenquepodemostenernuestroconjuntodeslizanteparalavidaennuestrositioweb.Puedeseleccionarcualquieradelosque
tegusta.normalmenteseleccionamosatravsdelmdulo.Podemosencontrarestasopcionesenelmismocursorquehemoscreadoanteriormente.

Paramsinformacin:ControldeslizanteSmart3Documentacin(https://doc.smartslider3.com/article/390interfaceslidersettings)

Seccin:DATOSDELA

Paralograrquetenemosalgoporencimadelapantalla.
EsunacombinacindemdulopersonalizadoyelmduloSkillset.EselejemploperfectodecmocombinamosdosmdulosenJoomla.
Paraelmdulopersonalizadoiraextensiones>Mdulo>seleccionaencargo(delosanuncios).Y,aadirestecdigoenelreadecontenido.Nose
olvidedeagregarlaposicindelmdulodesdeelmendelabarralateral.
Cdigo:
Loremipsumdolorsitametconsecteturadipiscingelitdonecmetusnibhscelerisqueetsuscipitidauctorvitaemagnanamsollicitudin
velittortorutefficiturvelitsagittis.

https://www.joomdev.com/documentation/boston.html

6/26

7/11/2016

DocumentacinBoston

Adems,agregueelsufijodelmduloenla"FichaAvanzadas"

*Mdulosufijo:mttulosuperior
Movindosealolargo,tendremoslasiguientemdulopublicadoenlamismaposicin,esdecir"caracterstica1"
Esnecesariodescargarelmdulode:Skillset(https://extensions.joomla.org/extension/skillset)
Asegresedequetengamoslamismaconfiguracinconformealodispuestoenlasiguienteimagen:

https://www.joomdev.com/documentation/boston.html

7/26

7/11/2016

DocumentacinBoston

En"fichaOpcionesavanzadas"
Cambiarlaconfiguracinpara:

ltimacartera

https://www.joomdev.com/documentation/boston.html

8/26

7/11/2016

DocumentacinBoston

Podemostenerelmismodiseodenuestrapginaweb:
Antesdeempezar,hayqueinstalarelcomponentedelacarteraanuestrositiowebJoomla.Descargarelmismocomponentedesdeelsiguiente
enlace:
Descargar:KeenITCartera(https://extensions.joomla.org/extension/keenitresponsiveportfoilo)
UnavezquetenemoselcomponenteestablecidoennuestroJoomla.Vamosapasarhaciaelsiguientepasoesdecir,aadirunnuevoproyecto
EnelbackenddeJoomla,podemosencontrarestecomponentepresenteenlaseccindecomponentesenelmensuperiorJoomlabajoelnombre
deKeenIT.

#1HagaclicenNuevoyponerenlosdetallesimportantes.

Alhaceresto,podemosaadirvariosproyectosquenecesitamos.

https://www.joomdev.com/documentation/boston.html

9/26

7/11/2016

DocumentacinBoston

Unavezquetenemostodoslosproyectosaadidosalcomponente.Ahoraeselmomentodeponerlosenvivo,lohacemosdesdeelmdulo.
IraExtensiones>mdulo>enherramientasdebsqueda>Selectipoagudo=TIcarterasensible.

Abraelnicomduloqueves,porfavor,definalaspropiedadescomosemuestraenlasiguienteimagen:

EnelmismomovimientodelmduloalapestaadeOpcionesavanzadasyaadir"sufijomdulodeclase"
mttulocmttulosuperior.modulettulo
YpulsaenGuardar.

Testimonios

Podemostenerlamismadisposicinennuestrositioenvivo.Comolohacemos?
Paso1Descargareinstalarelmdulodesdeelsiguienteenlace:
OtTestimonial(https://extensions.joomla.org/extension/ottestimonial)
mdulodearribaesladescargagratuitadisponible.
Paso2Esparaestablecerlaconfiguracinimportantedebajodelmduloquenecesitamos

1Tenemosunadisposicindistintaparaelegirsinecesitamoseldeslizadorcon1omscolumnas.

https://www.joomdev.com/documentation/boston.html

10/26

7/11/2016

DocumentacinBoston

Ennuestraplantillaqueestamosusandodeslizanteconladisposicin1columna.
*2Tambinhayunaopcinenlaquepodemosajustarlavelocidaddelcursoracualquiercomoqueremos.Porelmomentoestamosutilizando
3000milisegundos.
*3ImportanteNoolvideaadirelposicionamientooenelquedeseaqueaparezcaestemdulo.Ennuestraplantilla(JDNEGOCIO)hemos
colocadoenestemdulo"testimonios1"
*4Avanzandoconlaconfiguracin,vayaalapestaa"Avanzado"enelmismomduloyagregueelsufijodelmdulo
"Mttulosuperior.modulettulo"

Unirseanuestroboletndenoticias

Lapreguntaes"Cmopodemospublicarelmismodiseoomduloennuestrositioenvivo?"
Aquestnalgunospasosparalograrelmismocomosemuestraenlaimagenanterior.
Paso1:DescargarelmduloAcyMailingdesdeelsiguienteenlace:
Descargar:(https://extensions.joomla.org/extension/acymailingstarter)AcyMailing
Paso2Esparaconfigurarelajustedeacuerdoalasnecesidades.Vercapturadepantallaparalaconfiguracin

https://www.joomdev.com/documentation/boston.html

11/26

7/11/2016

DocumentacinBoston

Aquestalgunascosasatenerencuentadurantelaconfiguracin:

Ahoravayaalaconfiguracinavanzadadeestemdulodecorreo.EnelmismomdulovayaalapestaaOpcionesavanzadasyagregueelsufijo
delmdulo.
"Mttulocmttulosuperior.modulettulo"

sobrelapgina
https://www.joomdev.com/documentation/boston.html

12/26

7/11/2016

DocumentacinBoston

HeaderBanner
Paralacabecera,estamosutilizandounmdulollamado"SobreCabecera".Vieneconlassiguientesopcionesqueseenumeranacontinuacin.
SeleccionarImagen(Proporcionaunaopcinparaagregarunaimagendefondo)
Ttulo(Estaopcinpermitecolocarelttulo)
Descripcin(Unaopcinparaaadirunadescripcin)

Paraestaseccin,hemoscreadounartculoyseunenjuntoconelelementodemenAcercade.
IralcontenidodesdeelmensuperiorenJoomlabackend.Crearunnuevoartculoyaadirelsiguientecdigoacontinuacin:
hagaclicaqu(http://www.joomdev.com/documentation/code/aboutcode.txt)

Elsiguientepasoesenlazaresteartculorecincreadoconlaopcindemen.

Configuracindelapestaaopcinparaestableceraloglobal,exceptoelttulo

https://www.joomdev.com/documentation/boston.html

13/26

7/11/2016

DocumentacinBoston

JDEscaparatedelaspersonas

Podemostenerelmismodiseodenuestrapginaweb:
Antesdeempezar,hayqueinstalarelcomponenteJDEscaparatedelaspersonasanuestrositiowebJoomla.Descargarelmismocomponente
desdeelsiguienteenlace:
Descargar:JDEscaparatedelaspersonas(https://www.joomdev.com/products/templates/jdbostontemplate)
UnavezquetenemoselcomponenteestablecidoennuestroJoomla.Vamosapasaralasiguienteetapaesdecir,aadirnuevosMiembrosdel
equipo
EnelbackenddeJoomla,podemosencontrarestecomponentepresenteenlaseccindecomponentesenelmensuperiorJoomlabajoelnombre
deJDEscaparatedelaspersonas.

https://www.joomdev.com/documentation/boston.html

14/26

7/11/2016

DocumentacinBoston

#1HagaclicenNUEVOyaadirlosiguiente.

#2Ponervariosmiembrosdelequipoyunavezqueserealizan.Vamosapasaralasiguienteetapaesdecir,tenerestecomponenteapareceenel
sitioactivo.
Unavezquetenemostodoslosproyectosaadidosalcomponente.Ahoraeselmomentodeponerlosenvivo,lohacemosdesdeelmdulo.
IraExtensiones>mdulo>enherramientasdebsqueda>Selecciona=agudoTIcarterasensible.

Abraelnicomduloqueves,porfavor,definalaspropiedadescomosemuestraenlasiguienteimagen:

https://www.joomdev.com/documentation/boston.html

15/26

7/11/2016

DocumentacinBoston

EnelmismomovimientodelmduloalapestaadeOpcionesavanzadasyaadir"sufijomdulodeclase"
mttulocmttulosuperior
YpulsaenGuardar.
Acercadedeslizador

Puedetenerelmismocontroldeslizantecomoladearriba,siguiendolosmismospasosmencionadosanteriormente.
Crearunnuevocontrolyponerenelttuloquenecesita.

Porejemplo,lotenemosbajoelnombredeclientede4
Elsiguientepasoesagregardiapositivasalacorredera.

Puedeagregarlasimgenesparasueleccin

https://www.joomdev.com/documentation/boston.html

16/26

7/11/2016

DocumentacinBoston

HeaderBanner
Paralacabecera,estamosutilizandounmdulollamado"ContactoJefenosotros".Vieneconlassiguientesopcionesqueseenumerana
continuacin.
SeleccionarImagen(Proporcionaunaopcinparaagregarunaimagendefondo)
Ttulo(Estaopcinpermitecolocarelttulo)
Descripcin(Unaopcinparaaadirunadescripcin)

Step2Cmopodemosaadirformularioenlaseccinmedia?
Vamosavercmohacerlo?
#1Usteddebetenerelcomponentellamado"Chronoform5"paraello.
#2Crearunnuevoformulario.

Puestoentodoslosdetallesimportantesantesdeseguiradelanteyloguarda.Elsiguientepaso,esdecidir,aadirelnmerodecamposal
formulario.Ennuestraplantillaqueestamosusandolosiguiente.
Personalizado
nombre
correoelectrnico
sujeto
mensaje
presentar
Nota*Chronoformpermitesumarloscamposconsimplearrastrarysoltar.
#1

https://www.joomdev.com/documentation/boston.html

17/26

7/11/2016

DocumentacinBoston

#2

#3
Pornombre,correoelectrnicoysujeto,estamosutilizandouncuadrodetexto.Proporcionadaenlasopcionesdelaizquierda.
Paraelcuadrodemensaje,estamosutilizandoelreadecuadrodetexto.Comoseproporcionanmsespacioparaelusuariofinalparaponeren.
Chronoformtambinproporcionaunaopcinenlaquepodemosaadirunbotn.Estoesloqueestamosutilizandoparaelbotn"Enviar"
ENLACEDEDOCCHRONOFORM
Vamosairrpidamenteatravsdeloscamposanteriores
Muyenprimerlugar,enlapartesuperioreselcampopersonalizado.
Campopersonalizadoseutilizaparamostrarelmensajepersonalizadoproporcionadopornosotros.Enlamismaformanueva,vayaalas
propiedadesavanzadas(enlaizquierda)

Aladerechadelcamporecinencargoclicencorrigenylasmedidascomplementariasprevistasenlasiguienteimagen:

https://www.joomdev.com/documentation/boston.html

18/26

7/11/2016

DocumentacinBoston

*<h3class="moduletitle"><span>Keepin

Touchwithus</span>

Y,hagaclicenGuardar.
Ahora,lamayoradenuestrosusuariosrealmentequierensaber.Cmopodemosverloenlainterfazoenelsitioprincipal.Tenemosvariomanera
depublicarlo.Sinembargo,preferimosqueapareceatravsdelmendeJoomla.
Tenemoslaformaqueapareceenelmendecontactos.Asquevamosavercmoloestamoshaciendo?
#1Enelmenprincipaliralapginaenparticularounmen.Porahora,lotenemosenelmendecontactos.
#2Hagaclicenseleccione

Y.seleccionar

Enelmismomen,vayaala2"Opciones".Ponerenelnombredelformularioquehemoscreadoantes.

https://www.joomdev.com/documentation/boston.html

19/26

7/11/2016

DocumentacinBoston

Y,golpearaguardar.

Paso3HTMLpersonalizado(Seccin)

Lapreguntaescmocreamosunacomoladearriba.
Paraestaseccin,estamosutilizandounmdulopersonalizado.Creamosqueseacabadeiralasextensionesdemdulos>>nuevos>(delalistade
opciones)>SeleccionePersonalizado.
losdetallesdelcdigopastaacontinuacin:
<Divclass="rowcontactoprincipalbloquehorizontal">
<divclass="colmd4Colx4decontactosdebloquehorizontal">
<ahref="#">
<divclass="icono">
<clasei="fafamvil"><divclass="contenido"><divclass="flecha"><h3>.....<p>.....

Tenemosestemdulocolocadoenposicin"addressbar".
Estbien,bastantecercadeconseguirnuestrapginadecontactolisto.
VamosaseguiradelanteconlosotrosmapasdeGoogleesdecir,laseccin
Laformaenquehaeveesto?
#1Vayaagooglemaps
#2Busquelaubicacinquenecesitamos.

https://www.joomdev.com/documentation/boston.html

20/26

7/11/2016

DocumentacinBoston

#3Copiaelcdigodemapadeinsercin.

#4Ahora,tenemoselcdigocopiado.Losiguiente,crearunmdulopersonalizadocomolohicimosanteriormenteparalaseccinanterior.Y,pegue.

Hitguardar.

Seccindepiedepgina
Nuestropiedepgina,sedivideen4secciones:
Seccin1mdulopersonalizado
Seccinmdulodecontenido2K2
MdulodeOpcionesdemenqueapareceSeccin3
Seccin4MduloFlikr.
Seccin1Mdulopersonalizado
Nota*Extensiones>Mdulo>Seleccionarpersonalizado.Yseleccionelaposicindepiedepgina1

https://www.joomdev.com/documentation/boston.html

21/26

7/11/2016

DocumentacinBoston

Vercdigo(http://www.joomdev.com/documentation/code/address.txt)

Seccin2K2(LoltimodenuestroBlog)
Paraestaseccin,tenemosquecrearunnuevomdulodebajocontenidodeK2.Yatenemosalgunascategorasseleccionadasporello.Asegrese
dequetienelasmismasconfiguracionesestablecidasconformealodispuestoenlasiguienteimagen.Ynoseolvidedeaadirlaposicindeeste
mduloapiedepgina2

https://www.joomdev.com/documentation/boston.html

22/26

7/11/2016

DocumentacinBoston

Seccin3Elementosdemen(Nuestrosservicios)
#1Crearunnuevomenyelnombrecomotegusta.Porejemplo,tenemosunoconelnombrede"nuestrosservicios".

Paraavanzaralsiguientepaso,cmohemosaparecerstosmenenelfrontend?
Esunprocesosencillo,crearunnuevomdulo,peroseleccione"MEN"delalista.mdulodemennospermitirvisualizarlosmensenelfront
end.

Elsiguientepasoesseleccionarelmenquedeseaqueaparezcaenlaseccindepiedepgina.Porahora,tenemosnuestroserviciomencionadoo
semuestraenelfrontend.Vaseacontinuacin:

https://www.joomdev.com/documentation/boston.html

23/26

7/11/2016

DocumentacinBoston

Noseolvidedeagregarlasposicionesdeladerecha.Esdecir,elpiedepgina3

Seccin4MdulodeFlickr(Nuestrosservicios)
Paraestaseccin,porfavordescargueeinstaleunmdulollamadoFlickr.
Puededescargarlodesdeaqu:JFlickr(http://www.joomlabamboo.com/joomlaextensions/jflickr)
InstalarelpaquetedesusitiowebJoomlayconfigurarlaconfiguracinconformealodispuestoenlasiguienteimagen:
Paso1

Paso2

EsnecesarioaadirsuflickrIDdecuentayclavedeAPIparagenerarunaimagendelacuenta.

Instalacindeextensiones
inteligentedeslizante
Virtuemart
JDEscaparatedelaspersonas
OtTestimonial
AcyMailing
ChronoForms5
K2
carteradeTIKeen
JFlickr
Skillset

Posicindemdulodedisposicin

https://www.joomdev.com/documentation/boston.html

24/26

7/11/2016

DocumentacinBoston

Posicindemdulodedisposicin
ElpaneldepresentacinaotraenlainterfazdeadministracindeplantillaMyriadproporcionavariasopcionesparaconfigurareldiseodela
plantilla.Cadaseccinmodulardeldiseodelaplantillacuentaconseisposicionesdemdulopordefecto.

Barrasuperior
topbar1

topbar2

Encabezamiento
menprincipal
languageswitcherload

headerimg
headerimg

deslizadorCabeza
deslizadordecabeza

posicin
posicin1

posicin2

posicin3

posicin4

exhibir3

exhibir4

Escaparate
exhibir1

exhibir2

auto
mensaje

auto
componente

auto
mstilcol

auto
barralateral1

auto
barralateral2

https://www.joomdev.com/documentation/boston.html

25/26

7/11/2016

DocumentacinBoston

navhelper
navhelper

Caracterstica
funcin1

funcin2

funcin3

funcin4

Barradedireccin
Barradedireccin

Anchuracompleta
fullwidth1

Testimonios
testimonios1

Addressbarbottom
addressbarbottom

fondo
bottom1

parteinferior2

parteinferior3

parteinferior4

piedepgina
piedepgina1

piedepgina2

piedepgina3

piedepgina4

Derechosdeautor
Derechosdeautor

https://www.joomdev.com/documentation/boston.html

26/26