Nueva pregunta

Pregunta:

Fecha: 12-12-2015 16:31:14 (En Español)

Usabilidad en PHPCentral [Aporte y Opinión][Resuelta]

Hola compañeros, hoy en mi primer aporte a la comunidad, toco el tema de usabilidad, pero antes de continuar con lo hice y propongo aqui les dejo para lo que no sepan que es usabilidad en el entorno de un programador:

Cualidad de la página web o del programa informático que son sencillos de usar porque facilitan la lectura de los textos, descargan rápidamente la información y presentan funciones y menús sencillos, por lo que el usuario encuentra satisfechas sus consultas y cómodo su uso.

Ok ya teniendo este concepto claro pasemos ahora si a lo que yo note que deberia de ver cambios para mejorar esto y que es importante en cuestión de las respuestas a las preguntas, esa cosa que falla son algunos botones del bbcode, no es que fallen si no que fallan en el momento de usabilidad y agilidez al dar respuestas, ejemplo el button link ese al darle click sale un prompt creo donde pones la dirección url y luego el nombre, bueno ahi el problema cuando sale el prompt preguntando esto no podemos cambiar de ventana dificultando que copiemos y pegemos la url y el nombre, igual pasa con el button video Youtube que es lo mismo, varias veces he tenido que o memorizarme el nombre y a veces la url del video o de la pagina, para ponerlo o copiarlo en un blog de notas, y preguntaba esto es necesario? Fernando verdad que no?

Entonces yo pense que un simple popup solucionaría esto pequeños detalles, asi que hice mi propio popup cclaro este tiene algunos defectos y puede ser mejorado y solo lo pongo como ejemplo, vale aqui esta la url:

Popup Sencillo con jQuery

y el codigo fuente seria este:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Popup</title>
	<style type="text/css">
      button {
      	background: rgb(0,0,0);
      	color: rgb(255,255,255);
      	border-radius: 10px;
      }

      button:hover {
      	cursor: pointer;
       text-shadow: 1px 1px 1px rgb(255,255,255);
      }

      button:focus {
      	outline: none;
      	box-shadow: 0 0 5px rgb(0,255,0);
      	text-shadow: 1px 1px 1px rgb(0,255,0);
      }

      input[type="submit"], input[type="submit"]:hover {
       cursor: pointer;
       position: relative;
       top: 5px;
      }

      .popup_off {
       background: rgba(0,0,0,.8);
       z-index: 999;
      }

      .obj-popup {
      	position: fixed; 
      	background: rgba(0,0,0,.8);
      	border: solid 1px rgb(0,0,0);
      	left: 0;
      	right: 0;
      	margin-right: auto;
      	margin-left: auto;
      	text-align: center;
      	width: 450px;
      	height: 500px;
      	max-width: 100%;
      	z-index: 999;
      	box-shadow: 0 0 5px rgb(0,0,255);
        color: hsl(0,100%,100%);
      }

      .x_close_popup img {
        position: relative;
       top: -105px;
       left: 200px;
       z-index: 999;
      }

      .x_close_popup img:hover {
        cursor: pointer;
        background: url("img/button_popup_close-hover.png");
      }
	</style>

	<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="//cdn.jsdelivr.net/jquery.shadow-animation/1/mainfile"></script>
	<script type="text/javascript">
	$(document).on("ready", function() {
     id_btn_link = $("button:nth-child(2)");
      id_btn_video = $("button:nth-child(4)");

    function animate_and_close() {
    $("#popup_link, #popup_video").animate({
    opacity: 0.8,
    borderWidth: "4px",
    boxShadow: '0 0 30px #44f',
   }, 900);

    $(".x_close_popup").on("click", function() {
         $("#popup_link").hide();
         $("#popup_video").hide();
         $("body").css("background","none");
    });
   }

     id_btn_link.on("click", function(e) {
     	bd = $("body");
     	bd.addClass("popup_off");
     	bd.prepend('<div id="popup_link"><form action="userbbcode.php" method="post"><label name="link">Direccion URL:</label><br /><input type="text" name="" /> <br /> <label name="Name">Texto Del Enlace:</label> <br /> <input type="text" name="titulo" />  <br /> <input type="submit" value="Enviar"/></form></div>');
     	$("#popup_link").addClass("obj-popup");
     	$("#popup_link").append('<span class="x_close_popup"><img src="img/button_popup_close.png" title="Close" alt="Close" /></span>');
      $("#popup_link").fadeIn(1000);
      bd.css("background","rgba(0,0,0,.8)");
      $("#popup_video").fadeOut(1000);
      e.stopPropagation();
      animate_and_close();
     });

     id_btn_video.on("click", function(e) {
      bd = $("body");
      bd.addClass("popup_off");
      bd.prepend('<div id="popup_video"><form action="userbbcode2.php" method="post"><label name="url">URL Del Video:</label><br /><input type="text" name="url" /> <br /> <label name="Name">Titulo Del Video:</label> <br /> <input type="text" name="enlace" />  <br /> <input type="submit" value="Enviar"/></form></div>');
      $("#popup_video").addClass("obj-popup");
      $("#popup_video").append('<span class="x_close_popup"><img src="img/button_popup_close.png" title="Close" alt="Close" /></span>');
      $("#popup_link").fadeOut(1000);
      $("#popup_video").fadeIn(1000);
      bd.css("background","rgba(0,0,0,.8)");
      e.stopPropagation();
      animate_and_close();
     });
	});
	</script>
</head>
<body>
	<button>Img</button>
	<button>Link</button>
	<button>Code CSS</button>
	<button>Video Youtube</button>
</body>
</html>


Bueno aqui esta lo que hice yo disculpen si no lo mejeore n.n espero tomen mi sugerencia sobre estos botones y solo puse los botones asi :) eso es lo menos, poder mover cualquier cosa de es codigo y modificarlo a su gusto n.n y espero no molestar n.n se que tienes mucho trabajo Fernando

pd: este popup tiene un pequeño defecto que si le aprietas muchas veces al mismo boton este se llena de mas del mismo elemento haciendo imposible cerrar la ventana sepa por que sigue creandose el div puse append y pasaba lo mismo puse prepend y pasa lo mismo :/ la unica manera era poniendole html pero este quitaba todo los elementos y los remplazaba u.u si tan solo lo hubiera hecho con javascript seria mas facil para mi, solo pongo esto para que lo tengan en cuenta.

Saludos Comunidad ^u^
Etiquetas: Aporte - La Comunidad - Opinión - Sugerencia Votos: 7 - Respuestas: 6 - Vistas: 15 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 12-12-2015 17:17:25 Gracias amigo,
    Es algo que me ha venido molestando más cuando estoy en dispositivos móviles porque aveces no deja y copiar nada n.n y molesta hasta que no pongo nada >:( y me arrepiento de postear.
      Votos: 4 - Link respuesta
     
  • Fecha: 12-12-2015 19:22:41 Chrismart primero te dire


    Es la mejor forma de sugerir que he visto hasta ahora por los siguientes conceptos:
    1- Buen planteamiento de la sugerencia.
    2- brindar información adicional como definiciones, ejemplo Usabilidad.
    3- Exponer un codigo ejemplificador de una solución posible.
    4- El codigo propuesto con demostracion online.

    Me ha sorprendido.
    Por tu buena exposición te ganaste mi respeto y voto +


    Por otra parte comparto la sugerencia de Chrismart ya que me ha sucedido en varias oportunidades.
    En el boron URL termino pegando la URL y en el titulo escribo cualquier cosa, y cuando esta inesrto el codigo copio el titulo de la Url en cuestión y reemplazo lo que habia escrito previamente.
    También lo hago con otras acciones de los botones.

    En los teléfonos se complica aun mas la usabilidad



    Saludos
      Votos: 7 - Link respuesta
     
  • Fecha: 13-12-2015 03:35:06 WOW Walter es genial que hubiera dado buena respuesta y por eso me hubiera ganado su respeto al menos en este tema he ni cuenta me di n.n quizas es por que ya he aprendido de personas como ustedes en como plantear preguntas aunque aun me falta mejorar algunas cosas n.n y si asi es el uso en celulares se complica el uso de estos dos botones :/ por eso puse reponsive la caja flotante, igual se le pone Bootstrap o @media query del css3 o los 3 la sugereia que puso Juan haciendo reponsive una pagina o etiqueta usando bloques, justo su aporte es este:

    Una forma facil de hacer una web responsive con flex

    y bueno otra concepto qe le falto es que tambien puse los defectos(errores) de mi codigo :)

    y agradezco sus comentarios y su alago Walter, Gracias y Saludos (^u^)/

    Ahora esperar a que a que alguien escuche mi sugerencia, ya que no se quienes son las personas que cambian la funcionalidad de este sitio solo se que Fernando n.n
      Votos: 6 - Link respuesta
     
  • Fecha: 13-12-2015 09:10:29 Muchas gracias a todos por sus contribuciones, veré que puedo hacer al respecto, entiendan que estamos en fechas festivas, a fin de año, cerrando proyectos y temas personales que si bien les podría contar no viene al caso (en un mes nace mi hijo Marcos).

    Veré de tomar en consideración este punto y unos cuantos más (que no han quedado en el olvido, solo estan pendientes). Como comente en otro post, ahora estoy con temas estructurales y requerimientos Google.

    Muchas gracias a todos por sus aportes.

    Saludos,
      Votos: 7 - Link respuesta
     
  • Fecha: 13-12-2015 16:48:44 Muy bueno tu aporte chrismart saludos

    sobre tu comentario

    pd: este popup tiene un pequeño defecto que si le aprietas muchas veces al mismo boton este se llena de mas del mismo elemento haciendo imposible cerrar la ventana sepa por que sigue creandose el div puse append y pasaba lo mismo puse prepend y pasa lo mismo :/


    puedes solucionando removiendo tu div#popup_video y tambien el div#popup_link

    eso seria cuando haces click en tu boton

    $("#popup_video").remove();
    $("#popup_link").remove();


    quedaria asi

    
     id_btn_link.on("click", function(e) {
             bd = $("body");
             bd.addClass("popup_off");
    
    if ( $("#popup_link").length > 0 )  $("#popup_link").remove();
    
             bd.prepend('<div id="popup_link"><form action="userbbcode.php" method="post"><label name="link">Direccion URL:</label><br /><input type="text" name="" /> <br /> <label name="Name">Texto Del Enlace:</label> <br /> <input type="text" name="titulo" />  <br /> <input type="submit" value="Enviar"/></form></div>');
             $("#popup_link").addClass("obj-popup");
             $("#popup_link").append('<span class="x_close_popup"><img src="img/button_popup_close.png" title="Close" alt="Close" /></span>');
          $("#popup_link").fadeIn(1000);
          bd.css("background","rgba(0,0,0,.8)");
          $("#popup_video").fadeOut(1000);
          e.stopPropagation();
          animate_and_close();
         });
    
    



    
     id_btn_video.on("click", function(e) {
          bd = $("body");
          bd.addClass("popup_off");
    
    if ( $("#popup_video").length > 0 )  $("#popup_video").remove();
    
          bd.prepend('<div id="popup_video"><form action="userbbcode2.php" method="post"><label name="url">URL Del Video:</label><br /><input type="text" name="url" /> <br /> <label name="Name">Titulo Del Video:</label> <br /> <input type="text" name="enlace" />  <br /> <input type="submit" value="Enviar"/></form></div>');
          $("#popup_video").addClass("obj-popup");
          $("#popup_video").append('<span class="x_close_popup"><img src="img/button_popup_close.png" title="Close" alt="Close" /></span>');
          $("#popup_link").fadeOut(1000);
          $("#popup_video").fadeIn(1000);
          bd.css("background","rgba(0,0,0,.8)");
          e.stopPropagation();
          animate_and_close();
         });
    
    
    
    



    saludos
      Votos: 7 - Link respuesta
     
  • Fecha: 13-12-2015 18:20:38 Gracias Juan por solucionarlo algo asi habia pensado aunque no me acorde de remove, fernando es buena noticia que ya vayas hacer padre n.n eso no lo sabia y si ntp no nos molestamos por que no entienda de ya , nuestras sugerencias comprendemos muy bien que usted esta trabajando para mejorar esta Comunidad :') y eso me alegra tome el tiempo que sea necesario y gracias por comentar y considerar mi y las propuestas de los demas, GRACIAS.

    yo por mi parte doy como resuelta esta propuesta esperando ya después si se puede los cambios ^^
      Votos: 4 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com