1.1

1.2

1.3

1.4

1.5

1.6

1.7

1.8

1.9

1.10

1.11

1.12

1.13

1.14

1.15

1.16

1.17

1.18

1.19

1.20

1.21

1.22

1.23

1.24

1.25

TableofContentsIntroduccin

CmofuncionaInternet?

Introduccinalalneadecomandos

InstalacindePython

Editordecdigo

IntroduccinaPython

QuesDjango?

InstalacindeDjango

TuprimerproyectoenDjango!

ModelosenDjango

AdministradordeDjango

Desplegar!

URLsenDjango

VistasdeDjango-Eshoradecrear!

IntroduccinaHTML

ORMdeDjango(Querysets)

Datosdinmicosenplantillas

PlantillasdeDjango

CSSHazlobonito

Extenderplantillas

Extiendetuaplicacin

FormulariosenDjango

Qusigue?

Instalacin

Instalacin(chromebook)

1

TutorialdeDjangoGirls

EstetrabajoestbajolalicenciainternacionalCreativeCommonsAttribution-ShareAlike4.0.Paraverunacopiadeestalicencia,visitaelsiguienteenlacehttps://creativecommons.org/licenses/by-sa/4.0/

TranslationThistutorialhasbeentranslatedfromEnglishintoSpanishbyawonderfulgroupofvolunteers.SpecialthanksgoestoVictoriaMartinezdelaCruz,KevinMorales,JoshuaAranda,SilviaFrias,Leticia,AndreaGonzalez,AdrianManjarres,RodrigoCaicedo,MariaChavez,MarceloNicolasManso,RosaDurante,Moises,IsraelMartinezVargas,JuanCarlos_,N0890Dy,IvanYivoff,KhaterineCastellano,ErickNavarro,cyncyncyn,ZeroSoul13,ErickAguayo,ErnestoRico-Schmidt,MiguelLozano,osueboy,dynarro,GeraldinaGarciaAlvarezandManuelKaufmann.

IntroduccinAlgunavezhassentidoqueelmundoserelacionacadavezmsalatecnologaydealgunamaneratehasquedadoatrs?Algunaveztehaspreguntadocmocrearunsitiowebperonuncahastenidolasuficientemotivacinparaempezar?Haspensadoalgunavezqueelmundodelsoftwareesdemasiadocomplicadoparaticomoparaintentarhaceralgoportucuenta?

Bueno,tenemosbuenasnoticiasparati!Programarnoestandifcilcomopareceyqueremosmostrartelodivertidopuedellegaraser.

Estetutorialnoteconvertirenprogramadoraporartedemagia.Squieresserbuenaenesto,necesitarsmesesoinclusoaosdeaprendizajeyprctica.Sinembargoqueremosmostrartequeprogramarocrearsitioswebnoestancomplicadocomoparece.Intentaremosexplicarpequeasparteslomejorquepodamos,deformaquenotesientasintimidadaporlatecnologa.

Esperamospoderhacerteamarlatecnologatantocomonosotras!

Introduccin

2

https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badgehttps://creativecommons.org/licenses/by-sa/4.0/

Quaprendersconestetutorial?Cuandotermineseltutorial,tendrsunaaplicacinwebsimpleyfuncional:tupropioblog.Temostraremoscomoponerlaenlnea,asotrospodrnvertutrabajo!

Sever(msomenos)comosta:

Siestssiguiendoestetutorialportucuentaynotienesanadiequeteayudeencasodesurgiralgnproblema,tenemosunchatparati: .Hemospedidoanuestrostutoresyparticipantesanterioresqueestnahdevezencuandoparaayudaraotrasconeltutorial!Notemasdejartuspreguntasall!

Bien,empecemosporelprincipio...

Sobrenosotrasycmocontribuir

Introduccin

3

https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badgehttps://djangogirls.org/https://github.com/DjangoGirls/tutorial/blob/master/README.md

EstetutoriallomantieneDjangoGirls.Siencuentrasalgnerroroquieresactualizareltutorial,porfavorsiguelaguadecmocontribuir.

Tegustaraayudarnosatraducireltutorialaotrosidiomas?Actualmente,lastraduccionessellevanacabosobrelaplataformacrowdin.comen:

https://crowdin.com/project/django-girls-tutorial

Situidiomanoestalistadoencrowdin,porfavorabreunnuevoproblemainformandoelidiomaaspodemosagregarlo.

Introduccin

4

https://crowdin.com/project/django-girls-tutorialhttps://github.com/DjangoGirls/tutorial/issues/new

CmofuncionaInternet?Paraloslectoresencasa:estecaptuloestcubiertoenelvideoHowtheInternetWorks(enIngls).

Estecapituloestinspiradoporlacharla"HowtheInternetworks"deJessicaMcKellar(http://web.mit.edu/jesstess/www/).

ApostamosqueutilizasInternettodoslosdas.Pero,sabesloquepasacuandoescribesunadireccincomohttps://djangogirls.orgentunavegadorypresionas'Enter'?

Loprimeroquetienesqueentenderesqueunsitiowebesslounmontndearchivosguardadosenundiscoduro.Aligualquetuspelculas,msicaofotos.Sinembargo,lossitioswebposeenunapeculiaridad:incluyenuncdigoinformticollamadoHTML.

Sinoestsfamiliarizadaconlaprogramacin,puedeserdifcildecaptarHTMLalaprimera,perotusnavegadoresweb(comoChrome,Safari,Firefox,etc.)loaman.Losnavegadoresestndiseadosparaentenderestecdigo,seguirsusinstruccionesypresentarestosarchivosdeloscualesesthechotusitioweb,exactamentedelaformaquequieres.

Comocualquierotroarchivo,tenemosqueguardarlosarchivosHTMLenalgnlugardeundiscoduro.ParaInternet,usamoscomputadorasespecialesypoderosasllamadasservidores.Estosnotienenunapantalla,ratnoteclado,debidoaquesupropsitoesalmacenardatosyservirlos.Poresaraznsonllamadosservidores--porqueellossirvenlosdatos.

Ok,quizstepreguntescmoluceInternet,cierto?

Tehemoshechounaimagen!Lucealgoas:

CmofuncionaInternet?

5

https://www.youtube.com/watch?v=oM9yAA09wdchttp://web.mit.edu/jesstess/www/https://djangogirls.org

Pareceunlo,no?Enrealidadesunareddemquinasconectadas(losmencionadosservidores).Cientosdemilesdemquinas!Muchos,muchoskilmetrosdecablesalrededordelmundo!PuedesvisitarelsitiowebSubmarineCableMap(http://submarinecablemap.com/)yverlocomplicadaqueeslared.Aquhayunacapturadepantalladelapginaweb:

CmofuncionaInternet?

6

http://submarinecablemap.com/

Esfascinante,no?Pero,obviamente,noesposibleteneruncableentrecadamquinaconectadaaInternet.Asque,parallegaraunamquina(porejemplolaquealojaahttps://djangogirls.org)tenemosquepasarunasolicitudatravsdemuchasmquinasdiferentes.

Separeceaesto:

Imaginaquecuandoescribeshttp://djangogirls.org,estasenviandounacartaquedice:"QueridasDjangoGirls,megustaraversusitiowebdjangogirls.org.Porfavor,envenmelo!"

Tucartavahacialaoficinadecorreomscercana.Luegovaaotraqueesunpocomscercadesudestinatario,luegootrayotrahastaqueesentregadaasudestino.Lanicacosadiferenteesquesienvasmuchascartas(paquetesdedatos)almismolugar,cadaunapodrairatravsdeoficinasdecorreostotalmentedistintas(routers).Estodependedecmosedistribuyenencadaoficina.

CmofuncionaInternet?

7

https://djangogirls.orghttp://djangogirls.org

S,estansimplecomoeso.Enviarmensajesyesperaralgunarespuesta.Porsupuesto,envezdepapelylapicerausasbytesdedatos,perolaideaeslamisma!

Enlugardedireccionesconelnombredelacalle,ciudad,cdigopostalynombredelpas,utilizamosdireccionesIP.TucomputadorapideprimeroelDNS(DomainNameSystem-enespaol,SistemadeNombresdeDominio)paratraducirdjangogirls.orgaunadireccinIP.Funcionacomolosviejosdirectoriostelefnicosdondepuedesbuscarelnombredelapersonaquesedeseascontactaryestenosmuestrasunmerodetelfonoydireccin.

Cuandoenvasunacarta,stanecesitatenerciertascaractersticasparaserentregadacorrectamente:unadireccin,sello,etc.Tambinutilizasunlenguajequeelreceptorpuedaentender,cierto?Lomismosucedeconlospaquetesdedatosqueenvasparaverunsitioweb:utilizasunprotocolollamadoHTTP(HypertextTransferProtocol-enespaol,ProtocolodeTransferenciadeHipertexto).

Asque,bsicamente,cuandotienesunsitiowebnecesitastenerunservidor(lamquina)dondevive.Cuandoelservidorrecibeunapeticinentrante(enunacarta),esteenvasusitiodeInternet(enotracarta).

PuestoqueesteesuntutorialdeDjango,segurotepreguntarsquesloquehaceDjango.Bueno,cuandoenvasunarespuesta,nosiemprequieresenviarlomismoatodoelmundo.Esmuchomejorsituscartassonpersonalizadas,especialmenteparala

CmofuncionaInternet?

8

personaqueacabadeescribir,cierto?Djangonosayudaconlacreacindeestascartaspersonalizadas:).

Bastadecharlas,pongamosmanosalaobra!

CmofuncionaInternet?

9

IntroduccinalainterfazdelneadecomandosParaloslectoresencasa:estecaptuloestcubiertoenelvideoYournewfriend:CommandLine(enIngls).

Esemocionante,verdad?Vasaescribirtuprimeralneadecdigoenpocosminutos:)

Permtenospresentarteatuprimernuevoamigo:lalneadecomandos!

Lossiguientespasostemostrarncmousaraquellaventananegraquetodosloshackersusan.Puedeparecerunpocoaterradoralprincipioperoessolounmensajeenpantallaqueesperaaqueledesrdenes.

NotaTenencuentaquealolargodeestelibrousamoslostrminos'directorio'y'carpeta'indistintamenteperosonlamismacosa.

Queslalneadecomandos?Laventanaquesellamageneralmentelalneadecomandosolainterfazdelneadecomandos,esunaaplicacinbasadaentextoparaver,manejarymanipulararchivosentucomputadora.AligualqueWindowsExploreroFinderenMac,perosinlainterfazgrfica.Otrosnombresparalalneadecomandosson:cmd,CLI,smbolodelsistema,consolaoterminal.

AbrirlainterfazdelneadecomandosLoprimeroquedebemoshacerparaempezaraexperimentarconnuestrainterfazdelneadecomandosesabrirla.

Opening:WindowsIralmenInicioTodoslosprogramasAccesoriosCommandPrompt

Opening:OSXAplicacionesServiciosTerminal

Opening:LinuxEstprobablementeenAplicacionesAccesoriosTerminal,peroesodependedetudistribucin.Sinoloencuentras,Googlealo:)

Introduccinalalneadecomandos

10

https://www.youtube.com/watch?v=jvZLWhkzX-8

PromptAhoradeberasverunaventanablancaonegraqueestesperandotusrdenes.

Prompt:OSXyLinuxSiestsenMacoLinux,probablementevers $,as:

Terminal

$

Prompt:WindowsEnWindows,esunsignoas >,comoeste:

Terminal

>

Cadacomandoserprecedidoporestesignoyunespacio,peronotienesqueescribirlo.Tucomputadoraloharporti:)

Slounapequeanota:entucasopuedequehayaalgocomo C:\Users\ola>oOlas-MacBook-Air:~ola$antesdelpromptyesoestperfecto.Enestetutoriallosimplificaremoslomsposible.

Lapartehastaeincluyendoel $oel >sellamalalneadecomandosoprompt