Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Cómo usar Live Server en proyectos reales de HTML y CSS

6/17
Recursos

Aportes 330

Preguntas 168

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Todos al escribir " se escribir un hola mundo en html (hola mundo btw) XD XD XD XD XD XD JAJAJA es normal 😃

Esta imagen les servirá

A LOS QUE NO LES DEJE USAR LIVE SERVER AL INSTALAR LA EXTENSION, DEBEN PRIMERO SERSIORARSE DE QUE TIENEN UN PROYECT FOLDER ABIERTO EN VSCODE CON EL ARCHIVO HTML QUE USARAN Y TIENEN QUE DAR CLICK DERECHO EN EL CODIGO Y DONDE DICE OPEN WITH LIVE SERVER

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Ya sé programar</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
😊

Hola les comparto mis apuntes hasta el momento:

PARA A LOS QUE NO LES DEJE AUTOCOMPLETAR LA SINTAXIS HTML LES DEJO UNA FORMA DE HACERLO

ES SOLO PONER EL SIGNO DE ADMIRACION Y DAR ENTER 😄

Tutorial para ver las extensiones de archivos en Windows 10

  • Haz click en el botón de inicio
  • Abre el Panel de Control
  • En Aperiencia y Personalización, selecciona Opciones de Carpeta
  • Haz click sobre Opciones
  • En el cuadro de diálogo, selecciona Ver
  • Anula el cuadro que dice Ocultar las extensiones de archivo para tipos de archivo conocidos y haz click en Aceptar

Me dió curiosidad el termino Boilerplate y me puse a buscar más y encontré algunas cosas interesantes.

En la programación de computadoras, el código repetitivo o simplemente el repetitivo son secciones de código que se repiten en varios lugares con poca o ninguna variación. Cuando se utilizan lenguajes que se consideran detallados , el programador debe escribir mucho código para lograr solo una funcionalidad menor. Este código se llama repetitivo . es casi como los atajos de texto de WhatsApp.

También se me hizo muy chistoso el origen:
El término surgió del negocio de los periódicos . Las columnas y otras piezas que fueron distribuidas por los sindicatos de impresión se enviaron a los periódicos suscriptores en forma de planchas de impresión preparadas . Debido a su parecido con las placas de metal utilizadas en la fabricación de calderas , se las conoció como “placas de caldera”, y su texto resultante - “texto repetitivo”. Como las historias que se distribuían por medio de placas de calderas solían ser " rellenos " en lugar de noticias “serias”, el término se convirtió en sinónimo de texto repetitivo y poco original.

Cuando buscas un poco más puedes encontrar cosas muy interesantes, me encantó.

Una anotación importante, únicamente les va a salir el botón Go Live si tienen una carpeta abierta, si tienen solo un archivo HTML abierto no les va a salir. Les dejo un ejemplo:
En esta imagen solo tengo abierto el documento:

Y aquí sí tengo abierta una carpeta:

😀 Que feliz me siento, cuando todo sale bien.

Es de gran ayuda Live Server, solo guardas y de inmediato visualizas el cambio 😃

Aquí les dejo un listado de temas para que personalicen su VS Code: https://matr1x.cubava.cu/top-12-mejores-temas-para-visual-studio-code/

Este es mi 4to Hola mundo en mi vida, recuerdo que en el 2016 fue el primero cuando quería hacer mi primera pagina web, luego como el 2017 y el 2020… Pero ahora si el definitivo y correcto “Hola mundo” porque ahora si se a lo que voy. Pensar que hubiese empezado desde el 2016…

Anatomía del código HTML5 – Las partes y su significado
DOCTYPE
1
<!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

HTML
1
<html></html>
Delimita el documento HTML.

Atributo a destacar
LANG
1
<html lang=“es”></html>
Indica el lenguaje de contenido del código.

HEAD
1
<head></head>
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.

META
1
<meta name=“description” content=“Descripción de la WEB”>
Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.

Usos a destacar
META CHARSET
1
<meta charset=“UTF-8”>
Establece el tipo de codificación del documento.

META TITLE
1
<meta name=“title” content=“Título de la WEB”>
Contiene el titulo que se mostrará en los buscadores.

META DESCRIPTION
1
<meta name=“description” content=“Descripción de la WEB”>
Es el texto que se muestra bajo el título en los motores de búsqueda.

LINK
1
<link href=“link del estilo” rel=“stylesheet” type=“text/css”/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.

BODY
1
<body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

HEADER
1
<header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

NAV
1
<nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.

A
1
<a href=“link domino”>IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.

Atributos a destacar.
HREF
Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6
1
2
3
4
<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.

SECTION
1
<section></section>
La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.

ARTICLE
1
<article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.

DIV
1
<div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

P
1
<p></p>
Entre las etiquetas P colocaremos un párrafo de texto.

IMG
1
<img src=“imagen.jpg” alt=“paisaje”>
Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar.
ALT
Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.

SRC
URL donde se encuentra la imagen.

ASIDE
1
<aside></aside>
Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.

FOOTER
1
<footer></footer>

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

Posible resultado de nuestro código HTML5

Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.

estructura del código html5

No sabía el significado de btw y encontré algunas palabras más xd
https://www.bbva.com/es/lol-btw-fyi-asap-significan-esas-palabras-mundo-utiliza/

Para activar la visibilidad de las extensiones solo debemos hacer lo siguiente.
Abrir cualquier carpeta -> Vista -> Activar extensiones de nombre de archivo

Hecho!
Les dejo un tutorial sobre 10 proyectos base que se puede hacer para aprender HTML, CSS, JS -------> ACÁ !

El boilerplate de HTML5 también funciona si solo le damos un signo de exclamación ! y luego presionamos enter.

Repaso de la clase

##Clase 3 – Cómo usar Live Server en proyectos reales de HTLM y CSS

¿Cómo llamamos a nuestro primer archivo HTML?

  • Index.

¿Desde dónde deberíamos crear un proyecto web?

  • Desde nuestro editor de código.

¿Por qué debemos crear un proyecto web desde el editor de código y no desde Windows?

  • Porque si nuestro Windows no está configurado para mostrar las extensiones de los archivos, estos aparecerán con una extensión .txt y deberemos renombrarlos.

Al instalar la aplicación Live Server no me aparecía el icono “Go Live” sin embargo ingresando a la aplicación y dando clic en las opciones…

luego “add to workspace” seleccionar “Workspace” y listo aparece en tu área de trabajo.

aqui hice el mio pero use pre en lugar de article para conservar espacios en el texto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el bicho en html</title>
</head>
<body>
    <pre>EL BICHO!!
                    ⣴⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⠂⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣦⠀
        ⠀⠀⠀⠀⠀⠀⣴⣿⢿⣷⠒⠲⣾⣾⣿⣿
        ⠀⠀⠀⠀⣴⣿⠟⠁⠀⢿⣿⠁⣿⣿⣿⠻⣿⣄⠀⠀⠀⠀
        ⠀⠀⣠⡾⠟⠁⠀⠀⠀⢸⣿⣸⣿⣿⣿⣆⠙⢿⣷⡀⠀⠀
        ⣰⡿⠋⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⠀⠀⠉⠻⣿⡀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⣿⣿⣿⣿⣿⣆⠂⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⡿⣿⣿⣿⣿⡄⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠿⠟⠀⠀⠻⣿⣿⡇⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⢀⣾⡿⠃⠀⠀⠀⠀⠀⠘⢿⣿⡀⠀⠀⠀
        ⠀⠀⠀⠀⠀⣰⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀
        ⠀⠀⠀⠀⢠⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣧⠀⠀
        ⠀⠀⠀⢀⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣆⠀
        ⠀⠀⠠⢾⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣷⡤⠄
        
        ¡SIIUUUUUUUUUUUUU!</pre>
</body>
</html>

Comparto mi resumen de clase en PPT, espero les sirva 😃

Slide 1:

:

Slide 2:

Slide 3:

Slide 4:

Slide 5:

Slide 6:

Hola, si activan la opción de autoguardado pueden hacer que la página se refresque automáticamente. Cada modificación que hagamos se guardara y al hacer esto liveserver lo detecta y refresca la página. Les dejo un Gif para activar el autoguardado en VSC.

Enlace de Gif si no se ve bien

Con ctrl+s guardamos el archivo para que se vean los cambios.

No es mi primer “hola mundo”, pero la emoción de hacerlo con las ganas de aprender más de lo que un plan de estudios ofrece, es increíble.
Te amo mucho Platzi.

Para sacara el Boilerplate de HTML en Visual Studio Code es más rápido poner el signo ! y presionar enter.

XD.

Cómo usar Live Server en proyectos reales de HTML y CSS
Los pasos son:

  • Creamos una carpeta para nuestro proyecto.

  • Damos clic derecho y abrimos nuestro visual studio code.

  • En caso no poder hacer el paso anterior, esto se configura durante al instalación, entonces abrimos VSC y arrastramos nuestra carpeta al editor

  • Desde el VSC creamos los archivos index.html ( se nombra de esta forma al primer archivo html del proyecto) y un archivo basic.css.

  • Si lo creas desde la carpeta en Windows se va a crear con la extension de archivo .txt (pues lo estamos creando como un archivo de block de notas, de texto plano)

  • Podemos generar Boilerplate, una plantilla base de un lenguaje especifico, de html al escribir ! y luego presiona enter.

  • De no haber instalado la extension Live Server, instala presionando cont shift x y luego búscala. Luego instalar y esperar.

  • Una vez instalada, buscamos go live en la parte inferior derecha.

  • Permitimos el acceso de salir algún cuadro.

  • Se abrirá una pestaña en nuestro navegador con nuestro sitio.

  • Si hacemos un cambio en el código y guardamos nuestro sitio se va a recargar solo.

En resumen:
Para poder crear un proyecto para escribir código primero se tiene que nombrar las extensiones de los archivos de acuerdo con el lenguaje de programación que vayas a utilizar, y es por eso por lo que cuando creamos y abrimos un documento con las extensiones de cualquier lenguaje de programación no se ejecutan porque Windows siempre al final agrega a los archivos de texto la terminación (.txt), por eso siempre que hagas un nuevo proyecto no lo hagas desde tu Windows sino desde tu programa que uses como visual studio code, y para eso debes crear una carpeta en donde vas a guardar tus proyectos, para crearlos solo debes elegir la carpeta donde se van a alojar y hay mismo darle a (crear un nuevo archivo) nombrándolo con la terminación final del lenguaje que gustes y el programa automáticamente lo reconocerá, también se pueden crear carpetas alado de (crear un nuevo archivo). Al escribir “html:5 + enter” inmediatamente se generará un (boilerplate) “caldera” que en programación se refiere a todo el código que esta hay como un (template) “Plantilla”, o como base que tiene que existir o también para el código repetitivo. Para visualizar el código de html en el navegador hay varias formas como la tradicional o con la extensión (live server) si nos pide permisos darle acceso y una vez que creamos código automáticamente después de guardar saldrán los cambios que hayamos hecho a nuestro código sin tener que tocar nada.

Aprendí cositas de HTML en el colegio y no puedo creer que en su momento no le haya prestado atención. !Qué triste¡ pero bueno, nunca es tarde para empezar/volver a empezar.

Os dejo por aquí una explicación que he encontrado en Internet sobre HTML5 Boilerplate:

Un nuevo termino que desconocia por completo, “boilerplate”.

En cualquier ventana que tengan abierta, pueden mostrar/ocultar las extensiones de los archivos. En la pestaña vista hay un apartado llamado Mostrar u ocultar, ahí encontrarán una casilla que dice Extensiones de nombre de archivo solo activen la casilla para que les muestre u oculte la extensión de sus archivos.

Si colocas el simbolo de exclamación: !
automaticamente completerá el boilerplate sin ser necesario poner html:5.
Me sucedio que sin querer borré el codigo en donde estaba practicando y pensé “ups, como puedo ir Atras? (go back)”:
Respuesta: Ctrl + z
Y para comentar el codigo sin poner --> ?
Respuesta: Ctrl + *
Live long and prosper

Boilerplate = template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más expertos

Boilerplate: estructura básica que necesitan ciertas tecnologías para la construcción de un proyecto. HTML por ejemplo necesita de un head, un body y algunas etiquetas meta. Este código es repetitivo por lo que se puede generar automáticamente con herramientas como VS Code.

PDT: Sería bueno que siempre dejen los términos en inglés con algún LABEL en alguna parte del vídeo, mi inglés es básico, me costó entender lo que el profesor dijo en el minuto 3:57

Boilerplate: se nombra a todo el codigo que funciona como una plantilla, base que debe existir, para que el sistema sepa que hablamos de un lenguaje en especifico.

Boilerplate: En la programación de computadoras, el código repetitivo, o simplemente, el código repetitivo, son secciones de código que se repiten en varios lugares con poca o ninguna variación. Fuente: Wikipedia

Información resumida de esta clase
#EstudiantesDePlatzi

  • Siempre que vamos a iniciar un nuevo proyecto, es bueno crear los archivos desde Visual Studio Code

  • Es bueno tener la configuración de escritura en inglés

Para que sus proyectos se actualicen en la página web que montaron con la extensión de Live Server, simplemente deben guardar el proyecto (Ctrl + S)

Ahora ya me siento hacker por poner un

mamá ya se programar

IMPORTANTE, si no te funciona el LIVE SERVER verificar que tengas UNA CARPETA DE ESTUDIO
No es lo mismo que los textos HTML o CSS (que ya los debes de tener abiertos), TIENEN QUE ABRIR LA CARPETA EN DONDE SE ENCUENTRAN ESTOS DOS FORMATOS
CARPETA, no texto, CARPETA
Lo repito muchas veces porque vi que muchos aclaraban y decian de abrirlo, pero yo lo confundia con los textos html y css que ya los tenia abiertos.

Un tip para crear archivos más rápido:

  1. Lo importan en un archivo como si ya existiese:

  2. Le dan Ctrl + click sobre el nombre del archivo y les aparecerá el siguiente dialogo:

    Le dan click en Create File y listo!

  • Extensión para tomar capturas bonitas de tu código: Polacode 2020.

O usar la alternativa online Carbon

Otra forma de generar el html de una forma mas corta que “html:5” es poner el signo de admiración “!” y darle TAB.

Es increíble lo que ayudan todas estas extensiones!! muchas gracias.

Si alguien viene del Curso Básico de programación y uso Atom, en Atom se llama “atom-live-server”

Por dios… GOLIVE es una pasada!!!

  • Para que les salga la extensión en Windows, deben marcar las pestaña Vista en su explorador de archivos y se les desplegara el menú, y deben marcar elo que señalo en el recuadro blanco.

Un punto a tomar en cuenta de Live server, es que si tus archivos no están en tu lugar de trabajo, no se muestra la herramienta, es decir sólo esta habilitada, cuando tienes tus archivos o proyectos en el que estas trabajando en tu espacio de trabajo, es decir dentro del editor, en la parte izquierda.

mi primer hola mundo en HTML

Sin dudar el Live Server es una de las mejores herramientas

Es bueno usarlo en ingles pero si te gusta en español pueden usar la siguiente extención.

Spanish Language Pack for Visual Studio Code

Para comentar se puede usar " Ctrl + / "

yo antes lo habia instalado por curiosidad. pero como lo activo ya que no me carga la pagina por mas que tengo instalado el LIVE SERVER. creo que en la alarma de seguridad no le di permitir

alguien me puede ayudar no me funciona live server ya le asigne el permiso pero aun asi no me funciona

“Hello world” is a little step for a learner but a giant step for the future developer. 💻

muy buena herramienta

No puedo esperar para seguir avanzando, esto está muy interesante.

Recomiendo (futuro) aprender a abrirlo desde la terminal (uso Linux), y te ayuda mucho.

No permita agregar la HTML 5 BoilerPlate por defecto, se debe agregar una extensión, vean el resultado:

html:5, no sabia q no se podia hacer eso.

No deberían grabar a esa resolución, no se ve nada si tienes mala conexión 😦

Para crear el esqueleto de HTML5 también, con escribir ! + tab se crea con todo y el SEO inicial de una página web.

Me gano Ricardo en el comentario. Mejor generen sus archivos desde VSC; no se si lo menciona, pero tal ves si mencionamos que tambien que se puede instalar la extension “Emmet” que podria funcionarles para el truco “html:5”. ¡Si funciona Live Server!.

Definición de wikipedia del statement HTML:5 o Boilerplate: HTML5 Boilerplate es una plantilla HTML, CSS y JavaScript para crear sitios web HTML5 con compatibilidad entre navegadores.

Gracias profe por las extenciones,

Si tienen problemas porque no les aparece Live Server aunque ya lo hayan instalado aquí les tengo un tip:
Denle clic derecho a su archivo html y ahí les aparecerá la opción Open with Live Server

Aunque comparto la buena práctica de crear los archivos desde IDE, si es cierto que a mi en lo particular me gusta ver las extensiones de las carpetas y archivos ocultos, para ubicarme más rápidamente en el tipo de archivo.
Les dejo como activarlo:
Como ver las extensiones de archivo en W10

yo en vez del live server tengo instalado live preview

Como buena práctica el profe recomienda crear los archivos siempre desde Visual Studio y no desde Windows directamente.

No funciono siguiendo los pasos fue confuso el abrir primero con error es preferible enseñar desde el principio buenas prácticas, ahora no se si por eso no funciono el link

El básico de todo lenguaje de programación!! Todo programador inicio por “Hola Mundo”

Esto pinta bien!!

Muchas gracias por la información.

El dato del “boilerplate” estuvo buenísimo. Increíble lo que se puede aprender en minutos de video.

Siento que tengo el mundo en mis manos.

Boilerplate code:

Traducción del inglés-En la programación de computadoras, el código repetitivo, o simplemente, el código repetitivo, son secciones de código que se repiten en varios lugares con poca o ninguna variación. Wikipedia (Inglés)

https://en.wikipedia.org/wiki/Boilerplate_code

¡Excelente herramienta! Ya que yo estaba usando el guardar y luego ir directamente a la carpeta donde estaba guardado y luego seleccionaba abrir con Google.

Error on port 5500

opsss esa herramienta esta rotisima… no tenia conocimiento de esta …

Mi primer "Hola mundo"xd

Algo que pude notar en Live server es que:
-Necesitas abrir el archivo desde un Folder

  • la pagina apara levantar con algun servidor porque levanta desde el localshost (127.0.0.1) con un puerto predeterminado que aparece al darle a go live, puede ser algo confuso si no estas familiarizado pero es una excelente hetrramienta para poder reflejar cambios en especial si trabajas en css

Al inicio se puede crear directamente los archivos desde vscode.

Mi primer hola mundo

AVER COMO VA ESTA CLASE…! CREO YO VOY BIEN

Super buena la extensión Live Server!

oigan que onda con la resolución de sus tutoriales, no todos tenemos una pantalla de 26" y doble monitor. Hagan algo o actualicen, también el spam constante de ve este curso aquel otro, y apenas es el primer video de instalación de IDE. La interface no es tan intuitiva y casi todo tiene redireccionamiento llega a ser algo tedioso

live server en una gran herramienta

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Se escribir un hola mundo en html (hola mundo btw)</title>
</head>
<body>
    <article>
       Hello world ♥ 
    </article>
</body>
</html>```

Corre de maravilla, sin problema.

He aprendido mas en pocos minutos aui que las semanas que dure estudiando en tal entidad educativa JAJAJAJA

Estoy viendo por segunda vez este curso porque la primera vez por el afán de empezar a programar pasé por alto muchos tips que nos cuenta el profe, desinstalé el WSL (que se instalará proximamente) y estaba usando mal el Visual Studio Code porque no usaba las extenesiones instaladas, realmente estén atentos a cada detalle.
Saludos

Dale que va

Si estás en la ruta de programación y desarrollo de software, es recomendable de antes de esta clase ver la de:

¿Qué es HTML/CSS/JS?; del curso de programación básica
Aquí el enlace:
https://platzi.com/clases/1050-programacion-basica/5104-que-es-htmlcssjs/

Muy buena este extención.

Recuerden poner el comando Ctrl + s para recargar la pagina cuando hagan cualquier cambio 😃