Qué es el desarrollo web: una guía a la web para principiantes

1. Introducción a "Qué es el desarrollo web": Hola y bienvenidos a mi primera clase de Skillshare, entendiendo el desarrollo web. Yo soy Chris. Soy un desarrollador web autodidacta y creador de contenido que ha trabajado para startups y pequeñas empresas como freelancer desde 2015. Trabajando de forma remota, he podido usar esta habilidad para trabajar desde ubicaciones de todo el mundo y para una variedad de clientes. Soy un gran creyente en el poder de aprender a codificar y estoy emocionado de compartir contigo lo que creo son las cosas principales que debes saber para entender cómo funciona la web y cómo puedes desarrollarte para ello. En esta clase discutiremos algunos de los principales conceptos detrás del desarrollo para la web, entre ellos: Uno que te pone al día con cómo funciona la web, dos aprendiendo la diferencia entre el desarrollo front-end y back-end, y tres que muestran usted cómo desplegar su propio sitio web a Internet. También repasaremos algunas de las herramientas y lenguajes necesarios para el desarrollo web incluyendo HTML, CSS, y JavaScript, PHP, y MySQL, y frameworks como Bootstrap, y Jquery. Mi objetivo para esta clase es que al final, tengas una amplia comprensión del desarrollo web y quede claro cómo quieres usar esta importante habilidad de desarrollo web en tu carrera profesional o para uso personal. Entonces si estás listo para empezar da click en el siguiente video y te veré por dentro. 2. Qué puedes esperar del curso: Entonces en esta clase, voy a proporcionar una visión general del desarrollo web y darte una muestra de desarrollo de HTML, CSS, JavaScript, PHP, y MySQL, además de ayudarte a implementar tu sitio web en Internet. Al final de la clase, deberías poder entender la diferencia entre front-end y back-end, el propósito de HTML, CSS, y JavaScript, qué es un framework y por qué debes usar uno, el propósito de PHP y MySQL la diferencia entre un nombre de dominio y hosting, y finalmente, cómo publicar tu sitio web en Internet. Es mi creencia que el desarrollo web se aprende mejor haciendo, y así esta clase va a ser muy práctica más que puramente teórica. Aprenderás qué son HTML, CSS, JavaScript, y PHP al usarlos realmente. El objetivo al final de esta clase es que tengas una buena comprensión de la web y del proceso de desarrollo web, tras lo cual, estarás en mejor posición para elegir qué área de desarrollo web te gustaría conocer más. Entonces sin más preámbulos, comencemos la primera lección de entender el desarrollo web. 3. Cómo editar cualquier página de la web: Para comenzar este curso, quiero mostrarte algo genial que quizá no te hayas dado cuenta. Esto ayudará a demostrar la diferencia entre front end y back end en un entorno de la vida real antes de entrar en la teoría. Para esta demo, estoy usando un navegador llamado Google Chrome. Es el que uso como consumidor y regularmente como desarrollador web también. Pero podrías usar Firefox, que tengo abierto aquí también, y Safari. Puedes hacer cosas similares, casi lo mismo, solo con herramientas ligeramente diferentes en cualquiera de estos navegadores. Te mostraré cómo hacer eso en tan solo un segundo. Pero volvamos a Chrome y vamos a Google.com. Ahora puedes hacer este pequeño experimento en cualquier sitio web en absoluto. Pero yo sólo pensé que iríamos si un sitio web que todos conocemos, y eso es Google.com. Ahora un secreto poco conocido que quizá no conozcas ya es que puedes editar prácticamente cualquier página web directamente dentro de tu navegador. Todo lo que tienes que hacer en Chrome, es hacer clic derecho en cualquier elemento. Voy a dar click derecho en este botón aquí y dar clic en Inspeccionar. Eso lo hice un poco rápido. Haga clic con el botón derecho del ratón, haga clic De lo que esto se abre de lado aquí son las Herramientas de Desarrollador de Google Chrome. Si vamos a Firefox y vamos a hacer lo mismo, Google Chrome. Yo sólo google.com. Acude a Google en Safari también. En Firefox, podemos hacer exactamente lo mismo. Podemos inspeccionar elemento, y trae una consola similar aquí abajo. En Safari, tienes que ir a Preferencias y habilitar Herramientas para desarrolladores. Bajas para hacer click en Avanzado, baja a Mostrar menú Desarrollar en la barra de menús. Entonces a partir de aquí, no estoy seguro en qué haces clic. Creo que mostrar Web Inspector y se pueden ver cosas similares. Es algo similar en todos los navegadores web o en los principales navegadores web. Pero como dije antes, me gusta usar Chrome. Lo que puedes hacer aquí es esto todo el HTML y esto es todo el CSS. Si entramos en consola, podemos interactuar directamente con la página usando JavaScript. Pero no te abrumemos ahora mismo si apenas estás empezando. Todo lo que quiero mostrarles es que esto es completamente editable. Aquí se puede ver este valor. Voy a hacer clic fuera de él y luego volveré a hacer clic. Simplemente si hago doble clic en ese valor, ahora puedo editar ese valor. Ya ves aquí dice búsqueda de Google aquí, dice búsqueda de Google allá. Yo puedo cambiar eso a lo que yo quiera. A lo mejor digo mi búsqueda, y wallah, puedes cambiar el texto sobre eso. Si quisieras cambiar el estilo, que se hace con CSS, puedo bajar a aquí con el estilo Element, y puedo escribir en color, y puedo desplazarme por todos estos diferentes colores. Literalmente puedo colorearlo lo que quiera. Usemos el chocolate. Sólo porque eso suena divertido. Incluso puedo eliminar elementos. Voy a dar clic en esto y presionar la tecla Eliminar. Boom, se ha ido. Pero antes de que te emociones mucho y pienses, “Wow, estoy cambiando la página de inicio de Google”, ¿cómo va a afectar esto a todos los demás que usan Google? Haz clic en el botón Recargar y verás que Google sale exactamente como estaba de antemano. Eso es porque solo estamos editando el front end. Al presionar recargar o volver a Google, está enviando otra solicitud al servidor y golpea el backend. Google utiliza cualquier lógica compleja que tengan en el back-end para determinar qué aparece aquí. Cualquier cosa que cambies aquí solo está en tu navegador y en realidad no en Google. Pero esto, como verás al final del curso, es súper poderoso. Para trabajar en tus propios sitios web, puedes entrar y revisar cualquier cosa en el front end, modificarlo en vivo básicamente, y luego puedes averiguar cómo hacerlo en tu editor de código o lo que sea. El motivo por el que quería mostrarles que recta es porque creo que esta es una forma práctica de demostrar físicamente la forma en que funciona la Web o más bien cómo funciona el frontend porque tú puedes interactuar con, yo solo opción presionada Comando I en Mac. Si estás ejecutando Mac y estás usando Chrome para abrir Herramientas de Desarrollador, puedes interactuar con cualquier página web en internet, cualquiera de los activos front-end, el HTML, el CSS, el JavaScript, al que entraremos más adelante. No te muestra el backend lamentablemente porque eso es todo privado, pero entraremos en por qué el backend es privado y cómo trabajamos con el backend en este curso también. Lo que voy a hacer en el siguiente video es sumergirme justo en la teoría, que es un poco pesada, razón por la que quería hacer este video primero. Entonces vamos a meternos en algún código real. Espero que esa fuera una pequeña demo genial, y hablemos ahora de teoría en la siguiente lección. 4. Comparación entre front end y back end: Probablemente el concepto más importante para entender el desarrollo web, es la idea entre front-end y back-end. Para explicarlo, quiero usar un diagrama de Felix Thea. Voy a ir a felixthea.com/frontend-vs- backend. En la parte inferior de este artículo, puedes encontrar el diagrama. Lo que vimos en el primer video, fue yo interactuando con lo que se llama el frontend. Como puede ver, el código frontend siempre está escrito en HTML, CSS, y JavaScript. El código frontend es básicamente lo que viene a darle a tu navegador para crear lo que ves e interactúas en tu navegador. El motivo por el que el código en el frontend es siempre HTML, CSS, y JavaScript, es porque todos usamos navegadores web similares como Chrome, Safari y Firefox. tuvieron que desarrollar estándares internacionales para que todos los desarrolladores coincidieran en qué tecnologías conformarían los sitios web que vemos y con los que interactuamos. El frontend, sin embargo, es sólo la punta del iceberg ya que el backend puede ser infinitamente más complejo. El papel del backend es simplemente generar el frontend, pero de una manera mucho más inteligente. Volvamos a nuestro ejemplo en el primer video. ¿ Qué sucede cuando hacemos clic en “Recargar” después de editar la página? Desaparecen los cambios, ¿verdad? Bueno, claro, esto tiene sentido. Google no nos va a dejar cambiar su sitio web, pero ¿qué sucede realmente cuando hacemos clic en ese botón de recarga? El respuesta es que estamos creando una nueva solicitud al servidor. Cuando hacemos esa solicitud, el backend realiza cualquier número de cálculos simples o complejos y luego envía al navegador HTML, CSS, y JavaScript. Estos tres scripts son luego interpretados por tu navegador para generar el sitio web con el que ves e interactúas. En el ejemplo de Google, el backend podría calcular el Número 1, desde qué país estás accediendo al sitio web. Número 2, ya sea que esté conectado o desconectado. Cualesquiera que sean los cálculos que Google pueda realizar en el back-end, es completamente privado. El código back-end nunca lo hace a tu navegador, y por lo tanto, no hay forma de verlo. A diferencia del frontend, el backend de un sitio web se puede generar o crear utilizando cualquier lenguaje de programación, o tecnologías. Tu navegador siempre requiere HTML, CSS, y JavaScript, pero realmente no le importa cómo llegue allí. Simplemente le importa que el código en el frontend sea legible. Dicho esto, hay algunas opciones populares que potencian la mayor parte de la web. Estos son PHP, Ruby, Python, Java, C#, y C++. Volvamos al diagrama. Hemos hablado del frontend y del back-end, pero aquí hay otro punto de interacción, y esa es la base de datos. En la base de datos se almacenan los datos. Usando este ejemplo en el diagrama, un usuario podría hacer clic en un botón para acceder a una galería de fotos. Posteriormente se envía la solicitud al backend, que luego consulta la base de datos y luego la base de datos devolverá la información de la foto al backend. Entonces el backend determinará qué enviar al navegador. Si todo tiene sentido ahora mismo, genial, pero si no, ten en cuenta que empezarás a entender mejor una vez que empieces a trabajar directamente con el backend y frontend, y una vez que nos metamos en algún código, pero para terminar esta sección, solo quería compartir un último ejemplo que es bastante común en el desarrollo web, y es un proceso llamado autenticación. Ahora bien, la autenticación es algo que probablemente te encuentres todo el tiempo. Es solo una palabra elegante para iniciar sesión en alguien y cerrar sesión en alguien de un sitio web o una aplicación. Si un usuario está autenticado, sólo significa que ha podido identificarse e iniciar sesión en el sitio. autenticación siempre implica o siempre debe involucrar al back-end, ya que la información del usuario siempre debe guardarse forma privada y debe interactuar con la base de datos. Recuerde, todo lo que hay en el back-end, incluida la base de datos, no es visible para el usuario. Sólo lo que se entrega en el frontend puede ser visto e interactuado con. En el caso de la autenticación, el usuario Número 1, escribe su nombre de usuario y contraseña, y luego pulsa “Enter”. Número 2, entonces la información se envía al backend, que consulta la base de datos para ver si uno, el nombre de usuario existe en una base de datos y dos, si la contraseña coincide con lo que se almacena para ese usuario. Número 3, si ambas condiciones coinciden, el backend decide que se debe otorgar acceso al usuario y en colaboración con el frontend declara al usuario como conectado. ¿ Ves ahora cómo interactúan el frontend y el backend? Afrontémoslo, podría lanzarte tanta más teoría, pero el desarrollo web se aprende mejor haciendo. Vamos a saltar a algún código en el siguiente video. Nuevamente, recuerda que no necesitas tener todo súper claro para saltar a la siguiente sección. Esto es toda teoría que tendrá mucho más sentido cuando realmente nos metamos en algún código. Simplemente vuelve a ver este video si es necesario, pero sabe que una vez que superemos este curso, los conceptos de los que hablamos en esta lección se harán más claros. Vamos a saltar a algún HTML en el siguiente video. 5. HTML: Vamos a sumergirnos a la derecha en algún HTML. Para esto vamos a necesitar, uno, un editor de código. Si estás usando Windows, solo puedes abrir Bloc de notas y puedes usar el Bloc de notas de manera realista. En Mac, no recomendaría necesariamente usar edición de texto, así que recomendaría descargar un editor de código gratuito. El que estoy usando se llama Atom. Lo puedes encontrar con solo ir a atom.io y descargarlo. Es realmente, como puedes ver, bastante delgado y agradable para trabajar. Tengo mi navegador abierto por supuesto. Vamos a necesitar un navegador web para ver nuestro proyecto real. Lo que vas a necesitar, también, es una carpeta de proyecto que he configurado aquí mismo. Lo que vas a hacer primero, es ir a esta página para conseguirnos un poco de plantilla, un punto de partida para un proyecto básico. Puedes escribir esto en Google, estoy seguro de que saldrá o puedo insertar el enlace en alguna parte. Simplemente desplázate aquí abajo y puedes copiar pegar esto. Voy a copiar eso, cabeza a este archivo y pegarlo. El motivo por el que no tenemos el bonito color, como lo tiene aquí para las diferentes partes, es porque nuestro editor de código aquí, Atom no sabe qué tipo de archivo es este. Siempre es una buena idea salvar nuestro proyecto de inmediato de todos modos. Vamos a Archivo, haga clic en “Guardar como”, y dentro de nuestro directorio de proyectos, vamos a nombrarlo. Puedes ponerle el nombre que quieras, al igual que has.HTML al final. Podrías nombrarlo con una extensión diferente como TXT, pero entonces tu navegador y tu editor de código no sabrán que es HTML. Para una página de inicio de un sitio web, suele ser index.php y eso es por algunas razones a las que podríamos entrar más adelante. Pero por ahora, solo llamémoslo index.html. Yo sólo voy a cerrar eso. De repente, tienes colorear porque Atom sabe que es HTML, y de repente tienes tu proyecto aquí también. Una vez que agregamos más archivos, esto se vuelve importante porque podemos entrar a los otros archivos, hacer clic en ellos, y editarlos. Sólo navegación general. Lo que vamos a hacer ahora que tenemos un archivo HTML, es verlo. Hay algunas formas de hacerlo. La forma más sencilla es simplemente hacer clic derecho sobre él y hacer clic en abrir con. Chrome es la aplicación predeterminada en mi computadora para abrir HTML, así que solo puedo hacer clic en él y bam, sale. Ahora, podrías estar pensando, bueno, acabamos de tener una pantalla blanca. ¿ Cómo sabes que se acerca con éxito Chris? Cómo sé que en realidad es, aquí arriba. Aquí arriba dice el Herald HTML5, que es lo que tenemos en esta etiqueta de título aquí arriba, el Herald HTML5. Si cambiamos esto, solo cambiemos esto a mi proyecto HTML y golpeemos “Guardar”. Solo estoy usando Command S en un Mac, pero puedes ir a guardar así, o lo que sea el atajo que sea. Después hacemos click sobre nuestro navegador, hacemos clic en “Recargar” o Comando R, y podemos ver que ahora se cambia el título de la página. Podríamos hacer una serie de dos horas en HTML en este curso, pero solo quiero darles una visión general. Aquí hay mucha información, pero las principales cosas que debes saber, es cabeza y cuerpo. En la sección de cabeza, no necesariamente se puede ver en la página lo que sucede en cabeza, pero tiene algunas etiquetas importantes que van aquí. Puede enlazar a archivos externos aquí. Éste aún no existe, solo está en la plantilla. Aquí hay meta información que es importante para el SEO. Ahí está el título con el que ya interactuamos, y hay otras cosas que puedes poner aquí también. Pero la etiqueta body es donde pondrás cosas que se mostrarán en el cuerpo real de tu documento HTML de tu página web. Algunos elementos básicos que podemos poner en nuestro cuerpo para empezar es un div. Que básicamente es solo una cuadra, y simplemente nos da una forma de organizar nuestro código. Se puede poner dos divs en. Por cierto, la convención siempre se mantiene igual con el HTML. Haces un signo de menos que y luego el nombre del elemento sin espacio, luego un signo mayor que, y luego pones el contenido dentro de él, y al final haces exactamente lo mismo excepto pones una slash delante del nombre del elemento. Como puedes ver, tenemos dos divs aquí. Pero si hago clic en guardar, no vamos a ver nada porque estos divs son solo para estructurar básicamente. No veremos nada a menos que definamos estilos en estos divs o pongamos algún contenido en ellos. Lo que voy a hacer es poner, ¿qué debo hacer? Una etiqueta de encabezamiento. La mayoría de las páginas web comienzan con una etiqueta de encabezado, y hay algunas etiquetas de encabezamiento que podemos hacer. Va desde H1, H2, H3, H4, todo el camino hasta H6, tal vez incluso más largo. Creo que H6 podría ser la más larga. Pero H1 es un rubro que se supone que es el rubro de primer nivel. Por lo general, solo tienes un H1 en una página web y solo llamemos a este título de página. Entonces para cerrar esa etiqueta, como mencionamos, misma cosa que lo que hicimos para abrirla, simplemente pusimos un listón delante de eso. Voy a dar clic en “Guardar”, hacer el mismo proceso, venir aquí, recargar la página y boom, tienes un título de página. Lo que vamos a hacer aquí, en este div, es poner una etiqueta p, y p tag sólo significa párrafo. Es cuando pones un poco de texto. Voy a poner, esto es bastante malo pero, bla, bla , bla, pulsa “Guardar”. Tenemos bla, bla, bla. No hay nada realmente especial en las etiquetas p hasta que las juntas, y luego te da división de párrafos. Esto es algo básico que puedes hacer para tener un encabezado, párrafos, tal vez otro encabezado ahí para una subsección donde haces H2, H2, y decir subsección. Voila. Tan solo para conducir a casa la diferencia, porque en este momento estos divs realmente no hacen nada, es que voy a aplicar un estilo. Nos estamos metiendo un poco en CSS ahora, pero no te avises, no tengas miedo. Lo que vamos a hacer aquí es darle un atributo a nuestro elemento. Cómo hacemos esto es que encontramos el último carácter del nombre del elemento, espacio de prensa, y el atributo que vamos a darle es estilo. Vamos a escribir en estilo, igual a comillas dobles abiertas y cerrar comillas dobles. Mi editor de código me da las comillas dobles de cierre ya porque sabe lo que estoy tratando de hacer. Vamos a darle a esto un borde, así que voy a teclear en borde, un px, negro sólido. Ponga un punto y coma para decir que ese es el final de la regla, haga clic en “Guardar”, y verá que la caja ahora tiene un borde que lo hace realmente visible. Lo que podemos hacer aquí, es copiar esta etiqueta de estilo, ponerla aquí, presionar “Guardar”, y luego se puede ver el segundo div. divs son importantes para anidar, podemos hacer estos divs más pequeños, podemos ponerlos uno al lado del otro, y eso nos permite afectar la estructura de nuestra página. Como dije, podríamos pasar horas en HTML, y hay tantos elementos más que podrías aprender, pero este es un curso de visión general. Te acabo de dar un poco de teaser. Puedes sumergirte profundamente en HTML a través de otro curso, o tal vez yo pueda crear uno para ti si quieres. Pero esto debería darte alguna indicación sobre lo que HTML hace por ti. Es básicamente el contenido de tu página web y cómo está estructurada. En el siguiente video, vamos a repasar CSS, que hemos hecho un poco de estilo aquí. Pero ya es hora de algunos CSS, así que vamos a construir encima de lo que hemos hecho aquí con un poco de estilo. 6. CSS: Muy bien, entonces en esta lección sobre CSS, voy a empezar justo donde lo dejamos en el último video. Lo que tenemos aquí es nuestro archivo HTML, y tenemos el resultado de nuestro archivo HTML en nuestro navegador. Ahora, una cosa sobre la que quiero llamar su atención aquí es este enlace a una hoja de estilo externa. Esta es en realidad una etiqueta que no tiene etiqueta de cierre porque no tiene ningún contenido. Simplemente tiene atributos. A lo que quiero decir con eso es que no necesitas ir así para cerrarlo porque no hay nada en el medio, es solo un enlace a una hoja de estilo externa. El primer atributo aquí es rel igual a stylesheet. Eso solo dice que estamos vinculando a una hoja de estilo básicamente, y href es solo la ubicación de la hoja de estilo. En primer lugar, es todo antes de que el styles.css sea una ruta de carpeta por lo que vamos a necesitar crear una carpeta llamada CSS en este directorio. Entonces vamos a necesitar crear un archivo llamado styles.css. Este es solo un parámetro de consulta extra que habla de la versión. En realidad nunca he necesitado usar eso antes, así que vamos a deshacernos de él por simplicidad. Está bien, así que como dije, necesitamos entrar en nuestro directorio de proyectos, necesitamos crear una nueva carpeta llamada CSS. Como puedes ver, todo viene aquí para que pueda ser navegado fácilmente desde nuestro editor de código. Voy a entrar a esa carpeta. En realidad, aquí no creo el nuevo archivo. Vuelvo al editor de código y lo que puedo hacer es crear un nuevo archivo en el editor de código. Antes de escribir cualquier CSS, lo voy a guardar con la extensión adecuada para que nuestro editor de código y nuestro navegador sepan exactamente qué tipo de archivo es este. Como definimos en nuestra etiqueta de enlace allí, creo que fue styles.css, así que hay que llamarlo un punto CSS. Siempre podemos cambiar esto por lo que queramos. No tenemos que ser estilos. Sólo tenemos que actualizar el enlace en documento HTML, pero siempre tiene que terminar en punto CSS. Entonces ahora tenemos nuestro archivo CSS dot. Sí, como podemos ver, esto ahora debería estar vinculado a este archivo HTML porque tenemos esta etiqueta de enlace y esa dirección es CSS. Por lo que entra en la carpeta CSS. En realidad, lo he nombrado con mayúsculas cuando quizás no debería haberlo hecho. Ahora va a CSS, luego va a styles.css, que tenemos ahí. Ahora, ya puedo ver una oportunidad para crear una clase CSS en nuestro documento. Donde viene esa oportunidad está aquí mismo. Tengo dos divs y estoy copiando y pegando código. Esta es una buena lección para aprender para cualquiera que haga desarrollo web. En cualquier momento que estés copiando y pegando mucho código, probablemente haya una forma mucho mejor de hacerlo. En este caso, en lugar de definir estilos particulares en cada uno de estos divs, podemos definir un nombre de clase para ambos divs y luego definir los estilos que se atribuyen a esos nombres de clase en CSS. Ahora, al igual que en HTML, hay tanto que podemos hacer con CSS y podría ser un curso de dos horas por sí solo. Entonces les voy a dar sólo un poco de sabor de CSS en este video. Pero lo que veo aquí es la gran oportunidad para que utilicemos CSS para crear una clase. Ahora para crear una clase, lo que tenemos que hacer es empezar con un punto. Simplemente entra en tu archivo CSS y presiona dot. Entonces podemos nombrar una clase. Yo sólo voy a llamarlo caja. Nombre muy sencillo, pero no necesitamos nada más. Ahora eso define nuestra clase básicamente, pero necesitamos darle estilos, lo contrario no va a hacer nada. Abrimos un corchete rizado [inaudible] y M ya se genera un corchete rizado de cierre para mí. Entonces voy a presionar enter. Lo que podemos hacer es volver a aquí donde tenemos definido este estilo. Agarra eso, ponlo aquí. Ahora cualquier div o cualquier elemento para ese asunto donde pueda tener un borde, en cualquier momento le pongamos esta clase, tendrá un borde de un píxel de ancho, sólido y negro. Hagámoslo ahora. Vamos a quitar todo esto y en lugar de estilo, vamos a tener clase. Recuerda cuando ponemos en la clase, misma convención que antes, con un signo igual y dos comillas dobles, pero en realidad no ponemos el punto. Aquí hemos definido clase. En CSS, definiríamos el punto para asegurarnos de que todo el mundo sepa que es una clase. Pero aquí sólo escribimos en caja. Lo que podemos hacer es copiar eso y reemplazarlo por caja. Ahora se podría pensar, no guardamos tantos personajes. Pero una vez que comienzas a generar montones de estilos, como tal vez quieras poner un min-altura aquí y todo esto. No queremos tener que copiar y pegar ninguno de estos cambios, es sólo un sistema mucho mejor organizado para tener clases. Todos estos heredan los mismos estilos que definimos aquí. Si le doy a esto uno realmente obvio como 500 será súper obvio. Ahora verás todos los divs con el cuadro de nombre de clase, que podríamos llamar casillas, va a ser una altura mínima de 500. Voy a recargar y bam, ahora todo con una caja de clase va a ser 500. Hay algunas otras formas en que puedes apuntar a elementos en esto también. Si quieres apuntar a cada elemento, solo tienes que escribir el nombre del elemento p. Esto va a crear un estilo en cada elemento p. Yo sólo voy a ir de color. Estas reglas de estilo, no las conocerás todas de inmediato, solo las aprendes con el tiempo. No me gusta, oh, ¿cómo se cambia el color del texto? ¿ Cómo se cambia esto? Literalmente sólo Google. Es solo un juego de memoria para muchas de estas cosas. Ponga en un espacio ahí, y hagamos color azul. Ahora puedes ver cada etiqueta de párrafo ahora va a tener este color azul. Lo que podríamos haber hecho aquí es simplemente ir div y cada div habría tenido eso así que eso va a apuntar a cada div. Pero si queremos tener algunos divs que no tengan los estilos y algunos divs que no. Es mejor ser específico y poner un nombre de clase en. Ahora el otro que tenemos es un ID y eso se define con un hash. Sólo se debe dar un ID a un elemento. Tendremos un nombre realmente específico como box1. ¿ Qué debemos hacer aquí? Vamos a darle un color de fondo de negro. Sólo intentémoslo. No va a ser el sitio web más bonito, pero recibes el mensaje. Ahora, lo que tenemos que hacer aquí es darle una de estas cajas, la identificación. Eso es sólo una simple cuestión de ID es igual a caja1. Eso es correcto. Box1 sin el hash porque ya le hemos dado su nombre de atributo. Entra aquí y como negro. Ahora, obviamente tenemos otro problema ahora, que es que el color del texto es negro también, así que no lo puedes ver. Si vamos a tener un fondo negro, no hace falta decir que vamos a necesitar algún contraste en el texto para que podamos cambiar de color a blanco. Ahora a riesgo de entrar en algo que es un poco más complicado, más capacidad de respuesta móvil es muy importante en la época actual del desarrollo web. El modo en que puedes definir estilos en función del tamaño de la pantalla es mediante el uso de etiquetas de medios. Ahora estoy saltando unos pasos adelante aquí porque apenas hemos rayado la superficie con CSS, pero solo quería darte para cuando llegues a esa sección de, ¿cómo hago que mi sitio web respondiera? Es a través de etiquetas de medios. Se puede tener, en la pantalla de medios. Entonces defines. De nuevo, no voy a pasar mucho tiempo en esto. Solo te estoy mostrando un ejemplo, max-width, 500 pixels. Entonces abriremos los corchetes rizados y luego necesitamos poner otra cosa aquí. Otra cosa con CSS es cuanto más específica sea la regla, más anulará otra regla. Digamos por ejemplo, que tenemos aquí arriba, no eran muy específicos aquí solo estamos diciendo que todas las p son azules. Si estoy siendo más específico y diciendo que max-width 500 de la pantalla, puedo poner en otra regla. Cuando la pantalla esté por debajo de 500 píxeles de ancho, esta regla anulará esta regla aquí arriba. Voy a ponerlo rojo en su lugar. Voy a recargar la página y no puedes ver nada diferente. Pero si voy a cambiar el tamaño de la ventana, mira eso. De repente, a los 500, el texto cambia a rojo. Eso no es tan práctico de una aplicación, pero puedes entender el concepto, al menos que las consultas de medios te permiten cambiar el estilo de tu página web en función de lo grande que es la pantalla. Muy bien, así que esperemos que eso explique un poco CSS. Nuevamente, mucha profundidad en la que puedes entrar en CSS. No tenemos mucho tiempo para cubrir todas las diferentes cosas que puedes hacer con CSS. Esperemos que esa fuera una buena visión general. En el siguiente video, vamos a hablar del guión final diferente o de una pieza de código que quieres tener en tu front end, y eso es JavaScript. Tengo muchas ganas de verte en el próximo video. 7. Javascript: Muy bien, entonces en este video vamos a hablar de JavaScript. Vamos a saltar justo donde lo dejamos igual que hicimos en el último video. De lo que nuestro documento HTML tiene aquí que tenía antes para CSS, aquí mismo tenía una etiqueta de enlace a CSS la cual definía dónde poner nuestro archivo CSS. Aquí mismo podemos ver una etiqueta de script en nuestra sección de cuerpo que nos da un camino para poner nuestro JavaScript. Voy a seguir lo que dice la plantilla aquí y voy a ir a mi directorio de proyectos que está aquí. Voy a hacer una nueva carpeta, llamarla js, que por cierto, esta es una convención estándar para poner tus archivos HTML en la raíz. A esto se le llama la raíz del directorio. Después pon tus archivos CSS en una carpeta CSS y pon tus archivos JavaScript en una carpeta JavaScript. Voy a volver a aquí para generar un nuevo archivo. Haga clic en Nuevo archivo. Voy un poco más rápido esta vez porque ya hemos repasado esto, así que ojalá eso esté bien para ustedes. Lo que voy a hacer aquí es, Guardar como y voy a entrar en JavaScript. Olvidé realmente cómo lo llamaban. Lo llamaron guiones dot js. Voy a volver aquí, Guardar como, entrar en js, copiar a través de eso. No lo hace, copiar y pegar, así que tengo que escribirlo. Fue sólo guiones dot js. Enfriar. Ahora todo el mundo lo sabe, el navegador lo sabe, el Editor de Código lo sabe, ese es un archivo JavaScript. Los archivos JavaScript terminan en dot js. Para que quede claro, no tenemos que seguir estos caminos, podría cambiar nada de esto, pero sólo tiene que coincidir con donde se almacena el archivo. Es solo un enlace al archivo donde quiera que esté. Yo sólo estoy siguiendo la convención aquí porque es bastante convención estándar de acciones. Ahora, antes de que realmente escribamos algo de JavaScript, es importante saber qué es JavaScript en realidad. JavaScript es un lenguaje de programación. JavaScript es el lenguaje de programación front-end interactivo. A lo que quiero decir con eso es que se entrega con el front end. En cualquier momento que interactúes con una página, haces clic en algo y algo se abre. Eso es JavaScript trabajando para ti, a menos que por supuesto, vuelva a cargar la página, en cuyo caso eso probablemente esté enviando una solicitud al servidor la cual está escupiendo el HTML, CSS y JavaScript de nuevo. Solo estoy tratando de pensar en lo que es una cosa pesada de JavaScript que podríamos ver. Hojas de Google, por ejemplo y Gmail y todo eso, son aplicaciones en tiempo real. Toda la interacción que se hace aquí es JavaScript porque como puedes ver, todo es tiempo real. Si hago click en esto y esto, y doy click en aquello y eso se esconde y eso muestra. Doy click en eso, se abre esto. Define cómo interactúas con una página web. Como puedes ver, como estoy haciendo todo esto, la página web no se está recargando, es todo JavaScript. ¿ Qué significa eso para nuestro proyecto? Significa que aquí podemos manipular algunas de estas cosas o poner en marcha otras funciones. Uno de los más básicos que podemos hacer es un registro de consola. Un registro de consola es ideal para escupir variables o cualquier otra cosa que necesites comprobar cuando estás haciendo desarrollo de JavaScript. Sólo voy a apagar un registro de puntos de consola y decir Hola mundo. Probablemente no entiendas el propósito detrás del registro de la consola en este momento, pero cuando se trata de depurar más adelante, es realmente importante. Voy a poner mi navegador por ahí, abrir herramientas de desarrollador y lo que voy a hacer es porque lo tenemos, lo voy a poner al fondo para que podamos ver todo. Lo que puedes hacer es pasar por la consola aquí y recargar. Se presenta con Hola mundo. Pero sé que eso no es realmente práctico. Pero digamos, por ejemplo, que querías comprobar si una función se estaba disparando o algo así, podrías poner inicio de sesión hola consola ahí. Entonces puedes empezar a hacer cosas de programación como definir una variable. Diría var x, llame x, Hola mundo. Entonces en lugar de iniciar sesión explícitamente Hola mundo, podrías registrar x y obtienes exactamente lo mismo. Cuando estoy depurando, me gusta decir, por ejemplo, si estaba tratando de encontrar el valor de x, escribiría algo así como, x como una cadena. Si pongo estas marcas de cotización a cualquiera de los lados, eso significa que solo estoy sacando lo que haya escrito ahí. Entonces una coma permite poner otra variable o trozo de cuerda ahí. Una cadena es solo texto como lo descubrirás. Entonces así puedo ver x es Hola mundo. Ahora, otra cosa que puedes hacer, que en realidad podemos ver sucediendo en nuestro navegador es una alerta. Esta es una de las cosas más básicas que puedes hacer en JavaScript también. Voy a recargar la página y te dan una alerta diciendo, hola mundo. Cada vez que recargues la página , volverá a aparecer. Ahora, en realidad lo usemos para interactuar con esta página porque honestamente lo que estamos haciendo aquí, solo definiendo una variable y luego apagándola, no es realmente interactuar con nuestra página web. Lo que podríamos hacer es, y te animo a que hagas esto también, solo dirígete a Google y pregúntale a Google cómo hacer las cosas. Esta es en realidad una habilidad realmente importante como desarrollador. Los desarrolladores no recuerdan cómo hacer todo y muchas veces se olvidan, a veces tenía que hacer algo. Hay mucha documentación en línea y esas cosas. Se supone que no debes recordar absolutamente todo. Si alguna vez olvidas cómo hacer algo o solo quieres aprender a hacer algo de inmediato. Si escribes una buena pregunta en Google, obtendrás una buena respuesta y sabrás cómo hacerlo. Digamos, cómo ocultar y elemento con JavaScript. Puedes escribir js seguro. Voy a cargar la página. JavaScript, show hide element. Echemos un vistazo a este. Este sitio web es un sitio web de Stack Overflow. Si alguna vez tienes un problema, puedes ir a ver cuáles han sido los problemas de otras personas y ver cómo lo han resuelto. Si tienes un problema similar, te da ideas sobre cómo resolver tu problema en particular. Lo que podemos hacer aquí es, voy a copiar esta parte aquí. En realidad voy a copiar esto. Voy a volver a nuestro proyecto aquí. Voy a entrar en nuestros guiones y vamos a explicar lo que tenemos aquí. Pero antes que nada, en realidad antes de que te expliquemos, voy a modificar esto. Voy a guardar eso y voy a presionar recarga. Ahora, ¿qué ha pasado aquí? JavaScript es lo que se llama un lenguaje orientado a objetos. Lo que eso significa es que podemos apuntar a elementos anidados poniendo puntos entre ellos. Nuevamente, no te abrumes por esto, solo estoy tratando de explicar lo que está pasando aquí. Es básicamente, empezamos con el documento, que es nuestra página web justo aquí. Tenemos un punto y este método es get element by ID, que solo encuentra nuestro elemento basado en un ID. Recuerda que configuramos aquí un ID para este div, ID box uno. Lo que necesitamos hacer es poner en una cadena, que recuerden, una cadena es solo texto aquí y nos apuntamos a la casilla uno. Ahora estamos en este elemento y dentro de este elemento podemos apuntar al estilo. Estamos en estilo ahora por lo que necesitamos otra cosa y es decir, dentro del estilo podemos apuntar a un atributo llamado display. Entonces podemos ponerlo a ninguno usando un signo igual. Otra cosa importante a saber en programación, sé que estoy tirando un montón de cosas aquí ya que lo estoy pensando, eso es un solo igual es asignación. Si estuvieras haciendo una comparación, por ejemplo, si digamos x, sé que aún no tenemos esta configuración variable, pero si x es igual a uno, harías dos iguales. Esto se parece más a lo que se te ocurriría con iguales. Igual en lenguajes de programación como JavaScript es asignaciones. Sólo estamos diciendo, asigne esta parte a esta parte. Como puedes ver, se establece la propiedad de estilo de lo que tenga el ID de la caja uno a ninguno. Lo que podemos hacer es poner esto en bloque, que es otro valor posible y vuelve a aparecer. Eso nos da la oportunidad de editar cosas basadas en la lógica. Ahora mismo solo lo está escondiendo, lo cual realmente no necesita. Pero lo que podríamos hacer es poner en un condicional, que sería, digamos por ejemplo, si algo fuera el caso, ocultar la caja. Sin entrar en mucho detalle aquí, solo pongamos un comunicado que definitivamente no es cierto. Si uno es mayor que dos, mostrar ninguno. Obviamente uno no es mayor que dos, por lo que no va a hacer eso. ¿ Es uno menos de dos? Sí, lo es. No lo muestres. Ahora sé que este es un ejemplo primitivo, pero no podemos meternos en un resumen completo de JavaScript en este video. Pero lo importante a saber aquí es que aquí tenemos nuestro documento HTML. Se vincula a una hoja de estilo, que es donde está nuestro CSS, que define nuestros estilos. También está vinculado a nuestro JavaScript donde podemos definir el comportamiento de front-end programático. Podríamos tener, por ejemplo, si alguien hace clic en esto, esto sucede. Si una caja es de cierto tamaño, esta otra caja no debería aparecer. Cosas así. Cualquier cosa que realmente puedas pensar en términos de lo que aparece en el front-end o con lo que el usuario está interactuando o lo que has visto en otros sitios web. Simplemente haz lo que hemos hecho en Google. Sé que utilicé parte de mi experiencia para averiguar qué parte de la página web copiar. Si hiciste un poco más de excavación y esto es algo que aprenderás con el tiempo, es cómo usar Google como desarrollador. Aquí se puede ver que lo están haciendo también. Documentar, obtener elemento por ID, asignando eso a una variable, y luego cambiando eso. Pero sí. Básicamente, puedes hacer una cantidad infinita de cosas con JavaScript. Para ser honesto, usar un framework como jQuery, que vamos a entrar en el siguiente video, es realmente poderoso y te ayuda a simplificar realmente lo que haces con JavaScript en cuanto a manipular HTML. En el siguiente video, quiero mostrarte jQuery, que es un popular framework JavaScript. También quiero mostrarte Bootstrap, que es un popular framework CSS. Una vez que ponemos en estos marcos, que van a hacer mucho del levantamiento pesado para nosotros y hacer las cosas mucho más fáciles, empezarás a ver que podemos desarrollarnos más rápido y más fácil y muchos desarrolladores realmente se desarrollan de esta manera. Es importante que sepas que estos frameworks existen y cómo empezar con ellos. Tengo muchas ganas de verte en el próximo video sobre frameworks. 8. Marcos: Bienvenido de nuevo. En este video, vamos a hablar de frameworks, qué frameworks, y cómo nos ayudan a desarrollar para la web. Upwork tiene un buen artículo sobre frameworks. Seguro que si buscas esto en Google, probablemente lo encuentres, de lo contrario, aquí está la URL directa. Lo que me gusta de este artículo es que comparte las características principales de un marco de aplicación web y también comparte algunos ejemplos comunes de frameworks que los desarrolladores web reales realmente utilizan las características principales de un marco de aplicación web, bibliotecas, API, Andamios, Ajax, Caching, Seguridad, y Compiladores. Dependiendo de dónde estés en tu viaje de aprender a codificar, algunas de estas podrían no tener ningún sentido, tal vez todas podrían no tener ningún sentido y eso está bien. El mejor modo de pensar en un marco es que realmente es un marco. Es un montón de código que ya está configurado para que te desarrolles. Se encarga del levantamiento pesado en ciertas áreas para que puedas enfocarte en las partes totalmente personalizables de tu código. Técnicamente todo es personalizable, pero el marco está configurado para que no tengas que hacer cosas de funcionalidad común una y otra vez. Hablamos de la autenticación, por ejemplo, en un video anterior. Eso es algo que es bastante común en muchas aplicaciones web y sitios web diferentes. Tiene sentido que, eso se convierte en parte del marco y luego otras cosas que te ayudarán a desarrollarte más rápido. Hay una curva de aprendizaje extra con aprender un marco porque hay que aprender a desarrollarse en ese marco. Pero normalmente te ahorra mucho tiempo y muchos dolores de cabeza y sobre todo en el front end, usando un framework CSS y un framework JavaScript, creo que es una muy buena idea. Estoy a punto de mostrarles dos frameworks que uso y que son muy populares. Pero antes de sumergirnos en estos frameworks front-end, quería hablar de estos frameworks backend. Si has hecho algún estudio sobre Python, probablemente hayas oído hablar de Django, que es, creo que el marco más popular para Python, definitivamente es uno muy popular. Si alguna vez has mirado a Ruby para el desarrollo web, probablemente hayas oído hablar de Ruby on Rails, pero hay otros frameworks que puedes usar como Sinatra y para PHP, también hay un montón de frameworks. Código encendido que he usado antes, y sé que Ravel es muy popular. Lo que quiero hacer es mostrarte dos frameworks que uso con mayor frecuencia. Vamos a descargarlos a nuestro proyecto y vamos a empezar a usarlos de inmediato porque como de costumbre, la mejor manera de aprender un concepto es entrar y hacerlo. El primero que quiero mostrarte se llama Bootstrap. Si escribimos Bootstrap CSS en Google, se nos ocurrirá Bootstrap, que es un framework CSS. Bootstrap es realmente potente para crear sitios web receptivos. Pero también proporciona un montón de estilos ya ahí para crear componentes. En primer lugar, las cosas responsive, como se puede ver aquí, tenemos div y trabajamos con div en la lección sobre HTML y CSS. Pero en lugar de construir nuestras propias clases, podemos simplemente adjuntar una clase de inmediato de la columna media 1. Cómo funciona Bootstrap es eso como un sistema de 12 columnas. Si fuera a poner seis ahí, eso significaría que es la mitad del ancho de la página y si fuera a poner tres ahí, eso va a ser un cuarto del ancho de la página. Se puede empezar a, aquí algunos otros ejemplos. Esto va a ocupar ocho columnas, esta división, y ésta va a ocupar cuatro columnas. Eso te ayuda a construir estos contenedores sensibles a fluidos y al hacerlo de forma columna. Pero también lo que hace Bootstrap es que te da componentes, puedes venir aquí abajo y ver cualquier número de componentes diferentes que tenga. Si querías hacer una barra de progreso que se viera exactamente así, puedes hacerlo con Bootstrap, solo necesitas descargar Bootstrap, vincularlo a tu proyecto, y luego podrás construir una estructura como esta con unos pocos clases para decirle a HTML qué clase ir tras en Bootstrap y luego, boom, tienes una barra de progreso que se ve así. Como siempre digo, empezarás a entender más sobre cómo funciona esto como realmente lo usamos. Pero hay otro marco que quiero presentar antes de que nos atasquemos en nuestro proyecto, y ese es jQuery. jQuery es un framework JavaScript. sé, solo hace que hacer JavaScript sea mucho más fácil e intuitivo, al menos para mí lo hace. Lo que podemos hacer con jQuery es que podemos manipular el DOM usando jQuery. Para aquellos de ustedes no saben qué es el DOM, su sinónimo de Document Object Model. Simplemente significa tu estructura de tu página que has definido aquí con HTML. Podemos usar las clases que utilizamos en CSS. Ya viste antes cómo definimos un ID con un hash y definimos una clase por un punto. Puedes usar esos selectores en jQuery para encontrar un elemento dirigido y luego cambiar un atributo en él como, es HTML. Eso es muy poderoso y verás en tan solo un segundo, cómo lo vamos a usar. En el siguiente video, porque este se ha hecho un poco largo, te voy a mostrar estos frameworks. En el siguiente video, te voy a mostrar una demo en vivo de usar estos frameworks. Creo que empezarás a entender cómo realmente nos ahorran tiempo y mucho más intuitivo de usar. Este video se está haciendo un poco largo, así que lo voy a romper en el siguiente video. Vamos a seguir adelante con el demo. 9. Bootstrap: En el último video hablamos de frameworks y presenté dos frameworks que uso comúnmente, que fueron Bootstrap y jQuery. En este video, quiero hablar de Bootstrap específicamente. Vamos a descargar Bootstrap y en realidad vamos a empezar a jugar con él. Si vas a la página de inicio de Bootstrap, que creo que es getbootstrap.com, puedes hacer clic en el botón “Descargar Bootstrap”, y solo podemos descargar Bootstrap haciendo clic en este botón aquí. Voy a encontrar mi directorio de proyectos y voy a dar clic en “Guardar”. Volviendo a mi ventana de buscador, voy a abrir esto porque este es un archivo zip. Voy a hacer doble clic en él, se va a extraer. Puedo tirar el archivo zip. Si miramos dentro de la carpeta, podemos ver una estructura similar a la que ya tenemos. No necesariamente tenemos fondos, pero han organizado su CSS y JavaScript exactamente de la misma manera que tenemos. Lo que no mencioné necesariamente fue que Bootstrap también tiene JavaScript, pero por ahora solo queremos usar su archivo CSS. Entra en CSS, y aquí mismo, bootstrap.css es el archivo que buscamos. Solo voy a hacer clic en arrastrar eso para moverlo a la carpeta CSS. No sé por qué está apareciendo así. Pero si vamos hacia atrás, ahora podemos eliminar el resto de los archivos Bootstrap. Si entramos a nuestro editor de código, ahora tenemos Bootstrap en ellos. En realidad podemos hacer click en él y mirarlo. Es un archivo largo y está lleno de un montón de estilos diferentes, un montón de reglas diferentes y esto es lo que hace que Bootstrap funcione. Pero la buena noticia es que no tienes que saber todo esto. Solo necesitas saber cómo usarlo. Voy a cerrar eso. Hay otro paso que debemos hacer antes de poder empezar a usarlo en nuestro proyecto, y eso es enlazar a esa hoja de estilos. ¿ Recuerdas cómo nos vinculamos aquí a nuestro styles.css? Bueno, tenemos que hacer eso otra vez. Lo que voy a hacer es que voy a copiar eso presionando Comando C, nueva línea Comando V, o el equivalente en una computadora con Windows y todos los detalles van a ser los mismos que establecer el nombre del archivo es diferente, así que voy poner aquí bootstrap.css Quiero que veas de cerca mientras actualicemos la página porque va a haber algunos cambios de inmediato. Si vuelvo a cargar, se puede ver que el estilo de nuestra página ya ha cambiado. En este caso, sabemos que ya funciona Bootstrap. ¿ Cómo usamos Bootstrap? Bueno, aquí mismo está la documentación. documentación es solo el término técnico para que lo puedas pensar como un manual o simplemente toda la información que necesitas saber para poder usar un framework o una pieza de software. Aquí podemos definir las columnas como mencionamos anteriormente, pero lo que podemos hacer aquí, que creo que será un poco más divertido, es copiar a través de algún componente. Se puede ver con qué rapidez podemos conseguir que aparezca un sitio web estilizado en nuestra pantalla. Voy a ampliar la ventana para poder ver aquí la barra de menús y voy a bajar al encabezado de página. Voy a derrumbar esto otra vez. ¿ Dónde está? Aquí está. Voy a eliminar todos nuestros divs que tenemos hasta ahora, así que seleccionando todo eso y borrándolo. Tenemos un documento básicamente en blanco. Lo que quiero hacer es empezar a construir nuestro documento de nuevo, pero usando elementos Bootstrap. Para obtener este encabezado, podemos copiar esto y ponerlo directamente en. Ahora bien, copiar y pegar a veces no funciona, por lo que debes tabular tu contenido para que se vea tan bonito como aquí. Si recargo la página, tenemos un encabezado y podemos agregar cualquier cantidad de componentes aquí. Yo puedo ir a esta cosa que ellos llaman jumbotron. Suena bastante guay. Copiaré ese código y luego lo pondré después de nuestro encabezado de página div. Voy a dar clic en “Guardar”, y luego sale. Ahora el relleno está un poco apagado y eso es porque no hemos usado otra característica de bootstrap, que es un contenedor. Lo que necesito hacer es envolver todo esto que acabamos de crear en un contenedor. Esto es todo, por supuesto, una elección personal. Depende de ti cómo le das estilo a tu página web. Pero todo lo que necesitamos hacer es conseguir un div y darle una clase de contenedor. Voy a sangrar eso así que es obvio que está dentro de este div padre, y luego voy a cerrar la etiqueta div, cerrando. Ahora quiero que vigilen de cerca. Voy a abrir la página y ver como actualizamos la página. Ahora lo hemos puesto en un contenedor, que mirándolo en una pantalla grande, simplemente le da más relleno a los lados, y luego cuando lo miramos en una pantalla más pequeña, el relleno se encoge, y luego si lo íbamos a mover así, es sensible, que dependiendo de cómo escribas tu código, es un enorme ahorro de tiempo. Ahora tenemos este encantador contenedor. Tenemos este encantador encabezado de página el cual podemos editar cualquiera de esto por cierto, podemos volver aquí y en esta etiqueta H1, podemos decir, “Nuestro sitio web impresionante”. Cuál sería el subtexto para nuestro impresionante sitio web, “El mejor sitio web de la historia”. Entonces di, en lugar de decir hola mundo, “Hola y bienvenidos”. Entonces en nuestra etiqueta p, “Este es el sitio web más grande que jamás verás”. Reclamación en negrita el. Ya tienes todo esto cambiado. Se puede cambiar el texto en el botón también entrando aquí, voy a expandirme y entre las etiquetas a, que es solo una forma de definir un enlace, se puede poner el texto que quieras aquí. En lugar de aprender más, podemos decir, “Empieza ”, en cambio, guarde eso. Mueve eso a un lado, refresca y de repente podrás ver cómo funciona Bootstrap para nosotros. Ahora si lo codificáramos nosotros mismos, sería mucho más largo porque tendremos que definir todos estos estilos nosotros mismos. Sólo para demostrar lo que Bootstrap está haciendo por nosotros, si nos quitáramos estas clases, ¿cómo sería nuestra página web? Voy a deshacerme de esa clase y a refrescar la página. Sí, todavía se ve bien, pero ahí no hay frontera, no hay relleno. Para un efecto más dramático, podría deshacerme de esta clase aquí en jumbotron. volver, no hay relleno grande, no hay color de fondo. Bootstrap está sumando todo eso. Espero que puedas empezar a ver cómo bootstrap está haciendo este proceso de desarrollo de sitios web receptivos que se ven bastante cool. Creo que este es bastante buen diseño, y lo hacen mucho más fácil. Te animo a que descargues Bootstrap y solo comiences a jugar con él. Copia y pega algunos de estos diferentes bits de código en y si alguna vez te gusta, digamos por ejemplo, quería construir un formulario y que se vea bien, podrías buscar forma y luego puedes bajar a formularios, y puedes poner en bonito botones, tienen estas diferentes pestañas, todo tipo de cosas, y obtienes todos estos componentes con estilo justo fuera de la caja con Bootstrap. Creo que he dejado claro mi punto ahora de justo cuánto te da tanto un framework como Bootstrap y te ahorra tanto tiempo si quieres crear una app y darle estilo. En el siguiente video, vamos a hablar del otro marco que realmente me encanta, y ese es jQuery. 10. Jquery: En el último video, usamos un popular framework CSS llamado Bootstrap para agilizar cómo creamos nuestras páginas web y pudimos crear componentes como este con una pequeña cantidad de código y todo se trata de cómo estructuramos nuestro documento y también poniendo diferentes clases en nuestros elementos para heredar algunos de estos estilos directamente de Bootstrap. En este video, vamos a repasar de jQuery muy brevemente por cierto. Hay mucho que puedes hacer con jQuery. Pero jQuery, si vamos a su sitio web que es jQuery.com es una biblioteca JavaScript, técnicamente no es un marco. Es una biblioteca donde se puede escribir menos código y hacer mucho con ella. Si nos desplazamos hacia abajo en la página de inicio, podemos echar un breve vistazo a las tres características principales de jQuery. Uno siendo DOM Traversal y Manipulación. Eso suena elegante pero básicamente lo que DOM representa es modelo de objeto de documento y esencialmente lo que un modelo de objeto de documento es justo lo que tenemos aquí. Tenemos diferentes elementos y está estructurado de cierta manera. Este DIV por ejemplo está anidado dentro de este DIV y tenemos esta etiqueta de encabezado dentro del DIV. Básicamente puedes pensar en nuestra estructura HTML como nuestro modelo de objetos de documento. Lo que jQuery nos permite hacer es manipular nuestros elementos. Podemos apuntar a un elemento en particular usando un selector jQuery y luego podemos llamar a un método para cambiar algo. En este caso, veremos este botón con la clase continue y luego cambiaríamos el HTML al siguiente paso, dot-dot-dot. La segunda característica para la que jQuery es realmente buena es el manejo de eventos. Manejo de eventos, básicamente un evento es cualquier cosa donde algo sucede en la página por lo que podría hacer clic en este botón. Eso es un evento, incluso yo moviendo mi ratón por ahí puede ser un evento, yo haciendo clic derecho, me desplazando a cierta posición en la página, estos son todos yo interactuando con la página web y eso se considera un evento. En cualquier momento que ocurra un evento, lo que podemos hacer es programar con jQuery para que suceda algo más. En este ejemplo en el que vamos a crear un ejemplo similar en nuestro proyecto es si se hace clic en algo, por lo que en este caso un botón dentro del contenedor de botones. Si se hace clic, entonces se mostrará esta caja oculta. El tercero que podemos hacer con jQuery es Ajax. Ajax es un concepto un poco más avanzado pero es una forma que podemos llamar a un script local en el servidor. Básicamente podemos acceder al backend y agarrar datos sin tener que recargar la página y usar código back-end. No te preocupes demasiado por Ajax todavía pero es muy potente una vez que comienzas a entrar más en jQuery. En la página web de jQuery, quiero que haga clic en el “botón Descargar”, y en la página de descarga, encontraremos un enlace al jQuery de producción comprimida. En primer lugar vamos a dar un click en él. Parece galimatías porque ha sido lo que se llama minificado para convertirlo en un archivo más pequeño. Pero si quisiéramos ver cómo se ve realmente, podemos dar click en el siguiente archivo y luego podemos ver todo un montón de JavaScript con comentarios ahí dentro describiendo lo que está pasando. No se espera que entiendas nada de esto por cierto. Whoops, necesito volver a eso. Podemos volver aquí y podemos simplemente descargar este y no te preocupes por el número de versión nunca, esto va a subir constantemente cada vez. Simplemente haga clic derecho en él y haga clic en “Guardar enlace como”. Este seremos un archivo JavaScript y solo necesitas ir a tu directorio de proyectos e ir a tu directorio de JavaScript que es donde guardas todo tu JavaScript para tu proyecto y haz clic en “Guardar”. Se puede ver aquí ya apareciendo. Puedes mirarlo en tu editor de código pero no tendrá ningún sentido porque está minificado, lo que por cierto se demuestra con este punto min dot JS. Si descargamos éste por ejemplo, si abro éste en una pestaña nueva, no tiene ese punto min en él. Se puede ver todo el archivo sin comprimir. Pero para nuestros propósitos realmente no necesitamos mirar el código para que solo podamos tenerlo minificado. Ahora, al igual que hicimos con CSS, hay una cosa más que debemos hacer para incluirla en nuestro proyecto y es referirla con esta etiqueta de script. Al igual que lo hemos hecho de antemano, voy a copiar eso. Voy a ponerlo arriba porque quiero que mi jQuery se cargue antes usarlo usando mis propios scripts y solo voy a hacer clic derecho aquí y renombrar esto para poder copiar y pegar el nombre, ahorrarme un poco de tiempo. Cerraré esto y volveré aquí y está en la misma foto, solo necesitamos cambiar el nombre del archivo. Ahora, esto se va a incluir y si recargamos la página, aún no vamos a notar nada porque en realidad no hemos usado ningún jQuery. Lo que voy a hacer es entrar en scripts, eliminar esto porque ese elemento cuadro 1, ya ni siquiera lo tenemos en nuestro proyecto así que esto prácticamente no hace nada. Voy a retroceder eso y lo que voy a hacer es empezar con algo que es realmente común en jQuery y no te preocupes, voy a explicar qué es esto en tan solo un momento. Pero voy a escribir en dólar signo documento punto listo. Función de corchetes abiertos, abrir y cerrar corchetes, espacio. Corchetes rizados, vayan al final, pongan un punto y coma y dentro de aquí, voy a poner consola dot log jQuery cargado y luego terminar eso con un punto y coma. Vamos a refrescar la página de este lado después de hacer clic en “Guardar”. ¿ Cómo sabemos si está funcionando? Porque esencialmente acabamos de hacer un registro de consola. En realidad no está cambiando nada en la página. Pero si recuerdas las herramientas de desarrollo con las que trabajamos justo al principio de nuestro video, podemos abrirlas. Estoy en un Mac así que presiono opción Comando I en Chrome y ya podemos ver la consola abierta. Probablemente tenía mi consola abierta antes. Probablemente se te ocurra esto y luego haces clic en “Consola” y puedes empezar a ver tu consola de JavaScript. En este momento tenemos un error y el error es signo de dólar no está definido. ¿ Qué hemos hecho mal aquí? Déjame volver. Mencioné que debimos haber puesto esto primero pero no lo hicimos. Entonces voy a cortar y pegar eso y ponerlo donde se supone que vaya arriba. Esto es importante más bien concepto para entender es el orden de sus archivos. Si empiezo a usar signo de dólar que todo esto es un selector de jQuery y un método jQuery, si empiezo a usar eso antes incluso de haber cargado jQuery, así como era antes donde estaba debajo. Donde estaba debajo. Esto se está cargando antes de que incluso el jQuery se esté cargando, así que es por supuesto que tiene un error. Así que asegúrate de que eso esté arriba. Recarga la página, y dice jQuery cargado. Ahora sabemos que jQuery está funcionando, pero ¿qué es esto? Básicamente, la primera parte de esto es el selector, y la segunda parte es el método. En el modelo de objetos de documento, somos capaces de apuntar a todo el documento mediante el uso de una variable llamada documento. El convenio con selectores jQuery siempre va, $, corchetes abiertos, y luego lo que sea que quieras seleccionar. Entonces cerrarías tus corchetes, pondrías un punto para definir tu método. En este caso, tenemos un método listo, que básicamente, hace que esta función se active siempre que esto esté listo. Entonces hemos seleccionado documento, y luego cuando esté listo, vamos a lanzar esta función. De nuevo, probablemente te estoy tirando debajo del autobús aquí, pero veremos en solo un segundo cómo esto es poderoso. No solo queremos hacer una sesión de consola, eso solo nos ayuda a determinar si jQuery está funcionando o no. Lo que podemos hacer, es en lugar de hacer ese registro de consola, realidad empezar a manejar un evento en la página y en realidad hacer algo que tenga un poco más de sentido. Lo que voy a hacer es seleccionar uno de nuestros objetos en nuestra página usando un selector jQuery, y lo que es genial de los selectores jQuery, es que podemos apuntar a elementos de la misma manera que nos apuntaríamos con styles.css, con CSS, lo siento, en general. Por lo que podemos apuntar a elementos de un determinado ID mediante el uso de hash, y podemos apuntar a elementos de una determinada clase mediante el uso del punto. Entonces lo que voy a hacer, en realidad ya no tenemos estos, así que es bastante inútil, bien podría simplemente borrarlos. Ya no tenemos esos, pero lo que sí tenemos son estos diferentes elementos. Lo que puedo hacer aquí es apuntar a este div en particular por su clase. Como te mostré antes, podemos hacer punto para decir que es una clase, y luego podemos decir cabecera de página. Creo que eso fue lo que fue. Encabezado de página, sí, eso es correcto. Ahora hemos seleccionado todos los elementos con el encabezado de página de clase. En este caso sólo hay uno, así que podemos entrar aquí, y podemos manipular el HTML igual que el ejemplo que vimos en la página web de jQuery. Siempre que estemos escribiendo solo texto sin procesar, necesitamos tener comillas simples o comillas dobles, así que lo que voy a hacer aquí es solo poner hola, y poner un punto y coma en el extremo para terminar esa función, y de repente, el totalidad del encabezado de mi página ha sido reemplazado por hola, lo cual no es tan genial. Creo que probablemente una mejor idea para dejarlo. Pero eso sólo va a mostrarte cómo número 1, voy a volver a poner esto arriba. Cómo número 1, podemos seleccionar un elemento y luego podemos manipularlo. Esto es muy poderoso. Podemos poner todo tipo de lógica aquí, como lo haríamos usando JavaScript. Pero donde jQuery realmente ayuda es tener estos selectores y estos métodos para manipular fácilmente. Ahora, podría estar hablando por encima de tu cabeza en este momento, pero solo quiero mostrarte exactamente para qué es genial jQuery. Lo que quiero hacer es un mango común, un evento común, que es un click. Entonces lo que voy a hacer para que esto sea un poco más fácil, es que voy a bajar a este botón, que es la etiqueta A aquí, y a lo que voy a hacer se le dé una identificación, que podamos apuntarlo muy específicamente. Voy a llamarlo, Botón Empezar. Entonces esto tiene clase ahora. Ahora lo que voy a hacer, es que voy a configurar un manejador de eventos, y cómo lo haces es que primero apuntes al elemento. Entonces voy a hacerlo, en realidad, hay algunas formas de hacerlo, pero te voy a mostrar de esta manera. Voy a agarrar el botón Get Start. Puse un hash porque es una identificación. Voy a seleccionar el botón Empezar. Voy a hacer el método on, y luego lo primero que voy a decir es Click, porque ese es el evento que queremos manejar. Entonces la segunda parte será la función. Entonces, ¿qué va a pasar cuando el clic realmente se desencadene? Al final voy a poner un punto y coma porque estamos usando JavaScript. Aquí mismo, puedo hacer cualquier cantidad de cosas que quiera, pero hagamos algo tonto sólo por el bien de ello, y ocultemos el encabezado de página. Podemos agarrar esa clase, y luego podemos usar otro selector jQuery para put.page-header.hide. Ocultar es un método que puedes usar. Es un método jQuery, y es simplemente muy fácil. Simplemente lo selecciono, y luego puedo pont.hide y luego lo esconderé. A ver si funciona. Voy a refrescar nuestro proyecto, click en el botón Empezar, y hemos escondido el encabezado de la página. Ahora, sé que eso no es realmente muy práctico, así que lo que voy a hacer es dar un mejor ejemplo. Es decir, voy a poner aquí algún texto oculto. Empecemos con una etiqueta p, señalando la p, y vamos a poner oculto. Bueno, digamos que esta es la respuesta a tu problema. Ahora bien, si solo guardamos eso, y actualizamos la página, aparecerá. Aparecerá por defecto, que es lo que probablemente esperabas. Pero si queremos que se oculte al principio, lo que haremos es añadir un atributo a esta etiqueta p, estilo igual, comillas dobles, y dentro podemos hacer una pantalla ninguna. Guarde eso, refresca la página, y no hay párrafo ahí. Otra cosa que quiero hacer es darle a esto una identificación para que pueda apuntarlo específicamente, y voy a llamar a este texto oculto. Ahora tiene una identificación, y tiene un estilo que le está diciendo que no se muestre cuando la página se carga por primera vez. Lo que puedo hacer es que puedo apuntarlo aquí, mediante el uso de su ID, que es texto oculto. Es una identificación, así que usaré hash. Ahora he seleccionado el texto oculto, y lo que haré es usar un método, uno muy sencillo en jQuery, que es.show. Entonces guarde esa página, refresque. Todavía no verías nada, pero ¿qué pasa cuando hacemos click en el botón? Los textos ocultos que pusimos a mostrar como ninguno en nuestro HTML ahora han sido manipulados usando jQuery. Este es un ejemplo muy básico de lo que podemos hacer con jQuery. Hay tantas cosas que podemos hacer con jQuery. Solo quiero que pienses en todas las diferentes formas en que podrías manipular una página web o manejar eventos. Entonces podríamos hacer algo que si hago clic en este rubro, algo pasa o si me desplazo algo pasa. O podríamos averiguarlo, podríamos hacer problemas matemáticos y todo tipo de cosas aquí y básicamente podemos hacer un número infinito de cosas usando jQuery para apuntar a elementos y luego manipularlos. Entonces también podemos combinar eso con manejadores de eventos como lo hemos hecho aquí, y básicamente podemos manipular el DOM, manipular nuestro documento basado en cómo interactúa la persona con la página web. Ahora, por supuesto, puedes hacer esto con solo JavaScript, no necesitas jQuery. Pero estos selectores y estos métodos lo hacen mucho más fácil hasta el punto en que puedo entrar con confianza aquí y apuntar a otro elemento si solo le damos a esto un ID de jumbotron, y simplemente podemos hacer #jumbotron .htmlblah. Solo comprobemos dos veces, eso es todo correcto, jumbotron, bla. De repente, sólo se convierte en bla. Si tuviera que hacer esto en JavaScript, tal vez lo estaría buscando, pero con jQuery, solo lo hace tan fácil e intuitivo, y me ahorra muchos dolores de cabeza y realmente disfruto trabajando con él. Dada su popularidad, diría que mucha gente disfruta trabajando con ella también. En el siguiente video, vamos a pasar desde el front-end y empezar a mirar el back-end. Ojalá no te estemos abrumando hasta ahora. Siéntete libre de hacer preguntas y te ayudaré lo mejor que pueda, y ojalá estemos aprendiendo algunas cosas buenas hasta ahora. Te veré en el siguiente video. 11. Configuración de un servidor básico: Ahora tenemos nuestro sitio web básico que construimos con HTML, CSS, y JavaScript. Pero el desarrollo web front-end puede ser solo la punta del iceberg cuando se trata del proceso general de desarrollo web, y el back-end, como comentamos anteriormente, se puede construir en cualquier número de lenguajes de programación con cualquier número de configuraciones de servidor, puede llegar a ser infinitamente más complejo. Pero en el video de hoy, y en los próximos videos que vienen, quiero hablar del back-end de la manera más sencilla. También con el back-end, puede ser algo difícil de entender sin realmente verlo, realmente interactuar con él, y realmente implementarlo en su proyecto. Eso es lo que vamos a hacer de inmediato. Vamos a primero de todo conseguir un servidor luego vamos a empezar a escribir algún código PHP. PHP es un lenguaje de programación back-end muy común para la web. Es lo que usan muchos sitios web, y nos va a facilitar el despliegue de nuestro sitio web más adelante también, teniendo PHP como base de código. Lo que necesitas para el desarrollo web de back-end, si miras nuestra página web que acabamos de construir en el front end aquí. Simplemente teníamos que tener una carpeta, y literalmente podemos simplemente abrir el archivo como lo hacíamos antes y simplemente leerlo directamente del sistema de archivos en nuestro navegador. Ver aquí podemos ver que sólo es leer el expediente. La diferencia entre esto y el desarrollo back-end es que no podemos simplemente leerlo del sistema de archivos final. Cuando estamos haciendo programación back-end, necesitamos lo que se llama servidor. Ahora para PHP, una pila común, como lo llaman, es la pila de lámparas, que escribimos, pila de lámparas es Linux. Linux que es el sistema operativo, Apache, que es el servidor HTTP, MySQL y otras alternativas, y PHP y otras alternativas. Para nosotros, solo vamos a usar MySQL y PHP. Realmente no importa que estemos usando Apache. Realmente no necesitas saber por qué es eso. Pero no necesariamente estamos usando Linux. Tengo una computadora, mi computadora es Mac OS X. Podrías estar desarrollando en Windows, dependiendo de si estás desarrollando en Windows o estás desarrollando en Mac o incluso Linux, necesitas un servidor. Para Mac, solo voy a ampliar esto. Hay un servidor llamado MAMP que puedes instalar y MAMP es solo lámpara con la L reemplazada por M para Mac. Si eres usuario de Windows, puedes teclear WAMP, en realidad nunca he usado WAMP porque siempre he usado MAMP. Pero básicamente es el equivalente de MAMP pero para Windows. Pasando a MAMP, voy a descargar MAMP aquí. Simplemente encontraré la última versión. Descargar. Simplemente pondré eso en mi directorio de descargas. Muy bien, después de esperar mucho tiempo MAMP ya está descargado y sólo tenemos que instalarlo. Sólo voy a dar clic a través de las indicaciones. De acuerdo, se va a tomar una giga de espacio, no me di cuenta de que era tan grande. Escribiendo tu contraseña para instalar software. Muy bien, nuestra instalación fue exitosa, no hay campos especiales ahí nada que tengamos que saber hacer cuando estamos instalando eso, solo hacemos clic en continuar básicamente en todo, cerramos estos sitios web ahora. Una vez instalado el MAMP, podemos abrirlo, y aparece así. Antes de que podamos iniciar el servidor sin embargo, tenemos que cambiar algunas configuraciones. Entra al servidor web aquí. Lo que quiero que hagas es hacer clic en este ícono para entrar a nuestro proyecto y hacer clic en eso. Ahora lo he puesto en mi directorio de proyectos y voy a dar click bien. Ahora lo que voy a hacer es hacer click start service. Ya puedes ver que el, lo siento se movió. Pero se puede ver ahora que el servidor MySQL ahora está verde, lo que significa que está encendido, y el servidor Apache es verde, lo que significa que ahora está encendido. Abrirá la página de inicio del MAMP. Lo que puedes hacer para acceder a tu sitio web es hacer clic en mi sitio web. Tenemos nuestra página web de nuevo. Podemos acceder a ella a través del sistema de archivos así, o podemos acceder a ella a través de nuestro nuevo servidor, que es localhost colon 8888. Por qué esto es importante, por qué necesitamos tener un servidor es porque pronto vamos a estar transformando nuestro código en código back-end. Otra cosa que podemos hacer dentro de la página de inicio del MAMP es ir a herramientas y dar clic en PHP mi admin. Ahora que estamos en PHP mi admin, podemos ver qué bases de datos tenemos instaladas. PHP mi administrador es simplemente básicamente un panel de control para trabajar con bases de datos. Entonces hay uno aquí que acaba de llamarse MySQL. Pero estaremos creando una nueva base de datos muy pronto. Creo que lo voy a dejar ahí para este video porque en el siguiente vamos a estar haciendo algo de PHP. Pero ahora que tienes tu servidor, estás listo para empezar a hacer alguna programación back-end. Te veré en el siguiente video. 12. PHP: En el último video, configuramos el MAMP porque estoy en una computadora Mac. Si estás en un Windows, habrías configurado WAMP esperemos, y si estás en Linux, puedes configurar un equivalente de Linux, y ahora tenemos un servidor. El motivo por el que esto surge cuando vamos a localhost 8888 es porque dirigimos, si recuerdas, en nuestras Preferencias, en nuestro Document Root, configuramos nuestro proyecto para documentar root. Podemos armar un nuevo proyecto y podemos dirigir el servidor hacia allá y ahí se mostrará, pero pensé que sería más fácil empezar con lo que ya hemos creado. Ahora lo primero que podemos hacer para empezar a usar PHP y convertir nuestro proyecto puramente front-end en algo que use el back-end, es que podemos entrar aquí y en lugar de este being.html, podemos llamar it.php. ¿ Cómo hago eso? Cerraré eso, y iré aquí, y haré clic con el botón derecho Renombrar index.PHP y esto le dirá al servidor que es un archivo PHP. Voy a recargar la página y nada cambia. Entonces eres como Chris, ¿por qué hicimos eso? Bueno, algo sí cambió y si abrimos esto o intentamos abrirlo solo desde el sistema de archivos, solo mostrará el contenido de la página. No mostrará HTML porque sólo se puede tirar de los archivos HTML aquí. Lo que necesitas es un sever y por qué necesitamos do.PHP es porque vamos a empezar a poner algo de código PHP justo aquí. En lugar de h1, lo que quiero hacer es en su lugar escribir algún código PHP. Ahora lo bueno de PHP es que solo puedes insertarlo en cualquier lugar de un documento PHP que de otro modo se parezca a HTML. Ahora mismo tenemos HTML puro, pesar de que ahí es got.PHP. Lo que podemos hacer para insertar algo de PHP es abrir corchetes, interrogación PHP y luego lo voy a cerrar de inmediato para que no nos olvidemos, tienes un signo de interrogación otra vez y una etiqueta de cierre. Ahora lo que puedo hacer aquí, que no va a ser tan asombroso, es usar la función print para decir, “Hola Mundo”. Necesita un cierre. Entonces si muevo eso de vuelta por aquí, verás la esta primera parte de la etiqueta h1 es ahora “Hola Mundo” porque he puesto en alguna programación PHP. No hay forma de que tu navegador pueda resolver esto a menos que fuera para ejecutar un servidor, porque si solo escribo esto, saldrá directamente como lo hemos escrito. Simplemente lo ve como texto. Entonces por eso necesitamos un servidor que pueda interpretar PHP y procesar ese back-end. Esto no es realmente relevante, podríamos haber escrito aquí “Hello World” y conseguir los mismos resultados. ¿ Qué podemos hacer con PHP? Bueno, podemos usarlo como lenguaje de programación. Lo que puedo hacer aquí arriba es que puedo definir algunas variables. Simplemente voy a conseguir algunas etiquetas PHP de apertura y cierre y lo diré, en PHP por cierto se definen variables con un signo $ y luego el nombre de las variables. Vamos a llamar a este rubro, y voy a llamar a esto, ¿cómo llamé antes a la página web? Déjame retroceder un paso, “Nuestro increíble sitio web”. Voy a volver a poner todo eso y entonces el encabezado ahora será punto y coma para terminar “Mi impresionante sitio web”. Entonces así aquí abajo, en lugar de poner una cadena, que es sólo el texto explícito, podemos hacer encabezamiento de impresión. “ Mi impresionante sitio web”. Entonces ven aquí hemos establecido una variable y ahora la estamos poniendo aquí. ¿ Por qué es importante esto? Bueno, ahora vamos a hacer programación back-end para que podamos escribir cosas como una declaración if. Si no lo sé, realmente no hemos configurado muchas variables aquí, pero si una es menos de dos, cambiemos el encabezado a “Mi sitio web no tan impresionante”. Uno es menos de dos. Por lo que el encabezamiento cambia, si se establece en, si uno es mayor que dos, el encabezamiento no cambiaría. Esperemos que eso demuestre cómo podemos poner algo de lógica y empezar a hacer algo de programación real y una cosa que quiero dejar en claro es bien este código back-end está todo del lado del servidor. Lo que eso significa es que sucede antes de que llegue a tu navegador. Si realmente miramos aquí la fuente de la página, no veremos ninguna de la lógica, literalmente veremos la salida. En “Mi sitio web no tan impresionante”, no veríamos este código aquí, porque lo que pasa en el lado back-end es que todo se descubra, todo esto se descubra y luego manda a través de solo una recta arriba Archivo HTML al front-end. Solo vemos los resultados en nuestro navegador de lo que sucedió en el back-end, no vemos el código back-end real. tanto que si estuviéramos escribiendo en JavaScript, podríamos bajar a nuestras herramientas de Desarrollador, mira en Fuentes podemos ver todos los scripts aquí. Yo puedo mirar eso, puedo mirar aquí, puedo ver los guiones, puedo ver toda la programación pasando aquí, y si fuera a cambiar algo con JavaScript, digamos por ejemplo, recordar podemos inspeccionar diferentes elementos de la página. Si pudiéramos encontrar esto, ahí vamos, podemos encontrar este elemento, eso es mostrar ninguno. Si hacemos click en Get Started, de repente esos cambios viven frente a nosotros y podemos ver ese código por aquí en nuestra foto de guiones. Todo es front-end, es el punto que estoy haciendo. Pero cualquier cosa de programación sabia que hacemos en PHP, es un lenguaje back-end, por lo que no va a pasar al front-end. Todo se obtiene lado del servidor calculado, por lo que en este servidor, y luego lo único que lo hace a tu navegador es el HTML, CSS, y JavaScript. Esperemos que yo en realidad poner algún código en nuestros proyectos lo haya hecho un poco más claro para ti y en el siguiente video, vamos a ver cómo desarrollar un PHP es realmente útil más allá solo crear una variable de encabezado y luego ponerlo en una etiqueta de encabezamiento. Te veré en el próximo. 13. MySQL: En el último video, empezamos con PHP, pero no hicimos nada tan increíble ni nada que realmente no pudiéramos haber hecho usando lo que podemos hacer en el front end. lo que podemos usar el back end, y es para lo que es realmente importante usar el back end, es la interacción con una base de datos. Antes de escribir un poco más de código PHP, quiero hablar un poco de bases de datos y realmente crear una base de datos con unas pocas tablas. Voy a hacer este ancho completo. Lo que voy a hacer es abrir PHP admin. Podemos hacerlo yendo a tu página de inicio del MAMP o página de inicio del WAMP. Vaya a Herramientas y luego vaya a phpMyAdmin. Si estás usando un servidor diferente a MAMP, es posible que tengas que buscar cómo acceder a phpMyAdmin, pero debería estar ahí. Ahora en phpMyAdmin, lo que podemos hacer es hacer cualquier número de funciones de base de datos como administrador. Podemos hacer clic en “Nuevo” aquí y crear una nueva base de datos. Sólo voy a llamar a esta base de datos test_db. Voy a crear, y de repente conseguimos una base de datos. Ahora una base de datos es un lugar donde almacenas tus datos, y puede ser complejo, cómo lo estructuras. Lo más difícil con las bases de datos es cómo diseñarlo y cómo hacerlo todo perfectamente diseñado para que las tablas se relacionen entre sí de la manera más eficiente posible. Pero sólo estamos cubriendo los conceptos básicos aquí, y entonces lo que se puede pensar de las bases de datos como es sólo selecciones o grupos de tablas. Un tipo de objeto común en aplicaciones y sitios web es un usuario. Voy a empezar por ahí y crear una tabla para los usuarios. Voy a llamar a este usuario. Iba a ir con el número predeterminado de columnas. El primer campo debe ser un identificador único, así que solo lo voy a llamar ID. Simplemente lo voy a mantener en INT, lo que significa entero. Voy a dar click en esto para que quede sin firmar, lo que significa que no será negativo. Voy a convertirlo en el índice primario, y haga clic en “Ok” en esto. Voy a dar clic aquí, los incrementos de auto, así que en lugar de definir el ID cada vez, cada nuevo, cada nuevo registro de esto que creamos, habrá un nuevo ID automáticamente. Simplemente voy a poner en algunos campos básicos, nombre de usuario, y luego elegimos el texto de tipo. Digamos contraseña, TEXTO, y correo electrónico, TEXTO. También puedes poner algunas reglas alrededor de cuánto tiempo quieres aceptar estos campos. Realmente no necesitamos eso en este momento, así que solo podemos hacer clic en “Guardar” o podemos hacer clic en “Vista previa SQL”. Por qué quería mencionar la vista previa SQL es, este aquí mismo es el código SQL que el PHP, mi administrador ha generado para nosotros. Si quisiéramos escribir esto nosotros mismos, podríamos simplemente copiar eso, ir a la pestaña SQL, y escribirlo nosotros mismos y golpear “Ejecutar”. Obtendríamos el mismo resultado. Pero esto obviamente lo agiliza para nosotros, lo hace un poco más fácil con ser interactivo y esas cosas, y no necesitas ningún conocimiento de SQL. Para mirar esta consulta tan rápidamente para que puedas reconocer SQL cuando lo veas. Tenemos algunas palabras clave aquí, CREAR TABLE. Después definimos la base de datos a la que estamos apuntando. Dot la mesa a la que estamos apuntando. El ID que es un entero sin signo, no es nulo, lo que significa que no está vacío y va a ordenar incremento. Entonces el nombre de usuario, que no es texto nulo, y la contraseña, texto no nulo, correo electrónico, texto no nulo. El principal siendo ID y el motor siendo InnoDB. Haré clic en “Cerrar” en eso y haré clic en “Guardar”. Ya puedes ver ahora tenemos una tabla que aparece en nuestra base de datos. Podemos ver los diferentes campos aquí. Lo que podemos hacer con esta tabla es que podemos insertar. Voy a poner un nombre de usuario. Digamos que Chris, por contraseña, escribiré contraseña Chris. Aquí abajo, escribiré en chris@christhefreelancer.com. Haga clic en “Ir, y tenemos una nueva fila. Aquí mismo está el código que podríamos haber hecho nosotros mismos para insertar una fila en nuestra tabla. Si volvemos a navegar, podemos ver que esta es nuestra mesa. Tenemos ID de 1, nombre de usuario de Chris, contraseña de Chris, y correo electrónico de chris@christhefreelancer.com. Ahora, como dije, podemos ejecutar SQL nosotros mismos, así que voy a copiar de nuevo en el SQL que generamos antes. Sólo puedo cambiar estos detalles. A lo mejor es Denise y nos dieron la contraseña de Denise, y quiero compartir su contraseña con todos así que solo escribiré denise@gmail.com. Si hago clic en “Ir”, eso debería funcionar. Dice tick una fila insertada. Si volvemos, ahora tenemos dos usuarios en nuestra base de datos y escribí mal a Denise, lo que significa que solo puedo entrar aquí y hacer clic en “Editar”. Su nombre no es Dennis, es Denise. Ese e-mail probablemente podría llevar a algún lugar, pero no lleva a ninguna Denise que conozco. Lo que podemos hacer ahora es agregar otra tabla. Esto es una ventaja hacia bases de datos relacionales. Lo que voy a hacer es volver a crear el ID, y voy a hacer un índice primario sin firmar que se incremente automáticamente igual que antes. Lo que voy a hacer aquí es poner en identificación de propietario. Lo que podemos hacer con el ID de propietario es tener eso como relacionado con una identificación en los usuarios, por lo que podemos asociar a esta mascota en nuestra mesa, mascotas a un usuario en particular. Voy a poner aquí el nombre, hacer de eso un campo de texto. Entonces voy a crear un tipo, digamos tipo. Eso puede ser perro, gato, lo que sea, y haremos clic en “Guardar”. Ahora tenemos esta mesa de mascotas. Vayamos e insertemos un nombre de mascota, identificación de propietario. Vamos a asignármela. Yo era uno, así que asígname. Yo lo llamaré Boris, y es un perro. Entonces tenemos eso ahí. Ahora estos en realidad no están vinculados todavía, y hay ciertas maneras en que podemos hacerlo dentro de phpMyAdmin, pero no vamos a adentrarnos demasiado en bases de datos en este curso. Pero lo que queremos hacer ahora es usar realmente esta base de datos, interactuar con esta base de datos usando un código PHP. Ya tenemos nuestro proyecto ahora, ya tiene PHP en él. El siguiente paso para nosotros es conectarnos a esta base de datos y luego empezar a sacar cosas de la base de datos. Cuando hagamos eso, podrás ver todo el asunto juntándose. La base de datos trabajando con el back end para producir el front end, y luego al revés donde podemos usar el front end para enviar una solicitud de servidor al back end para manipular la base de datos. Eso, en esencia, es todo el ciclo de desarrollo web. Me emociona mostrarles el siguiente video, que es donde vamos a estar conectándonos a la base de datos y creando nuestra muy básica, pero ojalá muy contadora aplicación web. Te veré en el siguiente video. 14. Conexión a una base de datos: En el último video, creamos una base de datos. Insertamos algunas tablas en esa base de datos, y luego insertamos algunos registros en estas tablas de base de datos. Ahora en este video, por fin vamos a llevar estos registros a nuestros proyectos usando PHP. El modo de hacerlo es establecer una conexión con la base de datos y luego acceder a estos diferentes registros a través de SQL y luego implementar con PHP. Una de las formas en que podemos comenzar la conexión es que acabo de obtener algo de documentación aquí de MAMP. Nos han dado algún código con el que trabajar aquí. Yo sólo voy a copiar todo excepto las etiquetas porque ya las tenemos en nuestro proyecto. Voy a ir a mi editor de códigos. Yo puedo deshacerme de esto porque de todos modos es una tontería. Entonces puedo pegar en este código de ejemplo. Ahora lo que vamos a tener que hacer es cambiar esto para como circunstancia específica. No estamos viendo una base de datos llamada Esquema de Performance. Ahora estamos viendo una base de datos llamada test DB. Ahora si lo hemos hecho todo correctamente, esto debería conectarse con éxito y deberíamos ver un mensaje de éxito. Dice conectado con éxito. El motivo por el cual es porque ponemos aquí echo. El eco es otra forma en que puedes imprimir texto en una pantalla usando PHP. Si hubiera una época, la página habría muerto y entonces lo que hubiéramos escupido el error. Pero debido a que se conectó con éxito, obtuvimos esta retroalimentación. Ahora que sabemos que tenemos una conexión, ahora se trata de traer los datos que tenemos y ponerlos en nuestra aplicación. Para eso, tengo otro artículo aquí de las escuelas W3. Aquí tienen este pequeño ejemplo. Lo que ya hemos hecho es que hemos creado nuestra conexión, así que no necesitamos volver a hacerlo. Pero lo que sí necesitamos hacer es crear una consulta SQL y luego tomar el resultado y hacer un bucle aquí sobre todos los resultados. Después, envíalo en la página para que realmente lo puedas ver. Yo voy a copiar eso. Voy a ir a mi editor de códigos aquí. Voy a maximizar la pantalla y donde quiero dar salida es aquí abajo. Voy a crear otro div. Simplemente le daré la fila de clase. Recuerda que estamos trabajando con bootstrap aquí, así que row es una clase bootstrap que podemos usar. Entonces voy a insertar nuestro PHP. Necesitaré las etiquetas de apertura y cierre. Menos que signo signo signo signo de interrogación, PHP, signo de interrogación, etiqueta de cierre. Entonces entre aquí, entra todo el código. En realidad nos dieron las etiquetas de cierre. Necesito deshacerme de eso y empujar esto. Mueve eso, whoops, mueve eso hacia atrás. Lo que tenemos aquí es construir web una consulta SQL y asignarla a esta variable. Este es un ejemplo. Lo que vamos a necesitar hacer es ajustarlo para nosotros y realmente no necesitamos la identificación per se. Pero si entramos en nuestra mesa aquí, tenemos nombre de usuario y contraseña. Este ejemplo, no vamos a mostrar cómo usa la contraseña en la pantalla. Podemos escribir nombre de usuario y correo electrónico. Lo que estamos diciendo aquí, queremos seleccionar el nombre de usuario de la columna y el correo electrónico de la columna. Esto tiene que coincidir con estas columnas aquí desde y luego este es el nombre de la tabla, así que no son mis invitados, sus usuarios. Otra cosa que vamos a tener que cambiar aquí es el objeto que define nuestra conexión. Entonces en este ejemplo de aquí, han usado conn como la conexión. Se puede ver aquí, conn es igual al nuevo MySQL. Se le asigna la conexión a esta variable. Pero en nuestro ejemplo, si nos desplazamos hacia arriba, hemos asignado la conexión a esta variable. Voy a ir a dar click a eso y luego reemplazar la mención de conn aquí. Lo que estamos asignando para dar resultado aquí es que realmente estamos tomando la conexión donde usando un método llamado consulta, estamos poniendo el SQL que acabamos de construir aquí en este método de consulta. Nos va a devolver un determinado resultado y luego lo vamos a almacenar en esta variable. Entonces aquí abajo, lo que vamos a preguntar es si el número de filas que salen de los resultados es mayor que cero, vamos a dar salida a algo. De lo contrario, vamos a dar salida sólo cero resultados, el texto cero resultados. Entonces al final de esto, vamos a cerrar nuestra conexión con la base de datos. Lo que vamos a necesitar hacer aquí abajo es cambiar de nuevo estos campos, por lo que no estamos mostrando ID. Se puede hacer es deshacerse de eso. Estamos mostrando el nombre de usuario. En lugar de nombre, voy a poner nombre de usuario. Entonces en lugar de nombre aquí, ¿va a poner un nombre de usuario e ir a qué más hay? Aquí tenemos correo electrónico, que hemos sacado de aquí. Podemos hacer correo electrónico con dos puntos. Entonces podemos cambiar a lo que estamos apuntando aquí por correo electrónico. Después una etiqueta BR al final. BR solo significa que es una etiqueta de ruptura en HTML y solo significa ir a la siguiente línea. Si tenemos suerte, hemos escrito un código correctamente y esto realmente funcionará. Voy a refrescar la página y algo ha pasado. Yo voy a inspeccionar eso porque parece que es corte aquí. ¿ Por qué esto no funciona? Bueno, tenemos un error tipográfico más en nuestro código. Es decir, no hemos cambiado el nombre de nuestra conexión aquí abajo, y también ya hemos cerrado nuestra conexión aquí arriba. Lo que voy a hacer aquí es reemplazar con MySQL y deshacerme de este cierre porque aquí lo vamos a cerrar. Voy a dar click en “Guardar”. Voy a refrescar la página. Ahora estamos obteniendo campos de la base de datos. Por supuesto que se ven bastante terribles en este momento, pero siempre podemos darle jazz con nuestro conocimiento del código front end. En lugar de esto, lo que haré es crear un div. Podemos insertar aquí cualquier HTML que queramos. Div aquí, cerrando div. Voy a llamar a esto darle una clase de DB, fila. Haga clic en “Guardar”, actualice la página. No ha cambiado mucho porque no hemos aplicado ningún estilo. Una cosa que quiero hacer primero es que esta fila no está dentro del contenedor, así que eso es lo primero que arreglaría. Entraría dentro y pondría eso anidado dentro del contenedor div. Ahora está en el contenedor. Lo que podemos hacer es aplicar unos cuantos estilos más para que se vea un poco más bonito. Esto depende de ti cómo quieres hacerlo. Pero hagamos unos puntos porque tenemos una clase, fila DB, corchetes rizados abiertos para definir nuestros estilos y solo demos ese más margen al fondo para que obtengamos 10 px. Volver a cargar la página es un poco más de margen allí. A lo mejor queremos la primera parte de ella, audaz. Podemos hacer eso sin CSS. Simplemente podemos usar HTML para crear una etiqueta fuerte. Cualquier cosa dentro de una etiqueta fuerte será la luz de la fuente será roca. Por lo general, podemos usarlo para otros fines. Yo puedo poner fuerte. Entonces ahora puedes ver que la etiqueta es negrita y el resultado no es audaz. Hemos establecido una conexión con nuestra base de datos. Hemos recuperado artículos de nuestra base de datos. Puedes empezar a ver ahora el back end trabajando para nosotros. Lo bueno de la base de datos es que es permanente. Si hacemos un cambio aquí, dejamos que la base de datos se siente ahí. Siempre que lleguemos a la página web, si hicimos un cambio, aparecerá. Para demostrarlo, voy a hacer un cambio en la base de datos ahora mismo. Voy a insertar otro usuario, llamar a este usuario Marco es positivo, va a ser Marco polo, y va a ser Marco @gmail. No obstante cambiamos la base de datos, donde leyendo directamente desde la base de datos a esta página web. Debería aparecer sin importar cómo cambiemos esta base de datos y lo haga. Este es esencialmente el back end trabajando para nosotros. De nuevo, si inspeccionáramos esto, no veríamos ningún código back-end. Literalmente veríamos un montón de rosa DB con el código HTML de salida. Esto es bueno para la seguridad. No sabemos qué está pasando en el back end. Si bien eso es realmente importante es por número de razones, pero uno que te puedo mostrar en este momento, y es que aquí tenemos toda esta información con un nombre de usuario y contraseña. Definitivamente no queremos que nadie acceda a nuestro sitio web en el otro extremo pueda ver eso. Si fuera como, digamos, código JavaScript, si solo ponemos eso en un archivo JavaScript, de nuevo, podemos abrir nuestras herramientas de desarrollador, ir a la red, lo siento, fuentes, no a la red. Podemos entrar y ver cuáles son los guiones. Pero en el back-end, no hay forma de ver estos datos de configuración. Esa es una de las razones por las que si estás haciendo una conexión a la base de datos, si estás trabajando con información del usuario. Si estás segregando información en función de si alguien está conectado y solo quieres mostrar información que ese usuario está autorizado a ver, entonces que todo necesita estar seguro. Por eso es muy importante que tengamos el back-end para conectarnos a la base de datos y también ser muy privados. Ojalá puedas entender el papel del back-end ahora y cómo somos capaces de conectarnos a una base de datos. Nuevamente, explicación o demostración muy simple aquí de cómo funciona el back-end usando una base de datos. Podríamos hacer un curso completo sobre PHP con MySQL y pasar por cómo podríamos crear, actualizar y eliminar estos registros. Pero esto es una visión general del desarrollo web. No tenemos tiempo para entrar en un enorme 12 horas. Podría ser un curso de 12 horas para ser honesto en esto. Si quieres pegarte hasta el final y realmente quieres hacer un proyecto PHP MySQL. Tendré algunas recomendaciones al final. Pero en el siguiente video, vamos a entrar en cómo realmente lo que se llama implementar este sitio web, lo que significa ponerlo en un servidor al que se puede acceder desde cualquier lugar y básicamente crearte un sitio web que funcione en vivo. Me emociona mostrarte cómo desplegar tu nueva pequeña aplicación básica. Te veré en el siguiente video. 15. Implementación, parte 1. 1: Dominio: En los próximos videos, vamos a desplegar nuestro sitio web, y desplegar es solo un término de desarrollador que significa, estamos poniendo nuestro sitio web en otro servidor, y vamos a desplegar nuestro sitio web en la web, que significa que solo lo vamos a poner en otro servidor poder acceder a nuestro sitio web desde cualquier parte del mundo. Esencialmente, estamos poniendo nuestra página web en Internet. este momento se acaba de almacenar en nuestra computadora local, y estamos ejecutando un servidor localmente, pero necesitamos poner nuestro sitio web en un servidor que esté conectado a Internet y funcionando 24/7, para que la gente pueda acceder a nuestro sitio web alrededor de el reloj desde cualquier lugar. Los dos conceptos que tenemos que entender para hacer esto dominios y hosting, y mucha gente piensa que los dominios y el hosting son lo mismo, pero definitivamente no lo son. Entonces lo que voy a hacer, solo haz una búsqueda en Google por la diferencia entre dominio y hosting, y solo empieza tu investigación ahí para averiguar cuál es la diferencia si necesitas hacer lectura extra, pero voy a dar click en el primer artículo y echar un vistazo a esta analogía de casa. Esencialmente tu dominio es una dirección. Cuando compres, digamos solo skillsharecourse.com, o algo así solo estás obteniendo la dirección. Simplemente estás obteniendo el nombre de dominio. En realidad no consigues un lugar para empezar realmente a construir tu sitio web. Se puede pensar en el nombre de dominio como solo una dirección, y esa dirección señalará la ubicación de su sitio web que está alojado en algún lugar. Esos archivos tienen que sentarse en algún lugar de una plataforma de hosting en otro servidor web, y eso es lo que servirá a tu sitio web. Se puede pensar, en esta analogía de casa, el nombre de dominio es solo tu dirección, y la casa misma está hospedando en esta analogía. El primer paso será conseguir tu dominio, y esencialmente lo que sucede cuando registres un dominio, es que entra en un sistema centralizado llamado DNS. Simplemente voy a escribir, “¿Dónde se almacenan los dominios de sitios web?” En howstuffworks.com, puedes leer todo sobre dónde está almacenado tu dominio. Básicamente lo que estás haciendo cuando registras un dominio en GoDaddy, o Namecheap, o cualquiera de esos sitios web de compra de dominios, es básicamente que estás obteniendo un listado en todo este sistema DNS. ¿ Cómo obtenemos un dominio? Bueno, podría haber visto esto antes. Podemos acudir a cualquier número de proveedores de dominios. GoDaddy es uno popular, y también son anfitriones. Estoy bastante seguro de que si vas a hosting, puedes comprar una cuenta de hosting que viene con un dominio, pero si solo hacemos clic en “Dominios” y encontramos un dominio, simplemente obtendríamos el dominio y su sitio web. GoDaddy en realidad no es necesariamente el más barato. Hay otro llamado Namecheap, y aparentar que solo estoy registrando un dominio que realmente no voy a usar, sino que solo mostrar como ejemplo. Voy a usar Namecheap y voy a escribir en skillsharecourse, y ahora va a cargar todas las ideas, todos los dominios disponibles que podríamos tener. SkillShareCourse.com está bastante seguro de que eso no está disponible, pero podemos conseguir todos estos oscuros como skillsharecourse.xyz, y skillsharecourse.space. Yo sólo voy a elegir uno de los más baratos porque esto es sólo un ejemplo, así que voy a ir al carrito. Me va a costar un dólar australiano. No necesitamos ninguno de los extras, así que voy a confirmar. Entra a mi cuenta porque ya tengo una cuenta con Namecheap, y consulta mis datos, paga ahora. Empezará a tramitar su pedido, y voila. Acabo de comprar skillsharecourse.space, y lo que puedo hacer ahora, es que puedo hacer clic en “Administrar” y esto debería ser similar en todos los proveedores de dominios. Aquí tienes una lista de otros dominios que tengo. Puedo bajar a skillsharecourse.space, clic en “Administrar” y por qué hacemos clic en “Administrar” de inmediato es bajar a nuestros servidores de nombres. Aquí mismo, tenemos servidores de dominio que necesitamos configurar. Aquí es básicamente donde vamos a apuntar nuestro dominio hacia dónde está almacenado nuestro sitio web. Entonces esencialmente donde está nuestro hosting. Ahora, porque Namecheap, bueno, lo hacen, hacen hosting, pero si por ejemplo íbamos a albergar nuestra página web en Namecheap, ya compramos un dominio, así que simplemente podríamos dejar esto como DNS básico de Namecheap. Tan solo para reiterar que, si alojaras tu sitio web en el mismo lugar donde compraste tu dominio, probablemente no necesites cambiar tu configuración de DNS. Ya están configurados para dirigir al sitio web en el que lo compraste, pero si estás hospedando tu sitio web en otro host que es diferente a donde compraste tu dominio, tendrás que configurarlo aquí usando DNS personalizado, donde quieres que dirija ese dominio. Ahora, la elección de dónde hospedas tu sitio web depende de ti. Hospedo usando mi cuenta de revendedor en un host llamado Netorigin en Australia. No necesariamente lo recomendaría para ti si estás en Estados Unidos, o en Reino Unido, o en cualquier lugar del mundo, pero para mí en Australia, ese es el anfitrión que uso, pero independientemente de si usas eso host o no, o cualquier host que utilice, lo que necesita hacer para vincular su dominio a su hosting, es encontrar los servidores de nombres de ese host en particular. Para mí, es Netorigin, y así es como lo hago. Simplemente voy a escribir en servidores DNS Netorigin, y si vas con GoDaddy, podrías escribir en servidores Godaddy.DNS, y aquí mismo hay un artículo de base de conocimientos de Netorigin, que es la empresa que uso, y aquí mismo hay algunos servidores de nombres de dominio. Puedo llevarme el primero, ponerlo ahí, el segundo lo puso ahí, y probablemente no necesites los cuatro, pero creo que estos son sólo para respaldo. Ponlo ahí, y luego voy a dar clic en “Tick” o lo que sea, en tu cosa de dominio particular que usas para registrarte. Como dice aquí arriba, puede tardar 48 horas en surtir efecto, pero a menudo es mucho más corto que eso, pero pronto tendremos nuestro proveedor de dominios vinculado a nuestro proveedor de hosting, y lo que sucederá es cuando golpees este dominio lo buscará sitios web en este servidor de nombres de dominio, y su host, cualquiera que sea su Netorigin, o GoDaddy, o quienquiera que sea, encontrará su sitio web y lo servirá hasta usted. ¿ Y si no tienes ya un anfitrión como yo? Bueno, como dije puedes ir a algún lugar como GoDaddy. Sigo mal ortografiando GoDaddy. No sabía que en realidad había un sitio web llamado GoDay. Puedes ir a GoDaddy, click para “Hosting” y comprar algunos hosting web. Puedes comprar economía solo son cinco dólares al mes, y luego lo que haces cuando te registras para hosting es, cuando te pidan tu nombre de dominio, puedes ponerlo. Con GoDaddy sin embargo, te ofrecen un dominio gratuito. Probablemente sea más rentable para ti solo conseguir tu dominio junto con tu hosting, y ni siquiera tienes que vincular estos juntos, pero para mí, tengo mi hosting en Netorigin, y solo quería comprar un dominio barato en Namecheap. Por lo que esta vinculación es necesaria, y además solo va a mostrarte la diferencia entre dominios y hosting. Si sí fui a GoDaddy y obtuve el alojamiento web con el dominio gratuito, puede que no entienda completamente la diferencia entre dominios y hosting web, porque hacen que sea tan fácil juntar los dos. Entonces creo que aunque sí decidas ir con un host que te dará un dominio gratuito, y lo vinculará automáticamente, es bueno conocer la diferencia entre dominios y hosting, y poder vincularlo en el futuro si necesitas a. 16. Implementación, parte 2: archivos: Muy bien, así que a estas alturas deberías tener tu dominio, cual te registraste a través de un registro de dominios como Name Cheap y deberías tener tu hosting el cual puedes haber registrado en el mismo lugar o en algún lugar diferente, si ellos están en algún lugar diferente, deberías haberlos enlazado, poniendo en tus servidores de nombres de dominio personalizados. Por lo que el siguiente paso será acceder a tu panel de control y si recuerdas antes, en el último video, dijo que iba a tardar hasta 48 horas en vincular nuestro dominio a nuestro hosting. Pero a menudo lleva mucho menos tiempo y lo he dejado unos 5-10 minutos y ya está vinculado. Entonces lo que voy a hacer es antes que nada verificar que podamos acceder a nuestro panel de control y también para luego cambiar algunas cosas en nuestro Panel de Control y comenzar a desplegar nuestro sitio web. Voy a escribir la dirección de nuestra página web, que fue SkillShareCourse.Space/cPanel. Presionaré “Enter” y cPanel es solo un panel de control estandarizado que puedes usar para hacer muchas funciones en tu sitio web. Es mucho mejor verlo e interactuar con él que describirlo a distancia. Entonces lo que voy a hacer es iniciar sesión y mostrártelo de inmediato. Entonces usaré un nombre que configuramos en la plataforma de hosting. Yo lo hice en privado pero por ti, podrías haber hecho eso en GoDaddy o cualquier otro número de host y luego ponemos nuestra contraseña y nos conectamos. Este es cPanel y te da un gestor de archivos, puedes entrar y cambiar tus archivos, hay phpMyAdmin, para que podamos hacer nuestras cosas de base de datos ahí. Podemos instalar aplicaciones como WordPress o Joomla prensa para comprar con un solo clic básicamente, solo hacemos clic ahí y luego hacemos clic en “Instalar”. Eso es muy útil. Podemos crear subdominios, podemos crear cuentas de correo electrónico. Hay muchas cosas diferentes que podemos hacer, muchas de las cuales ni siquiera he hecho antes. Lo que quiero que hagas ahora es que quiero que vayas a tu gestor de archivos y quiero que solo mires aquí. Muy bien, así que mirando esta estructura, podemos ver que tenemos nuestro directorio de inicio y tenemos estas diferentes carpetas, ETC, registros, correo, FTP público, HTML, SSL, TMP. No necesitas saber qué hacen todos estos pero si tienes una carpeta llamada HTML público, definitivamente haz clic en eso porque ahí es donde vas a poner tu sitio web porque cuando llegues a tu dominio, va a servir el desde esta ubicación. Ahora mismo acabamos de conseguir esta foto aleatoria de bin CGI que está completamente vacía, así que no hay riesgo en lo que hagas con esto ahora mismo porque está completamente vacía. Por lo que el siguiente paso sería subir nuestro sitio web a este gestor de archivos. Entonces lo que voy a hacer para eso es que voy a ir a mi curso de Skillshare mi carpeta de proyectos. Voy a volver, voy a encontrar aquí, y luego lo voy a comprimir para que podamos subirlo como un solo archivo. Entonces en Mac, presiono “Comprimir” y obtengo un archivo zip. Entonces me voy a ir aquí, voy a dar click en “Subir”. Voy a agarrar ese archivo zip que está aquí mismo, se va a subir. Voy a volver atrás y luego desde dentro de nuestro gestor de archivos, puedo hacer clic en él y hacer clic en “Extraer”, creo que es la palabra en el panel C. Entonces ahora tenemos esto porque lo comprimí en un Mac, tenemos esta carpeta MacOSX, más bien, podemos eliminar eso y luego aquí dentro está nuestra página web. Vamos a necesitar agarrar todos estos y devolverlo uno. Entonces, en lugar de esta foto, sólo vamos a deshacernos de eso y trasladarla al HTML público. Vuelve al HTML público, esta carpeta ya está vacía, por lo que podemos eliminarla. Wallah, tenemos nuestra página web ahí arriba. Apenas un segundo. Creo que también eliminaremos este archivo zip, pero sí, tenemos nuestros activos front-end ahí, y vamos a ver qué pasa cuando tecleamos en nuestro dominio ahora. SkillShareCourse.Space. Vamos a conseguir un error de conexión a la base de datos y eso no me sorprende en absoluto porque hemos olvidado un paso importante en este momento, y eso es que no hemos configurado nuestra base de datos. Por lo que poner todos los archivos está todo bien y bien pero sí lo hemos definido aquí, si haces click en el archivo y luego haces clic en “Editar”, puedes editar el archivo directamente desde tu gestor de archivos. Tenemos toda esta información. Tenemos todos estos servidores y base de datos a los que conectarnos y la base de datos realmente es una entidad separada así que sólo poner nuestros archivos aquí no es suficiente. También necesitamos configurar nuestra base de datos y copiar eso a través también para que eso sea lo que vamos a hacer en el siguiente video. 17. Implementación, parte 3: base de datos: En el último video, cargamos los archivos de nuestro sitio web a nuestro nuevo anfitrión, pero falta una cosa, y esa es nuestra base de datos. De ahí por qué cuando vamos a un sitio web, dice error de conexión. Esa es una buena señal en el sentido de que sabemos que nuestro sitio web ahora está cargando ese código que creamos, pero en realidad no hemos configurado la base de datos en este servidor remoto. Por supuesto que vamos a obtener un error de conexión. Ahora sólo para que quede claro, si no tuviéramos conexión con la base de datos, quizá estuviéramos cargando una app que ni siquiera tenía un back end, no tendríamos un problema. Yo sólo quiero demostrarlo rápidamente. No tienes que seguir. Pero si cavamos, revertimos esto de nuevo a lo que era antes que era odia HTML, y hago clic en Editar, y me acabo de deshacer de todo el PHP, que de todos modos no tendría sentido en un documento HTML. Recuerda que tenemos este archivo guardado localmente para que no tengas que preocuparte por perder tu progreso. Podemos simplemente agarrarlo siempre y cuando lo tengamos guardado en nuestra computadora. Voy a dar clic en Guardar. Sólo voy a revisar dos veces. No hay PHP. Volveré a mi Sitio Web, refrescaré la página y puedes ver que ahora tenemos el mejor sitio web de la historia. Me acabo de dar cuenta de que sí tenemos algo de PHP aquí. Teníamos el rumbo, así que puedo poner en Mejor sitio web de todos los tiempos. Creo que eso no era como se llamaba, pero todo bien pero podemos volver atrás. Se puede ver que tenemos una página web en vivo en Internet. Pero queremos desplegar un sitio web que esté conectado con un back end, con una base de datos. Simplemente voy a eliminar ese archivo y luego subir nuestro archivo PHP de nuevo. Voy a volver a mi curso escolar compartido, volver a meter esto. Está subido. Puedo volver aquí y volveremos a obtener ese error de conexión, porque necesitamos configurar la base de datos. Lo que podemos hacer es usar phpMyAdmin. El mismo programa que utilizamos en nuestro mapa local sever, podemos usar en un host también. Lo que voy a hacer es encontrar nuestro phpMyAdmin. Puedes acceder a ella vía aquí, pero si no tienes esta página, también puedes tomar tu nombre de host y luego ingresar /phpMyAdmin. Lo que vamos a hacer aquí es hacer click en test db, y vamos a exportar todo aquí para poder importarlo rápidamente en tu host y luego empezar a crear una conexión con él. Voy a hacer una exportación rápida. Este es el código SQL que creará todo. Sólo tenemos que copiar todo eso. Entonces vamos a volver a nuestro cPanel, y desde aquí vamos a usar phpMyAdmin que está aquí en tan solo un momento. Pero antes que nada, necesitamos crear esa base de datos que hicimos en nuestro sitio web local, la prueba db porque aún no existe en nuestro host. Voy a ir a dar click a Bases de Datos MySQL, y voy a crear una nueva base de datos. Yo sólo lo voy a llamar prueba. Está creado y puedes bajar aquí y ver que tiene skillsharecourse_test. Nos obliga a hacerla namespace usando esto que es el nombre de nuestro sitio web. Lo que necesitamos hacer ahora es crear un usuario para acceder a esa base de datos. Sólo voy a llamar a este usuario admin, y voy a escribir para la contraseña. Puedes escribir lo que quieras. Solo voy a generar una contraseña de forma aleatoria aquí arriba en mi administrador de contraseñas one. Hay unas contraseñas muy fuertes. Asegúrese de copiar eso. Voy a crear un nuevo documento solo para poder almacenar esa vía. No quieres perderlo. Esa es la contraseña que seleccioné, luego crear usuario. Ahora has creado con éxito un usuario de base de datos. Ahora lo último que quieres hacer es agregar al usuario a la base de datos. El usuario va a ser skillsharecourse/admin, y la base de datos es skillsharecourse_test. clic en Agregar y dale todos los privilegios. Haga clic en Hacer cambios, y se han realizado los cambios. Ahora podemos ir a phpMyAdmin lo cual podemos hacer dando click aquí. Entra en phpMyAdmin, y desde aquí puedes ver que tenemos nuestra skillsharecourse_test. Ahora lo primero que debes notar es que es diferente en su nombre a nuestro test db que es test db. Vamos a necesitar hacer algunos cambios ahí también. Pero podemos entrar aquí, nuestro SQL y copiar a través de nuestra consulta. Ya tenemos contraseña, así que voy a tener que volver a aquí, copiar a través de esta consulta que pusimos ahí antes, pegarla aquí. En lugar de test db, voy a cambiar esto a skillsharecourse_test que es un nuevo nombre de base de datos. Ahora, busque cualquier otra referencia de test_db. Eso debería ser su hace ya no. Si hacemos clic en Ir ahora, debería seleccionar esa base de datos y luego importar todas nuestras tablas. Ojalá, veamos si funciona. Dice que no hay base de datos seleccionada. Lo que vamos a hacer es ir a la base de datos y luego poner el SQL desde el contexto de esa base de datos. Voy a volver aquí, poner de nuevo el nombre de la base de datos, haga clic en Ir. Las mascotas de mesa ya existen. Parece que nuestra importación ya funcionó. Ya podemos entrar y ver tenemos nuestra mesa para nuestros usuarios y ahora mesa para las mascotas. Ahora, es un caso de usar toda la información. El nombre de la base de datos, el nuevo usuario que creamos, y ahora cambiando eso en nuestro código para que podamos obtener una conexión a base de datos. y esa será la etapa final de conseguir que nuestra página web se presente. Hagámoslo ahora mismo. Tenemos nuestra base de datos ahora dentro de nuestro nuevo sitio web. Lo que necesitamos hacer es actualizar nuestro archivo index.php porque se cambia el nombre de la base de datos y también el usuario que estamos usando para acceder a esta base de datos ha cambiado. Si vamos por aquí y entramos en nuestro índice php, podemos editarlo. Si haces doble clic, se descargará. Tan solo querrás hacer clic en él una vez, y luego hacer clic en Editar y podrás editarlo justo en tu navegador. Cuando estás haciendo pequeños cambios como este, esto está bien. Pero si estás haciendo grandes cambios en el sitio web, probablemente querrías ir con FTP, que puedes acceder aquí abajo. Eso es un poco más de dónde puedes acceder a ella, que puedes acceder desde aquí. Pero eso es más de un concepto avanzado. Por ahora lo que estamos haciendo, está totalmente bien solo usar el File Manager. Lo que vamos a hacer es actualizar aquí estos campos, ese nombre de usuario, contraseña, host y base de datos. El fácil que conocemos es la base de datos ya no es test db, es skillsharecourse_test. Voy a poner eso ahí dentro. Presioné intuitivamente Command S para guardar, pero no lo haces cuando estás usando el Administrador de archivos. Volviendo a aquí, si no recordamos nuestro nombre de usuario, solo podemos ir a Bases de Datos MySQL y comprobar los usos actuales. Nuestro nombre de usuario fue skillsharecourse_admin. Podemos volver aquí, poner eso como el nombre de usuario. Recuerda que creé un documento para guardar nuestra contraseña. Voy a entrar, copiar eso y poner esa contraseña. Ahora para DB HOST, solo podemos dejarlo como localhost. Haga clic en Guardar. Pasa a nuestro proyecto, refresca la página, y veamos qué pasa. Conexión exitosa y tenemos nuestra página web aquí y todas nuestras referencias a la base de datos siguen funcionando. Lo único que realmente cambió fue el nombre de nuestra base de datos, pero todo dentro es igual. También el usuario que se conecta a la base de datos, es decir sólo para tener un usuario para iniciar sesión en la base de datos. Todo una vez que ingresamos a la base de datos es igual. El cuadro donde los nombres eran los mismos, los campos eran los mismos, y por eso de repente tenemos aquí un sitio web. En el siguiente video, te voy a mostrar cómo editarías tu sitio web en vivo, usando FTP. Porque si vas a hacer cambios una y otra vez, realmente no quieres hacerlo en el File Manager. Lo más probable es que quieras hacerlo localmente primero si estás haciendo mucho desarrollo, así que edítalo aquí y luego portado a través. Hay muchas formas de desplegar un sabio más avanzado para desplegar. Pero solo quería mostrarte rápidamente FTP porque es importante saberlo como desarrollador web. Te veré en el siguiente video. 18. Uso de FTP: En el último video, actualizamos nuestro index.php usando el editor incorporado en nuestro gestor de archivos cpanel. Pero en este video, vamos a hablar de FTP, que significa File Transfer Protocol. Lo que es realmente beneficioso del FTP en nuestra situación es decir, por ejemplo, no queremos editar estos archivos desde dentro de esta interfaz en la nube. A lo mejor queremos editarlos usando nuestro editor de código Adam, porque al menos para mí es mucho más agradable de usar y podemos tener todos nuestros archivos aquí rápidamente editables. Simplemente lo hace más fácil. Podemos utilizar nuestras herramientas locales para realizar cambios en vivo a nuestra página web. Ahora, un descargo de responsabilidad, dependiendo lo grande que sea tu sitio web o cuáles sean los cambios que estés haciendo, quizás no quieras hacer cambios en vivo por lo que probablemente deberías construirlo todo localmente, desarrollarlo todo en tu anfitrión local aquí, verificar que funciona, y luego empezar a migrarlo de nuevo. Hay formas más sofisticadas que simplemente copiar los archivos como lo hemos hecho. También puedes hacer eso a través de FTP, pero digamos por ejemplo, hubo un pequeño cambio o algo que creas que no va a causar un gran problema y querías editar esto usando tu propio editor de código, podemos usar lo que es llamado FTP. Pensé que esto sería importante incluir FTP porque es algo que uso todo el tiempo con mis proyectos. Vamos a volver a cpanel aquí, y vamos a volver a la página de inicio. Lo que podemos hacer para crear una cuenta FTP es hacer click en cuentas FTP. Aquí no voy a ser demasiado creativo, sólo voy a llamarlo cuenta FTP. Voy a ir a una contraseña para generar una contraseña aleatoria para usar. Lo importante aquí es el directorio para que quieras deshacerte de todo esto porque por defecto, tiene una sección de la cantidad de información que esta cuenta FTP puede reunir. Si estuvieras ejecutando un sitio web grande y solo querías darle acceso a un usuario en particular a una pequeña parte de tu sitio. tal vez crearías un directorio diferente para ellos, pero queremos editar todo el sitio, así que vamos a deshacernos de eso. Realmente no necesitamos un codificador porque lo estamos usando así que crearemos la cuenta FTP. Ahora, lo podemos ver aquí. Ahora, la otra cosa que vas a necesitar para usar FTP localmente, en tu propia computadora es un cliente FTP y el cliente FTP que uso se llama Cyberduck, también hay uno llamado FileZilla. Pero básicamente es un pequeño programa que te permite conectarte vía FTP. Permiten conectar otros servidores también. Ya tengo instalado Cyberduck, todo lo que necesitas hacer es simplemente descargarlo e instalarlo, no hay mucha configuración que deba suceder en ese sentido. Lo que me gusta de cpanel es que solo puedo hacer click en esto y puedes descargar los archivos de configuración. Si quieres hacerte la vida más fácil en tu Windows, usa FileZilla o CoreFTP y si estás en Mac, puedes usar Cyberduck como yo y puedes descargar el archivo de configuración el cual tendrá toda la información guardada para ti ya. Si quieres hacerlo manualmente, estos son los campos que necesitas poner en tu cliente. Lo que voy a hacer es descargar el archivo de configuración FTP para Cyberduck. Simplemente ahorrando en descargas. Todo lo que necesito hacer ahora es solo hacer clic en él y de repente se abre Cyberduck y se abrirá, o empezará a abrir una conexión a nuestro sitio web. Ya tiene aquí, el nombre de usuario precargado y podemos acceder a él. Simplemente necesitamos volver a escribir nuestra contraseña porque no está guardando la contraseña por razones de seguridad para que podamos pegar ahí esa contraseña, haga clic en iniciar sesión. Se va a decir conexión no segura la mayoría de las veces, solo tienes que hacer clic en continuar. Una vez que hayas iniciado sesión, podrás ver toda tu página web. Entonces puedes hacer clic en HTML público y ahí está tu índice php. Lo genial de usar FTP es que puedo hacer clic con el botón derecho en esto. No quiero hacer clic en editar con texto editar para poder cambiar mis preferencias e ir al editor y decir que quiero editar con Atom y usar siempre esta aplicación. Creo que tal vez necesitas refrescarte. Ahora puedo hacer clic en el botón de edición y de repente lo tenemos en nuestro editor de código. Ahora, algo de lo que debes estar al tanto es la diferencia entre tu índice php en tu servidor web remoto y el índice php que tienes localmente. Si las tienes abiertas al mismo tiempo, solo ampliaré esto, Atom te hará saber cuál es cuál. El que está en las carpetas var privadas es el que estás editando temporalmente para luego volver a subir a tu sitio web y éste está en tu directorio de proyectos del curso de Skillshare o como se llame, mío solo se llama curso de Skillshare. Podemos hacer cosas como entrar aquí y voy a ir a aquí donde podamos ver nuestro sitio web en vivo, ponerlo a un lado, y cambiemos algunas cosas. Digamos “Hola y bienvenidos a este sitio web, " y luego presionamos guardar. Lo que va a pasar es que va a subir con Cyberduck. Dice subir completo, una vez que dice subir completo, deberíamos poder refrescar la página y dice “Hola y bienvenidos a este sitio web”. Ahora somos capaces de editar nuestro sitio web en vivo usando un sistema que nos resulta mucho más familiar cuando desarrollamos lo que se llama localmente, localmente significado en nuestra propia computadora, podemos usar nuestro propio editor de código, podemos navegar a diferentes archivos. Digamos por ejemplo, si quería editar otro archivo también, digamos por ejemplo que quería tener los estilos abiertos al mismo tiempo, puedo editar esos también y así puedo rebotar entre index.php y styles.css en el servidor remoto y haga clic en guardar. En cuanto sube, esos cambios están en vivo en nuestra página web por lo que ese es el beneficio de usar FTP. Hay otros beneficios, pero para mí como desarrollador, uso FTP de esta manera con mayor frecuencia, pudiendo editar un sitio web en un servidor remoto, que a veces ni siquiera es un sitio web en vivo, podría estar en lo que se llama una puesta en escena servidor. Un servidor de puesta en escena es un sitio web en vivo, pero no está en la dirección del sitio web final. Eso es un poco de FTP, Cyberduck es un programa pequeño y fresco para su uso en la Mac, para ustedes chicos en Windows, podría gustarles FileZilla. Pero ahora que hemos cubierto FTP, ahora sabemos construir un sitio web, ponerlo en Internet, y ahora editarlo usando FTP y así eso es esencialmente el grueso del curso. Tengo algunos videos más llegando para envolvernos. Sí, ojalá puedas empezar a entender ahora cómo funciona el desarrollo web y las diferentes partes que todas se unen para conseguirte un sitio web en Internet. Si tienes alguna pregunta, claro, déjala en la sección de preguntas, y te veré en el siguiente video. 19. Extra: Wordpress: Está bien. En este video, quiero compartir con ustedes un poquito de bono y ese bono es WordPress. Ahora en este curso, básicamente hemos construido todo desde cero. Sí, sí usamos algunos frameworks en el caso de jQuery y Bootstrap y sí usamos un poco de una plantilla para empezar en nuestra página de inicio pero notarás que todo el PHP que teníamos que hacer nosotros mismos y si fueras a construir un totalmente aplicación web personalizable, tendrías que programarte y usar bibliotecas y tal vez desarrollar uno de esos frameworks back-end que cubrimos en la lección sobre frameworks pero para mucha gente, no necesitamos reinventar la rueda, solo necesitamos un sitio web de contenido sencillo y una de las mejores plataformas para desarrollar que es un sistema llamado WordPress. Ahora si entramos, tecleamos WordPress en Google, lo que no estoy hablando es wordpress.com, que es un sitio web que te permitirá crear un sitio web de WordPress en su propio hosting y controlan todo menos de lo que estamos hablando es del software de código abierto. WordPress es un montón de código que puedes simplemente descargar y editar completamente o usar como se te da de inmediato de la caja. Sólo para demostrar que, si fuéramos a descargar WordPress, sólo se trata de un archivo de nueve megabytes, así que puedo entrar en descargas, descomprimiré WordPress y entonces esto es esencialmente el back-end de un sitio de WordPress. Entonces tienes todo un montón de archivos PHP aquí, tienes plugins y temas y cosas diferentes a las que llegaremos en tan solo un momento pero solo quería hacer el punto de te consigas un montón de archivos PHP cuando descargas WordPress pero juntos crean un sitio web justo fuera de la caja. Para demostrar esto, lo que voy a hacer es, voy a volver a nuestro proyecto aquí y nunca estuve demasiado apegado a este sitio web para empezar. Lo que voy a hacer es simplemente eliminar lo que tenemos aquí, si has puesto mucho esfuerzo en tu sitio web, tal vez no quieras eliminar esto y tal vez deberías hacerlo en un sitio web diferente pero no estoy demasiado apegado a eso, por lo que voy a usar exactamente el mismo host para hacer esto en el mismo dominio exacto. Entonces voy a ir a cPanel y lo genial de cPanel es que puedes instalar algunas aplicaciones con, básicamente, lo llaman una instalación con un solo clic pero solo quedan unos clics por hacer. Instalar WordPress en tu propia computadora lleva un poco de tiempo, necesitas configurar bases de datos como lo hemos hecho pero usando cPanel, solo podemos conseguir un sitio de WordPress con bastante facilidad. Por lo que tenemos WordPress aquí, podemos dar click en “Instalar aplicación” y nos hará unas preguntas. Queremos instalarlo justo en nuestro dominio porque acabo de eliminar los archivos, me importa que este se convierta ahora en mi sitio web de WordPress. Puedes quedarte con la configuración estándar, lo que voy a hacer es cambiar mi nombre de usuario de Administrador solo a Admin y voy a poner otra contraseña. Sé que creamos muchas contraseñas en este curso pero realmente deberíamos crear una contraseña separada para WordPress también y así lo que voy a hacer es como siempre, voy a ir a mi única contraseña y solo generar una nueva contraseña y asegúrate de guardar eso en algún lugar. Tengo contraseña FTP aquí, WordPress, contraseña. Está bien. Este está vacío. Tu correo electrónico de administrador es el correo electrónico al que va a enviar información en base a lo que está pasando, en WordPress. Voy a cambiar eso a chris@christhefreelancer.com y puedes nombrar tu sitio web, lo que sea. Simplemente lo voy a dejar como mi blog, sólo otro sitio de WordPress y puedes dejar todo lo demás igual y dar clic en “Instalar”. Aquí verás lo rápido que puedes obtener una aplicación de instalación de WordPress. Cerraré estos y ojalá pueda mostrarles esto en tiempo real. Tan rápido, ojalá no se quede atascado en 99 y la instalación esté completa, ¿qué tan rápido fue eso? Ahora cuando vamos a nuestro dominio, tenemos un sitio de WordPress. No parece mucho ahora pero aquí están pasando algunas cosas y lo que podemos hacer es que podemos acceder al administrador. Lo importante a saber es que mucha gente se confunde, ya tengo mis datos de inicio de sesión para cPanel, por qué necesito iniciar sesión en WordPress y entrar en un panel diferente. Bueno, cPanel es una capa más profunda, es solo un lugar para administrar tu sitio web y en realidad puedes acceder al código, así que si volvemos a nuestro gestor de archivos, podemos ver ahora que en HTML público, esa estructura que vimos antes cuando descargamos WordPress ya está aquí. Como dije antes, WordPress es sólo un montón de archivos de código que juntos te convierten en un sitio web. En cPanel, aquí es donde harías todas las cosas que ya hemos hecho, como acceder a tus archivos, mirarías tu base de datos manualmente, harías todas estas direcciones de correo electrónico, subdominios, todas esas cosas que harías desde tu cPanel pero en cuanto a tu nuevo sitio web de WordPress, este es el backend. Este es tu panel de control y por lo que necesitas un inicio de sesión diferente para esto. Cómo funciona WordPress y la magia de la misma en realidad se inicia como una plataforma de blogueo, es que puedo crear posts. Puedo hacer click aquí y en lugar de Hello World, solo dejaré Hello World ahí por un segundo y diré la entrada de blog número dos y luego solo podemos teclear contenido de blog y le podemos dar una categoría también. Digamos que son artículos de viaje, me encanta viajar. Sé que esto no está relacionado con los viajes pero solo como ejemplo, podemos dar clic en “Publicar” y luego podemos verlo. Ahora tenemos una entrada de blog con contenido de blog y luego en cualquier lugar que haga referencia a todas las entradas del blog, ya veremos. Entonces por defecto, cuando vayamos a nuestra página web , nos mostrará todas nuestras publicaciones de blog. Ahora puedes ver Hello World y también puedes ver las entradas de blog también. Ahora ya estamos logueados actualmente, así que tenemos esta barra como administrador pero si la abriéramos en una Ventana de incógnito, para que podamos verlo como el usuario lo vería, ellos la ven exactamente igual excepto sin esta barra y son tampoco es capaz de editar las cosas aquí. Si notas desde antes, hay algunas cosas extra que aparecen como editar, el usuario no tendrá eso en su extremo. Es completamente seguro a menos que les des un login y en realidad puedan cambiar estas cosas. Lo primero con tener un sitio de WordPress que querrás personalizar es un tema y lo que estás viendo aquí, cuando vas al sitio web real es un tema básico por la propia WordPress llamado 2017. Cada año crean uno nuevo basado en el año y así es como lucía el 2015, así es como luce el 2016. Asumo que el nuevo saldrá bastante pronto y luego habrá otro al año siguiente. Pero me gusta usar un tema llamado Divi y puedes encontrar Divi, solo escribe tema Divi, es proporcionado por temas elegantes. Definitivamente no tienes que usar este pero sí paga para invertir en un bonito tema de WordPress que tenga un constructor de páginas. Porque esencialmente, si quisiéramos, tengo demasiadas cosas al mismo tiempo. Si queríamos personalizar y crear una página en este tema actual, podemos ir a “Agregar nueva página” y básicamente obtenemos la misma interfaz que nuestras publicaciones y podemos agregar imágenes. Sólo pongamos una imagen de mi cara ahí dentro, no es porque me ame a mí mismo, es sólo porque surgió primero y tal vez esto no se trata de página para mí, así que puedo alinear esto a la izquierda y luego poner: “Hola, soy Chris” y yo hago clic en el enlace ahí, así que eso es tratar de enlazar a algún lugar pero solo puedo editar eso y puedes ver que aún no hemos tenido que profundizar en el código, todo es solo usar este editor. Todavía no puedo deshacerme de esto. Esencialmente para deshacernos de esto, realidad podemos cavar en el HTML y eso se hace haciendo clic en esta pestaña de texto. Puedo ver aquí ahora que tenemos una etiqueta de enlace, por lo que puedes deshacerte de eso a ambos lados y eso nos permite volver a pinchar aquí y ver la representación visual. Pero cuando estás usando un tema que no tiene un constructor de páginas, esta es toda la personalización que obtienes. Se puede alinear, se puede poner en una cotización, se puede poner en enlaces, diferentes encabezamientos. Entonces voy a poner en el rubro uno. Entonces podemos publicar eso como una página o tal vez no. Probablemente debería darle un título primero, Acerca de. Entonces podemos tener nuestra página Sobre. Eso aparecerá en base a nuestro tema. Pero el beneficio de usar algo como Divi es que obtienes un constructor de páginas. Debido a que Divi es un tema premium, no puedes buscarlo aquí, tendrás que subirlo una vez que lo hayas descargado. De nuevo, no estamos haciendo un curso completo sobre Divi o desarrollo de WordPress. Solo quería darte un poco de demostración sobre cómo puedes crear un sitio web con código mínimo y también tenerlo totalmente personalizable. Esto se acaba de subir ahora, es un tema bastante grande, sólo vamos a adelantar rápidamente esto y nos vemos en tan solo un segundo. Divi ha subido a nuestro sitio de WordPress ahora. Simplemente lo van a instalar ahora para nosotros. Como puedes ver aquí dice, Theme se instaló con éxito. El último paso, será activarlo si estamos seguros de que definitivamente queremos cambiar a este tema. Todavía no tenemos nada en nuestra página web, así que eso no es un tema. puedes ver que ya ha añadido algunas cosas a nuestra lista aquí. Hay otro tipo de post en Divi llamado Proyectos y eso es bueno para carteras. Si estás usando un tema premium como Divi, a menudo te dará otro menú y te dará opciones de tema para que puedas editar funciones directamente en el tema. Si volvemos a nuestra página web, podemos subir aquí y hacer clic en Visitar sitio. De repente, nuestro sitio web luce completamente diferente. Todavía tenemos las dos entradas de blog, pero tenemos una estructura completamente nueva, supongo una nueva piel, se puede decir, y este es realmente el nuevo tema, Divi. Pero lo poderoso de Divi y algunos otros temas premium también, es que puedes crear una nueva página y puedes estructurarla usando su constructor de páginas. Ahora que tenemos Divi, puedes ver estas cosas extra moradas que vienen. Tenemos los ajustes por aquí, y luego tenemos un botón aquí para usar el Divi Builder. Lo que voy a hacer es, voy a nombrar esta página Divi Page y voy a dar clic en Usar Divi Builder. En realidad se puede usar el Visual Builder. Te lo mostraré. Se trata de un visual especial Lo que ves es lo que obtienes constructor en Divi, y luego así en realidad puedes interactuar con la página justo enfrente de ti. Es genial para los diseñadores que quieren ver sus cambios suceden de inmediato. Aquí, solo puedo poner algo de texto, hola, hola y se puede ver eso de inmediato. Entonces podemos cambiar otros aspectos de diseño como alineación, dimensionamiento, aquí hay muchas opciones y tomará un tiempo familiarizarse con, y va a depender del tema que estés usando, solo estoy usando Divi. Si hacemos clic en Guardar, te mostraré, publicaré más bien porque es una nueva página. Ahora que eso ha sido guardado y publicado, voy a salir de Visual Builder y mostrarte la otra manera que podemos editar. Tenemos Divi y eso es a través de este Divi Builder y podemos construir secciones. ¿ Dónde está nuestra fila aquí? Tenemos nuestra fila en módulo. Podemos agregar otra fila y podemos configurarla como nos guste, como cuatro columnas del mismo tamaño, o podemos tenerla así con una de dos tercios de tamaño y otra de un tercio de tamaño, podemos dividirla en dos. Hagámoslo solo. Después tenemos estos espacios para hacer click y poner un módulo. Puedes buscar los diferentes en Divi si te interesa, pero podríamos poner como una imagen, por ejemplo, y luego podríamos poner en esa imagen que teníamos antes, pega Save. Si no quieres publicar realmente los cambios, di que si estás usando esto en un sitio web en vivo, solo puedes previsualizar para ver cómo se vería antes de guardar. No he puesto ninguna restricción a la imagen real, así que aparece como el ancho completo. Pero si quisiéramos cambiar el ancho del mismo al 12 por ciento, podríamos refrescarlo. Entonces en la otra parte, podríamos moverlo hacia aquí, eliminar esta fila, poner en un campo de texto. Solo estoy jugando por ahí para ser honesto, solo te estoy mostrando lo que podemos hacer en Divi. Pondré texto de prueba, guardar, actualizar, ver página. Se puede ver que tenemos una columna aquí y una columna allá. Ahora, obviamente, no es el sitio web más hermoso. Todavía hay trabajo que hay que hacer. Pero quería demostrarles a ustedes WordPress y cómo podemos hacer mucho del levantamiento pesado justo fuera de la caja con WordPress, es un software de código abierto muy potente. El motivo por el que se llama open source es porque podemos editar el código directamente. De hecho, podemos ir directamente a la apariencia, editor, y está diciendo, ten mucho cuidado con la edición del código back-end. Digo que sí, y podemos editar cualquiera de los archivos temáticos de cualquiera de nuestros temas. Desde dentro de WordPress, podemos editar cualquier cosa dentro de esta foto en particular. Esto es sólo un ejemplo, pero en este sitio web veríamos otra carpeta para Divi, y podríamos editar todos esos archivos. Entonces si vamos un paso más profundo, como hicimos con nuestro File Manager, podemos ir directamente a nuestra estructura de archivos y editar cualquiera de estos. Ahora bien, no querrías editar ninguno de estos porque estos son los que hacen que WordPress funcione. Pero de nuevo, solo para demostrar que esto es de código abierto, esto es solo un montón de archivos que puedes editar, pero es insanamente potente y puedes personalizar todo lo que quieras con WordPress. Proporciona el buen equilibrio de hacer mucho del levantamiento pesado, preparar algunas de las cosas que no querrías codificar desde cero, y luego también permitiéndote todavía editarlo completamente y personalizar el sitio tanto como necesites. Yo solo quiero dejarte con WordPress porque para muchos sitios web de mis clientes que vienen a mí y me acaban de decir, quiero un sitio web, les recomiendo WordPress, y Divi es el tema que he usado recientemente, pero hay otros temas que yo recomendaría también. Uno que he usado en un proyecto de cliente ha sido Fortuna, que viene con su propio constructor de páginas. Yo haría totalmente tu propia investigación para encontrar un tema con un buen constructor de páginas, y puedes tener sitios web funcionando así. Por ejemplo, mi propio sitio web, Chris el Desarrollador, construí muy rápidamente usando WordPress y Divi. Es bastante fácil. Con WordPress configuras tus menús, puedes establecer todo dinámico, puedes crear páginas como lo hicimos, puedes ver publicaciones de blog, y puedes subir tus fotos y logotipos y cosas diferentes. Espero que esa fuera una buena introducción a WordPress. Si no quieres construir todo desde cero y solo necesitas un sitio web de contenido básico y ni siquiera un sitio web de contenido básico, sino un blog o algo que no, como toda una app independiente que tiene que hacer algo especial. WordPress es a menudo una buena opción. Si estás haciendo un sitio web de comercio electrónico, hay algunas plataformas diferentes también, pero principalmente hago sitios web de contenido y WordPress es un muy popular lo que se llama Content Management System, aka CMS, por hacer contenido sitios web. Espero que esa fuera una buena introducción a WordPress. En los próximos videos, vamos a terminar y ponerte en marcha en tu propio proyecto de clase. Te veré en el siguiente video. 20. Conclusión y proyecto de clase: Es hora de terminar este curso y empezar a trabajar con su proyecto de clase. Por ahora deberías entender la diferencia entre el front end y el back end, el propósito de HTML, CSS, y JavaScript, qué es un framework y por qué deberías usar uno, el propósito de PHP y MySQL, la diferencia entre un nombre de dominio y hosting y cómo publicar tu sitio web en internet. En nuestro proyecto de clase, es hora de juntar todos estos nuevos conocimientos para publicar tu primer sitio web a internet o segundo o tercero, tal vez ya lo has hecho antes. todas formas, te voy a dar algunas opciones. Número 1, puedes construir tu sitio desde cero como hicimos en la mayoría de esta clase o dos, como lo hicimos al final, empezar por inscribirte a hosting y empezar a construir tu sitio en WordPress. Depende de ti de cualquier manera cómo quieras hacerlo. Sólo recuerda que cada vez que no sepas hacer algo, solo empieza a buscar en Google. Aquí estoy siendo serio y no estoy exagerando cuando digo que investigación constante es algo que necesitarás hacer a lo largo de tu carrera como desarrollador. Aunque vinieras solo para aprender más sobre la web, aprender a investigar como un desarrollador web es una habilidad de la que todos definitivamente podemos beneficiarnos. Después de todo, los desarrolladores son solo solucionadores de problemas y el Internet en sí es un vasto recurso para aprender cualquier cosa, igual que lo hemos hecho dentro de este curso. Si sí necesitas alguna ayuda extra, solo déjame un comentario en el cuadro de discusión y también avísame si quieres que cree otra clase para ustedes chicos, entrando en mayor detalle sobre cualquier cosa de lo que hablamos en la clase de hoy. Con eso concluye el curso. Les agradezco muchísimo chicos por ver y espero ver sus proyectos de clase. Suertes, y los veré en la sección de discusión.