PrimerospasosconWYSIWYGWebBuilder

1.Preparativos Antesdeempezarconlaprctica,vamosacrearunacarpetadondeguardarlaweb creada. Puedescrearlaoenelescritoriooentu memorystick.Silohacerenelescritorio, recuerdaalfinaldelaclaseguardarlacarpetacontodosucontenidoenelmemorystick. Todoloquesequedeenelordenadordelauladesaparecerencuantoseapagueel ordenador. Paracrearlacarpeta,sitateenellugardondequierascrearla(ventanadelmemorystick o escritorio). Pincha el botn derecho del ratn y selecciona la opcin nuevo > carpeta. Luegodaleunnombrealacarpetaquetepermitasaberqucontiene.Espreferibleque estenombreNOcontengatildesniespacio. Todoslosarchivosquegeneresenlasprcticas(laweb,imgenes,etc.)almacnalosah. 2.PrimerospasosconWebBuilder WebBuilderesunprogramaquenospermitecrearypublicarsitioswebcompletosy profesionales. Sinembargo,hayquetenerencuentaunacosa:WebBuildersirveparaCOMPONER pginasWeb,peroNOesunEDITORdepginaswebpropiamentedicho. Un editor de pginas web permite coger cualquier pagina HTML y editarla. Web Buildernosirveparaeso(lopuedehacer,peroescomplejoylosresultadosnoson buenos). ParaloquesirveelWebBuilderesparacomponerunapginawebounlugarwebdesde elprincipioaadiendoimgenes,cajasdetexto,tablas,efectosespeciales,formas,etc. sinvernitocarelcdigoHTML.Comoluegoveremos,nicamentealpublicarlaweb, todoellosetransformaaHTML. Antesdeempezarahacerelejerciciopropuesto,haztodaslaspruebasnecesariasconel programa hasta que te hayas familiarizado con l. No tengas miedo en probar e investigartodoslosbotones. Paraello: AbrirelWebBuilder.

NuevasTecnologasAplicadasalaEducacin TallerPrctica1

IdaARCHIVOyNUEVOSITIOWEB. Lapantallatendrunaspectosimilaraeste:

En la columnadela derechasepuede ver el"ADMINISTRADORDESITIOS" O "SITEMANAGER". AllsepuedecomprobarcomolapginaprincipalqueseestcreandosellamaINDEX. Estosepuedecambiarperonolovamosahacerenestaocasin. Elrestodepginasdelsitiowebaparecernah. Enlapartedelaizquierdatenemosunaseriebastantelargadeherramientasquepueden serusadas,yenlapartesuperiorlasopcionesdemen.Algunasdeellasyatedebenser familiares,comoARCHIVO,EDICION,VER,etc. Enlapartecentraldelapantallaestlazonadetrabajo.Allesdondeubicaremoslos distintoselementosquecomponenlapginaweb. Elprocesodeedicindeunapginawebessiempreelmismo:primero,seleccionarde lacolumnadelaizquierdaaquelloquequierascrear.Porejemplo,paraintroducirtexto seleccionamostexto.Segundo,vamosalazonacentralyseleccionamoslapartedela pantalladondequeremosqueaparezcaesetexto.Tercero,escribimoseltexto.

Estostrespasosserepitenlamayoradeloselementosquecomponenunapginaweb: imgenes,listas,tablas,etc.Notengasmiedoenhacerahorapruebas. 3.Creacindeunsitioweb Unavezqueteveascmodoconlaherramienta,yapodremosempezaracrearunsitio web. Unsitiowebesunconjuntodepginasconunaestructurajerrquicayenlazasentres formandodiferentesrutasdenavegacin. Paracrearunsitiowebdebesseguirlossiguientespasos: 1. Diseo, en papel, de las pginas, relacin jerrquica entre ellas, enlaces y contenidodecadauna. 2. Creacindelaestructuradelsitioweb(pginas)enWebBuilder. 3. Edicindecadauna,y,almismotiempo 4. Creacindelosenlacesentrelaspginas. 3.1.Diseodelsitioweb Antes de empezar con el programa, debes tener claro qu quieres hacer. Es muy importantequelodiseestodopreviamenteenpapel,tomeslasdecisionesimportantes yrecopilestodoelmaterialnecesario. Parainspirarte,consultaotraspginassobrelomismoenInternet.Paraestaprctica, buscayanalizapginasdecolegiosqueestncolgadasavercmosonson. Primerodebescrearlaestructuradetusitioweb.Debesdecidircuntaspginasvasa crear,qurelacinjerrquicahabrentreellasyquinformacinpondrsencadauna. Paralaprcitca1estediseoyaoslodamoshechoenelenunciadodelejercicio. Adems,debesdecidirlaestructurahipertextual,esdecir,cmoenlazarlaspginas,qu pginasenlazarsentres.Pinsalomuybien.Esunadecisinmuyimportantepues determinaloscaminosdenavegacindelusuario. Unavezideadalaestructurajerrquicaehipertexual,debedecidirqupondrsencada pginayrecopilartodoelmaterialnecesario:imgenes,textos,etc. Importante:sobreelmaterialquehayenInternet,notodoesdeusolibre.Sloaquel materialquetengalicenciacreativecommonsesdeusolibre.Porello,nobusques material directamente desde Google, sino, mejor, bscalo desde la pgina http://es.creativecommons.org/stapginaseleccionadegoogleyotraswebelmaterial conlicenciadeusolibre.Conestopodrsluegopublicartupginasinproblemaslegales deningntipo. 3.2.Creacindelaestructura Paralacreacindelaestructuradelsitiowebsiguelossiguientespasos:

Enelmenarchivo,seleccionalaopcinnuevositiowebparacrearunsitioweb desdecero;onuevositiowebdesdeplantilla,paracrearunsitiowebnuevoapartirde una plantilla. Con esta segunda opcin partes de un diseo ya creado. Para ello, seleccionalaplantillaquemstegustaypinchaenaceptar. Laestructuradelsitiosecreaenel sitemanager.Ahtienes,pordefecto,unapgina ndice(index)queeslapginaprincipal.Estapginaindexdebeserlaprimerapgina. Debellamarsesiempreindex. IMPORTANTE:lapginainicialdebellamarseSIEMPREindex.html(enminscula). Sino,nosepodrverlawebpublicada. Para crear ms pginas, selecciona la pgina index, pincha con el botn derecho y seleccionanuevapgina.Secrearunpginajustodebajodeindex.Crea,delamisma manera,elrestodepginassegneldiseoquehashechoanteriormente.Cadapgina nuevaserhijadelapginasobrelaquepinchesparacrearla.

Unavezquetengaslaspginascreadas,dalesunnombre.Paraelloseleccionalapgina ypinchaenpgina>renombrar.Estotambinsepuedehacerconelbotnderecho sobrelapginaenelsitemanager. Observars que cuando renombras las pginas nuevas que vayas creando, si usas espacios,estossonsustituidosporelcarcterdelguinbajo.Estoesnormalydebeser as.LomejoresqueNOpongastildesniespaciosenelnombredelaspginas.Silo haces,posiblementenofuncionetupginaconelExplorer. IMPORTANTE: el nombre de las pginas NO debe llevar tildes, ni espacios, ni caracteresextraos.Sloletras,aserposibleminsculas.Losnombresdelosficherosy carpetasquesecreen(incluidaslasimgenes,archivosdeaudio,etc.)igual:sintildesni caracteresextraos. Porltimo,hayqueindicarlaspropiedadesdecadapgina.Paraellopinchaconel botn derecho en la pgina y selecciona propiedades de la pgina. Se abre una ventanaenlaquepodrs:darleunttuloalapgina(estettuloluegoseverenel navegadorenlapartesuperior),tipodeletra,caracteres,etc.Adems,puedecambiar otrascaractersticascomotransicinentrepginas,metadatos,etc.Notengasmiedoen probarlasdiferentesopciones.

Sobre losmetadatos:stossonmuyimportantesparaqueluegotupginasepueda localizaratravsdelosbuscadores.Enlaopcinkeywordsopalabrasclavedebes ponerlaspalabrasclavequedefinentusitioweb.Porejemplo,Educacin,colegio,e learning.Eligebienlostrminos.

3.3.Diseodelaspginas Conestoyatienestodoelsitiowebmontado.Ahoraseleccionacadapginaconlas pestaasdecoloresyeditacadaunasegneldiseocreadoanteriormente. Eldiseodecadapginalopuedehacerdesdecero.Haysinembargootraposibilidad, queterecomendamos:utilizarlasplantillasdediseo.Conlasplantillasteahorrars muchotrabajodediseoyobtendrsunresultadomsprofesional. 3.4Creacindelosenlaces Losenlacesentrepginassonelelementobsicodeunsitioweb.stossonloscaminos queseleofrecenalusuarioparanavegarpornuestrositioweb. Siyatienesdecidoquenlazarconqu,crearlosenlacesesmuysencillo. 1. Abrelapginadeorigen 2. Seleccionaaquellosquequieressirvadeenlace,esdecir,sobreloqueelusuario vaapinchar.Puedeserunapalabra,unaimagen,etc. 3. Conlapalabraseleccionada,enelmeninsertar,seleccionaenlace. 4. Seabreuncuadrodedilogo.Enlindicasiesunenlaceexterno(aotrositio web), un enlace a correo electrnico, o un enlace a una pgina interna, de nuestropropiositioweb.Comoejemplo,seleccionaestaltima.Luegopruebael restodecasos. 5. Pinchaenseleccionarparadeterminarlapginadedestino. 6. Aceptar Siquieresquelapginaseabraenunanuevaventanadelnavegador,antesdeaceptar seleccionaenTargetlaopcin_blank. 4.Publicacin Unavezqueestnaadidostodosloselementos,WebBuilderpuedePUBLICARla pginaalldondedesees:localmente(entupropioordenador)oremotamente(enun servidorexterno). En ambos casos, y solo entonces, Web Builder CREA las pginas HTML, los directoriosconlasimgenesytodoloqueseaprecisoparaquetulugarwebquede perfectamentepublicado.

Noteextrae,pues,quehastaesemomentonotengasposibilidaddeverexactamente cmotevaaquedartusitioweb.Peroestapublicacindefinitivaestansencillaque podrs hacerlasiemprequequierasaunqueannohayasterminadolaweb,para ir comprobandocmotevaquedando. Adems,siemprequequieras,podrsvercmotequedanlaspginaswebquevayas trabajandohaciendoun"preview"o"previsualizacin"desdeelmenArchivo,pero enesecasoslotemostrarlapginawebqueestasdiseandoenesemomento. Parapublicartusitioweb,debesiraARCHIVO+PUBLICAR

Enestapantallavers,bajoUBICACION,losdistintoslugaresdondepuedespublicartu web.Probablementelalistaserdiferentealaquevesaqu,exceptuandolaquedice"MI PC". 4.1.Publicacinlocal Publicarenlocalquieredecirquelapublicarsentupropioordenadoroentumemory stick.Enestacasolapginanoestodavapblicayslolapuedesvert. HazclicksobrelalneaMiPCesaubicacinypulsasobre"EDITAR"

Sihacesclicksobreelbotnconlospuntossuspensivos,podrselegirlaubicacindetu memoristickparaelegirallundirectoriodondeseharlapublicacinfinaldetulugar web.Puedesseleccionarotrodirectorio,perorecuerdaloquedijimosalprincipioenlos preparativos. PinchaACEPTARyluego,teniendoseleccionadalalneaMiPC,pinchaenpublicar. WebBuildercreaahoratodoelsitiowebconelcdigoHTMLcorrespondienteylo enva,juntoalasimgenesydemselementos,alacarpetadetumemorystick. Aspodrstenerunacopiadeloqueestashaciendo.

4.2Publicacinremota Publicarenremotoespublicarelsitiowebenunservidorpblicodetalmaneraque pueda ser vista por todo el mundo. Para ello debes disponer de un servidor web. NosotrostenemosunoparaquepubliquisvuestrostrabajosdeNTAE. Paraellohaydarleladireccindelservidorremotoyluegopublicar.Sigueestospasos: 1. PinchaARCHIVO>PUBLICAR.LuegopinchaenAadir.Vamosadarlelos datosdelservidorremoto 2. EnTipoindicaremoto 3. Enservidorescribeftp.ntae.es 4. En nombre de usuario y contrasea, escribid la de vuestro grupo. Esta informacinoslafacilitarelprofesordeprcticas. 5. Pinchaaceptar. 6. Porltimo,seleccionalalneaconelservidorqueacabasdeintroducirypincha enpublicar.WebBuildertransformatodoaHTMLylosubealservidor Si todo ha ido bien, debe salir una pantalla diciendo que la transferencia ha sido correcta. ParaverlapginadesdeInternet,vealadireccin: http://alu06q2.ntae.es/uXX dondeXXeselnmerodetugrupo. 5.Guardareltrabajo Nocreasqueconesoestassalvandotutrabajo.Slolohemospublicado. DebesguardartutrabajoSIEMPRE.Conellopodrscontinuarconlotroda.Sislolo publicas,nopodrsmejorarlomsadelante.

DebesguardarelficheroconlaextensinWBS,queeselficherocontodotusitioweb enformatoWebBuilder.Adems,cerciratedequejuntoaesteficheroguardastambin lasimgenes,audioydemsficherosinsertados.Todoellodebequedarguardadoentu memorystick. Paraello,debesiraARCHIVOyluegoaGUARDARSITIOWEBparaguardaruna copiadetrabajodeloqueestshaciendoypodercontinuardondelodejasteenotra ocasin.Seleccionalacarpetadetumemorystick. Noolvideshacerestoltimo.YnoconfundaslosarchivoscreadosporelWebBUilder paraguardarelproyecto(quetienenextensinWBS)ylosdirectoriosnecesarioscon imgenes con el "lugar web creado" que solo contiene los ficheros HTML y las imgenesnecesarias.

6.Unconsejoparaterminar Aqutienesmanuales(encastellanoeingls)queteexplicaraafondocomousarel programa.DEBESconsultarlosantesdehacercualquierpregunta. http://www.wysiwygwebbuilder.com/getting_started.html Aligualqueparaaprenderausarcualquieraparatotecnolgico(cmaradefotos,DVD, lavadora,etc.)teleeselmanualdeinstrucciones,paraaprenderausarunprogramas debesconsultarsumanual.Acostmbrateaello. Adems,muchasdudasposiblementealguienlashayatenidoantesquet.Buscaen google. NotengasmiedoylnzateaexplorarelWebBuilderportimismo.Lomsdivertidoes lanzarse directamente a la piscina y luego consultar las dudas con los manuales e internet,unavezquetienesmsomenosclaroloquedebeshacer.Antesdeempezarel ejercicio,experimentatodoloquenecesitesconelprograma. Siconestonotienesbastante,siemprepuedespreguntarlealprofesor......