Hola, hoy finalmente vamos
a escribir algo de código Voy a mostrarte
cómo se usa un editor. Uno de los mayores errores que veo en
muchos de mis estudiantes, es que prestan demasiada atención en lo que digo,
en lugar de tratar de sumergirse y empezar a programar
ellos mismos. Te animo a sentarte y hacerlo y ver
lo que voy a hacer ahora mismo, en un rato, espero que te sientes
y puedas programar conmigo. El primer paso es que necesitas
crear y editar tus archivos. Uno de los mayores errores
que vas a encontrar es que al guardar los archivos, puede ocurrir que
no seas capaz de encontrarlos más adelante. Debes decidir cómo
organizar tus archivos. ¿Cómo vas a llamar
a tu carpeta? ¿Dónde la
vas a ubicar? Segundo, necesitas una convención
para nombrar los archivos. Esto es, una forma elegante de decir
cómo vas a llamar a los archivos. Hay mucha gente que utiliza Mac y tiene
permitido usar espacios en los nombres de los archivos, esto no es algo que debes
hacer cuando escribes código. Debes decidir qué hacer cuando
tienes dos palabras juntas, vas a usar guiones bajos para unirlas
o algo que llamamos CamelCase, donde pones en mayúscula
la primera letra de cada palabra. Recuerda,
no uses espacios y sé muy consistente en el
uso de las mayúsculas si las usas. Finalmente necesitas
elegir el editor. Si estas usando un PC con
Windows, Notepad está incluido. También puedes considerar
usar Notepad++ o Sublime. Si usas Mac, TextEdit es
el editor por defecto, aunque mucha gente,
también usa TextWrangler. Voy a utilizar Sublime a lo largo
del resto del curso, pero por hoy mostraré ejemplos de cómo
editar en Notepad y TextEdit también. Para empezar, vamos a revisar
rápidamente los cinco pasos que vamos dar, algunos de ellos
en varias ocasiones. Vas a empezar por abrir el editor
y luego vas a guardar el archivo, agrega algún contenido, guarda el archivo
nuevamente y ábrelo en el navegador. Quiero mostrar
un ejemplo rápido Vamos a usar
Sublime para hacerlo. Pero no te preocupes,
voy a seguir adelante y a mostrarte otras
maneras de hacerlo también. Abro mi editor Sublime,
un lindo archivo negro. Voy a comenzar
por ir al archivo. Y guardarlo. Y le pondré de nombre
firstpage.html. Ahora una de las cosas
que necesitamos decidir es dónde lo vamos
a guardar. Es de esperar que hayas decidido esto,
incluso antes de comenzar a trabajar. Voy a guardarlo en la carpeta llamada
webpages que tengo en mi escritorio. Pero puedes tomar algo
aquí, o incluso si quieres, si haces click aquí puedes
crear una nueva carpeta. Lo que no debes hacer es guardar
todo el código en tu escritorio. Vamos a guardarlo. Aunque muchas veces
te voy a obligar a sentarte verme cómo escribo terriblemente en la pantalla,
ésta, sólo para ahorrar algo de tiempo, vamos a seguir y pegar un poco
de código que ya está escrito Como puedes ver, tengo el doctype,
la sección head y el body. En head coloco la
codificación y el titulo. En el body, vamos
a decir hola. Entro, lo guardo
usando CTRL + S. Tú también puedes hacer File > Save,
pero presionar CTRL + S es mucho más rápido. En cada editor que uses,
hay pequeñas teclas que nos permiten saber
si algo ha cambiado. Si miras ahora mismo en
firstpage.html, podría ser difícil ver, si entrara
para cambiar algo. De hecho, tienes un pequeño círculo
que te permite saber que no lo has guardado hace un rato. Seguí adelante, creé el contenido
y ahora es el momento de abrir mi página. Una forma de hacerlo es
venir por aquí a mi carpeta. Este es firstpage.html. Para mí, hay un pequeño
icono de Chrome a un lado. Para ti, puede ser
un navegador diferente. voy a seguir adelante para hacer click
y obtener my Firstpage.html y tengo éxito. No puedo remarcar bastante que la mayoría
de las veces cuando escribes algo al principio, en realidad no
te va a funcionar. Por suerte para mí,
tengo el poder de la edición. No tienes ni idea de que en realidad me llevó
unos pocos intentos conseguir que el archivo funcionase, porque me estaba
liando con algunas cosas. A lo largo de
todo el curso, voy a mostrarte las áreas
donde podrías tener un problema. Esperemos que no, pero si te pasa,
son muy simples de solucionar. Uno de los problemas más comunes es
cuando haces click derecho en el archivo, en lugar de abrirse el navegador,
se abre el editor. Si quieres arreglarlo, todo lo que necesitas
es hacer click derecho en el archivo y seleccionar Abrir Con. Otro problema que ocurre a veces
es que cuando abres el archivo, en vez de ver una página web con un formato
agradable, ves todas las etiquetas. Cuando esto sucede, necesitas
verificar la extension del archivo y asegurarte de que dice .html,
y no algo como .text o .rtf. Otro problema que sucede a veces
es que cambias tu código, pero tu página se ve
exactamente igual. Hay dos razones por
las que sucede esto. La primera es que tienes
que refrescar el navegador. Solo significa que tienes que
actualizar los contenidos. La segunda cosa que sucede muy a
menudo es que has olvidado verificar el nombre del archivo. Permíteme mostrarte
un ejemplo de esto. Vamos a volver al
archivo original. Como puedes ver, tengo
un Hola Mundo escrito aquí. Esto es muy común en
ciencias de la computación y como estoy tratando de parecer más
normal, voy a cambiarlo por Hello Everybody. Lo hago y guardo
el archivo. Listo. Cuando vuelvo a la página web
esta sigue diciendo Hola Mundo. No ha cambiado nada
y estoy molesta por eso. Recuerdo que es necesario
refrescar la página. Hay muchas
maneras de hacerlo, por lo general, puedes ir al circulito
de aquí y hacer clic para actualizar. Puedes hacer click derecho en Reload,
también puedes ir a View, perdón. También puedes
ir a la barra superior. Sigo adelante
y refresco. Y puedes ver que ahora
tengo Hello Everybody. El otro problema que he mencionado es que
a veces la gente cambia el nombre del archivo. Tal vez ya no estás
trabajando en FirstPage. Decidiste guardar esto como
Archivo > Guardar como segunda página. Guárdalo. Vuelvo por aquí
y refresco el archivo. Hello everybody. No sucede nada. Vas a encontrar que esto
sucede una y otra vez. Cuando estás tratando con una gran
cantidad de archivos, todos al mismo tiempo, tienes que asegurarte de que el que
estás mirando en el navegador coincide con el que has
estado escribiendo. Porque cuando cambié
el nombre del archivo, necesito recordar cambiarlo aquí
arriba en la barra de direcciones también. Boom. Otra cuestión que surge con bastante frecuencia es la idea de que se obtiene, lo que llamamos
caracteres extraños. Una de las primeras
razones para que esto suceda es mi
favorita usar copy and paste. Siempre que te doy código
y lo miras en PowerPoint, el problema es cuando copias y pegas
un conjunto de caracteres no se traducen de la manera que nosotros esperamos
y obtienes lo que llamamos caracteres extraños. El número uno de los
culpables es las comillas. Cada vez que estás escribiendo
y tienes una cosa rara que no esperas, vuelves y tratas de
escribir el código a mano. Te he mostrado cómo crear
y editar un archivo en Sublime. Pero quiero asegurarme de que todo
el mundo tiene la oportunidad de ver cómo puedo crear archivos utilizando los
editores que tienen en su propia computadora. También te voy a mostrar un ejemplo
en TextEdit y también en Notepad. Espero que cuando veas estos
ejemplos, tendrás la computadora, y los escribirás
conmigo. Continúas y pausas, paras todo, no sigas
adelante en el vídeo hasta que te sientas seguro de que estás en
el punto que he alcanzado. ¡Hola a todos! Ahora vamos a seguir y a
crear un archivo con TextEdit. Si yo quisiera ser
malvada, iría y mostraría un ejemplo sencillo
de crear un archivo en TextEdit. Pero en cambio, voy a ser muy honesta contigo y admitiré que me tomó unos 15 ó 20 minutos averiguar cómo crear
un archivo muy simple en TextEdit. Primero, deja que te
enseñe lo que hice mal. ¿De acuerdo? Voy a seguir adelante y a pegar
mi código para mi página muy simple. Vamos a deshacernos de esto. Tenemos el header
y el contenido. Puedes escribir esto a medida
que avanzamos, o puedes esperar. Es hora de que
guarde el archivo. Y lo que necesito hacer es asegurarme
de que lo guardo en la carpeta adecuada con el nombre
del archivo. Voy a seguir y a
llamarlo FirstPage Voy a bajar aquí y me aseguro
de guardarlo como una página web. Una de las opciones es .html,
así que voy a hacer clic en esto. Sé que tengo
mi firstpage.html, está en la carpeta que quiero y realmente
siento que vamos bien para seguir. Voy a seguir
y a guardarlo. Ahora, voy a ir a mi carpeta
de páginas web, para abrirlo. Y se va a abrir
en Chrome. Vamos a ver
cómo va. Eso no es lo que esperaba cuando
empezamos a escribir este segmento, y me llevó mucho tiempo
averiguar qué estaba pasando. La primera cosa que fui a comprobar,
permítanme cerrar esto, es que quiero asegurarme que
la extensión de mi archivo sea .html. Y lo era, no había un .txt
o un .rtf al final. Lo siguiente
es entrar y revisar que todas mis comillas
estén colocadas de manera correcta. Vamos a seguir y a poner
esto, porque si recuerdas, Siempre estoy diciendo que copiar y pegar,
a veces puede darte comillas erróneas. Podemos volver otra vez. Todavía no hay suerte. Si vas a usar TextEdit,
realmente necesitas entrar y hacer algunos cambios
en el programa TextEdit. No tiene nada que ver con
lo que estás escribiendo. Tiene que ver con
el programa TextEdit. Voy a seguir, a copiar esto para en
caso de que lo pierda, y a borrarlo. Voy a TextEdit,
selecciono preferencias, puedes ver que
tenemos dos opciones. New Documents
y Open and Save. Una de las primeras
cosas que voy a decir es, siempre que tengas un documento nuevo,
me gustaría que estuviera en texto sin formato. No RTF, o texto enriquecido,
sino texto sin formato. La segunda cosa que vas a
hacer es ir aquí para abrir. ¿Ves la presentación de los
ficheros HTML es código HTML? Vamos a seguir y
a hacer clic ahí. Y, finalmente, lo más importante
es que cuando guardas tus archivos, queremos guardarlo
como utf8. Voy a hacer una pausa
aquí durante un segundo, apenas un segundo, mientras
miras tu propio menú de TextEdit. Tienes que asegurarte de
haber marcado las casillas y lo has cambiado
a unicode, utf8. ¿Bien? Si has liado las cosas, baja restaura
los valores por defecto y vuelve a intentarlo. Voy a cerrar esto. Voy a seguir, hacer New,
y pegar mi código. Eso es muy pequeño
para ti, pero está bien. Ve a File > Save. Vamos a llamarlo
FirstPage2.html. Puedes ver enseguida que dice:
¿Quieres usar la extensión html o la punto txt? Voy a decirlo, usa html. Antes de hacer clic aquí quiero
destacar que aquí abajo, está mostrando que se va
a guardar como unicode utf8. Puedo deshacerme de esta advertencia,
si quiero, haciendo clic aquí, si no hay extensión,
utiliza .txt. Vamos a usar html. Vamos aquí, vamos a cruzar
los dedos, esperemos lo mejor. Y ahora tengo una
página con éxito. Si vas a usar TextEdit, no
hay mucho que hacer, excepto la primera
vez que lo configures. Asegúrate de
ir a preferencias. A partir de ahí ahora puedo
entrar, hacer cambios, lo hicimos. Guardo
y refresco. Espero que ahora puedes guardar
y editar un archivo con éxito. Digamos que estás utilizando
un PC para crear tus archivos. Lo que quieres hacer probablemente
es usar Notepad al principio ya que es la versión gratuita de editor
que ya está en tu máquina. Lo primero que hice, fue crear una carpeta
donde guardar mis archivos. Sé que es pequeño, probablemente
no puedas verlo, pero se llama páginas web. Si no sabes cómo hacer una carpeta, puedes hacer clic derecho en el
escritorio, ve a New y crea una carpeta. Una vez que hayas creado la carpeta
en la que deseas guardar los archivos, de inmediato, voy a seguir y a decir File > Save, y lo voy a llamar firstpage.html Es muy importante incluir el .html Si no incluye eso, la computadora va a pensar que estás
trabajando en cualquier otro tipo de archivo. Voy a ir aquí abajo y a cambiarlo de
documentos de texto a todos los archivos. Sigo y lo guardo. Ya existe, pero
voy a decir Ok. Ahora es el momento
de poner algún contenido. Voy a trampear un poco aquí
y copiar y pegar mi contenido, a pesar de que tú vas a tener
que escribirlo poco a poco. De nuevo tengo mi Doctype
y mi HTML que es igual al inglés meta charset igual a UTF-8
mi título y mi contenido. para estar seguros, voy a
volver a poner las comillas. Porque las comillas siempre me
ponen nerviosa cuando copio y pego algún caracter que
mi editor no reconoce. Ahora que estoy bastante contenta y
segura de que tengo las cosas que quiero en mi archivo, voy a seguir
y a guardarlo otra vez, voy a mi carpeta
y hago clic en FirstPage. Y ahí lo tenemos. Ahora cuando realices un
cambio puedes mantener ambas ventanas abiertas
si tienes sitio. Realizo los cambios. Tengo un archivo. Guardo. Y recargo. Buen trabajo. Creaste un archivo
usando Notepad.