MIVA STUDY PACK — Web Developer / Digital Designer (Español) Downloaded 2026-09-29. Free to pass on. Web Developer / Digital Designer — Lesson 1: Cómo funcionan los sitios web 12 minutes de lectura OBJECTIVE: Al final de esta lección podrás explicar el proceso fundamental de cómo un navegador web solicita y muestra el contenido de un sitio web desde un servidor. Cada vez que abre su teléfono e ingresa la dirección de un sitio web, como un periódico local o su blog de recetas de Jollof favorito, sucede algo increíble. En menos de un parpadeo, su teléfono se conecta a una computadora distante. Esta computadora, llamada servidor, le envía de vuelta archivos especiales. Luego, su teléfono toma estos archivos y construye al instante el sitio web que ve en su pantalla. Todo este proceso, desde que su teléfono solicita información hasta que le muestra la página, ocurre de forma increíblemente rápida, incluso si el servidor está en otro país. SU NAVEGADOR Y EL SERVIDOR: UNA BREVE CONVERSACIÓN Piénselo de esta manera: su navegador web (la aplicación que usa para entrar a internet, como Chrome o Safari) es como usted enviando un mensaje. Cuando escribe 'facebook.com', su navegador envía una solicitud a través de internet al servidor de Facebook. El servidor es una computadora potente, siempre encendida, que almacena todos los archivos del sitio web de Facebook. Es como un comerciante que tiene todos sus productos bien ordenados. Cuando su navegador solicita algo, el servidor encuentra rápidamente los archivos correctos y los envía de vuelta. - HTML (HyperText Markup Language): La estructura. Este es el esqueleto del sitio web. Imagine que está construyendo un puesto de mercado. HTML crea la estructura básica: el techo, las vigas de soporte, el mostrador. Define dónde van sus imágenes, texto y botones. Sin HTML, el navegador no tiene nada que mostrar. - CSS (Cascading Style Sheets): El estilo. Esto es como pintar su puesto de mercado, elegir los colores para el techo, decidir el tipo de madera para el mostrador y agregar decoraciones. CSS hace que su sitio web se vea bien. Controla los colores, las fuentes, el espaciado y cómo se organiza todo en la página. - JavaScript: La acción. Esto es lo que hace que su puesto de mercado sea interactivo. Es como agregar una puerta automática que se abre cuando los clientes se acercan, o un interruptor de luz que enciende una lámpara. JavaScript permite que las cosas se muevan, cambien o respondan cuando hace clic en ellas. Piense en los mensajes emergentes, las galerías de imágenes o los formularios que llena en línea: eso es JavaScript en acción. [Por qué esto es importante para usted] Como desarrollador web, su trabajo principal es escribir estos tres lenguajes. Los usará para construir sitios web que se vean bien y funcionen correctamente. En lugares como Accra, Lagos y Lome, muchas pequeñas empresas —desde sastres hasta vendedores de comida— buscan sitios web sencillos y accesibles. Necesitan un 'aparador' digital para mostrar sus productos, publicar sus servicios o recibir pedidos de clientes. Aprender estas habilidades significa que puede ayudar a estas empresas a crecer, ¡y recibir un pago por ello! Así que, la próxima vez que navegue en línea, recuerde todo este recorrido. Su teléfono solicita, un servidor responde y tres lenguajes esenciales trabajan juntos para construir la página justo ante sus ojos. Entender esta base es su primer paso para crear sus propios sitios web increíbles. PRACTICE QUESTIONS 1. ¿Qué lenguaje es responsable de la ESTRUCTURA de un sitio web? A) CSS B) JavaScript C) HTML D) Python Answer: C — ¡Correcto! HTML (HyperText Markup Language) crea la estructura o 'esqueleto' de un sitio web. Define todos los elementos como encabezados, párrafos, imágenes y enlaces. Piénselo como los cimientos y paredes de un edificio. Sin HTML, no hay nada a qué dar estilo o hacer interactivo. CSS aporta la apariencia visual y JavaScript agrega las acciones interactivas. 2. Cuando escribe la dirección de un sitio web como 'mivaskills.com' en su navegador, ¿qué envía de vuelta los archivos necesarios para mostrar el sitio web? A) Su proveedor de red móvil B) Una computadora potente llamada servidor C) El propio navegador web D) Otros sitios web que ha visitado Answer: B — ¡Así es! El servidor es la computadora potente que almacena todos los archivos del sitio web (HTML, CSS, JavaScript, imágenes, etc.). Cuando su navegador solicita un sitio web, el servidor encuentra esos archivos y los envía de vuelta a su navegador, el cual le muestra la página. ---------------------------------------- Web Developer / Digital Designer — Lesson 2: Conceptos básicos de HTML: Sus primeros pasos para construir la web 10 minutes de lectura OBJECTIVE: Al final de esta lección podrás usar etiquetas HTML para estructurar una página web básica, incluyendo encabezados, párrafos, imágenes y enlaces. ¡Hola, futuro desarrollador web! Está a punto de aprender la base de cada sitio web que visita, desde consultar saldos de dinero móvil hasta navegar por sus sitios de noticias favoritos. Esta base se llama HTML, que significa Lenguaje de Marcado de Hipertexto (HyperText Markup Language). Piense en el HTML como el esqueleto de un sitio web. Le da estructura a la página: dónde van los encabezados, dónde van los párrafos y dónde se ubican las imágenes y los enlaces. ETIQUETAS: LOS BLOQUES DE CONSTRUCCIÓN DE HTML HTML utiliza instrucciones especiales llamadas 'etiquetas' (tags) para decirle al navegador web cómo mostrar el contenido. Las etiquetas se encierran entre corchetes angulares, como estos: < >. Son como pequeñas etiquetas que coloca alrededor de su texto para darle significado. Por ejemplo, si quiere un título grande para su página, usará una etiqueta de encabezado. Si quiere un párrafo de texto normal, usará una etiqueta de párrafo. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre siempre lleva una barra diagonal antes del nombre de la etiqueta. -

Este es un encabezado grande

: Esto crea un encabezado grande e importante, como el título de un artículo en un sitio de noticias. -

Este es un párrafo de texto.

: Esto es para bloques de texto normales, como una historia en una publicación de blog. - Escena del mercado de Accra: Esto muestra una imagen. La parte 'src' le dice al navegador dónde encontrar la foto, como la foto de un puesto de mercado concurrido en Lagos. La parte 'alt' describe la imagen para personas que no pueden verla o por si la foto no se carga. - Contáctenos: Esto crea un enlace interactivo en el que se puede hacer clic. Así es como se pasa de una página a otra, como hacer clic en un botón para enviar un mensaje a un negocio o buscar su ubicación. ¿Ve cómo la mayoría tienen una etiqueta de apertura (como

) y una etiqueta de cierre (como

)? El contenido que desea estructurar va en medio. La etiqueta es un poco diferente; es una etiqueta de autocierre porque no envuelve texto, sino que apunta a la fuente de una imagen. [Toda página HTML tiene una estructura] Al igual que una casa necesita cimientos, paredes y un techo, toda página HTML tiene una estructura básica. Se ve así: Título de su páginaSu contenido va aquí. La sección 'head' contiene información sobre la página que los usuarios generalmente no ven, como su título en la pestaña del navegador. La sección 'body' es donde vive todo su contenido visible: el texto, las imágenes y los enlaces con los que interactúan los visitantes. ¡Es como la parte principal de su tienda, donde se exhiben todas las mercancías! ¡Puede empezar a escribir HTML ahora mismo! Todo lo que necesita es un editor de texto sencillo. Puede ser el Bloc de notas en una computadora con Windows, TextEdit en una Mac o un editor de código gratuito y potente como VS Code (que usan muchos desarrolladores profesionales). Escriba su código HTML y luego guarde el archivo con una extensión '.html' (por ejemplo, 'miprimerapagina.html'). Una vez guardado, puede abrir ese archivo en cualquier navegador web que use (Chrome, Firefox o Safari) y ver cómo cobra vida su creación. No necesita una conexión a internet especial para ver sus archivos locales, igual que encender su generador en casa para alimentar sus luces. PRACTICE QUESTIONS 1. ¿Qué hace la etiqueta en HTML? A) Muestra una imagen B) Crea un enlace interactivo hacia otra página C) Crea un encabezado grande D) Reproduce un video Answer: B — La etiqueta (ancla) crea hipervínculos: el texto o las imágenes en los que se puede hacer clic y que le llevan a otra página. El atributo 'href' le dice al navegador A DÓNDE ir. Sin enlaces, los sitios web son caminos sin salida. Con enlaces, se convierten en una experiencia conectada, como seguir un camino de una parte del mercado a otra. 2. ¿Cuál de estas es la forma correcta de hacer un encabezado grande en HTML? A) Mi título B)

Mi título

C)

Mi título

D) Mi título Answer: C — La etiqueta

se utiliza para el encabezado más importante de una página. La 'h' significa encabezado (heading), y el '1' significa que es el nivel superior, como el letrero principal de una tienda. Otras etiquetas de encabezado bajan hasta

para encabezados más pequeños. ---------------------------------------- Web Developer / Digital Designer — Lesson 3: Fundamentos de CSS: cómo hacer que las páginas se vean bien 10 minutes de lectura OBJECTIVE: Al final de esta lección podrás aplicar propiedades CSS para cambiar la apariencia visual de los elementos HTML, incluyendo colores, fuentes y diseño. Imagine que ha construido un puesto de madera sencillo en el mercado. Es funcional, cumple su función, pero se ve… simple. Esto es como la estructura básica de su HTML. Contiene toda la información, pero no se ve muy interesante. Ahora, imagine pintar ese puesto con colores llamativos, agregar un buen letrero o incluso un diseño decorativo. Esto es lo que hace CSS por su sitio web. CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets). Es el lenguaje que controla cómo se ve el HTML. Le permite cambiar colores, elegir diferentes fuentes, ajustar el espaciado, agregar imágenes de fondo y organizar todo ordenadamente en la página. Sin CSS, todos los sitios web se verían como texto sin formato sobre un fondo blanco, ¡algo muy aburrido! CÓMO FUNCIONA CSS: LA REGLA DE TRES PARTES Cada vez que quiere dar estilo a algo con CSS, escribe una regla. Esta regla consta de tres partes principales: - Selector: Le indica a CSS *qué* elemento HTML quiere diseñar. ¿Quiere cambiar todos los párrafos? ¿Solo un encabezado específico? El selector lo señala. - Propiedad: Le indica a CSS *qué* quiere cambiar de ese elemento. ¿Quiere cambiar su color? ¿Su tamaño? ¿Su alineación? - Valor: Le indica a CSS la *nueva configuración* para esa propiedad. Si eligió 'color' como propiedad, el valor podría ser 'azul'. Si eligió 'tamaño', el valor podría ser '16 píxeles'. Aquí tiene un ejemplo: `p { color: blue; font-size: 16px; }` Esta regla selecciona todos los elementos de párrafo (`p`). Establece el color de texto (`color`) en azul y el tamaño de texto (`font-size`) en 16 píxeles. Es igual que decidir el color de pintura y el tamaño del pincel para el letrero de su puesto en el mercado. [Cómo organizar sus elementos: diseño y estructura] Algo que a muchos principiantes les resulta complicado es organizar elementos uno al lado del otro. Por defecto, los elementos de HTML suelen apilarse uno encima del otro, como cajas en un almacén. Para hacer que se coloquen uno junto al otro, como mercancías exhibidas en una mesa de mercado, necesita herramientas de diseño. Las dos principales son Flexbox y Grid. Flexbox es excelente para organizar elementos en una sola fila o columna. Grid es para configuraciones más complejas, como una página completa con muchas secciones. Para un sitio web de negocios sencillo, Flexbox suele ser suficiente para que todo se vea bien. Su primera tarea práctica como desarrollador web podría ser crear una página sencilla para un restaurante. Piense en su lugar local favorito en Accra o Lagos. Deseará colocar un logotipo en la parte superior, una lista de platillos del menú en el medio y datos de contacto (como número de teléfono y dirección) en la parte inferior. Una vez que logre que eso se vea bien y esté bien organizado usando CSS, ¡estará en camino de crear sitios web reales para clientes que pagan! PRACTICE QUESTIONS 1. ¿Qué controla la propiedad 'color' de CSS? A) El ancho de un elemento B) El color del texto C) El color de fondo D) El tamaño de la fuente Answer: B — En CSS, la propiedad 'color' se utiliza específicamente para establecer el color del texto dentro de un elemento. Si desea cambiar el fondo detrás del texto, usaría la propiedad 'background-color'. Es una confusión inicial común, ¡como saber la diferencia entre el color de pintura para las letras de un letrero y el color para el tablero del letrero! 2. ¿Qué herramienta de diseño de CSS es más adecuada para organizar elementos en una sola fila o columna, como una fila de platillos del menú o una pila de íconos de redes sociales? A) Grid B) Float C) Flexbox D) Position Answer: C — Flexbox está diseñado específicamente para organizar elementos en una dimensión: ya sea una fila o una columna. Es perfecto para diseñar enlaces de navegación, grupos de tarjetas u otros componentes donde necesita un control preciso sobre la alineación y el espaciado a lo largo de un solo eje. Grid es más para diseños bidimensionales, mientras que Float y Position son técnicas más antiguas o más específicas. ---------------------------------------- Web Developer / Digital Designer — Lesson 4: Conceptos básicos de JavaScript: Cómo agregar interactividad 12 minutes de lectura OBJECTIVE: Al final de esta lección podrás describir cómo JavaScript agrega interactividad a las páginas web e identificar casos de uso comunes para contenido dinámico. Imagina un sitio web que solo está ahí parado, como un cartel. Puedes mirarlo, pero realmente no puedes hacer nada con él. Ese es un sitio web construido únicamente con HTML y CSS. HTML le da estructura, como las paredes y el techo de un puesto de mercado. CSS le da estilo, como la pintura y las decoraciones. Pero, ¿qué hace que el puesto de mercado cobre vida? ¿Qué permite que un vendedor abra un cajón, te ofrezca una muestra o cambie un precio según tus elecciones? Ahí es donde entra JavaScript. HACER QUE LOS SITIOS WEB HAGAN COSAS JavaScript es el motor que hace que los sitios web *hagan* cosas. Añade interactividad. Piensa en tus experiencias diarias con aplicaciones y sitios web: - Cuando haces clic en un botón en una aplicación de dinero móvil y se abre un formulario para enviar dinero, eso es JavaScript. - Cuando empiezas a escribir un nombre en una barra de búsqueda y aparecen sugerencias automáticas como 'Aisha' o 'Kwame', eso es JavaScript. - Cuando la imagen de una tienda en línea cambia para mostrar una vista diferente de un producto al pasar el cursor por encima, eso es JavaScript. - Cuando aparece un ícono de carga mientras se procesa tu pago y luego desaparece cuando termina, eso es JavaScript. Es la 'capa de comportamiento' que se coloca sobre la estructura de HTML y el estilo de CSS. Sin ella, Internet sería un lugar muy silencioso y estático. Con JavaScript, las páginas web se convierten en herramientas dinámicas y adaptables que pueden interactuar con los usuarios. CONCEPTOS CLAVE: VARIABLES, FUNCIONES Y ESCUCHADORES DE EVENTOS Para empezar a hacer sitios web interactivos, hay tres conceptos clave que debes comprender. Piensa en ellos como herramientas esenciales en tu caja de herramientas de desarrollador web: - Variables: Piensa en una variable como una pequeña caja de almacenamiento con una etiqueta. Puedes poner un valor dentro (como 'Kofi', '25' o 'true'), darle un nombre (como `customerName`, `age`, `isLoggedIn`), y luego usar ese valor más tarde. Por ejemplo: `let customerName = 'Kofi';` guarda la palabra 'Kofi'. Puedes cambiar lo que hay en la caja en cualquier momento. Es como guardar el nuevo número de teléfono de un amigo en tus contactos: el nombre sigue siendo el mismo, pero el número se puede actualizar. Funciones: Una función es como una receta o un conjunto de instrucciones que realiza una tarea específica. Ecribes las instrucciones una vez, le das un nombre a la receta y luego puedes 'cocinarla' (ejecutarla) cada vez que lo necesites, sin tener que escribir todos los pasos de nuevo. Por ejemplo: `function greetUser(name) { return 'Hello ' + name; }` es una receta para saludar a alguien. Luego puedes llamar a `greetUser('Aisha')` para obtener 'Hello Aisha' o a `greetUser('Chike')` para obtener 'Hello Chike'. Es un bloque de código reutilizable. - Escuchadores de eventos (Event Listeners): Aquí es donde realmente sucede la magia de la interacción. Un escuchador de eventos es código que espera pacientemente a que el usuario haga algo, como un guardia de seguridad que vigila la puerta principal. Cuando ocurre el 'evento' (alguien hace clic en un botón, escribe en un cuadro de texto o se desplaza hacia abajo en la página), el escuchador lo 'oye' y activa un fragmento de código específico para que se ejecute. Por ejemplo: `button.addEventListener('click', function() { alert('You clicked me!'); });` significa: '¡Oye, botón, cuando recibas un clic, muestra un mensaje emergente!'. Sin escuchadores de eventos, tu sitio web estaría sordo a las acciones del usuario. [¡Empieza a construir ahora!] La mejor manera de aprender JavaScript es haciendo. No te limites a leer sobre el tema. Los recursos gratuitos como freeCodeCamp.org y The Odin Project (theodinproject.com) ofrecen lecciones y proyectos interactivos completos. Funcionan de maravilla incluso en un Tecno Spark u otros dispositivos móviles, ¡así que puedes practicar en cualquier lugar! Empieza con algo pequeño: crea un botón que cambie el color del texto, un formulario que diga '¡Buenos días, [nombre]!' o una calculadora sencilla. Cada pequeño proyecto es un gran paso adelante en tu aprendizaje. PRACTICE QUESTIONS 1. ¿Qué hace un escuchador de eventos (event listener) en JavaScript? A) Guarda un valor para usarlo más tarde B) Espera la acción de un usuario (como un clic) y luego ejecuta código en respuesta C) Cambia el color de fondo de la página web D) Envía un correo electrónico al propietario del sitio web Answer: B — Un escuchador de eventos es como un guardia de seguridad nocturno: vigila y espera. Cuando ocurre el evento especificado (un clic, presionar una tecla, desplazarse por la página), el escuchador activa el código asociado. Sin escuchadores de eventos, las páginas web serían carteles estáticos. Con ellos, las páginas se convierten en herramientas interactivas que responden a las acciones del usuario en tiempo real. 2. ¿Cuál de estas es la mejor descripción de una 'variable' en JavaScript? A) Una lista de pasos que la computadora debe seguir para realizar una tarea B) Un lugar de almacenamiento temporal para información a la que se le puede dar un nombre y usar más tarde C) Un comando que cambia de inmediato el estilo de la página D) Una forma de enviar datos directamente a un servidor en Lagos Answer: B — Una variable es como un contenedor etiquetado o una caja de almacenamiento. Puedes poner diferentes tipos de valores (como números, texto o verdadero/falso) en ella, darle un nombre y luego hacer referencia a ese nombre cada vez que necesites usar el valor guardado más adelante en tu código. Esto hace que tu código sea flexible y dinámico. ---------------------------------------- Web Developer / Digital Designer — Lesson 5: Construyendo su primer sitio web real 12 minutes de lectura OBJECTIVE: Al final de esta lección podrás crear un sitio web funcional de una sola página para un negocio local utilizando las habilidades aprendidas de HTML y CSS. Ya ha aprendido los conceptos básicos de HTML y CSS. ¡Es un gran comienzo! Ahora, usemos esas habilidades para construir algo real. Vamos a crear un sitio web sencillo pero potente para un negocio local. Piense en la tienda de abarrotes de su calle en Accra, la sastrería en Lagos o el restaurante en Lome. ¡Ellos también necesitan estar en línea! LA ANATOMÍA DE UN SITIO WEB EMPRESARIAL SENCILLO La mayoría de los pequeños negocios no necesitan un sitio web complejo con muchas páginas. Lo que realmente necesitan es una página clara y bien diseñada. Esta única página funciona como un volante digital o el escaparate de una tienda en internet. Responde preguntas clave para los clientes potenciales: ¿Qué ofrece? ¿Dónde está ubicado? ¿Cómo puedo contactarlo? - Encabezado (Header): Está en la parte superior. Contiene el nombre del negocio y, si tienen uno, su logotipo. Como el letrero sobre la puerta de una tienda. - Sección principal (Hero Section): Es lo primero que la gente ve. Tiene un mensaje de bienvenida y una excelente foto de la tienda o de sus productos. Imagine una hermosa imagen de sus panes o del dueño sonriendo. - Sección de servicios: ¿A qué se dedica el negocio? Enumere sus servicios o productos principales de forma clara. ¿Venden telas? ¿Reparan teléfonos? ¿Cocinan un delicioso arroz jollof? - Sección de contacto: ¿Cómo pueden comunicarse los clientes con ellos? Incluya un número de teléfono, correo electrónico y su dirección física. Tal vez incluso un mapa pequeño. - Pie de página (Footer): En la parte inferior. A menudo incluye información de derechos de autor y quizás enlaces rápidos. Cada una de estas secciones se construirá utilizando un elemento `
` en HTML. Le daremos a cada `
` un `id` único (como `id="header"` o `id="contact"`). Esto nos ayuda a dar estilo a cada sección por separado utilizando CSS. Puede hacer que el encabezado sea azul, la sección de servicios gris claro, y así sucesivamente. [Manténgalo sencillo, hágalo vendible] Su objetivo es entregar un sitio web funcional y atractivo rápidamente. Concéntrese en la claridad y en un 'llamado a la acción' (call-to-action), es decir, un botón como 'Llamar ahora' o 'Visítenos'. Puede utilizar plantillas gratuitas de sitios como HTML5 UP o Colorlib. Proporcionan un excelente punto de partida. Su trabajo es personalizarla: cambiar los colores para que coincidan con la marca del negocio, agregar su texto específico e insertar sus fotos reales. En un fin de semana, puede convertir una plantilla en un producto vendible. Imagine mostrarle al dueño de una tienda un borrador de sitio web con el nombre de su negocio, una foto de sus productos y su número de teléfono justo ahí. ¡Quedará impresionado! Así es como empieza a construir su portafolio y a ganar dinero con sus nuevas habilidades. Este primer proyecto de sitio web real le mostrará lo que se necesita para pasar del código a un cliente satisfecho. PRACTICE QUESTIONS 1. ¿Cuántas páginas necesita realmente un sitio web típico de un pequeño negocio? A) Al menos 10 páginas B) Una sola página bien diseñada suele ser suficiente C) Más de 50 páginas para SEO D) Depende del número de empleados Answer: B — La mayoría de los pequeños negocios, como un taller mecánico, una estética o una sastrería, solo necesitan una página. Esta única página debe indicar claramente qué hacen, dónde están y cómo contactarlos. Es como una tarjeta de presentación digital, pero mucho más potente. La simplicidad es clave para ponerlos en línea de manera rápida y efectiva. 2. ¿Qué elemento HTML se utiliza principalmente para crear secciones distintas (como un encabezado, sección principal o área de contacto) dentro de un sitio web, y que a menudo recibe un 'id' para darle estilo? A)

B) C)

D) Answer: C — El elemento `
` es un contenedor a nivel de bloque que se utiliza comúnmente para agrupar y estructurar el contenido en secciones lógicas dentro de una página web. Darle un `id` (por ejemplo, `
`) le permite dirigirse a esa sección específica y darle estilo con CSS para que se vea exactamente como usted desea. ---------------------------------------- Web Developer / Digital Designer — Lesson 6: WordPress para sitios web de clientes 12 minutes de lectura OBJECTIVE: Al final de esta lección podrás identificar las ventajas de usar WordPress para sitios web de clientes y explicar sus capacidades de gestión de contenido. Imagine que está ayudando a un pequeño negocio en Makola Market, Accra, o Computer Village, Lagos, a tener presencia en internet. Venden telas hermosas o reparan teléfonos. Necesitan un sitio web, pero también necesitan actualizar sus precios o mostrar nuevos productos con frecuencia. Ahí es donde entra WordPress. Es una herramienta potente que le ayuda a crear excelentes sitios web y permite que sus clientes administren su propio contenido fácilmente. WordPress impulsa alrededor del 40% de todos los sitios web del mundo. Piénselo como el sistema operativo de un teléfono móvil popular: muchas personas lo usan, por lo que tiene un excelente soporte y muchas funciones. Para los clientes que desean actualizar su propio contenido, WordPress es la opción práctica. Les permite tomar el control sin necesidad de aprender código complejo. PASOS PARA CREAR UN SITIO WEB EN WORDPRESS - Primero, instala WordPress en un proveedor de alojamiento web (hosting). Estas son empresas como Bluehost o Hostinger. Es como alquilar un espacio en internet para su sitio web. La buena noticia es que tanto Bluehost como Hostinger aceptan clientes de Nigeria y Ghana, lo que facilita el pago de sus servicios. - A continuación, elige un 'tema' (o plantilla). Un tema es la plantilla de diseño para el sitio web. Hay muchas opciones gratuitas, como Astra o GeneratePress, que lucen profesionales y son fáciles de personalizar. - Por último, lo personaliza. Esto significa agregar el logotipo de su cliente, los colores específicos de su marca y todo su contenido único: la historia de su negocio, fotos de sus productos e información de contacto. Lo hace verdaderamente suyo. ¿La mejor parte? Una vez creado el sitio, su cliente recibe un acceso especial. Desde allí, puede agregar fácilmente nuevas publicaciones de blog sobre su negocio, actualizar precios de productos o cambiar fotos de su inventario más reciente. Puede hacer todo esto sin llamarlo a usted cada vez que necesite un pequeño cambio. Es tan sencillo como escribir un mensaje en WhatsApp y hacer clic en 'publicar'. [Gane dinero con WordPress] Esta capacidad de autoservicio hace que su servicio sea aún más valioso para los clientes. Puede cobrar entre 1,000 y 3,000 GHS por la creación inicial del sitio web. Luego, por el soporte continuo y el alojamiento web, puede cobrar entre 100 y 300 GHS al mes. ¡Imagine que tiene cinco clientes que pagan mantenimiento mensual! Eso representa entre 500 y 1,500 GHS de ingresos pasivos cada mes. Este dinero ingresa mientras usted se concentra en crear nuevos sitios web para otros clientes, haciendo crecer aún más su negocio. WordPress no es solo para grandes empresas. Es perfecto para la pequeña panadería en Lomé, el taller mecánico en Accra o la costurera en Lagos que quiere mostrar sus diseños. Usted está capacitando a estos negocios para conectarse con más clientes, de la misma manera que el dinero móvil les ayuda a gestionar los pagos fácilmente. Aprender WordPress es una habilidad que le abre muchas puertas a usted y a los negocios a los que ayuda. PRACTICE QUESTIONS 1. ¿Por qué WordPress es una buena opción para los clientes de pequeños negocios? A) Es la opción más barata B) Los clientes pueden actualizar su propio contenido sin necesidad de programar C) No requiere internet para usarse D) Solo funciona en dispositivos Apple Answer: B — A los clientes les encanta poder actualizar sus propios precios, fotos y anuncios sin tener que pagarle a usted cada vez. WordPress les ofrece un panel de control donde pueden escribir y publicar, de manera muy similar a enviar un mensaje de WhatsApp. Usted lo construye una vez, ellos mantienen su contenido y usted puede cobrar mensualmente por el alojamiento web y el soporte técnico, creando una situación ventajosa para ambos. 2. ¿Cuál de los siguientes NO es un paso típico al configurar un nuevo sitio web de WordPress para un cliente? A) Instalar WordPress en un proveedor de alojamiento web (hosting) B) Elegir un tema o plantilla profesional C) Desarrollar una aplicación móvil personalizada para el cliente D) Personalizar el sitio con el logotipo y el contenido del cliente Answer: C — Aunque algunos clientes eventualmente deseen una aplicación móvil, desarrollar una app móvil personalizada es un servicio independiente y mucho más complejo que configurar un sitio web estándar en WordPress. Los pasos típicos implican el alojamiento web, la selección del tema y la personalización del contenido. ---------------------------------------- Web Developer / Digital Designer — Lesson 7: Uso de Canva para diseño gráfico 10 minutes de lectura OBJECTIVE: Al final de esta lección podrás usar Canva para crear diseños gráficos sencillos y profesionales para redes sociales o materiales de marketing. Como desarrollador web, tal vez pienses que el diseño gráfico no es para ti. Pero muchos pequeños negocios necesitan más que solo un sitio web. Necesitan imágenes atractivas para redes sociales, volantes para su tienda o un logotipo sencillo. Aquí es donde entra Canva. Es una herramienta gratuita en línea que te ayuda a crear diseños de aspecto profesional sin necesidad de tener habilidades especiales de diseño. ¿QUÉ ES CANVA Y POR QUÉ ES ÚTIL? Imagina al dueño de un puesto de mercado local en Accra o Lagos. Vende telas hermosas pero quizás no tiene un gran presupuesto para contratar a un diseñador gráfico. Necesita un volante para anunciar mercadería nueva o una publicación de Instagram para mostrar sus últimos diseños. Canva (canva.com) es perfecto para ellos y para ti. Te permite crear estas cosas de forma rápida y sencilla. Canva utiliza plantillas. Piensa en una plantilla como un diseño prehecho. Eliges una que te guste y luego cambias el texto, los colores y las imágenes para adaptarlos a las necesidades de tu cliente. Es como llenar los espacios en blanco. Una vez que estés satisfecho, puedes descargar la imagen y entregársela a tu cliente. Es así de sencillo. No necesitas aprender a usar programas complicados como Photoshop. - Diseños de publicaciones para Facebook e Instagram: Ayuda a un cliente a promocionar su negocio en línea. Puedes cobrar entre 50 y 200 GHS por cada paquete de diseños. - Volantes para eventos y promociones: Crea folletos atractivos para ofertas en tiendas o eventos de una iglesia. Puedes cobrar de 100 a 300 GHS por esto. - Logotipos comerciales: Diseña un logotipo sencillo y memorable para un nuevo emprendimiento. Esto podría costar entre 200 y 500 GHS. - Imágenes de catálogo para WhatsApp Business: Haz que las fotos de productos se vean profesionales para la tienda de WhatsApp de un cliente. Cobra entre 50 y 150 GHS por imagen de producto. - Tarjetas de presentación: Ayuda a tu cliente a causar una impresión duradera con una tarjeta bien diseñada. [¡Ofrece paquetes de servicios!] Ofrece un paquete que combine tus habilidades de diseño web con gráficos hechos en Canva. Por ejemplo: «Sitio web + 10 publicaciones para redes sociales por 2,000 GHS». Esto hace que tu oferta sea mucho más atractiva para los pequeños negocios y demuestra que puedes cubrir todas sus necesidades digitales, no solo su sitio web. Aprender a usar Canva te da una habilidad adicional. Significa que puedes ofrecer más servicios a tus clientes, lo que te vuelve más valioso. Puedes ayudar a empresas de todo África Occidental, desde el pequeño restaurante en Lomé hasta el vendedor de artesanías en Lagos, a verse profesionales tanto en línea como fuera de ella. Es un arma secreta para cualquier desarrollador web que brinde servicios a pequeños negocios. PRACTICE QUESTIONS 1. ¿Qué puedes crear con Canva para negocios locales? A) Solo logotipos B) Volantes, publicaciones para redes sociales, logotipos, tarjetas de presentación y más C) Solo sitios web D) Solo videos Answer: B — Canva es como una imprenta digital para muchas cosas. Puedes crear volantes, logotipos, publicaciones para Instagram, tarjetas de presentación, imágenes de estado para WhatsApp y más. Empiezas con plantillas y las personalizas rápidamente. No necesitas ser un artista; las plantillas están diseñadas de manera profesional. Solo tienes que cambiar el texto y los colores para que se adapten a la marca de tu cliente. 2. ¿Por qué Canva es especialmente útil para los desarrolladores web que trabajan con pequeños negocios? A) Ayuda a los desarrolladores web a aprender a programar más rápido. B) Permite a los desarrolladores web ofrecer más servicios de diseño sin necesidad de tener habilidades avanzadas de diseño gráfico. C) Reemplaza la necesidad de tener un sitio web para los pequeños negocios. D) Solo es útil para crear videos, no imágenes estáticas. Answer: B — Canva es una herramienta potente para los desarrolladores web porque amplía la gama de servicios que pueden ofrecer. Muchos pequeños negocios necesitan diseño gráfico básico junto con su sitio web, pero no pueden pagar a un diseñador independiente. Con Canva, puedes crear fácilmente publicaciones para redes sociales, volantes y logotipos, lo que te convierte en una solución más completa para tus clientes. Esto significa más oportunidades de ingresos para ti y un mejor servicio para ellos. ---------------------------------------- Web Developer / Digital Designer — Lesson 8: Cómo encontrar tus primeros clientes de diseño web 10 minutes de lectura OBJECTIVE: Al final de esta lección podrás identificar negocios locales potenciales como primeros clientes de diseño web y explicar cómo abordarlos. Ya aprendiste lo básico de diseño web. Ahora, ¿cómo encuentras personas que te paguen por tu nueva habilidad? Conseguir tus primeros clientes puede parecer un gran reto. Pero también es la forma en que empiezas a construir tu futuro. Piénsalo como poner un nuevo puesto en el mercado. Necesitas mostrar tus mejores productos para que la gente se detenga y compre. Te mostraremos cómo lograrlo. MIRA A TU ALREDEDOR: NEGOCIOS LOCALES Empieza mirando en tu propia ciudad. Camina por tu vecindario en Accra, Lagos o Lomé. ¿Qué negocios ves? Tal vez un restaurante, una estética o peluquería, una farmacia o una pequeña tienda de accesorios para teléfonos. Muchos de estos negocios no tienen un sitio web. O, si lo tienen, puede que sea antiguo y no se vea muy bien en un teléfono celular. - Restaurantes y 'chop bars' que necesitan un menú en línea. - Boutiques de moda o sastres que quieren mostrar sus diseños. - Farmacias para publicar sus servicios e información de contacto. - Iglesias o grupos comunitarios para compartir calendarios de eventos. - Organizadores de eventos para mostrar trabajos anteriores y paquetes. - Agentes de dinero móvil que quieren verse más profesionales en línea. También puedes buscar en línea. Revisa Instagram o Facebook en busca de negocios locales. Fíjate quién tiene una buena presencia en redes sociales pero no tiene un sitio web adecuado. Ellos son tus clientes potenciales, pues ya entienden el valor de estar en Internet. [Tus primeros tres clientes son especiales] Tus primeros tres clientes son clave. No te preocupes demasiado por ganar mucho dinero con ellos. Tus objetivos principales son crear un portafolio de trabajo y conseguir buenas recomendaciones. Piénsalo como una inversión en tu futuro negocio. Una vez que tengas unos cuantos clientes satisfechos, los demás vendrán después. Cuando encuentres un negocio, acércate con una oferta clara y directa. Por ejemplo, podrías decir: '¡Hola! Vi su increíble restaurante en Instagram. Puedo crearle un sitio web profesional con su menú completo, fotos de sus deliciosos platillos e información clara de contacto. Esto ayudará a que más personas los encuentren en línea. Puedo hacerlo por 1,500 GHS'. Esto es algo concreto. Saben qué van a recibir y cuánto cuesta. Pero no solo hables de ello. ¡Muéstraselo! Crea una demostración simple o un prototipo de cómo podría verse su sitio web. Puedes hacerlo en tu teléfono o computadora portátil. Imagina a un comerciante del mercado mostrándole a un cliente una muestra de tela. Eso ayuda al cliente a ver la calidad. Cuando ven una muestra de su propio negocio en un sitio web bien diseñado, el impacto es enorme. Después de terminar tus primeros tres proyectos, toma capturas de pantalla. Úsalas para crear tu propio portafolio en línea. Muéstralas en tu sitio web y en tus redes sociales. Así es como todo profesional independiente con éxito, desde Accra hasta Lagos y Lomé, ha construido su base de clientes: un cliente satisfecho a la vez. Es un trabajo duro, pero vale la pena. PRACTICE QUESTIONS 1. ¿Cuál es la mejor estrategia para encontrar a tus primeros clientes de diseño web? A) Publicar anuncios costosos en Facebook B) Acercarse directamente a los negocios locales con una demostración y una oferta concreta C) Esperar a que los clientes te encuentren en Google D) Imprimir folletos y distribuirlos en la calle Answer: B — Un trato directo funciona mejor porque el dueño del negocio puede ver el valor de inmediato. Mostrar una demostración en tu teléfono es como cuando un comerciante muestra muestras de tela: el cliente puede apreciar la calidad de cerca. Acompaña la demostración con un precio claro y lo que van a recibir. Muchos dueños de pequeños negocios han pensado en tener un sitio web, pero no sabían en quién confiar. Sé la persona que llega con la solución. 2. ¿Por qué deberías cobrar menos a tus primeros clientes de diseño web? A) Para asegurarte de no ganar demasiado dinero muy rápido. B) Tus objetivos principales son crear un portafolio y obtener recomendaciones, no obtener la máxima ganancia. C) Porque tus habilidades aún no son muy buenas, así que no te mereces cobrar más. D) Ayuda a ahuyentar a clientes potenciales que no son serios. Answer: B — Con tus primeros clientes, la prioridad no es obtener la ganancia más alta. En cambio, estás creando una muestra de tu trabajo (un portafolio) y obteniendo buenas recomendaciones de boca en boca. Esto te ayudará a atraer más clientes y de mayor tarifa en el futuro. ---------------------------------------- Web Developer / Digital Designer — Lesson 9: Poniéndole Precio a Sus Servicios de Diseño Web y Evitando Estafas 8 minutos de lectura ESTABLECIENDO PRECIOS JUSTOS PARA EL TRABAJO WEB Cuando empiezan a aprender desarrollo web, averiguar cuánto cobrar por un sitio web puede resultar confuso. Si cobran demasiado, las pequeñas empresas locales podrían decir que no. Si cobran muy poco, podrían trabajar durante semanas y terminar estresados y mal pagados. En África Occidental, los diseñadores web principiantes suelen cobrar por proyecto en lugar de por hora. Un sitio web sencillo de una sola página para una tienda local podría oscilar entre 25,000 y 50,000 Nairas en Nigeria, 300 y 600 Cedis en Ghana, o 25,000 y 50,000 FCFA en Togo. A medida que ganan experiencia y construyen sitios más grandes con pasarelas de pago o funciones personalizadas, sus precios pueden duplicarse o triplicarse. ESTRUCTURE SUS PAGOS CON DEPÓSITOS Nunca empiecen a trabajar en un proyecto web sin un depósito por adelantado. El estándar más seguro en la industria web es la regla del 50/50: - Depósito del 50% antes de escribir cualquier código o comprar el alojamiento. - 50% de saldo final después de que el cliente apruebe el sitio, pero ANTES de que entreguen las contraseñas de administrador principales o pongan el sitio en línea en su dominio. Pedir un depósito demuestra que el cliente es serio. También cubre sus costos iniciales, como la compra de alojamiento de prueba o datos móviles mientras construyen el sitio. [Protejan Su Trabajo Antes del Pago] Nunca transfieran la propiedad del dominio ni entreguen los accesos completos de administrador de WordPress antes de que se liquide el pago final mediante dinero móvil o transferencia bancaria. Mantengan el sitio web en su propio enlace de prueba o servidor de demostración hasta que reciban el saldo completo. MANEJANDO EL AUMENTO DEL ALCANCE (SCOPE CREEP) El aumento del alcance ocurre cuando un cliente acepta un sitio web básico, pero lentamente sigue añadiendo demandas adicionales. Por ejemplo, podrían pedir un sitio básico de 3 páginas, pero luego solicitar una tienda en línea, un foro y 50 cargas de productos sin ofrecer dinero extra. Para evitar esto, escriban exactamente lo que se incluye antes de tomar el depósito. Listen el número de páginas, las características y cuántas rondas de cambios de diseño ofrecen. Si el cliente solicita funciones adicionales más tarde, sonrían y digan: '¡Definitivamente puedo añadir eso! Esa función cuesta 15,000 Nairas adicionales (o 150 Cedis / 15,000 FCFA). ¿Debo añadirlo a la factura final?' IDENTIFICANDO ESTAFAS COMUNES DE CLIENTES Los desarrolladores web nuevos a menudo son blanco de estafadores en línea. Aquí tienen señales de alerta comunes a las que prestar atención: - Recibos bancarios falsos: El cliente envía una captura de pantalla de una notificación de transferencia, pero no entra dinero en su cuenta bancaria o billetera móvil. Siempre verifiquen el pago primero dentro de su aplicación bancaria. - Estafa de sobrepago: Un cliente 'accidentalmente' envía demasiado dinero y les pide que devuelvan el efectivo extra inmediatamente. El depósito original suele ser falso o de una tarjeta robada. - La promesa de participación futura: 'No puedo pagarles ahora, pero construyan este sitio gratis y les daré el 20% de mis futuras ganancias comerciales'. Siempre insistan en trabajo pagado o un acuerdo escrito claro. - Clientes internacionales vagos: Extraños que los contactan por WhatsApp desde números extranjeros desconocidos ofreciendo grandes sumas por sitios básicos sin dar detalles comerciales. [Prueben esto hoy] Preparen una plantilla sencilla de propuesta de proyecto de una página en su teléfono o computadora. Incluyan: Alcance del Proyecto (número de páginas), Cronograma (fecha de finalización), Precio Total y Términos de Pago (50% por adelantado, 50% antes del lanzamiento). PRACTICE QUESTIONS 1. ¿Cuál es la regla de pago estándar para proyectos de diseño web de principiantes? A) 100% de pago después de un año de operación del sitio B) 50% de depósito antes de comenzar, 50% de saldo antes de la entrega final del sitio C) 0% por adelantado, pago completo solo si el cliente genera ventas D) 100% en efectivo por adelantado antes de discutir el alcance del proyecto Answer: B — La regla del 50/50 los protege tanto a ustedes como al cliente. Asegura que tengan fondos para comenzar a trabajar mientras mantienen el control final hasta que se reciba el pago completo. 2. ¿Qué deben hacer si un cliente les pide páginas adicionales que no estaban en su acuerdo original? A) Construir las páginas adicionales gratis para que el cliente siga contento B) Negarse a hablar con el cliente de nuevo C) Explicar amablemente el costo adicional y agregarlo a la factura final D) Borrar todo el sitio web y empezar de nuevo Answer: C — Explicar amablemente el costo adicional protege su tiempo manteniendo la relación profesional. Esto previene el aumento del alcance sin compensación. ---------------------------------------- Web Developer / Digital Designer — Lesson 10: Construyendo un Portafolio Web sin Experiencia Remunerada 8 min de lectura POR QUÉ SU PORTAFOLIO IMPORTA MÁS QUE LOS CERTIFICADOS Cuando un propietario de una pequeña empresa en Acra, Lagos o Lomé quiere un sitio web, rara vez pide un título universitario. Quieren ver ejemplos reales de sitios web que ustedes han construido. Un portafolio es su colección de trabajos de muestra que prueban sus habilidades de desarrollo web. No necesitan clientes pagados para construir un portafolio sólido. De hecho, todo desarrollador web profesional comienza construyendo sitios web de práctica. TRES PROYECTOS DE MUESTRA QUE TODO PRINCIPIANTE PUEDE CONSTRUIR Para mostrar a los clientes potenciales que saben cómo construir sitios web modernos, creen estos tres proyectos de muestra para su portafolio: - Un Sitio para Negocios Locales: Elijan un negocio real en su vecindario (como una panadería, farmacia o salón de belleza) que no tenga un sitio web. Construyan un sitio limpio de 3 páginas para ellos como práctica. - Una Página de Aterrizaje para Eventos: Creen un sitio web de una sola página para una boda, una conferencia tecnológica local o un festival de música. Incluyan un formulario de registro, un programa de eventos y detalles de contacto. - Su Sitio Web de Portafolio Personal: Construyan una página que les presente, enumere sus habilidades de codificación (HTML, CSS, JavaScript, WordPress) y muestre enlaces a sus proyectos de muestra. LUGARES GRATUITOS PARA ALOJAR SU PORTAFOLIO No necesitan gastar dinero en alojamiento web pagado solo para mostrar su trabajo. Pueden alojar sus proyectos de HTML, CSS y JavaScript de forma gratuita utilizando estas herramientas: - GitHub Pages: Alojamiento gratuito directamente desde su repositorio de código. Excelente para mostrar código limpio a empleadores tecnológicos. - Netlify o Vercel: Plataformas de alojamiento gratuitas que arrastran y sueltan sus carpetas de proyectos y las convierten en sitios web en vivo en segundos. - WordPress.com Nivel Gratuito: Útil para demostrar habilidades básicas de diseño en WordPress sin comprar un dominio personalizado. CÓMO PRESENTAR CADA PROYECTO DEL PORTAFOLIO Al mostrar un proyecto en su página de portafolio o enviar enlaces por WhatsApp, incluyan siempre tres cosas: - Un enlace funcional en vivo donde las personas puedan ver y navegar por el sitio en sus teléfonos o computadoras portátiles. - Un párrafo corto explicando el objetivo (por ejemplo, 'Un sitio web receptivo de 3 páginas construido para una farmacia local para mostrar los horarios comerciales y las listas de productos.'). - Una lista de las tecnologías utilizadas (por ejemplo, HTML5, CSS Grid, JavaScript, Flexbox). [Intenten esto hoy] Tomen un folleto en papel de un negocio local cercano. Conviertan la información de ese folleto en un borrador de sitio web HTML de una sola página, limpio y compatible con dispositivos móviles, en su teléfono o computadora portátil. PRACTICE QUESTIONS 1. ¿Por qué es necesario un portafolio de diseño web para encontrar clientes? A) Es un requisito legal de las autoridades gubernamentales B) Prueba sus habilidades prácticas al mostrar ejemplos de sitios web reales funcionando C) Deposita dinero automáticamente en su cuenta bancaria D) Reemplaza la necesidad de comunicarse con los clientes Answer: B — Los clientes quieren pruebas de que ustedes pueden entregar un trabajo de calidad. Un portafolio muestra ejemplos en vivo y funcionales de lo que pueden construir para ellos. 2. ¿Qué herramienta les permite alojar proyectos web estáticos de HTML/CSS de forma gratuita? A) Netlify o GitHub Pages B) WhatsApp Status C) Microsoft Word D) Aplicación Móvil de Canva Answer: A — Netlify y GitHub Pages proporcionan alojamiento web en vivo gratuito y confiable para proyectos frontend construidos con HTML, CSS y JavaScript. ---------------------------------------- Web Developer / Digital Designer — Lesson 11: Ética web: seguridad del cliente, dominios y derechos de autor 7 minutos de lectura LA ÉTICA CONSTRUYE SU REPUTACIÓN Como desarrollador web, los clientes les darán acceso a activos empresariales sensibles. Confían en ustedes para su identidad de marca, cuentas de pago, correos electrónicos de clientes y nombres de dominio. Mantener altos estándares éticos es la forma más rápida de construir confianza a largo plazo y obtener referencias orgánicas. PROPIEDAD DE NOMBRES DE DOMINIO Y ALOJAMIENTO Una de las mayores quejas que tienen los dueños de negocios es que los desarrolladores web retengan sus dominios como rehenes. Un nombre de dominio (como www.minegocio.com) es propiedad digital legal del cliente. Siempre registren nombres de dominio usando la dirección de correo electrónico oficial y los datos personales del cliente. Si compran el dominio en su nombre usando su cuenta, transfieran la propiedad a ellos una vez que el proyecto esté completamente pagado. Retener el sitio web o el dominio de un cliente como rehén cuando no hay una disputa de acuerdo es poco ético y daña su reputación profesional. IMÁGENES, FUENTES Y LEY DE DERECHOS DE AUTOR No pueden simplemente buscar en Google Imágenes, descargar fotos y subirlas a un sitio web de un cliente comercial. La mayoría de las imágenes en línea pertenecen a fotógrafos y empresas que pueden emprender acciones legales o exigir costosas tarifas de licencia. En su lugar, utilicen estas opciones seguras: - Plataformas gratuitas de fotos de stock: Unsplash, Pexels y Pixabay ofrecen miles de fotos gratuitas y de alta calidad autorizadas para uso comercial. - Medios proporcionados por el cliente: Pidan al cliente que tome fotos de su tienda, productos o equipo usando una cámara de teléfono. - Google Fonts: Usen tipografías gratuitas de código abierto de fonts.google.com. [El peligro de los temas y plugins 'nulled'] Nunca descarguen temas y plugins premium de WordPress piratas o 'nulled' de sitios web ilegales para compartir archivos. Estos archivos casi siempre contienen código malicioso oculto (malware) que compromete el sitio web de su cliente, roba datos de clientes o redirige a los visitantes a sitios ilegales. DATOS DEL CLIENTE Y SEGURIDAD DE CONTRASEÑAS Al gestionar contraseñas para cuentas de alojamiento, archivos de bases de datos o paneles de administración del sitio: - Nunca almacenen contraseñas de clientes en mensajes de texto sin cifrar o aplicaciones de notas no cifradas. - Usen contraseñas fuertes, generadas aleatoriamente, que contengan números, letras y símbolos. - Animen a los clientes a usar gestores de contraseñas dedicados como Bitwarden o 1Password para compartir credenciales de forma segura. PRACTICE QUESTIONS 1. ¿Por qué un nombre de dominio de un sitio web siempre debe registrarse a nombre del cliente? A) Porque los nombres de dominio son legalmente gratuitos para los desarrolladores B) Para asegurar que el cliente sea el propietario legal de su marca comercial y propiedad digital C) Porque a los desarrolladores web no se les permite usar navegadores de internet D) Para evitar que el sitio web se muestre en teléfonos móviles Answer: B — El nombre de dominio representa la identidad digital oficial del cliente. Registrarlo a su nombre asegura que mantengan la propiedad legal de su marca comercial. 2. ¿Cuál es el principal riesgo de usar plugins de WordPress 'nulled' (pirateados)? A) Hacen que el sitio cargue demasiado rápido B) Contienen malware oculto que puede arruinar la seguridad del sitio y comprometer datos C) Pagan automáticamente dinero extra a las empresas de alojamiento D) Convierten todo el texto a un idioma diferente Answer: B — Los plugins 'nulled' son modificados por hackers para inyectar scripts de puerta trasera y malware en los sitios web, lo que representa graves riesgos de seguridad para sus clientes. ---------------------------------------- Web Developer / Digital Designer — Lesson 12: Comunicación con el Cliente y Gestión de Proyectos Web 8 minutos de lectura LA COMUNICACIÓN CLARA MANTIENE LOS PROYECTOS EN MARCHA Muchos desarrolladores web fracasan no por una mala codificación, sino por una mala comunicación. Los dueños de negocios a menudo no son técnicos. No les importa la sintaxis del código; les importan los plazos claros, las explicaciones sencillas y los resultados confiables. Aprender a manejar las expectativas del cliente, organizar el contenido y comunicarse con claridad los diferenciará de la competencia. USO PROFESIONAL DE WHATSAPP BUSINESS En África Occidental, WhatsApp es la herramienta de negocios principal. Usar WhatsApp Business (en lugar de una cuenta personal) hace que su servicio web se vea profesional de inmediato: - Configuren un Perfil de Empresa: Incluyan su foto profesional o logo, horario comercial, ubicación y enlace a su portafolio web. - Creen Respuestas Rápidas: Guarden plantillas de texto automatizadas para preguntas frecuentes de los clientes como paquetes de precios, métodos de pago aceptados y materiales requeridos. - Construyan un Catálogo de Servicios: Listen sus paquetes de sitios web (ej., 'Sitio Básico de 1 Página', 'Sitio Web Empresarial Estándar', 'Tienda de E-commerce') directamente en su perfil de WhatsApp. EL PROCESO DE PROYECTO WEB DE 5 PASOS Para evitar confusiones, sigan este proceso estructurado para cada construcción de sitio web: - 1. Descubrimiento y Acuerdo: Discutan los requisitos, firmen un acuerdo simple y cobren el 50% de depósito. - 2. Recopilación de Contenido: Obtengan logos, texto, fotos de negocios e información de contacto del cliente antes de comenzar el diseño. - 3. Primer Borrador (Staging): Construyan el sitio web en su enlace de servidor de borrador y envíenlo para revisión. - 4. Revisiones del Cliente: Permitan hasta 2 rondas estructuradas de ediciones basadas en los comentarios del cliente. - 5. Pago Final y Lanzamiento: Reciban el 50% restante del saldo, luego conecten el sitio web al dominio oficial y entreguen el control. ESTABLECIENDO LÍMITES PARA LAS REVISIONES DEL CLIENTE Sin límites claros, los clientes pueden enviar mensajes de texto diarios sin fin pidiendo pequeños cambios de diseño. Declaren claramente en su acuerdo: 'Este paquete incluye 2 rondas de revisiones de diseño. Cualquier cambio adicional después de la aprobación se facturará a una tarifa adicional'. Esto mantiene el proyecto avanzando según lo programado, mientras los mantiene a ustedes y al cliente enfocados. [Prueben esto hoy] Descarguen WhatsApp Business y redacten 2 respuestas rápidas: una que enumere lo que necesitan de un cliente para iniciar un sitio web (logo, texto, imágenes) y otra que explique su estructura de pago 50/50. PRACTICE QUESTIONS 1. ¿Por qué es importante recopilar todo el texto y las fotos del cliente ANTES de construir el sitio? A) Evita los retrasos causados por esperar materiales faltantes mientras se construye. B) Les permite vender sus fotos a otras compañías. C) Reduce sus costos de datos móviles a la mitad. D) Es requerido por las compañías de registro de dominios. Answer: A — Esperar el contenido de texto y las imágenes a mitad de un proyecto es la causa más importante de retrasos en el proyecto. Recopilar el contenido primero acelera el desarrollo. 2. ¿Cuántas rondas de revisiones de diseño deberían incluirse típicamente en un paquete estándar de proyecto web? A) Revisiones ilimitadas para siempre. B) Cero revisiones permitidas. C) 1 a 2 rondas estructuradas de revisiones. D) 50 revisiones por semana. Answer: C — Limitar las revisiones a 1 o 2 rondas mantiene el proyecto en movimiento, establece límites claros y evita el retrabajo interminable y sin compensación. ---------------------------------------- Web Developer / Digital Designer — Lesson 13: Construyan Su Perfil Profesional 10 min de lectura OBJECTIVE: Set up a simple, honest professional presence online so employers and customers can find and trust you. Antes de que alguien los contrate o les compre, a menudo los buscan. Un perfil profesional es simplemente una página clara y honesta que responde a tres preguntas: ¿quiénes son?, ¿qué pueden hacer? y ¿cómo pueden contactarlos? No necesitan ser famosos ni tener una computadora. Un teléfono y una buena foto son suficientes para empezar. EMPIECEN CON LO QUE ES GRATIS - WhatsApp Business — aplicación gratuita. Agreguen su oficio, horario de trabajo, ubicación y un catálogo corto de su trabajo o servicios. Muchos clientes en África Occidental los encontrarán aquí primero. - Perfil de Negocio de Google — gratuito. Si tienen una tienda, taller o puesto, esto los coloca en Google Maps para que la gente cercana pueda encontrarlos. - LinkedIn (cuenta básica gratuita) — útil si buscan trabajo de oficina, en ONG o en empresas. Agreguen una foto clara, su oficio o habilidad, y dos o tres líneas sobre lo que han hecho. - Grupos locales de empleo y comercio — los grupos de Facebook y WhatsApp de su ciudad o gremio son donde muchas oportunidades reales se comparten primero. No necesitan los cuatro el primer día. Elijan aquel donde realmente están sus clientes o empleadores. Un sastre o un proveedor de catering puede obtener más de WhatsApp Business y de los grupos locales; un aprendiz de soporte técnico puede necesitar LinkedIn primero. Agreguen los otros con el tiempo. ¿QUÉ HACE QUE UN PERFIL SEA CONFIABLE? - Una foto real de ustedes — rostro visible, fondo liso, ropa limpia. Sin gafas de sol, sin filtros. - Su nombre real, escrito de la misma manera en todas partes. - Una frase honesta sobre lo que hacen: 'Instalo y reparo sistemas solares domésticos en Hohoe'. - Prueba: fotos de trabajos terminados, un certificado o una breve cita de un cliente satisfecho. - Un número de teléfono o enlace de WhatsApp que realmente funcione. [Protéjanse] Nunca paguen a nadie que prometa 'verificar' su perfil o garantizarles un trabajo a cambio de una tarifa. Las plataformas reales como LinkedIn, WhatsApp Business y el Perfil de Negocio de Google son gratuitas para configurar. Cualquiera que les pida dinero para incluirlos es probablemente un estafador. [Intenten esto hoy] Escriban su frase honesta — quiénes son y qué hacen — y guárdenla en sus notas. La reutilizarán en cada perfil, CV y presentación de ahora en adelante. PRACTICE QUESTIONS 1. ¿Cuál de estas opciones es gratuita para configurar y coloca su taller en Google Maps? A) Un directorio de empresas de pago B) Perfil de Negocio de Google C) Un volante impreso D) Un sitio web por el que le pagan a un desarrollador Answer: B — El Perfil de Negocio de Google es gratuito y coloca su negocio en Google Maps y en la Búsqueda de Google, para que la gente cercana pueda encontrarlos. Solo necesitan un teléfono y los detalles de su negocio. 2. ¿Cuál es la cualidad más importante de una foto de perfil profesional? A) Fue tomada por un fotógrafo profesional B) Usa un filtro atractivo C) Su rostro es claramente visible y se ven prolijos D) Los muestra con objetos caros Answer: C — Los empleadores y clientes quieren ver a una persona real y digna de confianza. Una foto clara, prolija y con un fondo liso genera más confianza que cualquier filtro o fondo costoso. ---------------------------------------- Web Developer / Digital Designer — Lesson 14: Escriba sus metas y planifique los obstáculos 10 min de lectura OBJECTIVE: Turn a wish into a written goal, review it weekly, and use if-then plans to handle the obstacles that usually stop you. Una meta que se queda en su cabeza es un deseo. Una meta escrita, con una fecha y un siguiente paso, es un plan. Las investigaciones sobre cómo la gente cambia realmente su comportamiento siguen encontrando lo mismo: las personas que escriben sus metas, las revisan regularmente y deciden de antemano qué hacer cuando las cosas salen mal, tienen muchas más probabilidades de terminar lo que empiezan. ESCRÍBALO, DE FORMA PRÁCTICA - Una meta a la vez. 'Terminar el curso de energía solar antes del 30 de noviembre' es mejor que cinco deseos vagos. - Que sea verificable. Usted debería poder decir 'hecho' o 'no hecho', no 'hice mi mejor esfuerzo'. - Póngale una fecha. Una meta sin fecha se convierte silenciosamente en 'algún día'. - Escriba el siguiente pequeño paso. No 'conseguir un trabajo', sino 'enviar un mensaje a dos ferreterías el sábado por la mañana'. - Manténgalo donde lo vea: un cuaderno, una nota en su teléfono o un papel en la pared. LA REVISIÓN SEMANAL: 15 MINUTOS QUE CAMBIAN TODO Elija un momento fijo cada semana; el domingo por la noche funciona bien para muchas personas. Hágase tres preguntas: ¿Qué terminé esta semana? ¿Qué se interpuso en mi camino? ¿Cuál es mi siguiente paso para la próxima semana? Escriba las respuestas. Este pequeño hábito detecta los problemas mientras aún son pequeños y le recuerda que está avanzando, incluso cuando el progreso parece lento. PLANES 'SI-ENTONCES': DECIDA ANTES DE QUE LLEGUE EL OBSTÁCULO La mayoría de los planes fallan en los mismos momentos predecibles: el paquete de datos se agota, un amigo lo invita a salir la noche de estudio, la lluvia cancela el trabajo que tenía planeado. Un plan 'si-entonces' es una decisión que toma ahora, para que un momento difícil no requiera fuerza de voluntad más tarde. El formato es simple: 'SI [sucede el obstáculo], ENTONCES haré [acción específica]'. - SI mis datos se acaban, ENTONCES estudiaré con mis lecciones sin conexión descargadas en su lugar. - SI llueve el día que planeé visitar tiendas, ENTONCES las llamaré en su lugar y las visitaré al día siguiente. - SI me siento demasiado cansado para estudiar por la noche, ENTONCES haré solo 10 minutos; empezar es la parte difícil. - SI un cliente retrasa el pago, ENTONCES enviaré un recordatorio cortés después de tres días, sin discutir. [Una nota sobre la visualización] Imaginar su meta puede ayudar, pero visualice los pasos, no solo la recompensa. En lugar de solo soñar con el certificado en su pared, imagínese abriendo la lección, respondiendo el cuestionario y enviando un mensaje al cliente. Visualizar el proceso lo prepara; visualizar solo el premio puede relajarlo y llevarlo a no hacer nada. [Intente esto hoy] Escriba una meta con una fecha, luego escriba dos planes 'si-entonces' para los obstáculos que más probablemente lo detengan. Guárdelos en algún lugar donde los vea esta semana. PRACTICE QUESTIONS 1. ¿Qué hace que una meta sea 'verificable'? A) Está escrita en inglés B) Puede decir claramente si está hecha o no hecha C) Otras personas la aprueban D) Es lo suficientemente ambiciosa como para impresionar a la gente Answer: B — Una meta verificable tiene una línea de meta clara: 'terminar 8 lecciones antes del viernes' puede marcarse como hecha o no hecha. 'Hacer mi mejor esfuerzo' no puede, y las metas vagas son fáciles de abandonar discretamente. 2. Llega su noche de estudio y se le ha agotado el paquete de datos. ¿Qué hace un buen plan 'si-entonces'? A) Lo obliga a comprar más datos de inmediato B) Le dice que se salte el estudio hasta la próxima semana C) Le da una decisión que tomó de antemano, como cambiar a sus lecciones sin conexión descargadas D) Lo castiga por no planificar mejor Answer: C — Un plan 'si-entonces' elimina la necesidad de fuerza de voluntad en el momento: usted decidió antes que SI los datos se agotan, ENTONCES estudiaría sin conexión. La decisión ya está tomada, así que solo tiene que seguirla. ---------------------------------------- Web Developer / Digital Designer — Lesson 15: Preséntense en 30 segundos 8 min de lectura OBJECTIVE: Prepare and practise a short, confident self-introduction you can use with employers, customers and new contacts. Muchas personas capaces pierden oportunidades porque se quedan paralizadas cuando alguien les pregunta: "Entonces, ¿a qué se dedican?". Una autopresentación es una respuesta corta y preparada –de unos 30 segundos– que han practicado hasta que les resulte natural. No es para presumir. Es simplemente para que la gente entienda fácilmente cómo pueden ayudarles. EL GUION DE TRES PARTES - Quiénes son: su nombre y su oficio o habilidad. "Mi nombre es Amina. Soy asistente de farmacia titulada." - Qué pueden hacer: una o dos cosas concretas, con pruebas si las tienen. "He completado la capacitación en apoyo a la dispensación y gestión de existencias, y trabajé en una farmacia concurrida durante tres meses." - Qué buscan: díganlo claramente. "Busco un puesto en una farmacia o clínica en esta área." o "Tomo pedidos de catering para eventos de hasta 100 personas." Junto, suena así: "Buenos días, mi nombre es Kofi. Soy técnico solar; he terminado la capacitación certificada en instalación de energía solar doméstica, y ya he instalado sistemas para tres familias en esta ciudad. Busco más clientes, y también realizo reparaciones y mantenimiento. Aquí tienen mi número." Treinta segundos, y el oyente sabe exactamente lo que ofrecen. HÁGANLO SUYO - Ajusten el final para el oyente: un cliente escucha lo que venden; un empleador escucha el trabajo que quieren; un contacto escucha cómo pueden ayudarles. - Practiquen en voz alta, no en su mente; díganlo a un amigo, a un espejo o a la grabadora de voz de su teléfono, cinco veces. - Sean honestos. Una afirmación pequeña y verdadera es mejor que una grande y exagerada que se desmorona a la primera pregunta. - Terminen con una forma de contactarles: su número, su WhatsApp o la ubicación de su tienda. [Para estudiantes tímidos] Sentirse nerviosos es normal y no significa que sean malos en esto. La preparación es la cura: un guion practicado significa que nunca tendrán que inventar frases cuando estén nerviosos. Comiencen usándolo en momentos de baja presión —con un vecino, luego con un tendero— antes de la gran entrevista o el cliente importante. [Prueben esto hoy] Escriban su introducción de tres partes en sus notas, luego díganla en voz alta tres veces. Úsenla una vez esta semana con una persona real. PRACTICE QUESTIONS 1. ¿Cuáles son las tres partes de una buena introducción de 30 segundos? A) Sus antecedentes familiares, su educación, sus pasatiempos B) Quiénes son, qué pueden hacer, qué buscan C) Sus expectativas salariales, su ubicación, su edad D) Sus problemas, sus necesidades, sus quejas Answer: B — El guion responde a las tres preguntas que todo oyente tiene: ¿quién es esta persona, qué puede hacer por mí y qué quiere? Manténganlo corto, honesto y practicado. 2. ¿Cuál es la mejor manera de preparar su introducción? A) Memorizar un discurso largo sobre toda su vida B) Esperar la inspiración en el momento C) Practicar un guion corto en voz alta varias veces antes de necesitarlo D) Copiar la introducción de otra persona palabra por palabra Answer: C — Decirlo en voz alta —a un amigo, al espejo o a la grabadora de voz— es lo que lo hace sentir natural bajo presión. Un guion corto, honesto y practicado es mejor que la improvisación o un discurso largo memorizado. ---------------------------------------- Get the full app: https://miva-skillsnav.lovable.app