Estos días he estado recopilando posts habituales de los webmasters que, normalmente, poco o nada saben del lenguaje de cliente que nos gusta, y vienen reclamando ayuda sobre cómo hacer efectos simples.
Respuestas a los típicos "¿Cómo hago para que al hacer click en un botón...?", "¿Qué función utilizo para que al pasar por encima de una imagen...?", "¿Cómo hago para que no me deje enviar el formulario si...?" suelen tener respuesta sencilla en un buscador cualquiera o en las FAQ, pero a veces es complicado buscar incluso en el índice temático de Carlitos (el cual está bastante bien, no digo que no).
Se me ocurrió una idea, una especie de FAQ interactivo. Esto es, guiado, respondiendo a las preguntas que se hace el programador. Por ejemplo, al comienzo de este FAQ habrían unas opciones básicas iniciales:
Código:
Todas las opciones serían expandibles, de modo que al hacer click en cada una de ellas aparecerían varias sub-opciones posibles en forma de árbol que nos permiten llegar a la solución final. Un ejemplo para aquel que quiere que al terminar de cargarse la página, en una caja de texto se coloque el String "hola":+ AL HACER ALGO + SIN HACER NADA, QUE SE EJECUTE DIRECTAMENTE EL CÓDIGO + QUE SE EJECUTE CON UNA DEMORA DE X SEGUNDOS + OPERACIONES CON NÚMEROS, FECHAS, FRASES (strings) + OPERACIONES ENTRE LENGUAJES DE CLIENTE (JS) Y SERVIDOR (PHP, ASP, JAVA) + OBTENER DATOS DEL CLIENTE / DOCUMENTO
Código:
+ AL HACER ALGO +-- AL TERMINAR DE CARGARSE LA PÁGINA +-+ CAMBIAR EL VALOR DE UN FORMULARIO +-- Cambiar el texto (valor) o añadirlo a una caja de texto <código final comentado> <explicación breve del código>
Creo que sería una buena idea para que la gente se interesase más por el javascript, vea su potencia y aprenda rápida y cómodamente cómo hacer las cosas que más interesan, más coloquiales.
Además se podría incluir un buscador para encontrar nuestras consultas sin tener que estar buscando la opción.
Necesito opiniones sobre este sistema, si funcionaría o no, si lo utilizaría la gente, o si no merece la pena implementar una cosa tan costosa por amor al arte.
El guión del árbol que he escrito estos días lo dejo posteado, para el que se lo quiera leer y aportar u opinar:
Código:
TUTORIAL HOWTO JAVASCRIPT (GUIÓN) + AL HACER ALGO +-- AL TERMINAR DE CARGARSE LA PÁGINA +-- AL MOVER EL RATÓN +-- AL HACER CLICK O DOBLE CLICK O CLICK DCHO EN EL DOCUMENTO +-- (relacionado con cajas de texto <INPUT TYPE="TEXT"/>) +-- (relacionado con cajas de seleccion <SELECT>) +-- (relacionado con botones <INPUT TYPE="button"/>) +-- (relacionado con enviar formularios <INPUT TYPE="submit"/>, incluye validaciones) +-- (relacionado con capas <DIV>) +-- (relacionado con <TEXTAREA>) +-- MARCAR O DESMARCAR UN CHECKBOX O UN RADIO <INPUT TYPE="checkbox"/> <INPUT TYPE="radio"/> +-- HACER SCROLL EN LA PÁGINA +-- VOLVER A VISITAR POR SEGUNDA O TERCERA VEZ LA PÁGINA +-- SALIR DE LA PÁGINA ACTUAL (cargar otra o cerrar la ventana) +-- (relacionado con imágenes <IMG />) +-- AL SELECCIONAR TEXTO DE LA PÁGINA + SIN HACER NADA, QUE SE EJECUTE DIRECTAMENTE EL CÓDIGO + QUE SE EJECUTE CON UNA DEMORA DE X SEGUNDOS + ACCIONES +-- ABRIR UN POPUP (ventana emergente) +-- VARIABLES PERSONALIZADAS (tamaño, centrado, al tamaño de imagen..) +-- REDIRECCIONAR A OTRA PÁGINA +-- ENVIAR UN FORMULARIO DE LA PÁGINA +-- CERRAR LA VENTANA +-- IMPRIMIR LA PÁGINA U OTRO CONTENIDO +-- GUARDAR, LEER, MODIFICAR, ELIMINAR UNA COOKIE +-- INTERCAMBIAR / CAMBIAR IMÁGENES +-- AÑADIR / CREAR ELEMENTOS HTML DINÁMICAMENTE (incluye texto dinámicamente) +-- ELIMINAR ELEMENTOS HTML, SUSTITUIRLOS +-- OCULTAR O MOSTRAR ELEMENTOS HTML +-- ALERTAR DE ALGO CON UNA VENTANA DIÁLOGO (ALERT() botón aceptar) +-- PEDIR CONFIRMACIÓN CON UNA VENTANA DIÁLOGO (CONFIRM() botones "sí", "no", "cancelar") +-- PEDIR UN DATO CON UNA VENTANA DE DIÁLOGO (PROMPT() ventana con una caja de texto) +-- CAMBIAR DE ESTILO (formato, color, tamaño, posición...) DE CUALQUIER ELEMENTO HTML (estilo interno / CSS externo) +-+ CAMBIAR EL VALOR DE UN FORMULARIO +-- El segundo select dependiente del primero (o el tercero del segundo) +-- Seleccionar un valor de un select +-- Cambiar el texto (valor) o añadirlo a una caja de texto (Colocar total de suma de números también) +-- Cambiar el texto (valor) a un textarea +-- Checkear o marcar un checkbox o un radio +-- Cambiar el texto de un botón +-- DESHABILITAR UN CAMPO DE UN FORMULARIO +-- CONTAR CUANTOS CHECKBOX SE HAN SELECCIONADO / CAMPOS SE HAN RELLENADO +-- MANDAR A CIERTO PUNTO DE LA PÁGINA ACTUAL +-- OBTENER DATOS DEL SERVIDOR con UNA LLAMADA AJAX +-- VALIDACIONES CONCRETAS +-- TELÉFONO +-- EMAIL +-- DNI, PASAPORTE, NIF, CIF +-- DIA, HORA, FECHA, INTERVALO DE DIAS, HORAS, FECHAS +-- POR CANTIDAD NUMÉRICA +-- POR LONGITUD (letras, palabras, frases) +-- QUE SÓLO ADMITA CIERTO TIPO DE CARACTERES (números, letras, guiones) +-- FILTRAR ELEMENTOS DE UNA LISTA / TABLA / SELECT. Cualquier enumeración +-- ORDENAR UNA LISTA / TABLA / SELECT. Cualquier enumeración + OPERACIONES CON NÚMEROS, FECHAS, FRASES (strings) +-- AÑADIR O RESTAR SEGUNDOS, MINUTOS, HORAS, DÍAS, SEMANAS, MESES, AÑOS A UNA FECHA +-- AÑADIR O RESTAR DÍAS HÁBILES O LABORALES +-- CALCULAR LA MEDIA +-- REDONDEAR +-- FORMATEAR UN NÚMERO +-- DETECTAR DOS LETRAS / PALABRAS / ESPACIOS SEGUIDAS IGUALES +-- DETECTAR PALABRAS REPETIDAS EN UNA LISTA DE PALABRAS +-- ELIMINAR ESPACIOS SOBRANTES DE UN STRING (trimming) + OPERACIONES ENTRE LENGUAJES DE CLIENTE (JS) Y SERVIDOR (PHP, ASP, JAVA) +-- PETICIONES AJAX +-- INTERCAMBIAR VARIABLES ENTRE LENGUAJES (TAMBIÉN ARRAYS) + OBTENER DATOS DEL CLIENTE / DOCUMENTO +-- SISTEMA OPERATIVO (PLATAFORMA) Y VERSIÓN +-- NAVEGADOR Y VERSIÓN +-- TAMAÑO Y RESOLUCIÓN DE LA VENTANA / PANTALLA DEL NAVEGADOR / ORDENADOR DEL CLIENTE +-- SI JAVASCRIPT ESTÁ ACTIVADO EN EL NAVEGADOR +-- HORA DEL CLIENTE +-- OBTENER GRUPOS DE ELEMENTOS (ENLACES, IMAGENES, FORMULARIS, FRAMES...) +-- OBTENER URL Y VARIABLES DE LA URL + ACCIONES QUE NO SE PUEDEN LOGRAR SÓLO CON JAVASCRIPT +-- MANDAR EMAILS +-- ESCRIBIR EN UN ARCHIVO DE TEXTO, O LEERLO +-- TRABAJAR CON UNA BASE DE DATOS +-- SUBIR ARCHIVOS AL SERVIDOR +-- OBTENER LA HORA / VARIABLES DEL SERVIDOR +-- OCULTAR TU CÓDIGO +-- ENCUESTAS / CONTADORES DE VISITAS / SISTEMAS USUARIO CONTRASEÑAS +-- MANEJAR PÁGINAS WEB AJENAS (ENVIAR FORMULARIOS AJENOS, SCROLL, CAMBIAR CONTENIDO...) +-- MANEJAR EL SISTEMA OPERATIVO (CAMBIAR LAS VENTANAS DE DIÁLOGO ALERT() O CONFIRM(), ELIMINAR CONFIRMACIONES DE IMPRIMIR O GUARDAR, ELIMINAR BARRA DE TÍTULO DEL NAVEGADOR, ABRIR UN MENÚ, AÑADIR A FAVORITOS SIN CONFIRMACIÓN... GENERALMENTE TODOS LOS "ABUSOS" AL USUARIO)
Bueno, comentarios bienvenidos.
Saludos y gracias una vez más por leerme
Excelente idea Derkenuke
Este tema le ha gustado a 2 personas