Les dejo los atajos de teclado para VSCode en Windows:
.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Herramientas para la web
Qué aprenderás para configurar tu entorno de desarrollo
Descargar e instalar un navegador web: Chrome
Manejo básico de las DevTools
Quiz: Herramientas para la web
Editor de texto
Instalar VSCode
Extensiones de VSCode
Cómo usar Linux dentro de Windows
¿Qué es WSL?
Configurar Windows 11 para soportar la instalación de WSL
Ubuntu en WSL
Instalación de VirtualBox
Instalación de Ubuntu en VirtualBox
Comandos básicos de la terminal
Instalación de Node
Instalación de Python
Quiz: Cómo usar Linux dentro de Windows
Git y Github
Instalando Git
Vincular la llave SSH
Subir tu primer repo
Quiz: Git y Github
Trucos de Windows
Power toys
Quiz: Trucos de Windows
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 49
Preguntas 12
Les dejo los atajos de teclado para VSCode en Windows:
.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
se que lo dejaron en ingles los paso en español.
Acciones generales
Ctrl + Shift + P: Abrir la paleta de comandos.
Ctrl + Shift + N: Crear un nuevo archivo.
Ctrl + X: Cortar la línea actual.
Ctrl + C: Copiar la línea actual.
Ctrl + V: Pegar la línea cortada o copiada.
Ctrl + Z: Deshacer la última acción.
Ctrl + Shift + Z: Rehacer la última acción.
Ctrl + S: Guardar el archivo actual.
Ctrl + Shift + S: Guardar todos los archivos abiertos.
Navegación del editor
Ctrl + Tab: Cambiar entre pestañas abiertas.
Ctrl + 1, Ctrl + 2, etc.: Cambiar a una pestaña específica.
Ctrl + G: Ir a una línea específica del archivo.
Ctrl + Shift + O: Ir a un símbolo (variable, función, etc.) en el archivo.
Ctrl + Shift + M: Mostrar la lista de errores y advertencias.
Edición de texto
Alt + ↑ y Alt + ↓: Mover la línea actual hacia arriba o hacia abajo.
Ctrl + Shift + L: Seleccionar todas las ocurrencias de la selección actual.
Ctrl + D: Seleccionar la siguiente ocurrencia de la selección actual.
Ctrl + U: Deshacer la última selección.
Ctrl + Shift + ]: Indentar el texto seleccionado hacia la derecha.
Ctrl + Shift + [: Indentar el texto seleccionado hacia la izquierda.
Depuración
F5: Iniciar la depuración.
F10: Paso a paso en la depuración.
F11: Paso a paso en la depuración con entrada en las funciones.
Shift + F11: Salir de una función en la depuración.
F9: Establecer o eliminar un punto de interrupción.
¡Espero que esta lista te sea útil! Recuerda que también puedes personalizar los atajos de teclado en Visual Studio Code según tus preferencias.
Profe, se saltó crerar el primer archivo y la pantalla de bienvenida a visual code. El resto, pepa, muy muy muy bueno.
Un IDE (Integrated Development Environment) representa un entorno de desarrollo integrado, un ambiente en donde puedes programar. Este IDE trae consigo herramientas que ayudan al desarrollador, como: debugger (depurador), consola, GIT, inteligencia (la cual te ayuda a corregir la sintaxis cuando estás escribiendo código), etc.
Lo que hace ser código al código es la sintaxis y el formato del archivo (.js , .css) etc.
Existen diferentes tipos de IDE, como por ejemplo:
• Visual Studio Code: “Edición de código redefinida”, es totalmente gratuito, está construido encima de open source, es decir que es de código libre y se ejecuta o corre en cualquier sistema operativo. Es muy versátil y puede servir con muchos lenguajes de programación.
• WebStorm: Se venden a sí mismos como “El IDE más inteligente para JavaScript”.
• Eclipse: es un IDE para el desarrollo de Java, sin embargo, admite varios lenguajes como C / C ++, PHP, ColdFusion, Python, Scala y la plataforma Android. Fue desarrollado en Java y sigue el modelo de código abierto.
• Atom: se venden a sí mismos como “El editor de texto hackeable”, es decir que nos dejan construir herramientas, modificarlo, hacerle variaciones a su código para adaptarse a lo que necesitamos.
• Editor de texto: Existen editores de texto / editores de código, las cuales son herramientas más minimalistas donde puedes programar pero con ciertos límites. Como el Bloc de Notas.
Tiene la siguiente interfaz:
<!DOCTYPE html>
<html>
<head>
<title>Página ejemplo</title>
</head>
</html>
La forma de “Autocompletar” dentro del archivo html, se coloca el signo de admiración (!
) y sale automáticamente un menú como éste:
!
te sale una plantilla HTML.! !!
solo aparece el <!DOCTYPE html>
ENTER
en cualquiera que seleccionas y listo 😉Casi que no entiendo, tenes que poner en el nombre del archivo que es .html, me dejaron media hora descubriendolo
Dato curioso aprendido: VSCode es de Microsoft.
Amo el autocompletado de las etiquetas, te ayuda mucho a ahorrar tiempo. El atajo de ctrl+s se convierte en algo tan automatico en la programacion, que no te das cuenta cuando lo haces… 😄
no es un curso de html pero falto la configuracion inicial del Visual Studio y que el archivo se debe llamar .html si no no te lo muestra en el navegador como en el video
Un editor de código es una aplicación de software diseñada para escribir, modificar y formatear código fuente de programas informáticos. Estas herramientas están especialmente diseñadas para desarrolladores de software y programadores, que necesitan crear y modificar el código fuente de sus aplicaciones.
Los editores de código son herramientas esenciales para los desarrolladores de software, ya que les permiten escribir y mantener su código de manera eficiente y organizada. Además, muchos editores de código son de código abierto y están disponibles de forma gratuita, lo que los convierte en una opción accesible para cualquier programador. Algunos ejemplos populares de editores de código incluyen Visual Studio Code, Sublime Text, Atom, Notepad++, entre otros.
Un editor de código proporciona una interfaz para escribir y editar el código fuente de un programa en varios lenguajes de programación, como HTML, CSS, JavaScript, Python, C++, entre otros. Los editores de código tienen características avanzadas, como el resaltado de sintaxis, la indentación automática, autocompletar , la búsqueda y reemplazo de texto, la integración con herramientas de depuración, entre otras.
Para que me aparezca automaticamente <!doctype tuve que crear el archivo con extension .html. Si creo un archivo nuevo sin grabar ni porner extension y elijo el lenguaje HTML desde la lista de lenguajes no dio la opcion al escribir <.
ME EMOCIONA ESTE PROCESO.
se salto la parte para habrir una carpeta y todo eso y ahora … a buscar x mi cuenta un buen rato sera
excelente para quienes estamos desde 0, no se ve dificil 😃
No se de html, pero teniendo en cuenta que la etiqueta “title” se encuentra dentro de “head”, y head es “encabezado”, supongo que la wed debe rederizar el nombre del titulo en el “encabeza de la pagina”
Un editor de código es una herramienta de software que se utiliza para escribir, editar y visualizar código fuente de programación. Los editores de código son programas diseñados específicamente para facilitar la escritura de código mediante el resaltado de sintaxis, la autocompletación y la organización de bloques de código.
El title se mostrará en la ventana del navegador
Nota:
Poner .html
Si no se autocompleta de manera automatica poner Control+k
creo que va salir en la pestaña donde sale los nombre creo no se deje en pause para escribir jaja
La etiqueta de titulo va a aparecer en el nombre de la pestaña de nuestro navegador Google Chrome
¿Cómo puedo restaurar a fabrica rapidamente VSC (Visual Studio Code)? ✨
Time to interactive, no conocia este nuevo termino
¿Cómo se llama la herramienta que usa un desarrollador de software para escribir código?
¿Microsoft Office es un editor de código, por qué?
¿Podemos usar el bloc de notas para escribir código?
¿Qué editor de código se recomienda usar hoy en día?
¿Quién desarrolló VSCode?
¿Cuáles son las ventajas de usar VSCode como nuestro editor de código?
¿Qué configuraciones se recomienda que hagamos mientras instalamos VSCode?
¿Cómo guardamos un archivo en VSCode?
uffff que clase tan bacana
es el titilo que va el la barra inicial de la página
Que es el InteliSense:
IntelliSense es una función de autocompletado usada en el entorno de desarrollo integrado Microsoft Visual Studio y también en el editor de código fuente Visual Studio Code. Es un auxiliar de finalización de código que incluye una serie de características como lista de miembros, información de parámetros, información rápida y palabra completa.
Qué es el debugging:
La depuración de programas es el proceso de identificar y corregir errores de programación. Es conocido también por el término inglés debugging, cuyo significado es eliminación de bugs (bichos), manera en que se conoce informalmente a los errores de programación.
🫡
También un dato extra que es de utilidad, si modificaron el archivo en Visual Studio Code y no se ha hecho el guardado, fíjense en la pestala del video en el minuto 5:43 ,cómo es que tiene el título del archivo ejemplo.html
Tiene justito al lado una bolita blanca, eso significa que no se han guardado los cambios, vean como el profe hace Ctrl+S y se quita la bolita, eso es porque así como ves el archivo se ha guardado correctamente.
Funciona mucho saber esto porque aveces ni sabes que pasó con el archivo, y porque usando Git te detecta cambios y tu ni en cuenta, pues eso sirve porque aveces uno le da clic a un botón por accidente y ya se modificó todo nuestro trabajo.
Este editor también tiene extensiones, en mi caso por ejemplo que uso las bases de datos, puedo configurar el archivo como .sql y detecta mis sentencias de búsquedas, y si detecta el comando lo hace como aquí en platzi
Select * From estudiantes
Pero ese es un lenguaje universal de sql, dependiendo del motor de búsqueda que uses tendrá sentencias especiales de dicho motor, en el caso de PostgreSQL tiene unos cuantos que no son básicos en el SQL pero al agregar una extensión en Visual Studio Code detectará los comandos especiales del programa que uses, en mi caso PostgreSQL
En lugar de arrastrar el archivo a google, una mejor opción es instalar la extensión Live Server. Esta extensión actualiza de manera automatica el navegador, dandole click en la opción Go live que se activa al instalar la extensión. Abrira de manera automatica el archivo ejemplo.html.
Cuando colocamos la etiqueta title aparece en el navegador como el nombre de la pestaña
La pagina ejemplo que se coloco en la etiqueta titulo es la descripción de la pagina que se esta creando como aparece en la parte superior de la ventana del navegador.
Visual Studio es una herramienta de desarrollo eficaz que permite completar todo el ciclo de desarrollo en un solo lugar. Es un entorno de desarrollo integrado (IDE) completo que puede usar para escribir, editar, depurar y compilar el código y, luego, implementar la aplicación. Aparte de la edición y depuración del código, Visual Studio incluye compiladores, herramientas de finalización de código, control de código fuente, extensiones y muchas más características para mejorar cada fase del proceso de desarrollo de software.
Sale en la pestaña del navegador como la que mande el pantallazo
Aquí sale el title:
![](
Haber era asi:
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
fffffffr
El titulo se muestra como nombre de la pestaña.
La forma más rápida de crear un documento HTML es con el atajo en VS:
html:5
Me surgió la curiosidad y bueno, aquí está en link de las características que tiene la computadora que está usando el profesor Celis. ¡Se ve BASTANTE guay! 👀
el titulo apareceria en el encabezado, es decir arriba bueno espero ser mas concreto despues de ver mas html
Visual Studio Code me parece genial para codigo y si quieren algo más general TYPORA me gusta mucho.
RESUMEN DEL VIDEO
El titulo aparece en la pestaña del navegador
¡Como nombre del sitio web!
Gracias!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.