Escolar Documentos
Profissional Documentos
Cultura Documentos
Home
Sobre mi
Blog
Roxana Falasco
RecursosytutorialessobredesarrollofrontendHTML5
GuadefinitivaSublimeText2 Gua definitiva Sublime Text 2 Publicadoel23/07/2012 Losquemeconocensabenquedesdesiemprehesido unafieldefensorayseguidora,ocomodicenalgunos "evangelizadora"deEclipse,desdeelmomentoenelque empecadedicarmeprofesionalmentealdesarrolloweb comencconEclipse,peroamedidaquepasabanlos aoscadavezeramsdifcilrecomendaresta herramientadebidoasusconstantescuelgues,lentituda lahoradecargarproyectos,refrescarelrboldetrabajo, etc... Unda,haraproximadamenteunao,escuchandoun webcastsobredesarrolloweboquerecomendaban utilizaruneditorllamado"SublimeText",alprincipiopens nopuedesertanbuenocomomiEclipse!,elcualme habaacompaadoalolargodeestosaostantoenel trabajocomoencasa. Finalmenteundaeneltrabajo,volvaacolgarseEclipse alrealizarunrefreshdeunproyectocontropecientosmil archivos...recordporunmomentoaquellaherramienta delaquetodoshablabanllamada...SublimeText. Alllegaracasa,mepusemanosalaobra,busquenGoogle"Sublimetext2",medescargueleditory ....yahoraqu?pens,nohabanadadeinformacinencastellanoyeninglseranpocaslaswebs quecomentasentemasdeconfiguracin,cambiaratajosdeteclado,personalizacin,etc,etc. PocoapocofuiaprendiendodondeestabanlascosasenSublimeyconfigurandoeleditoramigusto. Evangelicamiscompaerosdetrabajoyahoratodomiequipoaguardadoenelbaldelosrecuerdos aEclipseyhandadolabienvenidaaSublimeText2,uneditorligero,rpidoy"fcilmenteconfigurable", lodigoentrecomillas,porquerealmentesinosabesdondeestnlascosasesdifcildeentenderyde ahquedespusdemedioaoutilizandoSublimeText,ansiguesinhaberunaguaclaraydetallada encastellanoparalosnovatosqueseincorporantantoendesarrollowebcomoaprofesionalesdel sectorquequierenpasarseaesteeditor,esporesoquemehedecididoacrearestaguadefinitivade SublimeText2. Repartidaenvarioscaptulosintentarexplicardetalladamenteypasoapaso,desdelainstalacinhasta lacreacindesnippets,paraquettambinpuedasdisfrutardelascomodidadesdeSublimeText2el mejoreditorparadesarrollowebqueheutilizado. Comencemos!)
Buscarentodoelblog
Buscar
Sgueme
Seguira@linuxera 260seguidores
Artculos
SublimeText2CheatSheet ComocreariconosWebfontcon icoMoon GuadefinitivaSublimeText2 HTML5SEO SublimeText2Snippets
falasco.org/guia-definitiva-sublime-text-2
1/9
28/10/12
DescargarSublimeText2
SublimeText2estdisponibleparaWindows,OSXyLinuxylopuedesdescargardeformagratuitaen supginaoficialyutilizarloeltiempoquedesees. Sidespusdeleerestaguateheconvencidoparautilizarestefantsticoeditoryquierescolaborarcon susdesarrolladores,puedesadquirirunalicenciaporslo59$,lacualtedarderechoalainstalacin deSublimeenmltiplesordenadoresyaactualizacionesilimitadas.
Caractersticasbsicas
SublimeText2sepuedepersonalizarcompletamente,disponedemultituddepluginsgratuitosque puedesdescargaryutilizar.Nadamsabrirelprogramaversunainterfazminimalista,enelcentrose encuentraelcdigo,alaizquierdaunabarralateraldondepodrsverlosarchivosabiertos,entreotras cosasqueexplicarmsadelanteyalaizquierdaunabarralateralllamadaminimapadondepondrs vertcdigo,ynavegarconfacilidadporl,desplazndotealpuntoexactodondequieresirsin necesidaddeutilizarelscroll.
SublimeText2Primerospasos
Labarralateraldelaizquierda,llamadaSideBar(paraocultarlaomostrarlasimplementepulsaCtrl+K+B enWindows/LinuxoCmd+K+BenMac)tepermitevisualizarlosarchivosabiertosactualmente,pero puedesextendersuusoaunexploradordearchivosinstalandoelpluginSideBarEnhancementsdel cualhablarmsadelante. UnadelasopcionesindispensablesylaquedebesaprendertenadamsinstalarSublimeText2es "GotoAnything",quetepermitirlocalizarlosarchivosrpidamente,pruebapulsandoCtrl+Pen Windows/LinuxoCmd+PenMac.Alempezaraescribirunoscuantoscaracteresempezarnafiltrarse aquellosarchivosquecoincidenenparteconelnombrequehasescrito.Siquieresvisualizarsu contenidoniquieratienesqueentrardentrodelarchivoconquetedesplacesconlasflechasdelteclado, obtendrsunavistapreviaeneleditor,cuandoestssegurodequeeseeselarchivoquequieresabrir simplementeclickaopulsa[Enter]sobrel. AdemsGotoAnythingnoslotepermitirlocalizararchivosfcilyrpidamentesinoquetambin podrsdesplazartehastaunalineaalescribir:[Numero],sienlugardelosdospuntosintroduces@ verslosmtodosutilizadosanteriormenteycon#podrsbuscarenelinteriordelfichero. Acontinuacintedejounpardeejemplos,paraqueteseamsfcilrecordarloquehemosaprendido hastaahoradeGotoAnything Ctrl+P,Cmd+P:AbrirGotoAnything
falasco.org/guia-definitiva-sublime-text-2
2/9
28/10/12
Ctrl+P,Cmd+Pyescribir'#search'Buscardentrodelarchivolapalabra'search"
Ctrl+P,Cmd+Pyescribir'@print'Iralmtodo'print'
Trabajarconproyectos
ParatrabajaranmejorconproyectosenSublimeText2,haydosmaneras: File>Open(Ctrl+P,Cmd+O),deestaformaSublimeText2seiniciarconlacarpetaelegidacomobase paratutrabajo.Deformaquetodasloscomandosejecutadoscomo"GotoAnything"o"Bsqueda Avanzada"serealizarnenbasealacarpetaabierta. Proyectos:existelaposibilidaddecombinarlascarpetasyarchivosenproyectos.Seleccionauna carpetay/oarchivosyseleccionaenelmensuperiorProject>SaveProjectAs... PuedescreartantosproyectoscomonecesitesyparaalternarentreunoyotroslohasdeiraProject>
falasco.org/guia-definitiva-sublime-text-2
3/9
28/10/12
SwitchProjectinWindows...
Amedidaqueaadas,mscarpetasoarchivosnuevosalproyectoseguardarnautomticamente, inclusolaposicindelcursor.
Gestindeetiquetas
OtrodelospuntosfuertesdeSublimeText2essubuiltin ,unmotordeautocompletadopara etiquetasHTML,CSS,...entreotroslenguajes,quetepermitirdesarrollarsitioswebsms cmodamente.Yaquedisponedeautocerradoyautocompletadodeetiquetas. Porejemplosicreasundocumentonuevodehtmlycomienzasaescribirtextypulsastabulador,el editortecompletarycerrarlaetiqueta.Asmismosiescribes:div.contentypulsastabulador,eleditor escribirporti:<divclass="content"></div>ylomismopasaconlosidentificadores,siescribesdiv#main ypulsastabuladoreleditorescribirporti:<divid="main"></div> Otracaractersticainteresanteesquesinocierraslasetiquetaselautocerradolopuedesrealizarcon Alt+.(Cmd+Alt+.) EnelcasodeCSSesalgoparecido,bastaconempezaraescribirunospocoscaracteresparaqueel editorlosreconozca.Pordefectoyatraealgunospredefinidoscomomtytabuladorparacrearmargin top,ptytabuladorcrearpaddingtop,etc.
PersonalizarSublimeText2
Comoyahaspodidoleerenestagua,SublimeText2eslaherramientaperfectadedesarrollo,nada msinstalarladisponesdemuchasayudasalahoradeprogramar,autocompletado,etc,etc,perosi anasquierespersonalizardetallescomocolores,skins,teclasrpidas...tambinpuedeshacerlo.
CambiarelskinenSublimeText2
PordefectonadamsinstalaryabrirelprogramasemostrarconelskinMonokai,quetienefondo negroconletrasclaras.Siquierescambiardeskinslotienesqueaccedera:Preferences>Color Scheme>yseleccionarunskinhastaencontrarunoqueteguste,yoprefieroutilizarel"MacClassic".S hasprobadotodosyningunoteconvencesiemprepuedesdescargrtemsesquemasdecolorobien crearunopropio(ensiguientescaptulosveremoscomocrearunskinpersonalizado)
PackageControl
UnodelospluginsfundamentalesquehasdeinstalarnadamsabrirSublimeText2esPackage Control. PackageControl,talycomosunombreindicaesungestordepaquetesquetepermiteinstalar fcilmentecientosdeplugins.Adadeelrepositoriodisponedemsde500plugins.Suinstalacines muysencilla,simplementehasdeiralapginadeinstalacindePackageControlcopiarelcomando queapareceremarcadoconfondogris,pegarloenlaconsoladeSublimetext2ypulsarEnter,puedes accederalaConsoladeSublimeTextutilizandoelatajodetecladoCtrl+`oCmd+`siestsenMac,silo prefierespuedesirdirectamentedesdeelmenView>ShowConsole. Unavezcompletadalainstalacin,puedesaccederalPackageControlpulsandoCtrl+Shift+Po Cmd+Shift+P.SiescribesPackagepodrsvertodaslasopcionesdisponiblesdelPackageControl.Para instalarunnuevopaquetedebersseleccionar"InstallaPackage",puedequetardeunossegundos,a continuacintemostrarunalistadetodoslospluginsdisponiblesainstalar(siunodelospluginsyase encuentrainstaladosnotelomostrarenlalistadeinstalacin).Sideseaseliminarunpluginlonico quehasdehaceresseleccionarRemovepackage.
falasco.org/guia-definitiva-sublime-text-2
4/9
28/10/12
PluginsdeSublimeText2recomendadosparadesarrolloweb
jQuery
falasco.org/guia-definitiva-sublime-text-2
5/9
28/10/12
HTML5 Linter Prefix LESS Git
Cambiarlaconfiguracingeneralylosatajosdeteclado
EnmianteriorartculorelacionadoconSublimeText2comentabalosatajosdetecladosmsutilizadosy dabalaposibilidaddedescargarunPDF.Esonosignificaquenosepuedanmodificaryadaptaratu gusto.Siporejemploestsacostumbradoautilizarcualquierotroeditordondeparabuscarenvezde Ctrl+FesCtrl+B,puedeseditarcmodamentelosatajosdetecladoyponerlosatugusto,nohaynada queSublimeText2notepermitarealizary/omodificar. Paramodificarunatajodetecladoobienaadirunonuevolonicoquehasdehaceresseleccionarel mensuperior:Preferences>KeyBindingsDefaultoKeyBindingsUser. TerecomiendoquemodifiquesKeyBindingsUser,puedescopiarelcontenidoquequierasmodificar delKeyBindingsDefaultypegarloenKeyBindingsUser,msquenadaporquesiescribeseldel UsuarioyluegonoteconvencesiemprepuedesvolveraldeporDefecto.
Snippets
LlegamosalapartemsinteresantedeSublimeText2losSnippets.
falasco.org/guia-definitiva-sublime-text-2
6/9
28/10/12
Twittalo
Megusta
A22personaslesgustaesto.Selprimerodetusamigos.
12
13comments
Leaveamessage...
3Stars
Discussion
Community
AlekseiVillegas 3monthsago
Muybuenaguaseguimosesperandolossnippets,saludos
1
Reply
Share
Selene 2hoursago
Excelenteartculo
0
Reply
Share
LuisGuillermoTrejo 4daysago
Excelente!!!!!!!!
0
Reply
Share
salva 11daysago
Muchasgracias,perotengounaduda...comosepuedeimprimirensublime?. Milgraciasdenuevo.
0
Reply
Share
Suki 12daysago
Reply
Share
AlejandroSanz 15daysago
Enhorabuena,grantrabajo!
0
Reply
Share
Julio 16daysago
falasco.org/guia-definitiva-sublime-text-2
7/9
28/10/12
Julio 16daysago
Reply
Share
ArturoAgudelo amonthago
MehaparecidounmuybueneditorahoraquetrabajoconHTML5,graciasporlaguia)
0
Reply
Share
Randy amonthago
Megustomucholaguia!!!
0
Reply
Share
JhonnyGil 3monthsago
Graciasporlagua!todomuyclaro!.MemudaSublimeText2hacedosdasyestoy maravillado...
0
Reply
Share
lluispeiro 3monthsago
Muybuenaguaymuchasgracias.
0
Reply
Share
jacobo 3monthsago
Reply
Share
Gerardo 3monthsago
Reply
Share
ArtculosrelacionadosconGuadefinitivaSublimeText2
SublimeText2CheatSheet
falasco.org/guia-definitiva-sublime-text-2
8/9
28/10/12
2012RoxanaFalasco
falasco.org/guia-definitiva-sublime-text-2
9/9