No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Modificación Visual de Páginas Web con Tab9 y ChatGPT

6/9
Recursos

Modificar una página web desde Visual Studio Code se ha vuelto más accesible gracias a herramientas como Tabnine, un asistente de inteligencia artificial que se integra directamente en el editor. Este asistente facilita la edición del código al sugerir y realizar cambios automáticamente. Aunque ChatGPT también permite modificaciones, Tabnine ofrece un enfoque más interactivo y visual dentro del entorno de desarrollo. A continuación, exploraremos cómo aprovechar Tabnine para realizar cambios visuales en una página web.

¿Cómo integrar y configurar Tabnine en Visual Studio Code?

  • Visita la sección de recursos para encontrar el enlace de Tabnine.
  • Crea una cuenta y selecciona el plan “Basic”.
  • Conecta Tabnine con Visual Studio Code e instala la extensión.
  • Inicia sesión en Visual Studio Code y auténtica tu cuenta para comenzar a usar Tabnine.

¿Cómo usar Tabnine para modificar el código?

  • Una vez instalada la extensión, abre Visual Studio Code.
  • Accede al chat de Tabnine para comenzar a dar instrucciones.
  • Prueba solicitando cambios como “cambiar el color de fondo del título principal.”
  • Tabnine te sugerirá el código necesario y te permitirá insertarlo directamente en tu archivo.

¿Qué ajustes adicionales se pueden realizar con Tabnine?

  • Tabnine permite modificar cualquier parte del código; simplemente identifica el elemento que deseas cambiar.
  • Puedes solicitar respuestas en español o en inglés, según tu preferencia.
  • Ajusta secciones completas del diseño de tu página al indicarle a Tabnine los cambios deseados.

¿Cómo comparar Tabnine con ChatGPT para modificar el código?

  • Tabnine trabaja directamente en Visual Studio Code, integrando cambios sin salir del entorno.
  • ChatGPT, en cambio, requiere que copies y pegues el código manualmente desde y hacia Visual Studio Code.
  • Ambos ofrecen soluciones, pero Tabnine es ideal para quienes prefieren trabajar directamente en el editor.

¿Qué otros elementos se pueden agregar a la página web?

  • Después de hacer modificaciones de color, considera añadir un banner de descuento u otros elementos visuales.
  • Usa Tabnine o ChatGPT para insertar el código necesario y ajustarlo a tu diseño.

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Les recomiendo que se dirijan primero a la clase número 5, ya que es en esta donde se empieza a crear la página como tal. Estas primeras 4 clases son para las personas que quieran aprender a modificar una página que ya han hecho. ![](https://static.platzi.com/media/user_upload/Anotaci%C3%B3n%202024-09-01%20172504-6cb59816-ab63-48ee-a847-75a683fa974f.jpg)
🔵 **Cómo obtener GitHub Copilot gratis** Si eres **estudiante de universidad o de instituto**, y dispones un correo institucional con una identificación que lo valide. Puedes postular a [GitHub Education](https://github.com/education), donde uno de los tantos beneficios es **GitHub Copilot gratis.** Yo me enteré tarde de este beneficio, así que espero que te sirva. 🚀🚀
Hice lo que dices pero por alguna extraña razón me aparece diferente la parte de TABNINE AI
Para integrar **Tabnine** a **Visual Studio Code (VS Code)**, sigue estos pasos: ### 1. Instalar la extensión de Tabnine en VS Code 1. Abre **VS Code**. 2. Dirígete al **Marketplace** de extensiones. Puedes hacerlo haciendo clic en el ícono de extensiones en la barra lateral izquierda o presionando `Ctrl + Shift + X`. 3. En la barra de búsqueda, escribe **Tabnine**. 4. Selecciona la extensión llamada **"Tabnine AI Autocomplete"** y haz clic en **Instalar**. ### 2. Configurar Tabnine Una vez instalada la extensión, es importante configurarla para un mejor rendimiento: 1. Después de la instalación, probablemente aparecerá una notificación para iniciar la configuración de Tabnine. Si no aparece, puedes abrir la **paleta de comandos** presionando `Ctrl + Shift + P`, luego escribe **Tabnine** y selecciona **"Tabnine: Open Hub"**. 2. Esto abrirá el panel de configuración de Tabnine en tu navegador. Desde allí, puedes: * Conectar tu cuenta o crear una nueva. * Personalizar preferencias, como activar o desactivar el autocompletado según el lenguaje de programación. * Configurar Tabnine para usar un modelo local o en la nube. ### 3. Verificar que Tabnine esté funcionando Para asegurarte de que Tabnine esté funcionando en VS Code: 1. Abre un archivo de código en algún lenguaje compatible (como JavaScript, Python, etc.). 2. Mientras escribes código, deberías notar sugerencias de autocompletado proporcionadas por Tabnine. ### 4. Atajos y comandos útiles * Para abrir nuevamente la configuración de Tabnine en cualquier momento, usa la paleta de comandos (`Ctrl + Shift + P`) y selecciona **"Tabnine: Open Hub"**. * Si deseas deshabilitar o ajustar la frecuencia de las sugerencias de Tabnine, puedes ir al menú de extensiones (`Ctrl + Shift + X`), buscar **Tabnine** y hacer clic en **Configurar**.
Tabnine es una herramienta de autocompletado impulsada por inteligencia artificial que se integra con Visual Studio Code (VSCode) para mejorar la productividad de los desarrolladores **Autocompletado inteligente basado en IA**: Tabnine utiliza modelos de inteligencia artificial para predecir y autocompletar el código a medida que lo escribes. Esto no solo ahorra tiempo, sino que también ayuda a reducir errores tipográficos y sintácticos. Además, Tabnine aprende de tu estilo de codificación y se adapta a tus patrones de uso, haciendo que las sugerencias sean cada vez más precisas y relevantes. * **Soporte para múltiples lenguajes y frameworks**: Tabnine es compatible con una amplia gama de lenguajes de programación y frameworks, lo que lo convierte en una herramienta versátil para desarrolladores que trabajan en diferentes entornos. Esto incluye lenguajes populares como JavaScript, Python, Java, C#, y frameworks como React, Angular, Django, entre otros. Su capacidad para ofrecer sugerencias precisas en varios lenguajes simplifica el flujo de trabajo y mejora la productividad. * **Integración fluida con VSCode**: Tabnine se integra perfectamente con VSCode, aprovechando las funcionalidades nativas del editor. La instalación y configuración de Tabnine son sencillas, y una vez activado, funciona sin interrupciones junto con otras extensiones de VSCode. Esto permite a los desarrolladores aprovechar el poder del autocompletado de IA sin tener que cambiar su entorno de trabajo habitual.
Al inicio me sorprendió la capacidad de la inteligencia Artificial de crear una estructura de la pagina con codigo HTML, CSS y hasta JavaScript, Sin embargo conforme avanza el proyecto no veo sostenible esta manera de trabajar. Sin el afán de quitarle mérito a la IA veo más conveniente tomar un curso básico de HTML y CSS y crear todo exactamente a nuestras necesidades.
Se confunde que empiece por estos videos el curso, pero debería aclararse más en un principio del video, pues muchos entran con la idea de crear una página y no con modificar una página web, pensé cuando dijo que modifiquemos nuestra página web ya publicada seria la del anterior curso.
Mi opción favorita fue el incorporar Tabnine a Visual Studio Code dado que puedes preguntar y obtener respuestas en una misma ventana y vista evitando distracciones o el partir la pantalla para poder trabajar. Además que sus respuestas son precisas y te explica donde debes cambiar o incluso puedes insertarlo en tu código sin cambiar de pantalla.
Honesta mente no me convence el uso de Tabnine, hay que pagar para que funcione con más potencial, prefiero quedarme con ChatGPT pagado
Me pareció más sencilla la opción con chat gpt. Me pregunto si también podemos hacer animaciones de fondo o poner videos
![](https://static.platzi.com/media/user_upload/imagen-aa860969-f908-456c-8bac-048d23fd389f.jpg) Nice
Prompts. ¿Podrías cambiar el color del título principal con éste código? (pega el código CSS)
Yo no eh logrado autenticarme. No encuentro donde pegar mi código. Estoy en Visual Studio en la pestaña Tabnine, pero no me permite pegar el token. Alguien sabe si debo instalar alguna extensión antes?
Una pregunta, ¿alguien pudo instalar correctamento el Tabnine? A mi no me salió nunca el mensaje que menciona Teff y además me está pidiendo pagar para poder usarlo
Y en la segunda opción del chatgpt, le digo lo mismo y no hay ningún cambio.
A mí no me salieron las modificaciones. Al parecer el Tabnine necesita tiempo...
Excelente, en ocaciones copiar todo el codigo a Chat GPT suele ser engorroso, voy a ensayar la herramienta
A mí no me salió el código!