Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Ogramar

Páginas: 1 2 [3] 4 5 6 7 8 ... 100
41
Buenas Alejandro y bienvenido, como veo que es tu primer mensaje recomendarte leer https://aprenderaprogramar.com/foros/index.php?topic=1460.0 de cara a escribir en los foros.
Puedes mirar cursos disponibles en https://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86
Y en concreto de Visual Basic (te vale para 2010): https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61

Salu2

42
Buenas, para quien revise este ejercicio, cumple con lo que se pedía. En el código se usan algunas cosas que creo que no se han trabajado durante el curso como http-equiv, viewport. El lugar "natural" para insertar el script sería en el head y no al final del html (esto es algo que a veces se hace, pero en general en el curso los scripts se insertan en el head).
El código supone que por cada letra haya que pulsar aceptar. Una posible mejora sería generar todo lo que hay que mostrar en pantalla y mostrarlo de una vez, en lugar de tener que ir aceptando cada vez que nos muestra una letra.
En https://aprenderaprogramar.com/foros/index.php?topic=4041.0 hay una solución donde todo el código está en un mismo archivo, y donde nos muestra todas las letras sin tener que ir aceptando una a una, lo que puede ser un poco más cómodo para quien quiera revisarlo.

Salu2

43
Buenas, para escribir en los foros revisa este hilo https://aprenderaprogramar.com/foros/index.php?topic=1460.0 donde hay varias indicaciones, como cómo pegar código y otras. Tal y como yo lo veo $i es un contador que empieza en 0 y por cada moneda o billete que se devuelve va sumando 1. Al invocar $monedas_billetes[$i] invocas cada elemento del array. Por ejemplo cuando $i vale 0 invocas el elemento 0 que es 10000, cuando $i vale 1 invocas el elemento 1 del array que es 5000 y así sucesivamente.

Quizás te sirva de ayuda:

Explicación básica de arrays o arreglos en Curso bases de la programación nivel I: https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59

Curso de php: https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193

44
Buenas cris0710, siempre es bueno que subas código y poner un título a los temas adecuado (ver lo que se indica en https://aprenderaprogramar.com/foros/index.php?topic=1460.0) En lugar de un título como "informacion sobre libro html" es más adecuado "crear ventana modal con código HTML CSS y JavaScript al pulsar botón"

Aparentemente lo que quieres hacer se puede hacer con JavaScript y CSS

Curso de JavaScript: https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
Curso de CSS: https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Habría muchas formas de hacerlo, aparte de librerías que te lo pueden facilitar a partir de funciones propias.

He descargado este código que te puede servir como ejemplo:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
</style>
</head>
<body>

<h2>Ventana modal animada con cabecera y pie</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Abrir ventana modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Cabecera de la ventana modal</h2>
    </div>
    <div class="modal-body">
      <p>Algo de texto en el cuerpo de la ventana modal</p>
      <p>Más texto que quieras poner...</p>
<img src="https://aprenderaprogramar.com/images/thumbs_portada/thumbs_conocenos/75_el_garaje.jpg"/>
      <p>Más texto que quieras poner...</p>
    </div>
    <div class="modal-footer">
      <h3>Pie de la ventana modal</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Salu2

45
Buenas, para quien revise este ejercicio, cumple con lo que se pedía. En el código se usan algunas cosas que creo que no se han trabajado durante el curso como http-equiv, viewport o el uso de let en JavaScript.
En https://aprenderaprogramar.com/foros/index.php?topic=3289.0 puede verse una solución donde en lugar de mostrarse el contenido de cada párrafo y pedir que se pulse aceptar, se crea una cadena con el contenido de todos los párrafos y se muestra de una sola vez, que es más cómodo.

Salu2

46
Comunidad / Re: Presentación.
« en: 29 de Junio 2021, 22:36 »
Buenas y bienvenido, para escribir en los foros es importante seguir las normas que se indican en https://aprenderaprogramar.com/foros/index.php?topic=1460.0 Voy a borrar los hilos creados que no cumplen con lo indicado:

- Título demasiado corto
- Título no incluye palabras clave
- Título no incluye lenguaje con el que se trabaja
- No se incluye el código o planteamiento inicial y no se explica donde se encuentra el problema para avanzar.

Si lo deseas, crea un nuevo tema de nuevo siguiendo las normas citadas (revisar las distintas cosas necesarias: incluir palabras clave en el título, poner el título en minúsculas, indicar el lenguaje o tema de consulta, si es un ejercicio código de la entrega del curso, forma correcta de insertar código, etc.). Si tienes dudas sobre cómo escribir en los foros consulta. Salu2

47
Buenas D.Ohm, el ejercicio está bien resuelto, cumple con lo que se pedía y el código es compacto, así que enhorabuena.

Por comentar algo, recomendar hacer el cierre de etiqueta con / para cumplir estándar xhtml. En lugar de <meta charset="utf-8"> escribiríamos <meta charset="utf-8"/> Y otra cosa que aunque no era el asunto de este ejercicio, normalmente se prefiere window.onload = function () { ... } en lugar de <body onload="..."> aunque para este ejercicio da igual, de hecho en el propio ejemplo del curso viene así porque eso no es lo relevante aquí.
También podría dársele un poco de tamaño al texto como se hace en https://aprenderaprogramar.com/foros/index.php?topic=3606.0 pero todo esto son posibles mejoras sólo, tú ejercicio está muy bien.

Salu2

48
Buenas andy58pr y bienvenido. Como solemos hacer con quienes escriben por primera vez en los foros, te recomiendo que leas el hilo https://aprenderaprogramar.com/foros/index.php?topic=1460.0 donde están las indicaciones básicas para escribir en los foros. Sobre lo que has consultado, en el Curso básico JavaScript desde cero que tienes en https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206 puedes encontrar ejemplos de cómo generar números aleatorios y del uso de for. Inténtalo y pega el código aquí si quieres, recuerda usar las etiquetas code como se indica en el hilo que te he comentado. Salu2

49
Comunidad / Re: Presentación
« en: 23 de Mayo 2021, 12:27 »
Buenas gipsydávy, te dejo algunos enlaces de interés.

Sección cómo empezar https://aprenderaprogramar.com/index.php?option=com_content&view=category&layout=blog&id=84&Itemid=18

Hilo sobre la importancia de los fundamentos de programación: https://aprenderaprogramar.com/foros/index.php?topic=1313.0

Desde mi punto de vista lo más importante para empezar es centrarse en los fundamentos. Por ejemplo empezar aprendiendo conceptos de programación orientada a objetos sería erróneo, porque esto no sería seguir un programa de formación coherente. Primero deben venir los fundamentos, cosas como lo que te ha indicado Kabuto, qué es un bucle, para qué sirve, cómo sacarle partido, etc. y no cosas del tipo qué es una clase, que ya sería algo que debería venir después de tener un dominio de las cuestiones básicas de la programación.

Salu2

50
Buenas +Elizabeth+, esa opción parece que puede ser interesante, gracias por el aporte.

51
Buenas, tu código funciona bien y tiene una buena maquetación. Como bien indicas, en este código no sólo has dado respuesta a lo que se pedía en el ejercicio sino que has ido más allá (por ejemplo, el ejercicio no planteaba que el usuario pudiera elegir una fecha para que se mostrara el calendario del mes correspondiente). También has usado elementos de CSS que no están explicados en el curso de CSS.
Hay algunas cuestiones que quizás serían mejorables, por ejemplo en lugar de darle estilos a la tabla con atributos <table border="1" cellpadding="4" align="center"> quizás hubiera sido preferible hacerlo con CSS.

Esta definición de array var mesD = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]; normalmente se considerará poco elegante desde el punto de vista de la programación, ya que para hacer algo de este tipo en general se prefieren bucles. Lo cual no significa que no se pueda hacer así si en un momento dado se considera adecuado.

Otra cosa que solemos recomendar es no usar eñes en el código, pues a la larga puede dar problemas. Así en lugar de this.año usaríamos this.anyo ó this.anno

Este código

Código: [Seleccionar]
nCalendarioH.prototype.mesDia = function(){
var mesCal = document.getElementById("mes");
if (this.mes == 0) {mesCal.innerHTML = "ENERO DE " + this.año;}
else if (this.mes == 1) {mesCal.innerHTML = "FEBRERO DE " + this.año;}
else if (this.mes == 2) {mesCal.innerHTML = "MARZO DE " + this.año;}
else if (this.mes == 3) {mesCal.innerHTML = "ABRIL DE " + this.año;}
else if (this.mes == 4) {mesCal.innerHTML = "MAYO DE " + this.año;}
else if (this.mes == 5) {mesCal.innerHTML = "JUNIO DE " + this.año;}
else if (this.mes == 6) {mesCal.innerHTML = "JULIO DE " + this.año;}
else if (this.mes == 7) {mesCal.innerHTML = "AGOSTO DE " + this.año;}
else if (this.mes == 8) {mesCal.innerHTML = "SEPTIEMBRE DE " + this.año;}
else if (this.mes == 9) {mesCal.innerHTML = "OCTUBRE DE " + this.año;}
else if (this.mes == 10) {mesCal.innerHTML = "NOVIEMBRE DE " + this.año;}
else {mesCal.innerHTML = "DICIEMBRE DE " + this.año;}
}

posiblemente se viera más elegante si metieras los nombres de los meses en un array y seleccionaras el índice. Algo así como

mesCal.innerHTML = arrayDeMeses[indice] + " DE " + this.año;

En general la repetición de código está mal vista en programación (sobre todo si hay forma de evitarla).

Una cosa que echo en falta son comentarios explicativos, creo que no hay ni un comentario en el código. Esto no es obligatorio, pero suele ser bueno para poder comprenderlo, incluso para que puedas comprenderlo tú si lo miras dentro de un tiempo (seguro que dentro de unos meses ya no te acuerdas de muchas cosas).

Pero más allá de cosas mejorables, creo que lo que hay que destacar es que has usado muchos elementos distintos de programación, que demuestras un buen nivel de JavaScript y que esto no es sólo una solución al ejercicio, sino que has ido más allá.

Una cosa que sería interesante es que fueras explicando paso a paso lo que hace tu código y cómo lo has organizado. Creo que esto sería de utilidad para otras personas. Así que si quieres hacerlo adelante, te lo agradeceremos.

Y gracias por tus comentarios sobre la página.

Salu2

52
Buenas, gracias por compartir la solución. Lee este hilo para una próxima vez, ahí hay cosas importantes sobre cómo escribir en los foros (cómo poner título a temas, cómo pegar código, etc.). Salu2

53
Buenas, para quien revise este ejercicio, está bien resuelto. Respecto al uso de display:flex; este no es imprescindible. Esto no es demasiado trascendente para este ejercicio, donde lo que interesa más es el código JavaScript (más que los detalles sobre CSS). Pueden verse otros ejercicios donde se resuelve sin flex, por ejemplo:

https://aprenderaprogramar.com/foros/index.php?topic=3864.0 en este hilo hay algunos comentarios interesantes.

https://aprenderaprogramar.com/foros/index.php?topic=3914.0 es otra propuesta de solución

Salu2

54
Buenas, no parece una animación difícil. Da la impresión de que para una persona con conocimientos se puede hacer con JavaScript sin demasiado problema. Pero obviamente no puedes manejar JavaScript si no conoces CSS, y no puedes manejar CSS si no conoces HTML. El orden recomendado para el aprendizaje sería HTML primero, luego CSS y luego JavaScript. Y luego un lenguaje del lado del servidor como PHP. Pero aprender todo esto puede llevar mucho tiempo, si simplemente quieres una animación hay muchos códigos disponibles en internet sin necesidad de seguir toda la línea de aprendizaje.

Tienes tutoriales de HTML, CSS, JavaScript y otros lenguajes en https://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86

En este caso, para esta animación posiblemente puedas lograr el efecto simplemente tomando el código y cambiándolo para poner los textos o imágenes que a tí te interese. Aquí lo he hecho en cinco minutos poniéndole otros textos:

Código: [Seleccionar]
<!DOCTYPE html>
<head>

  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <title>Ejemplo aprenderaprogramar.com</title>

  <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-4de243a40619a967c0bf13b95e1ac6f8de89d943b7fc8710de33f681fe287604.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&display=swap" rel="stylesheet" />

  <style>
    html { font-size: 15px; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body { height:100%; display: flex; flex-direction: column; }
    .referer-warning {
      background: black;
      box-shadow: 0 2px 5px rgba(0,0,0, 0.5);
      padding: 0.75em;
      color: white;
      text-align: center;
      font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
      line-height: 1.2;
      font-size: 1rem;
      position: relative;
      z-index: 2;
    }
    .referer-warning h1 { font-size: 1.2rem; margin: 0; }
    .referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */
  </style>
</head>

<body onLoad="talk()" >


<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

 
 
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body {
  background-color: #fff
}

.home {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(https://aprenderaprogramar.com/images/stories/Humor/cabecerahumorreducida.jpg);

  background-position: center center;
}


/* ====================================
Navigation
==================================== */

.overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.2);
  display: none;
  opacity: 0;
}

nav,
nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  flex-basis: 20%;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  display: none;
}

nav li a {
  position: relative;
  top: 46%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Work sans', sans-serif;
  font-weight: 300;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 1.9rem;
  opacity: 0;
}

nav li a:before {
  content: '';
  width: 70px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  transform: translateX(-100%);
  opacity: 0;
  transition: all .2s linear;
}

nav li a:after {
  content: attr(data-content);
  font-size: 1.2rem;
  transition: all .2s linear;
  opacity: 0;
  position: absolute;
  z-index: 100;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
  left: 10;
  right: 10;
  bottom: -150px;
  text-transform: none;
  font-family: 'Open sans', sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}

nav li a:hover:before {
  transform: translateX(0);
  opacity: 1;
}

nav li a:hover:after {
  transform: translateY(15px);
  opacity: 1;
}

nav li:nth-of-type(1) {
  background-color: #1ABC9C
}

nav li:nth-of-type(2) {
  background-color: #3498DB
}

nav li:nth-of-type(3) {
  background-color: #9B59B6
}

nav li:nth-of-type(4) {
  background-color: #f6c23e
}

nav li:nth-of-type(5) {
  background-color: #E74C3C
}


/* ====================================
Burger king
==================================== */

.open-overlay {
  position: absolute;
  right: 5rem;
  top: 3.2rem;
  z-index: 100;
  width: 34px;
  display: block;
  cursor: pointer;
}

.open-overlay span {
  display: block;
  height: 1px;
  background-color: #fff;
  cursor: pointer;
  margin-top: 8px;
}

.animate-top-bar {
  -webkit-animation: animate-top-bar .6s linear 1 both;
  animation: animate-top-bar .6s linear 1 both
}

.animate-bottom-bar {
  -webkit-animation: animate-bottom-bar .6s linear 1 both;
  animation: animate-bottom-bar .6s linear 1 both
}

.animate-middle-bar {
  -webkit-animation: animate-middle-bar .6s linear 1 both;
  animation: animate-middle-bar .6s linear 1 both
}

.animate-out-top-bar {
  -webkit-animation: animate-out-top-bar .6s linear 1 both;
  animation: animate-out-top-bar .6s linear 1 both
}

.animate-out-bottom-bar {
  -webkit-animation: animate-out-bottom-bar .6s linear 1 both;
  animation: animate-out-bottom-bar .6s linear 1 both
}

.animate-out-middle-bar {
  -webkit-animation: animate-out-middle-bar .6s linear 1 both;
  animation: animate-out-middle-bar .6s linear 1 both
}


/* ====================================
Animation keyframes
==================================== */

@-webkit-keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #fff
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #fff
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #fff;
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #fff;
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #34548B;
  }
}

@keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-out-top-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #34548B
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #34548B
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@-webkit-keyframes animate-out-bottom-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #34548B;
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #34548B;
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@-webkit-keyframes animate-out-middle-bar {
  0% {
    background-color: #34548B
  }
  80% {
    background-color: #34548B;
  }
  100% {
    background-color: #fff;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #34548B
  }
  80% {
    background-color: #34548B;
  }
  100% {
    background-color: #fff;
  }
}

.home a {
  font-family: "Work Sans", sans-serif;
  color: #222;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  z-index: 10;
  top: 50px;
  left: 50px;
  padding-bottom: 3px;
  border-bottom: 1px solid #222;
}

@media (max-width: 640px) {
  nav ul {
    flex-direction: column;
  }
  nav ul li {
    height: 20%;
  }
  nav ul li a {
    font-size: 18px;
  }
  nav li a:after {
    font-size: 0.6rem;
    bottom: -25px;
  }
  nav li a:hover:after {
    transform: translateY(0);
  }
  .open-overlay {
    right: 1rem;
  }
  nav li a:before {
    width: 25px;
  }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$("#open-overlay").trigger('click');</script>
  <div class="overlay-navigation">
  <nav role="navigation">
    <ul>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192" data-content="Si no persigues lo que quieres, nunca lo tendrás. Si no vas hacia delante, siempre estarás en el mismo lugar... Nora Roberts.">APRENDER</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203" data-content="El éxito no es un accidente, es trabajo duro, perseverancia, aprendizaje, estudio y lo más importante de todo, amor por lo que estás haciendo o aprendiendo a hacer... Edson Arantes do Nascimento.">A</a></li>
      <li><a href="#" data-content="A partir del segundo semestre 2021">PROGRAMAR</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193" data-content="Acepta la responsabilidad en tu vida. Se consciente de que serás tú quien te llevará a donde quieres ir, nadie más... Les Brown.">PUNTO</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206" data-content="Si deseas conocer el estado actual de tu deuda puedes ingresar a esta opción, cabe destacar que no debes ser Egresado o Estudiante, si eres estos últimos ingrese a su correspondiente menú.">COM</a></li>
    </ul>
  </nav>
</div>

<section class="home">
   
  <div id="open-overlay" class="open-overlay">
   
  </div>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js'></script>
<script id="rendered-js" >
function talk() {
  $('.open-overlay').css('pointer-events', 'none');
  var overlay_navigation = $('.overlay-navigation'),
  top_bar = $('.bar-top'),
  middle_bar = $('.bar-middle'),
  bottom_bar = $('.bar-bottom');

  overlay_navigation.toggleClass('overlay-active');
  if (overlay_navigation.hasClass('overlay-active')) {

    top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
    middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
    bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
    overlay_navigation.velocity('transition.slideLeftIn', {
      duration: 300,
      delay: 0,
      begin: function () {
        $('nav ul li').velocity('transition.perspectiveLeftIn', {
          stagger: 150,
          delay: 0,
          complete: function () {
            $('nav ul li a').velocity({
              opacity: [1, 0] },
            {
              delay: 10,
              duration: 140 });

            $('.open-overlay').css('pointer-events', 'auto');
          } });

      } });


  } else {
    top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
    middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
    bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
    overlay_navigation.velocity('transition.slideLeftIn', {
      duration: 300,
      delay: 0,
      begin: function () {
        $('nav ul li').velocity('transition.perspectiveLeftIn', {
          stagger: 150,
          delay: 0,
          complete: function () {
            $('nav ul li a').velocity({
              opacity: [1, 0] },
            {
              delay: 10,
              duration: 140 });

            $('.open-overlay').css('pointer-events', 'auto');
          } });

      } });


  }
};
    </script>

 

  </div>
</body>
</html>

Salu2

55
He ejecutado el código proporcionado pero salta el siguiente error sobre el cliente:

Error java.net.BindException: Address already in use: Cannot bind

Fíjate que sobre la máquina cliente tenemos este código:

while (true) {       
  try {mensaje();}
  finally {;} }

Y el método mensaje() lo que hace es en cada ocasión invocar:

DatagramSocket socketUDP = new DatagramSocket();

DatagramSocket() Constructs a datagram socket and binds it to any available port on the local host machine.

Para el servidor en cambio se invoca:

socketUDP = new DatagramSocket(PUERTO); habiendo establecido previamente int PUERTO = 5000; //Puerto servidor

La numeración de puertos en una máquina para los protocolos TCP y UDP es finita, normalmente en los rangos 0-1023, 1024-49151 y 49152-65535

Un bucle que ocupa puertos continuamente debe terminar en un colapso, por eso interpreto yo que aparece el <<Error java.net.BindException: Address already in use: Cannot bind>>

56
Buenas, el ejercicio está bien resuelto. En lo referente al bucle y poner el valor i=-1, no es quizás lo más fácil de interpretar, pero funciona. Lo importante es que comprendas por qué funciona. Comento algo sobre esto:

Código: [Seleccionar]
        i=-1
        while (i<palabra.length-1){i++
        alert("Letra " +[i+1]+": "+palabra.charAt(i))}
        }

Este código inicial i con el valor -1. Entra al bucle si el valor de i es menor que la longitud de la palabra menos 1. Si no introduzco nada y pulso el botón ¿entra al bucle? No, porque la longitud de la palabra que he introducido es cero y al restarle uno me sale menos uno. Como menos uno no es menor que menos uno, no entra al bucle y no me muestra nada.
Si introduzco una letra sola, por ejemplo la e y pulso el botón se muestra "Letra 1: e", porque la longitud de la palabra introducido menos uno es cero, y cero es mayor que menos 1. Por eso entra al bucle.

¿Qué ocurre cuando se entra al bucle? Nada más entrar al bucle el valor de i se incrementa en una unidad con la instrucción i++ a la que por cierto veo preferible ponerle el punto y coma, es decir, escribir i++;
Tras esto se muestra por pantalla el mensaje indicando que la letra i+1 es la que se encuentra en palabra.charAt(i)
La función charAt comienzo contando la primera letra como índice cero, y las siguientes son índice 1,2,3 ... hasta palabra.length-1. Es importante saber interpretar el por qué de palabra.length-1 Esto es porque palabra.length nos devuelve el número de caracteres de 1 a n, mientras que charAt cuenta de 0 a n-1. Por ejemplo para gas los índices que usa charAt son 0, 1 y 2 mientras que length nos devuelve 3.

Entonces si no introducimos nada no se entra al bucle. Si introducimos e nada más entrar i pasa a valer 0, se muestra por pantalla y se vuelve a evaluar si i es menor que palabra.length-1. Como i vale ahora 0 y palabra.length-1 también es cero, en ese caso sólo hay una pasada por el bucle.

Si introducimos una palabra de varias letras habrá tantas pasadas como letras.

Y el resumen de todo esto es que el programa funciona. Para mí no es muy intuitivo el uso que haces de los contadores, yo por ejemplo lo veo más claro con este código: https://aprenderaprogramar.com/foros/index.php?topic=4041.0

Pero si entiendes lo que haces, está bien tanto hacerlo de una manera como de otra. Y para resolver los ejercicios lo adecuado es siempre plantearlo primero como tú creas mejor y sobre todo entendiéndolo. Luego, si consultando otras respuestas consideras que puedes mejorar tu código entendiendo lo que haces, también está bien mejorarlo, pero siempre entendiendo el por qué de las cosas.

Salu2

57
Buenas krakerbrain, he visto tu respuesta en https://aprenderaprogramar.com/foros/index.php?topic=7946.0 y quiero agradecerte la aportación, ya que más allá de tener más o menos conocimientos técnicos resulta enriquecedor para los foros que se intente contribuir y aportar en los foros.

Voy a tratar de responder a este hilo al que has titulado <<Ejercicio resuelto (CU01131E) Saber tamaño de array con length. Break >> En este título falta una cosa importante: el nombre del lenguaje de programación. Además se recomienda incluir el código de ejercicio al final del título, con lo que el título mejor adaptado sería <<JavaScript saber tamaño de array con length. Break. Ejercicio resuelto CU01131E>> Te lo comento solo para que tengas la información e intentes adaptarte a estos criterios que facilitan las búsquedas en los foros.

Sobre lo que comentas de que algunas cosas te estén costando y debas retroceder con frecuencia para volver a leer algunos temas, en principio es bastante normal. Adquirir soltura con un lenguaje requiere bastante tiempo. También debes tener en cuenta que no tienes por qué saber todas las funciones del lenguaje de memoria, pero sí tener una idea de cuáles y dónde buscar información sobre ellas. Por ejemplo, si se te plantea la necesidad de desarrollar un código donde se cambien las apariciones de "Avenida" por "Avda." no es necesario que te sepas de memoria cómo hacerlo, pero sí saber que el lenguaje facilita la función replace y saber buscar información sobre ella (por ejemplo en la entrega del curso correspondiente o en otros lugares). El buen programador no ha de saberse las cosas de memoria, lo que ha de saber es cómo resolver problemas de forma eficiente y ágil.
Dicho esto, otra cosa sería si se te plantean dudas en conceptos básicos de la programación como bucle, condicional, variable, etc. Si fuera este el caso antes de centrarte en un lenguaje como JavaScript recomendamos abordar las bases de la programación (lógica, algoritmia, conceptos). Puedes leer este hilo sobre este asunto: https://aprenderaprogramar.com/foros/index.php?topic=1313.0

En relación a la solución propuesta para el ejercicio mis comentarios serían los siguientes:

- El ejercicio 1 hace lo que se pedía, pero no lo hace como se pedía (con el método charAt), por lo que hay que considerar que está mal resuelto. Puedes ver una solución correcta en https://aprenderaprogramar.com/foros/index.php?topic=3289.0

- El ejercicio 2 hace lo que se pedía, pero tampoco debe considerarse bien resuelto por lo siguiente: los cursos se plantean con el objetivo de ir progresando aplicando los contenidos que se van explicando en el curso. Por ello en general no consideramos bien resuelto una solución a un ejercicio que se plantee usando conocimientos más avanzados de los que se hayan explicado hasta esa entrega del curso. En este ejercicio usas innerHTML, que es algo que no se explica en el curso (si no me equivoco) hasta la entrega CU01138E, por tanto no debe considerarse correcto (en el contexto del curso). Por otro lado, los ejercicios cuanto "más limpios", mejor. En este caso, el código y botón de la función cambiarColores(elemento) no tienen relación con este ejercicio, con lo que hubiera sido mejor que no estuvieran, ya que dejaría un código más limpio (como en https://aprenderaprogramar.com/foros/index.php?topic=3289.0).

No te desanimes por estos comentarios, al contrario, piensa siempre en que lo importante es aprender y céntrate en eso y en nada más, en hacerlo cada día un poquito mejor. Animo y salu2

58
Buenas y bienvenido a los foros. El ejercicio primero está bien resuelto. Solo tienes una errata donde dice

Código: [Seleccionar]
else if (tipoDeProducto==2){
                return importeSinImpuestos*1/100+importeSinImpuestos;
            }

Debería poner 10/100 en lugar de 1/100

Sobre lo que comentas de que como hacer para que si el usuario introduce un valor de texto en cualquiera de los dos parámetros, el programa alerte de que no es un valor numerico y se detenga o pida nuevamente ingresar el valor., esto que es a lo que llamamos validar entradas y se trata en posteriores entregas del curso, así que ya lo verás cuando llegues a ellas.

El ejercicio segundo también está bien, aunque debes prestar atención a una cosa. Si escribimos tipoDeProducto[0] = "undefined"; estamos diciendo que ese elemento del array contiene una cadena de texto.

En cambio si escribimos tipoDeProducto[0] = undefined; ese elemento del array tiene un tipo especial de dato, el tipo undefined, que es un tipo primitivo de JavaScript.

Se trata de dos conceptos diferentes, no tiene nada que ver que una variable contenga una cadena de texto a que contenga el valor especial undefined.

El ejercicio pedía "La función debe devolver un array con valor undefined para el índice 0..." y ahí se refiere al valor especial undefined, es decir, habría que escribirlo sin comillas.

También te falta mostrar por pantalla undefined ya que el ejercicio pedía "obtenerImporteConImpuestos(100) debe devolver: resultado[0] = undefined, resultado[1] = 121, resultado[2] = 110, resultado[3] = 105"

Salu2

59
De todo un poco... / Re: ayuda
« en: 17 de Febrero 2021, 20:49 »
Al no haber respuesta se procederá próximamente al borrado de este hilo. Salu2.

60
Buenas, para escribir en los foros es conveniente que sigas las indicaciones que se dan en https://aprenderaprogramar.com/foros/index.php?topic=1460.0 sobre cómo poner el título a los temas, cómo pegar código y resto de cuestiones. Es preferible que pongas el código en el propio hilo en lugar de ponerlo como archivo adjunto

En este hilo https://aprenderaprogramar.com/foros/index.php?topic=1478.0 puedes consultar la solución al ejercicio y algunos comentarios interesantes. Si después de verlo tienes dudas, pega el código que estés usando y explica dónde tienes la duda o problema para intentar ayudarte.

Salu2

Páginas: 1 2 [3] 4 5 6 7 8 ... 100

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".