Documente Academic
Documente Profesional
Documente Cultură
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