Página 1 de 1

Alguien sabe sobre HTML y Javascript

Publicado: 06 Feb 2014, 04:00
por mikeeps2
hola a todos , es que tengo un script en java , que ando queriendolo modificar , para hacerlo mas funcionar ... perdonen es que no se si se podra poner esto aqui como no tiene nada que ver con autoit

quiero modificarle algunas cositas
1- agregarle arriba dos tab , uno para que salga el script como tal , y el otro que sea para poder editar la IP cuando lo necesite sin tener que entrar al script
2- cambiarle le color a los botones pero que sea como doble color , ahora estan en silver como el viene , pero cuando apriete el OFF se ponga en rojo , y el ON permanesca como esta silver , y cuando apriete el ON se ponga en verde y el OFF se ponga en silver

el codigo es este

Código: Seleccionar todo

    <html>
    <head>
    <title>Web X10der</title>
    
    <!-- version 2.0a  9/6/2010 -->
    <script type="text/JavaScript" language="JavaScript">
    <!--
    // XXX: This script is known not to work with the Opera Mini mobile browser.
    var version = "2.0";
    // Some constants to make the code a little more readable.
    var NODIM = 0, DIM = 1, PLC = 0, RF = 1;

    // ********************** START EDITING HERE ***************************

    // Host name or IP address of the machine running the X10 Commander server
    // You MUST edit this.
    var server = "172.16.0.3";

    // You MUST edit the devices array to match your setup.
    //
    // Devices array contains 4 entries per device.
    // 1. Device address (house code & unit number)
    // 2. Device name to display
    // 3. Device dimability - NODIM or DIM
    // 4. X10 transmission method - PLC (power line) or RF (radio frequency)
    var devices = new Array(
        
        "E1",    "ALL LIGHTS",          NODIM,  PLC,
        "E2",    "DINNER ROOM",       DIM,    PLC,
        "E3",    "KITCHEN",      NODIM,    PLC,
        "E4",    "OFFICE", NODIM,    PLC,
        "E5",    "LIGHT PATIO",          NODIM,    PLC,
        "E6",    "HALL",   NODIM,    PLC,
        "E7",    "DINNER TABLE LAMP", DIM,  PLC,
        "E8",    "STAIRS",       NODIM,  PLC,
        "E9",    "BATHORROM", NODIM,    PLC,
        "E10",    "PORTAL",    NODIM,  PLC,
        "E11",    "MOTIF WALL",  NODIM,    PLC,
        "E12",    "FAN PATIO",   NODIM,  PLC,
        "E",    "NADA",    NODIM,    PLC,
        "I2",    "ROOM MASTER",   NODIM,    PLC,
        "I3",    "SMALL ROOM",   NODIM,    PLC,
        "I4",    "SHOWER ROOM",  NODIM,    PLC,
        "I5",    "CLOSET MASTER",   NODIM,    PLC,
        "I6",    "BATH MASTER",   NODIM,    PLC,
        "I7",    "BALCONY",   NODIM,    PLC,
        
        // Devices array ends with a special token so we do not have to worry about
        // that last trailing comma when items get rearranged. Do not change it.
        "END"
    );

    // Some global flags to customize script behavior.
    // You don't have to change them unless you don't like the standard behavior.
    //
    // Personalize the page heading any way you like by changing myHeading (nombre de la pagina)
    var myHeading = "Home Control";
    // Set showServer to false to omit showing the server name or address on page (mostrar direccion server)
    var showServer = false;
    // Set shortButtons to true to omit Dim/Bright percentages from button labels (good for mobile devices) (muestra porcentaje)
    var shortButtons = true;
    // Set percentage to dim BY with Dim buttons. Default of 50 seems good.
    // Understand that "DIM 25" means to dim by 25%, not dim to 25%.
    var dimPercent = 50;
    // Set percentage to brighten TO with Bright buttons. Default of 100 seems good.
    // Understand that "BRIGHT 75" means to brighten to 75%, not brighten by 75%.
    var brightPercent = 100;
    // Set showCodes to true to show device X10 addresses & transmit methods as well as names on page (muestra direccion x10)
    var showCodes = false;
    // Set showStatus to false to disable browser status line updating
    var showStatus = false;
    // Set showHovertext to false to not show hovertext.
    // Some broswers put this in the status line, distractingly, instead of as hovertext.
    var showHovertext = false;

    // Some global flags to control how the HTTP command is sent.
    // Change these if you have problems with the standard configuration.
    //
    // Set useAjax to false only if it consistently fails.
    var useAjax = true;
    // Sometimes an exception will be thrown but the command will succeed anyway.
    // If this happens all the time, you can change allowFallback and allowErrorAlert
    // to false.
    var allowFallback = true; // set to false to disable fallback to window.open() if AJAX throws an exception
    var allowErrorAlert = true; // set to false if you get error pop-ups and don't want to see them

    // If you are running this via the http: protocol, and your HTTP server needs
    // a user ID and password for authentication, set them here. Just leave them
    // empty unless you get authentication errors or prompts from your HTTP server.
    // XXX: this is untested. Kindly report authentication problems to the author.
    var serverID = "";
    var serverPassword = "";

    // Set debug to true to show debug output in a popup window. Not for general use.
    var debug = false;

    // ********************** STOP EDITING HERE ****************************
    // *********************** THIS MEANS YOU! *****************************

    // Connect to the X10 Commander server by opening a window.
    // The AJAX method should be preferred.
    function windowMethod(url, closeIt) {
        if (closeIt) {
            var w = window.open(url, "X10Window",
              "dependent,height=1,width=1,location=no,menubar=no,scrollbars=no,status=no,toolbar=no");
            // Immediately close the window.
            w.close();
        }
        else {
          window.open(url, "X10Window",
            "dependent,height=100,width=100,location=yes,menubar=no,scrollbars=no,status=yes,toolbar=no");
        }
    }

    // Connect to the X10 Commander server via AJAX.
    function ajaxMethod(url) {
        try {
            // Send HTTP GET without opening a window.
            var request = new XMLHttpRequest();
            request.open("GET", url, true, serverID, serverPassword);


            request.send(null);
        }
        catch (e) {
            // Request threw an exception. This does not necessarily mean it failed.
            var err = e; // bring error into scope so it can be examined in debugger
            if (allowErrorAlert) {
                // Show the error message.
                var errString;
                if (typeof(err) == "string") {
                    errString = err;
                }
                else {
                    errString = err.toString();
                    if (errString == null || errString == "" || errString == "[object Error]")
                        errString = err.name + ": " + err.message;
                }
                if (err.message.match(/Access is denied/))
                    // Probably an IE security error.
                    errString += "\nMake sure the server " + location.hostname +
                      " is in your local intranet or other trusted zone.";
                else if (err.message.match(/Security violation/))
                    // Probably an Opera security error.
                    errString +=
                      "\n\nSet \"useAjax\" to \"false\" in the Web X10der script source code \
    because it will always fail with your browser (probably Opera).";
                alert(errString);
            }
            if (allowFallback)
                // Revert to using a browser window to send the command.
                windowMethod(url, true);
        }
    }

    // Turn a device on or off, or brighten or dim it.
    function setDevice(deviceNum, state, transmitMethod) {
        // if (debug) alert("setDevice(" + deviceNum + ", " + state + ", " + transmitMethod + ");");
        // Do not change the 8086 or the funny characters in the url string.
        // X10 Commander server requires them as is.
        var url = "http://" + server + ":8086/?x10command=DEVICE~send" +
            transmitMethod + "~\"" + devices[deviceNum] + " " + state + "\"";
        // Kludge: append timestamp to URL to force IE to open it every time.
        // Other browsers don't seem to need this.
        var today = new Date;
        url += "&time=" + today.getTime();
        if (debug)
            // Open a window, leaving it open to show the command sent and the response received.
            windowMethod(url, false);
        else if (useAjax)
            // Use the AJAX method.
            ajaxMethod(url);
        else
            // Use the window.open() method.
            windowMethod(url, true);
        if (showStatus)
            window.status = devices[deviceNum+1] + " set to " + state + " via " +
              transmitMethod.toUpperCase();
    }

    // Function to generate the HTML for the page full of buttons.
    function generate() {
        var s; // string accumulator
        // Write some text.
        
        if (myHeading != null && myHeading != "") document.writeln("<h1 style='color:red;position:relative;left:100px;top:0px;'>" + myHeading + "</h1>");
        if (showServer) document.writeln("<h5>Server: " + server + "</h5>");
        // Write a table, one row per X10 device.
        document.writeln("<table>");
        for (var i = 0; devices[i] != "END"; i += 4) {
            var lcMethod, ucMethod; // lowercase & uppercase transmission methods
            if (devices[i+3] == RF) { lcMethod = "\"rf\""; ucMethod = "RF"; }
            else { lcMethod = "\"plc\""; ucMethod = "PLC"; }
            // Show the device name.
            document.write("<tr><td>" + devices[i+1] + "</td>");
            // Show the device address if user wants to see it.
            if (showCodes)
                document.write("<td>(" + devices[i] + " " + ucMethod + ")</td>");
            // Add Off , On Buttons
            s = "<td><button type='button' style='background-color: #cc0000; color: #ffffff;'";
            if (showHovertext) s += " title='" + devices[i] + " OFF " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"OFF\", " + lcMethod +
              ");'>  Off  </button></td>"
            document.write(s);
            s = "<td><button type='button' style='background-color: #00cc00; color: #000000;'";
            if (showHovertext) s += " title='" + devices[i] + " ON " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"ON\", " + lcMethod +
              ");'>  On  </button></td>"
            document.write(s);
           
            // If device is dimmable...
            if (devices[i+2] == DIM) {
                // ... add Dim button...
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " DIM " + dimPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"DIM " + dimPercent + "\", " +
                  lcMethod + ");'> Dim";
                if (! shortButtons) s += " " + dimPercent + "%";
                s += " </button></td>";
                document.write(s);
                // ... and Bright button
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " BRIGHT " + brightPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"BRIGHT " + brightPercent + "\", " +
                  lcMethod + ");'> Bright";
                if (! shortButtons) s += " " + brightPercent + "%";
                s += " </button></td>";
                document.write(s);
               
              
            }
            document.writeln("</tr>");
        }
        document.writeln("</table>");
        if (showStatus)
            window.status = "Thanks for using Web X10der v" + version;
    }
     
            
    // -->
    </script>
    
    </head>

     
     <body bgcolor="#A9A9A9">   	 
     
    
    
    <script type="text/JavaScript" language="JavaScript">
    <!--
    generate();
    // -->
    </script>
    <noscript>
    <h3>You must have JavaScript enabled to use this page.</h3>
    </noscript>
    <!-- vim: set tabstop=4 shiftwidth=4 expandtab lines=44 columns=120: -->
    </body>
    
    </html>

     
ahora mismo ya puse el boton OFF en rojo y el ON en verde , pero no se como cuando apriete uno el otro cambie de color

Re: Alguien sabe sobre HTML y Javascript

Publicado: 07 Feb 2014, 02:03
por Chefito
Mmmmm.....lo que pides se puede hacer de un motón de formas. Algo fácil sería esto:

Código: Seleccionar todo

    <html>
    <head>
    <title>Web X10der</title>
    
    <!-- version 2.0a  9/6/2010 -->
    <script type="text/JavaScript" language="JavaScript">
    <!--
    // XXX: This script is known not to work with the Opera Mini mobile browser.
    var version = "2.0";
    // Some constants to make the code a little more readable.
    var NODIM = 0, DIM = 1, PLC = 0, RF = 1;

    // ********************** START EDITING HERE ***************************

    // Host name or IP address of the machine running the X10 Commander server
    // You MUST edit this.

	
    //var server = "172.16.0.3";
	
    // You MUST edit the devices array to match your setup.
    //
    // Devices array contains 4 entries per device.
    // 1. Device address (house code & unit number)
    // 2. Device name to display
    // 3. Device dimability - NODIM or DIM
    // 4. X10 transmission method - PLC (power line) or RF (radio frequency)
    var devices = new Array(
        
        "E1",    "ALL LIGHTS",          NODIM,  PLC,
        "E2",    "DINNER ROOM",       DIM,    PLC,
        "E3",    "KITCHEN",      NODIM,    PLC,
        "E4",    "OFFICE", NODIM,    PLC,
        "E5",    "LIGHT PATIO",          NODIM,    PLC,
        "E6",    "HALL",   NODIM,    PLC,
        "E7",    "DINNER TABLE LAMP", DIM,  PLC,
        "E8",    "STAIRS",       NODIM,  PLC,
        "E9",    "BATHORROM", NODIM,    PLC,
        "E10",    "PORTAL",    NODIM,  PLC,
        "E11",    "MOTIF WALL",  NODIM,    PLC,
        "E12",    "FAN PATIO",   NODIM,  PLC,
        "E",    "NADA",    NODIM,    PLC,
        "I2",    "ROOM MASTER",   NODIM,    PLC,
        "I3",    "SMALL ROOM",   NODIM,    PLC,
        "I4",    "SHOWER ROOM",  NODIM,    PLC,
        "I5",    "CLOSET MASTER",   NODIM,    PLC,
        "I6",    "BATH MASTER",   NODIM,    PLC,
        "I7",    "BALCONY",   NODIM,    PLC,
        
        // Devices array ends with a special token so we do not have to worry about
        // that last trailing comma when items get rearranged. Do not change it.
        "END"
    );

    // Some global flags to customize script behavior.
    // You don't have to change them unless you don't like the standard behavior.
    //
    // Personalize the page heading any way you like by changing myHeading (nombre de la pagina)
    var myHeading = "Home Control";
    // Set showServer to false to omit showing the server name or address on page (mostrar direccion server)
    var showServer = false;
    // Set shortButtons to true to omit Dim/Bright percentages from button labels (good for mobile devices) (muestra porcentaje)
    var shortButtons = true;
    // Set percentage to dim BY with Dim buttons. Default of 50 seems good.
    // Understand that "DIM 25" means to dim by 25%, not dim to 25%.
    var dimPercent = 50;
    // Set percentage to brighten TO with Bright buttons. Default of 100 seems good.
    // Understand that "BRIGHT 75" means to brighten to 75%, not brighten by 75%.
    var brightPercent = 100;
    // Set showCodes to true to show device X10 addresses & transmit methods as well as names on page (muestra direccion x10)
    var showCodes = false;
    // Set showStatus to false to disable browser status line updating
    var showStatus = false;
    // Set showHovertext to false to not show hovertext.
    // Some broswers put this in the status line, distractingly, instead of as hovertext.
    var showHovertext = false;

    // Some global flags to control how the HTTP command is sent.
    // Change these if you have problems with the standard configuration.
    //
    // Set useAjax to false only if it consistently fails.
    var useAjax = true;
    // Sometimes an exception will be thrown but the command will succeed anyway.
    // If this happens all the time, you can change allowFallback and allowErrorAlert
    // to false.
    var allowFallback = true; // set to false to disable fallback to window.open() if AJAX throws an exception
    var allowErrorAlert = true; // set to false if you get error pop-ups and don't want to see them

    // If you are running this via the http: protocol, and your HTTP server needs
    // a user ID and password for authentication, set them here. Just leave them
    // empty unless you get authentication errors or prompts from your HTTP server.
    // XXX: this is untested. Kindly report authentication problems to the author.
    var serverID = "";
    var serverPassword = "";

    // Set debug to true to show debug output in a popup window. Not for general use.
    var debug = false;

    // ********************** STOP EDITING HERE ****************************
    // *********************** THIS MEANS YOU! *****************************

    // Connect to the X10 Commander server by opening a window.
    // The AJAX method should be preferred.
    function windowMethod(url, closeIt) {
        if (closeIt) {
            var w = window.open(url, "X10Window",
              "dependent,height=1,width=1,location=no,menubar=no,scrollbars=no,status=no,toolbar=no");
            // Immediately close the window.
            w.close();
        }
        else {
          window.open(url, "X10Window",
            "dependent,height=100,width=100,location=yes,menubar=no,scrollbars=no,status=yes,toolbar=no");
        }
    }

    // Connect to the X10 Commander server via AJAX.
    function ajaxMethod(url) {
        try {
            // Send HTTP GET without opening a window.
            var request = new XMLHttpRequest();
            request.open("GET", url, true, serverID, serverPassword);


            request.send(null);
        }
        catch (e) {
            // Request threw an exception. This does not necessarily mean it failed.
            var err = e; // bring error into scope so it can be examined in debugger
            if (allowErrorAlert) {
                // Show the error message.
                var errString;
                if (typeof(err) == "string") {
                    errString = err;
                }
                else {
                    errString = err.toString();
                    if (errString == null || errString == "" || errString == "[object Error]")
                        errString = err.name + ": " + err.message;
                }
                if (err.message.match(/Access is denied/))
                    // Probably an IE security error.
                    errString += "\nMake sure the server " + location.hostname +
                      " is in your local intranet or other trusted zone.";
                else if (err.message.match(/Security violation/))
                    // Probably an Opera security error.
                    errString +=
                      "\n\nSet \"useAjax\" to \"false\" in the Web X10der script source code \
    because it will always fail with your browser (probably Opera).";
                alert(errString);
            }
            if (allowFallback)
                // Revert to using a browser window to send the command.
                windowMethod(url, true);
        }
    }


	function buttonStyleOFF(deviceNum, state, transmitMethod) {
//alert(deviceNum+","+state+","+transmitMethod);
		document.getElementById('buttonOFF' + deviceNum).style.backgroundColor="#00cc00";
		document.getElementById('buttonOFF' + deviceNum).style.color="#000000";
		document.getElementById('buttonON' + deviceNum).style.backgroundColor="#cc0000";
		document.getElementById('buttonON' + deviceNum).style.color="#ffffff";
		setDevice(deviceNum, state, transmitMethod);

	}

	function buttonStyleON(deviceNum, state, transmitMethod) {
		document.getElementById('buttonON' + deviceNum).style.backgroundColor="#00cc00";
		document.getElementById('buttonON' + deviceNum).style.color="#000000";
		document.getElementById('buttonOFF' + deviceNum).style.backgroundColor="#cc0000";
		document.getElementById('buttonOFF' + deviceNum).style.color="#ffffff";
		setDevice(deviceNum, state, transmitMethod);

	}


    // Turn a device on or off, or brighten or dim it.
    function setDevice(deviceNum, state, transmitMethod) {
        // if (debug) alert("setDevice(" + deviceNum + ", " + state + ", " + transmitMethod + ");");
        // Do not change the 8086 or the funny characters in the url string.
        // X10 Commander server requires them as is.
        var url = "http://" + server + ":8086/?x10command=DEVICE~send" +
            transmitMethod + "~\"" + devices[deviceNum] + " " + state + "\"";
        // Kludge: append timestamp to URL to force IE to open it every time.
        // Other browsers don't seem to need this.
        var today = new Date;
        url += "&time=" + today.getTime();
        if (debug)
            // Open a window, leaving it open to show the command sent and the response received.
            windowMethod(url, false);
        else if (useAjax)
            // Use the AJAX method.
            ajaxMethod(url);
        else
            // Use the window.open() method.
            windowMethod(url, true);
        if (showStatus)
            window.status = devices[deviceNum+1] + " set to " + state + " via " +
              transmitMethod.toUpperCase();
    }

    // Function to generate the HTML for the page full of buttons.
    function generate() {
        var s; // string accumulator
        // Write some text.
        
        if (myHeading != null && myHeading != "") document.writeln("<h1 style='color:red;position:relative;left:100px;top:0px;'>" + myHeading + "</h1>");
        if (showServer) document.writeln("<h5>Server: " + server + "</h5>");
        // Write a table, one row per X10 device.
        document.writeln("<table>");
        for (var i = 0; devices[i] != "END"; i += 4) {
            var lcMethod, ucMethod; // lowercase & uppercase transmission methods
            if (devices[i+3] == RF) { lcMethod = "\"rf\""; ucMethod = "RF"; }
            else { lcMethod = "\"plc\""; ucMethod = "PLC"; }
            // Show the device name.
            document.write("<tr><td>" + devices[i+1] + "</td>");
            // Show the device address if user wants to see it.
            if (showCodes)
                document.write("<td>(" + devices[i] + " " + ucMethod + ")</td>");
            // Add Off , On Buttons
            s = "<td><button type='button' id='buttonOFF" + i + "' style='background-color: #cc0000; color: #ffffff;'";
            if (showHovertext) s += " title='" + devices[i] + " OFF " + ucMethod + "'";
            s += " onClick='buttonStyleOFF(" + i + ", \"OFF\", " + lcMethod +
              ");'>  Off  </button></td>"
            document.write(s);
            s = "<td><button type='button' id='buttonON" + i + "' style='background-color: #00cc00; color: #000000;'";
            if (showHovertext) s += " title='" + devices[i] + " ON " + ucMethod + "'";
            s += " onClick='buttonStyleON(" + i + ", \"ON\", " + lcMethod +
              ");'>  On  </button></td>"
            document.write(s);
           
            // If device is dimmable...
            if (devices[i+2] == DIM) {
                // ... add Dim button...
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " DIM " + dimPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"DIM " + dimPercent + "\", " +
                  lcMethod + ");'> Dim";
                if (! shortButtons) s += " " + dimPercent + "%";
                s += " </button></td>";
                document.write(s);
                // ... and Bright button
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " BRIGHT " + brightPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"BRIGHT " + brightPercent + "\", " +
                  lcMethod + ");'> Bright";
                if (! shortButtons) s += " " + brightPercent + "%";
                s += " </button></td>";
                document.write(s);
               
              
            }
            document.writeln("</tr>");
        }
        document.writeln("</table>");
        if (showStatus)
            window.status = "Thanks for using Web X10der v" + version;
    }
     
            
    // -->
    </script>
    
    </head>

     
     <body bgcolor="#A9A9A9">       
     

  
    
    <script type="text/JavaScript" language="JavaScript">
    <!--
    	generate();
    // -->
    </script>
    <noscript>
    <h3>You must have JavaScript enabled to use this page.</h3>
    </noscript>
    <!-- vim: set tabstop=4 shiftwidth=4 expandtab lines=44 columns=120: -->
    </body>
    
    </html>

     
Con este código se te cambian los colores de los botones cuando los pulsas. Siempre que pulses se va a poner en verde, o sea, que si pulsas y está en verde seguirá en verde, y si pulsas y está en rojo, ese se pondrá en verde y el otro en rojo. Se puede hacer como quieras, no es difícil.
Respecto a los tabs, busca en internet que hay un montón de ejemplos y códigos html, css y javascript para hacer estas cosas. Aunque lo que tu quieres se puede hacer de un montón de formas...no hace falta que sea con un tab.
Esto no es autoit como bien dices. Supongo que el mejor sitio para postearlo sería el chat. Pero te recomiendo que para estas cosas acudas a foros más especializados sobre html y javascript.

Saludos y a empollar más html y javascript :smt003 .

Re: Alguien sabe sobre HTML y Javascript

Publicado: 08 Feb 2014, 06:54
por mikeeps2
yo fui buscando por internet , que cambie los botones a verde y rojo , para ir aprendiendo , pero no encontre la manera de que solo se ponga en verde cuando el otro esta en gris , y asi viceversa , como tu dices , es que no se de algun forum html y java en espanol , tu sabes ?

es que la idea mia al final de tener eso mas o menos como quiero , es cambiarlo a app de android , que encontre una pagina que solo con poner el codigo HTML , el hace lo demas y lo convierte a app de android, ya lo prove y funciona perfecto asi como esta , luego la meto en la tableta o el telefono y es app , por eso es mi afan de modificar lo mejorcito el script este HTML

Re: Alguien sabe sobre HTML y Javascript

Publicado: 11 Feb 2014, 01:08
por Chefito
La verdad es que no me he metido nunca en ningún foro de este tipo de programación, pero si buscas en google seguro que encuentras un montón. Simplemente pon "foro html" o "foro html5" o "foro javascript". Esto no implica que si quieres postees tus dudas en este foro, pero en uno especializado te van a ayudar mucho mejor.
Otra cosa, te recomiendo que hagas algo de código e intentes hacerlo por tu cuenta. Si no te sale, muestra lo que llevas hecho y seguro que la gente te ayudará más.

Respecto a lo de las páginas y programas para transformar html5 junto con javascript en programas empaquetados para android o ios, hay muchos. Por ejemplo tenemos el android studio de google, el intel xdk de microsoft, el titanium studio y muchos más. Es cuestión de buscar uno y acostumbrarte a el.

Saludos.