ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Tue, 19 Jan 2021 11:53:41 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png ProgramaciónExtrema.com https://programacionextrema.com 32 32 Curso de Python en vivo https://programacionextrema.com/2021/01/19/curso-de-python-en-vivo/ https://programacionextrema.com/2021/01/19/curso-de-python-en-vivo/#respond Tue, 19 Jan 2021 11:53:41 +0000 https://programacionextrema.com/?p=1495 Aprende fácilmente Python con clases a distancia en directo Aprende python con clases en directo guiadas paso a paso, con profesionales del sector de la programación en Python y docencia. Abarca todos los conocimientos desde 0 con 80 horas de clases lectivas, 70% prácticas y 30% teoría más un proyecto final de curso. Este curso… Read More

La entrada Curso de Python en vivo aparece primero en ProgramaciónExtrema.com.

]]>
Aprende fácilmente Python con clases a distancia en directo

Aprende python con clases en directo guiadas paso a paso, con profesionales del sector de la programación en Python y docencia. Abarca todos los conocimientos desde 0 con 80 horas de clases lectivas, 70% prácticas y 30% teoría más un proyecto final de curso. Este curso comienza a partir de la segunda quincena de Enero y tenemos diferentes horarios para que elijas cual se adapta mejor a ti. Disponemos de plazas limitadas con un número máximo de alumnas/os y matrícula gratuita.

Unipython incorpora al curso clases magistrales que incluyen realizar un videojuego con python (pygame), desarrollo de interfaz gráfica (Tkinter) y desarrollo web (flask). Al finalizar el curso realizarás un proyecto final, el cual está basado en casos prácticos reales que te servirán en tus futuros empleos. Contamos con la mejor experiencia desde 2016 impartiendo Python en diferentes niveles y modalidades. Al finalizar te incorporaremos en la bolsa de empleo privada de unipython y un especialista te ofrecerá orientación laboral para facilitarte tu entrada al trabajo.

La entrada Curso de Python en vivo aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2021/01/19/curso-de-python-en-vivo/feed/ 0
Mi experiencia con Clouding.io https://programacionextrema.com/2019/05/08/mi-experiencia-con-clouding-io/ https://programacionextrema.com/2019/05/08/mi-experiencia-con-clouding-io/#respond Wed, 08 May 2019 20:32:47 +0000 https://programacionextrema.com/?p=1440 En esta oportunidad quiero contarles como es mi experiencia utilizando los servidores VPS de Clouding.io. Este proveedor de servidores VPS cloud en España que te permite armar tus propios servidores según el presupuesto del que dispongas y las especificaciones técnicas que requiera el proyecto en cuestión. Además, ofrece 5€ de saldo para tus primeras pruebas,… Read More

La entrada Mi experiencia con Clouding.io aparece primero en ProgramaciónExtrema.com.

]]>
En esta oportunidad quiero contarles como es mi experiencia utilizando los servidores VPS de Clouding.io. Este proveedor de servidores VPS cloud en España que te permite armar tus propios servidores según el presupuesto del que dispongas y las especificaciones técnicas que requiera el proyecto en cuestión. Además, ofrece 5€ de saldo para tus primeras pruebas, sin compromiso.

A un precio muy económico y accesible se pueden acceder a una gran cantidad de herramientas indispensables para que puedas gestionar tus propios servidores VPS desde la comodidad de tu casa.

Funciones que ofrece

Estas son algunas de las funciones más interesantes que tienen, y las cuales me ayudaron a tener éxito en cada uno de mis proyecto que he alojado en  sus servidores.

Configuración de servidores a tu medida

Clouding.io te permite crear servidores de acuerdo a los requisitos de tu proyecto, con una gran variedad de opciones.

  • Licencia para Linux y Windows
  • Memoria RAM de 2GB de RAM por vCore o 4GB de RAM por vCore
  • Procesador de 1 a 16 vCores
  • SSD de 5 a 1900GB.

Además, lo interesante de esto, es que te permite cambiar en cualquier momento todas las configuraciones de hardware que hayas seleccionado en un principio. Esto puede ser muy útil por ejemplo cuando el proyecto crezca demasiado y el hardware actual ya no lo soporte más.

Sistema de backups incorporado

En el mundo de la tecnología uno nunca puede considerarse a salvo, cualquier error o inconveniente que surja puede hacernos perder mucha información valiosa de nuestros proyectos. Es por eso que siempre es muy importante contar con  un sistema de backups para proteger   todos los datos más sensibles que nos permitan restaurar nuestros proyectos en su totalidad.

En este tema Clouding.io no se queda para nada atrás, ya que cuenta con un sistema que permite mantener los backups históricos de todos tus servidores. Otras características importantes son:

  • Los Backups son totalmente configurables
  • No requiere de ningún tipo de instalación adicional
  • Permanecen 24 horas después de eliminado el servidor
  • Copias completas del servidor
  • A un precio muy económico y fácil de configurar desde el panel.

Snapshots para clonar servidores

Los snapshots están pensados para crear instantáneas puntuales de los servidores, con las configuraciones habituales de software que se utilicen habitualmente. Esta es una herramienta muy interesante que ofrece Clouding.io ya que permite crear nuevos servidores iguales a la imagen master que se haya generado en un principio, ahorrando tiempo de configuración e instalación de los programas.

Atención al cliente de calidad y en tiempo

A lo largo del tiempo, como casi con cualquier proyecto personal, me han surgido diferentes problemas técnicos de los cuales no podía resolver por mis escasos conocimientos técnicos en el tema. Es ahí cuando el equipo de soporte técnico de Clouding.io me ha ayudado a resolver cualquier inconveniente, y también a despejarme cualquier duda. Con un servicio de calidad, soporte por e-mail y por teléfono durante las 24 horas del día.

Sistema de seguridad para proteger tus proyectos

Los ataques por parte de hackers interesados en robar información son una realidad hoy en día. Es por eso que en Clouding.io cuentan con un sistema técnico personalizado que les permite monitorear cualquier comportamiento extraño dentro de su red, además de mitigar ataques DDos de hasta 2 Tbps de forma automática.

Este servicio lo incluyen gratuitamente, sin ningún coste adicional. Para que sus clientes se sientan seguros y solamente se preocupen por los aspectos de sus proyectos.

Función para mantener el servidor archivado

Al principio, cuando me iniciaba en el mundo del desarrollo web era muy común para mí no llegar a cumplir con todas las expectativas que me había planteado en un principio. Cuando estaba en otro hosting, este problema me obligaba a tener que cancelar los planes que tenia contratado debido a la falta de presupuesto. Pero al llegar a Clouding.io eso ya dejó de ser algo que me preocupe gracias a la funcionalidad que ofrece de mantener el servidor archivado, permitiéndome así ahorrar muchos costos de producción.

Cuando el servidor está archivado se apaga, y sólo se paga por el disco SSD y los backups, no la RAM ni la CPU. Cuando se desarchive, se enciende de nuevo y tiene un consumo normal. Todo esto es muy interesante cuando se desea suspender momentáneamente cualquier proyecto. Además su activación es muy sencilla y rápida.

Datacenter ubicado en Barcelona

Todas las IPs son fijas y españolas. Lo que proporciona muchas ventajas para aquellos proyectos que estén orientados al público de ese país, ya que se suelen producir mayores velocidades de carga y descarga, además las conexiones son más fiables y estables.

Otro punto interesante es que te dan un control exclusivo de tu IP. Nadie más puede usarla. Así se evitan bloqueos o problemas por malos usos que no sean culpa tuya.

Para la tranquilidad de todos los clientes, en Clouding.io se realiza un estricto cumplimiento de la normativa de protección de datos. Los datos no salen de España.

Actualización constante

Otro aspecto que realmente me ha llamado la atención de sus servicios es la capacidad que tienen de actualizarse constantemente y adaptarse a las nuevas tecnología que van surgiendo. Para este año 2019 pronostican lanzar muchas más funciones y herramientas, las cualquier pueden hacer potenciar más tus proyectos personales. Algunas de esas funciones nuevas son:

  • Servidores Cloud de hasta 64 Cores y 512GB de RAM
  • Creación de un servidor a partir de una iso
  • Una nueva gama LowCost para developers y pruebas
  • Volúmenes de disco adicionales
  • Una API para programar diversas funcionalidades

Conclusiones

Sinceramente puedo decir que me ha resultado bastante sencillo y muy cómodo utilizar su sistema de administración y configuración. Durante todo este tiempo que lo he utilizado no he tenido inconvenientes técnicos graves que hayan puesto en riesgo a mis proyectos, cosa que si me ha pasado con otros proveedores de hosting. Sin lugar a dudas recomiendo a Clouding.io para tus proyectos personales y profesionales.

La entrada Mi experiencia con Clouding.io aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2019/05/08/mi-experiencia-con-clouding-io/feed/ 0
Qué es y cómo solucionar el HTTP error 500 https://programacionextrema.com/2019/02/12/http-error-500/ https://programacionextrema.com/2019/02/12/http-error-500/#respond Tue, 12 Feb 2019 00:36:44 +0000 https://programacionextrema.com/?p=1415 El HTTP error 500 es un código de respuesta que se utiliza en el mencionado protocolo para indicar que ha ocurrido un error interno en el servidor donde se aloja una determinada web. El mensaje de error que se muestra en estos casos es «500 Internal Server Error». Por lo generar este tipo de error… Read More

La entrada Qué es y cómo solucionar el HTTP error 500 aparece primero en ProgramaciónExtrema.com.

]]>
El HTTP error 500 es un código de respuesta que se utiliza en el mencionado protocolo para indicar que ha ocurrido un error interno en el servidor donde se aloja una determinada web. El mensaje de error que se muestra en estos casos es «500 Internal Server Error».

Por lo generar este tipo de error suele suceder en servidores Apache y son originados por alguna falla en la programación de los sistemas que están desarrollados en diferentes lenguajes de programación como puede ser PHP.

Cuándo puede suceder el error 500 de HTTP

Este error se puede presentar en muchas ocasiones, debido a que la programación permite una gran variedad de flujos de comportamientos. Por lo generar los fallos más comunes que generan este tipo de error en el servidor son:

Al conectar la aplicación con la base de datos: Muy a menudo nos podemos encontrar con errores de conexión a base de datos. Esto puede presentarse al ingresar datos de autenticación incorrectos o al no conocer la estructura de las tablas.

Al escribir una sintaxis incorrecta: Es muy frecuente encontrarnos con errores típicos de sintaxis, y más en un lenguaje de programación como puede ser PHP. Para que esto no te suceda te recomendamos testear toda la aplicación antes de ponerla en producción.

Al tener problemas de performance: Este tipo de fallo se puede originar al procesar mucha información sin disponer de los recursos de hardware necesarios. Por ejemplo suele suceder cuando se procesan millones de registros en una base de datos.

Esos son algunos errores típicos que pueden generar una respuesta del servidor HTML 500, pero pueden existir muchos otros más.

Cómo solucionar el error HTTP 500 en el servidor

Por empezar tenemos que comprender que dicho error por si solo no nos está indicando nada como para determinar la causa verdadera del problema. Para poder encontrar más pistas es muy importante realizar algunas configuraciones en el servidor.

La configuración que tenemos que realizar en nuestro servidor es para que se muestren los mensajes de errores originales y no el texto genérico.

Por ejemplo, en caso de que estemos utilizando el lenguaje de programación PHP y tengamos el acceso al archivo de configuración del PHP.ini tendremos que modificar la variable display_errors que por defecto se encuentra en Off como se muestra a continuación:

display_errors = Off

Lo que esa configuración nos proporciona es el hecho de ocultar todos los errores, lo que puede ser muy útil en un entorno de producción para no dar información privada que pueda comprometer la seguridad del sistema.

En este caso para poder mostrar los errores correctamente vamos a tener que modificar esa misma variable para que tenga el valor On.

display_errors = On

Para que el servidor tome la nueva configuración es muy probable que tengas que reiniciar el servidor. Luego simplemente al ejecutar la página que mostraba el error «500 Internal Server Error» debería mostrar un nuevo mensaje con el error exacto.

En caso de que te encuentres en un hosting y no tengas acceso al servidor para poder modificar el archivo PHP.ini o para poder reiniciarlo vas a tener contactarte con soporte para que ellos mismo puedan darte el acceso o realizar los pasos mencionados para solucionarte el problema.

Otra opción es montar la web localmente con un servidor junto al módulo de PHP para que poder reproducir el error y solucionarlo.

La entrada Qué es y cómo solucionar el HTTP error 500 aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2019/02/12/http-error-500/feed/ 0
Cambiar la fuente de la letra (texto) HTML con CSS https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/ https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/#respond Sat, 05 Jan 2019 19:38:17 +0000 https://programacionextrema.com/?p=1402 Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto. En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que… Read More

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]>
Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto.

En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que puedas desarrollar un sitio web moderno e impactante en una primera instancia. Podremos comprobar que unas pocas lineas de código CSS se podrá modificar el tipo de letra de todo el cuerpo HTML.

Ejemplo de cambio de fuente en un texto HTML con CSS

Para comprender mejor cómo realizar un cambio de fuente o tipografía, a continuación te proporcionaremos un breve ejemplos de código. El mismo está completo y se encuentra en HTML y CSS.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS</title>
    <style>
      .texto {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

En el ejemplo anterior se puede apreciar que con el atributo CSS font-family se modifica la tipografía del texto que está dentro de una etiqueta div de clase texto.

La propiedad font-family acepta varias fuentes, las cuales vienen incorporadas por defecto. A continuación te dejamos algunas fuentes adicionales que se pueden utilizar libremente en cualquier sitio web.

Family Genérico Font family Descripción
Serif Times New Roman
Georgia
Las fuentes Serif tienen pequeñas líneas en los extremos de algunos caracteres.
Sans-serif Arial
Verdana
«Sans» significa sin – estas fuentes no tienen líneas en los extremos de los caracteres
Monospace Courier New
Lucida Console
Todos los caracteres monoespacios tienen el mismo ancho.

Utilizar fuentes (fonts) de Google

Google ofrece gratuitamente y libremente una gran variedad del fuentes para que puedas utilizar en tus proyectos. Las misma fuentes se pueden ver en https://fonts.google.com. Para utilizar alguna de sus fuentes solamente es necesario importarla dentro del HTML. A continuación te dejaremos un breve ejemplo de cómo hacerlo, reutilizando el código anterior.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS usando las fuentes de Google</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .texto {
        font-family: 'Tangerine', serif;
      }
    </style> 
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

Eso es lo básico que hay que saber para poder modificar o cambiar las fuentes de los texto en HTML con CSS. En caso de que tengan una duda pueden dejar un comentario al final del tutorial.

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/feed/ 0
Cómo ejecutar una función desde un enlace o link HTML con Java Script https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/ https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/#respond Wed, 31 Oct 2018 19:10:41 +0000 https://programacionextrema.com/?p=1388 En esta ocasión vamos a ver una simple funcionalidad que puede ser muy útil en muchos casos. Vamos a explicar con un código muy sencillo cómo ejecutar una función desde un enlace o link HTML con Java Script, de tal forma que no haga una redirección a otra página. Esta funcionalidad es muy similar a… Read More

La entrada Cómo ejecutar una función desde un enlace o link HTML con Java Script aparece primero en ProgramaciónExtrema.com.

]]>
En esta ocasión vamos a ver una simple funcionalidad que puede ser muy útil en muchos casos. Vamos a explicar con un código muy sencillo cómo ejecutar una función desde un enlace o link HTML con Java Script, de tal forma que no haga una redirección a otra página.

Esta funcionalidad es muy similar a la de ejecutar una función pero con un botón, con la diferencia principal de que en un enlace la función se invoca en el atributo href y en un botón se hace con el atributo onclick.

Código de muestra para llamar una función desde un enlace o link HTML con Java Script

Para realizar esta tarea vamos a crear un link HTML y vamos a utilizar su atributo href para llamar a la función en cuestión. A diferencia de un enlace tradicional donde solamente se utiliza la URL completa para hacer una redirección en este caso es necesario indicar que se va a llamar a una función Java Script, para esto en el atributo href se debe poner la función (a la cual se va a invocar) de la siguiente forma.

<html>
  <head>
    <title>Cómo ejecutar una función desde un enlace o link HTML con Java Script</title>
  </head>
  <body>
    <a href="javascript:funcion()">Llamar función</a>
    <script>
      function funcion(){
        alert('Función ejecutada');
      }
    </script>
  </body>
</html>

Al ejecutar el código anterior en el navegador van a poder visualizar un pop-up con un mensaje, el cual es el resultado de llamar a una función con Java Script.

Eso es todo lo necesario para realizar dicha función, en caso de que se encuentren con algún problema no duden en dejar un comentario al final del artículo.

La entrada Cómo ejecutar una función desde un enlace o link HTML con Java Script aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/feed/ 0
Cómo hacer una etiqueta o tag div HTML editable https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/ https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/#respond Wed, 24 Oct 2018 23:39:28 +0000 https://programacionextrema.com/?p=1385 En el presente tutorial vamos a explicar, proporcionando un código fuente de ejemplo para que uses en tus proyectos, cómo hacer una etiqueta o tag div HTML editable, de forma tal que cumpla el mismo funcionamiento que un campo de texto. Esta funcionalidad puede ser muy útil cuando se requiera crear un campo de texto… Read More

La entrada Cómo hacer una etiqueta o tag div HTML editable aparece primero en ProgramaciónExtrema.com.

]]>
En el presente tutorial vamos a explicar, proporcionando un código fuente de ejemplo para que uses en tus proyectos, cómo hacer una etiqueta o tag div HTML editable, de forma tal que cumpla el mismo funcionamiento que un campo de texto.

Esta funcionalidad puede ser muy útil cuando se requiera crear un campo de texto que no sea un input de type text. Para esto simplemente vamos a aplicar estilos CSS sin la necesidad de tener que programar lógica con Java Script o jQuery.

Código para hacer una etiqueta o tag div HTML editable (campo de texto)

Para realizar esta función simplemente vamos a definir una etiqueta div y le incluiremos el atributo contenteditable en true, permitiendo así que en la etiqueta se pueda escribir cualquier tipo de texto. Además le agregaremos estilos CSS para ajustar correctamente el tamaño y para que el texto no sobresalga del div.

<html>
  <head>
    <title>Cómo hacer una etiqueta o tag div HTML editable</title>
    <style>
      .editable {
        width: 300px;
        min-height: 20px;
        border: 1px solid black;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div class="editable" contenteditable="true">
    </div>
  </body>
</html>

Al ejecutar el código anterior en un navegador van a poder visualizar el campo de texto editable, simplemente para probarlo pueden tipear cualquier caracter y ver como se adapta al tamaño.

En el caso de que sea necesario recuperar el valor ingresado en el campo de texto se puede utilizar la función text que nos proporciona jQuery, como lo mostraremos a continuación.

$('.editable').text();

Eso es todo lo necesario para poder hacer una etiqueta o tag div editable en HTML, en muy pocos pasos y sobre todo de forma eficiente. En el caso de que tengan algún inconveniente no duden en dejar un comentario.

La entrada Cómo hacer una etiqueta o tag div HTML editable aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/feed/ 0
Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery https://programacionextrema.com/2018/10/18/como-cambiar-el-tamano-de-una-etiqueta-o-tag-div-con-java-script-y-jquery/ https://programacionextrema.com/2018/10/18/como-cambiar-el-tamano-de-una-etiqueta-o-tag-div-con-java-script-y-jquery/#respond Thu, 18 Oct 2018 00:43:46 +0000 https://programacionextrema.com/?p=1383 Con Java Script y jQuery se puede realizar practicamente cualquier tipo de funcionalidad a nivel cliente (frontend) manipulando todo el conteniedo HTML y CSS. Teniendo en cuenta eso en esta oportunidad vamos a ver cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery, modificando sus atributos CSS height y… Read More

La entrada Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]>
Con Java Script y jQuery se puede realizar practicamente cualquier tipo de funcionalidad a nivel cliente (frontend) manipulando todo el conteniedo HTML y CSS. Teniendo en cuenta eso en esta oportunidad vamos a ver cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery, modificando sus atributos CSS height y width.

Si bien esta funcionalidad la vamos a realizar con una etiqueta div, también puede ser realizada con cualquier otro tag, como por ejemplo para una imagen, un input o un botón entre otros.

Código para cambiar el tamaño de una etiqueta o tag div con jQuery y Java Script

Para poder realizar dicha funcionalidad vamos a definir una etiqueta div con la clase box, con un tamaño de 300 píxeles de alto y de ancho, además le pondremos color de fondo rojo para que se pueda visualizar mejor el cambio de tamaño.

<html>
  <head>
    <title>Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        function changeSize(){
          $('.box').css('height', '100px');
          $('.box').css('width', '100px');
        }
        setTimeout(function(){
          changeSize();
        }, 2000);
      });
    </script>
  </body>
</html>

Al ejecutar el código anterior se va a visualizar el cuadrado rojo en la pantalla y luego de 2 segundos va a cambiar su tamaño (se achicará a 100 píxeles de alto y ancho).

Lo más importante del código es la función css de jQuery, ya que con esa misma vamos a poder cambiar el height y el width. Luego para que se pueda visualizar mejor utilizamos un timeout de 2 segundo, esto va a hacer notar más el cambio de tamaño de la caja.

En caso de querer hacerlo sin jQuery (con Java Script nativo sin librerías), el código quedaría de la siguiente forma:

function changeSize(){
  box = document.getElementsByClassName('box')[0];
  box.style.width = '100px';
  box.style.height = '100px';
}
setTimeout(function(){
  changeSize();
}, 2000);

Eso es lo que hay que tener el cuenta para poder modificar los tamaños de etiquetas HTML con Java Script y con la librería jQuery. Ante cualquier problema no duden en dejar su comentario.

La entrada Cómo cambiar el tamaño de una etiqueta o tag div con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/18/como-cambiar-el-tamano-de-una-etiqueta-o-tag-div-con-java-script-y-jquery/feed/ 0
Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery https://programacionextrema.com/2018/10/16/como-seleccionar-o-marcar-como-chequeado-checked-todos-los-checkbox-con-jquery/ https://programacionextrema.com/2018/10/16/como-seleccionar-o-marcar-como-chequeado-checked-todos-los-checkbox-con-jquery/#respond Tue, 16 Oct 2018 20:58:14 +0000 https://programacionextrema.com/?p=1381 En esta oportunidad vamos a ver cómo seleccionar o marcar como chequeado todos los checkbox de un formulario o listado con jQuery y Java Script. Esta funcionalidad se suele utilizar muchísimo en los sitios web con listados muy largos, donde el usuario tiene la posibilidad de realizar determinada acción (como por ejemplo borrar) sobre todos… Read More

La entrada Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery aparece primero en ProgramaciónExtrema.com.

]]>
En esta oportunidad vamos a ver cómo seleccionar o marcar como chequeado todos los checkbox de un formulario o listado con jQuery y Java Script. Esta funcionalidad se suele utilizar muchísimo en los sitios web con listados muy largos, donde el usuario tiene la posibilidad de realizar determinada acción (como por ejemplo borrar) sobre todos los items, en lugar de hacerlo de a uno a la vez, lo cual puede ser bastante tedioso.

Si bien esta funcionalidad se puede realizar con solamente Java Script en este tutorial vamos a utilizar la famosa librería jQuery, para poder hacer mucho más sencillo el código.

Código completo para seleccionar todos los checkbox

A continuación dejamos el código completo para seleccionar o marcar como checked todos los checkbox de un listado en particular.

<html>
  <head>
    <title>Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox" id="seleccionar-todos"> Seleccionar todos<br>
    <div id="listado">
      <input type="checkbox" name="opcion" value="uno"> Opción uno<br>
      <input type="checkbox" name="opcion" value="dos"> Opción dos<br>
      <input type="checkbox" name="opcion" value="tres"> Opción tres<br>
    </div>
    <script>
      $(function(){
        $('#seleccionar-todos').change(function() {
          $('#listado > input[type=checkbox]').prop('checked', $(this).is(':checked'));
        });
      });
    </script>
  </body>
</html>

Al ejecutar el código anterior en tu navegador vas a poder ver un listado de checkbox sin seleccionar, y un checkbox al principio, el cual se va a utilizar para poder seleccionar o quitar la selección de todos los input. Como se puede ver simplemente es necesario detectar el evento change del input principal para saber cuando marcar o no al resto.

Esto es todo lo necesario para poder realizar la funcionalidad de seleccionar todos los checkbox con Java Script y jQuery, el código ofrecido se puede utilizar libremente en cualquier proyecto personal o comercial. Ante cualquier inconveniente que surja en la implementación pueden dejar un comentario al final del tutorial ofrecido.

La entrada Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/16/como-seleccionar-o-marcar-como-chequeado-checked-todos-los-checkbox-con-jquery/feed/ 0
Superponer etiquetas y tags HTML con CSS (uno dentro de otro) https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/ https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/#respond Sat, 13 Oct 2018 21:31:24 +0000 https://programacionextrema.com/?p=1370 En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código… Read More

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]>
En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código completo.

Esto puede ser necesario en muchas ocasiones, por ejemplo cuando se requiere mostrar un texto o un botón por encima de una imagen o cualquier otro elemento del doc.

Código para superponer etiquetas y tags HTML con CSS usando posiciones relativa y absoluta

Para comprender mejor el código a continuación vamos a definir dos etiquetas div HTML, una dentro de otra, para que la segunda se puede posicionar por encima de la primera, en cualquier ubicación. Para esto la primera va a tener que tener el atributo position como relative mientras que la segunda va a tener que tener ese mismo atributo pero con el valor absolute, luego con el bottom y el right se va a poder posicionar en cualquier ubicación.

<html>
  <head>
    <title>Superponer etiquetas y tags HTML con CSS</title>
    <style type="text/css">
      .tag1{
        width: 300px;
        height: 300px;
        position: relative;
        background: red;
      }
      .tag2{
        width: 100px;
        height: 50px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="tag1">
      <div class="tag2"></div>
    </div>
  </body>
</html>

Con el código anterior la segunda etiqueta se va a mostrar en la parte inferior izquierda de la primera, en caso de querer ubicarla sobre el margen superior simplemente hay que utilizar el atributo top en lugar del bottom, como se utilizó en el ejemplo anterior.

Así es como se verá el código anterior en tu navegador.

Superponer etiquetas y tags HTML con CSS

Si te interesa superponer el segundo tag sobre una imagen, simplemente se puede realizar agregando la etiqueta img de la imagen en el primer tag.

Eso es todo lo que hay que tener en cuenta para poder realizar la función de superponer etiquetas HTML con CSS. En caso de que tengan alguna duda pueden dejar su comentario al final del post.

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/feed/ 0
Cómo remplazar caracteres de un string con Java Script https://programacionextrema.com/2018/10/05/como-remplazar-caracteres-de-un-string-con-java-script/ https://programacionextrema.com/2018/10/05/como-remplazar-caracteres-de-un-string-con-java-script/#respond Fri, 05 Oct 2018 03:43:26 +0000 https://programacionextrema.com/?p=1365 Java Script es un lenguaje de programación que te permite realizar muchas funcionalidades como ya hemos visto en tutoriales anteriores. En esta oportunidad vamos ver cómo remplazar caracteres de un string, proporcionando el código de ejmeplo para que puedan utilizar en sus proyectos. La funcionalidad es utilizada para remplazar un caracter o varios pero de… Read More

La entrada Cómo remplazar caracteres de un string con Java Script aparece primero en ProgramaciónExtrema.com.

]]>
Java Script es un lenguaje de programación que te permite realizar muchas funcionalidades como ya hemos visto en tutoriales anteriores. En esta oportunidad vamos ver cómo remplazar caracteres de un string, proporcionando el código de ejmeplo para que puedan utilizar en sus proyectos.

La funcionalidad es utilizada para remplazar un caracter o varios pero de a uno, esto quiere decir que si se tienen varios hay que ejecutar la función varias veces o agragar otra funcionalidad.

Código para remplazar caracteres de un string (cadena de caracteres) con Java Script

Para realizar dicha función vamos a utilizar la función replace que ofrece Java Script de forma nativa. Además vamos a definir dos variables, una para guardar la cadena de caracteres original y la otra para los caracteres nuevos (los cuales se quieren utilizar para remplazar).

<html>
  <head>
    <title>Cómo remplazar caracteres de un string con Java Script</title>
  </head>
  <body>
    <script>
      cadena = "Esto es un ejemplo";
      nuevosCaracteres = "una demo";
      alert(cadena.replace("un ejemplo", nuevosCaracteres));
    </script>
  </body>
</html>

Al ejecutar el código anterior en el browser van a poder ver una alert con el resultado de invocar la función replace de Java Script.

En caso de querer remplazar varias ocurrencias en un string la función replace no va a ser útil, para tener esa funcionalidad vamos a realizar la función replaceAll utilizando expresiones regulares.

<html>
  <head>
    <title>Cómo remplazar caracteres de un string con Java Script</title>
  </head>
  <body>
    <script>
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
      };
      cadena = "Esto es un ejemplo, esto es un ejemplo.";
      nuevosCaracteres = "una demo";
      alert(cadena.replaceAll("un ejemplo", nuevosCaracteres));
    </script>
  </body>
</html>

Eso es todo lo que se tiene que tener en cuenta para remplazar caracteres con Java Script, en el caso de que tengan alguna duda pueden dejar un comentario en el blog.

La entrada Cómo remplazar caracteres de un string con Java Script aparece primero en ProgramaciónExtrema.com.

]]>
https://programacionextrema.com/2018/10/05/como-remplazar-caracteres-de-un-string-con-java-script/feed/ 0