Tutoriales Archives - Desarrollandolo

ORGANIZANDO LA INFORMACIÓN PARA MI SITIO WEB

<img width="454" height="369" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="454" height="369"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-2906 wp-post-2874" alt="" data-public-id="organizar_29066afa0.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1624642049" data-size="454 369" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1624642049/organizar_29066afa0/organizar_29066afa0.jpg?_i=AA 454w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_244/w_auto/f_auto,q_auto/v1624642049/organizar_29066afa0/organizar_29066afa0.jpg?_i=AA 300w" data-sizes="(max-width: 454px) 100vw, 454px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En Desarrollándolo nos gusta ser organizados por eso queremos mostrarte como puedes organizar el contenido de tu sitio para la nueva plantilla que has comprado. Como ya sabes crear una carpeta de drive compartida, si no te invito a ver este post, o si ya la creaste solo tendrás que crear un nuevo documento. Se […]

CÓMO COMPARTIR UNA CARPETA EN GOOGLE DRIVE

<img width="501" height="367" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="501" height="367"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-2914 wp-post-2861" alt="" data-public-id="compartecarpeta.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1624642983" data-size="501 367" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1624642983/compartecarpeta/compartecarpeta.jpg?_i=AA 501w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_220/w_auto/f_auto,q_auto/v1624642983/compartecarpeta/compartecarpeta.jpg?_i=AA 300w" data-sizes="(max-width: 501px) 100vw, 501px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En Desarrollándolo en muchas ocasiones necesitamos que nos compartas tus archivos, por eso te enseñamos cómo compartir una carpeta donde podrás colocar todos los archivos que necesitamos para poder dejar terminado tu proyecto. Cuando finalice el proyecto si deseas puedes dejar de compartir la carpeta con Desarrollándolo, los archivos los tendrías tu y nosotros no […]

Cómo crear el juego del topo (nivel básico)

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-662 wp-post-659" alt="" data-public-id="post-15.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622677315" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622677315/post-15/post-15.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622677315/post-15/post-15.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622677315/post-15/post-15.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622677315/post-15/post-15.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En desarrollandolo.com presentamos un nuevo video donde veremos cómo realizar el famoso juego del topo.

Cómo utilizar jquery en nuestro sitio web con animación

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-642 wp-post-641" alt="" data-public-id="post-10.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665183" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665183/post-10/post-10.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665183/post-10/post-10.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665183/post-10/post-10.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665183/post-10/post-10.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

es traemos un video de cómo implementar jQuery en nuestro sitio web utilizando eventos del teclado, mouse, animación anidada y añadiendo clases a un elemento.

Como realizar eventos del teclado javascript

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-639 wp-post-638" alt="" data-public-id="post-9.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665185" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665185/post-9/post-9.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665185/post-9/post-9.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665185/post-9/post-9.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665185/post-9/post-9.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En esta ocasión daremos las pautas para realizar eventos javascript con el teclado sin ningún framework adicional.

Como realizar eventos del mouse javascript

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-636 wp-post-635" alt="" data-public-id="post-8.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665187" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665187/post-8/post-8.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665187/post-8/post-8.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665187/post-8/post-8.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665187/post-8/post-8.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En este video veremos cómo utilizar los diferentes eventos del mouse, para así poder interactuar más con el usuario y obtener datos o crear eventos exclusivos para ellos.

Como hacer una animación css avanzada

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-619 wp-post-618" alt="" data-public-id="post-5.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665206" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665206/post-5/post-5.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665206/post-5/post-5.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665206/post-5/post-5.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665206/post-5/post-5.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En este video vamos haber como hacer una animación CSS avanzada, con la cual podremos impresionar a nuestros clientes.

Cómo hacer animación con css para nuestra web

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-616 wp-post-615" alt="" data-public-id="post-4.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665208" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665208/post-4/post-4.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665208/post-4/post-4.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665208/post-4/post-4.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665208/post-4/post-4.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

CSS es una lenguaje que vamos a utilizar con frecuencia en el mundo de la web y en esta ocasión tenemos el gusto de explicar cómo implementarlo en la creación de animaciones en nuestro sitio web.

Cómo implementar css en nuestro sitio web

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-613 wp-post-611" alt="" data-public-id="post-3.png" data-format="png" data-transformations="w_auto/f_auto,q_auto" data-version="1622665210" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665210/post-3/post-3.png?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665210/post-3/post-3.png?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665210/post-3/post-3.png?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665210/post-3/post-3.png?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

Los estilos se implementan en nuestra web para dar un diseño adaptable y dinámico a nuestra web haciendo que los usuarios se sientan más cómodos al visualizarla.

Cómo hacer estructura html básica

<img width="800" height="450" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>" class="attachment-large size-large wp-post-image wp-image-610 wp-post-606" alt="" data-public-id="post-2.jpg" data-format="jpg" data-transformations="w_auto/f_auto,q_auto" data-version="1622665212" data-size="1200 675" data-srcset="https://res.cloudinary.com/desarrollandolo/images/w_1024,h_576/w_auto/f_auto,q_auto/v1622665212/post-2/post-2.jpg?_i=AA 1024w, https://res.cloudinary.com/desarrollandolo/images/w_300,h_169/w_auto/f_auto,q_auto/v1622665212/post-2/post-2.jpg?_i=AA 300w, https://res.cloudinary.com/desarrollandolo/images/w_768,h_432/w_auto/f_auto,q_auto/v1622665212/post-2/post-2.jpg?_i=AA 768w, https://res.cloudinary.com/desarrollandolo/images/w_auto/f_auto,q_auto/v1622665212/post-2/post-2.jpg?_i=AA 1200w" data-sizes="(max-width: 800px) 100vw, 800px" data-delivery="upload" onload=";window.CLDBind?CLDBind(this):null;" data-cloudinary="lazy" />

En el siguiente video vamos a ver como se genera una estructura básica de html utilizando el editor de texto que descargamos e instalamos en el video anterior.

Hablemos de
tu proyecto