Design av webbsidor.

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Design av webbsidor.

Inlägg av sodjan »

Jo, jag tror att jag kan det mesta kring själva tekniken runt webbsidor.
HTTP, HTML, JS, Ajax och server delen med CGI o.s.v.

Men allt kring webb UI har varit i princip "handknackad" HTML.

Hur är det med GUI verktyg med "drag-n-drop" av HTMl element för
textboxar, tabeller, drop-down lists o.s.v.? Jag tror mig veta att det finns
kommersiella verktyg, men hur är det med liknande "fria" verktyg?
Användarvisningsbild
ffredrik
Inlägg: 340
Blev medlem: 20 oktober 2009, 17:52:18
Ort: Göinge

Re: Design av webbsidor.

Inlägg av ffredrik »

Har du testat Node-Red?
Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Re: Design av webbsidor.

Inlägg av sodjan »

Jag har inte testat någonting alls, eftersom jag inte vet vad som är värt att testa... :-)
Tog en snabb koll på Node-Red, och det verkar mer inriktat mot funktionalitet än UI.
Jag hittar inget drag-n-drop för UI design.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Design av webbsidor.

Inlägg av MadModder »

Farsan använder Netobjects Fusion, och han är nöjd med det.
Jag tror man kan välja typ infoga ett objekt, och så bara placera ut det där man vill.
Ungefär som att rita rutor och lägga ut knappar i excel.

Wix kanske är något.
Aldrig provat. Såg det nu. :D
https://sv.wix.com/
ramsew
Inlägg: 15
Blev medlem: 6 mars 2023, 07:00:45

Re: Design av webbsidor.

Inlägg av ramsew »

Det finns flera gratis och öppen källkod GUI-verktyg tillgängliga för att skapa webbgränssnitt med ett dra-och-släpp-gränssnitt. Några välkända exempel är:

Bootstrap Studio är ett sofistikerat skrivbordsverktyg som använder ett dra-och-släpp-gränssnitt för att designa flexibla webbsidor. Den innehåller en stor samling förbyggda komponenter som du kan använda för att snabbt utveckla sidor.

Pingendo: Ett annat skrivbordsverktyg som använder ett dra-och-släpp-gränssnitt för att skapa responsiva webbsidor. Den innehåller också ett stort bibliotek med förbyggda komponenter och mallar.

Mobirise är ett gratis skrivbordsverktyg som använder ett dra-och-släpp-gränssnitt för att skapa mobilvänliga webbsidor. Den innehåller en stor samling förbyggda block från vilka du kan bygga dina sidor.

Jämfört med handkodning av HTML kan dessa verktyg spara mycket tid och arbete. De ger vanligtvis alternativ för att förhandsgranska dina sidor och exportera din kod också. Men även om de kan vara användbara kan de också ha begränsningar eller konstigheter som kan påverka kvaliteten på ditt arbete. Även när du använder ett GUI-verktyg är det en bra idé att ha ett grundligt grepp om HTML, CSS och JavaScript.
Användarvisningsbild
ffredrik
Inlägg: 340
Blev medlem: 20 oktober 2009, 17:52:18
Ort: Göinge

Re: Design av webbsidor.

Inlägg av ffredrik »

Jag kan enbart rekommendera NodeRed, speciellt om du vill kommunicera med externa enheter via t ex wifi (MQTT exvis). Förkunskaper javascript, ev lite html. Ett mycket användbart UI via web browser och mängder av funktioner (open source).
nodered.org
Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Re: Design av webbsidor.

Inlägg av sodjan »

Tack för idéer!
Bootstrap använder vi idag, men med manuellt skapade sidor. Ska kolla på Bootstrap Studio...
Pingendo verkar även det vara ett verktyg som använder Bootstrap (?). Får kolla.

Miljön är ett administrativt verktyg för processering av tillverkningsorder.
Själva "jobbet" görs i backend/server miljön och frontend (browsern) visar
data och har Ajax anrop till backend. Inget fancy, inga bilder, inget som blinkar.
Nyckelord är snabbhet, enkelhet och tydlighet.
Användarvisningsbild
pi314
Inlägg: 5680
Blev medlem: 23 oktober 2021, 19:22:37
Ort: Stockholm

Re: Design av webbsidor.

Inlägg av pi314 »

Inget verktyg, men ett exempel på drag-and-drop med html5.

Kod: Markera allt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: Drag and drop</title>
<link rel="stylesheet" href="./css/html5demos.css" type="text/css" />
<script src="./js/h5utils.js"></script></head>
<body>
<section id="wrapper">
    <header>
      <h1>Drag and drop</h1>
    </header>
<style type="text/css">
li {
  list-style: none;
}

li a {
  text-decoration: none;
  color: #000;
  margin: 10px;
  width: 150px;
  border: 3px dashed #999;
  background: #eee;
  padding: 10px;
  display: block;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

li a:hover:after {
  content: ' (drag me)';
}

ul {
  margin-left: 200px;
  min-height: 300px;
}

li.over {
  border-color: #333;
  background: #ccc;
}

#bin {
  background: url(./images/bin.jpg) top right no-repeat;
  height: 250px;
  width: 166px;
  float: left;
  border: 5px solid #000;
  position: relative;
  margin-top: 0;
}

#bin.over {
  background: url(./images/bin.jpg) top left no-repeat;
}

#bin p {
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 166px;
  font-size: 32px;
  color: #fff;
  text-shadow: #000 2px 2px 2px;
}
</style>
<article>
  <p>Drag the list items over the dustbin, and drop them to have the bin eat the item</p>
  <div id="bin"></div>
  <ul>
    <li><a id="one" href="#">one</a></li>
    <li><a href="#" id="two">two</a></li>
    <li><a href="#" id="three">three</a></li>
    <li><a href="#" id="four">four</a></li>
    <li><a href="#" id="five">five</a></li>
  </ul>
</article>
  <script>

  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
  var yum = document.createElement('p');
  var msie = /*@cc_on!@*/0;
  yum.style.opacity = 1;

  var links = document.querySelectorAll('li > a'), el = null;
  for (var i = 0; i < links.length; i++) {
    el = links[i];
  
    el.setAttribute('draggable', 'true');
  
    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
  }

  var bin = document.querySelector('#bin');

  addEvent(bin, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(bin, 'dragenter', function (e) {
    this.className = 'over';
    return false;
  });

  addEvent(bin, 'dragleave', function () {
    this.className = '';
  });

  addEvent(bin, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));
    
    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    bin.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    bin.appendChild(y);

    setTimeout(function () {
      var t = setInterval(function () {
        if (y.style.opacity <= 0) {
          if (msie) { // don't bother with the animation
            y.style.display = 'none';
          }
          clearInterval(t); 
        } else {
          y.style.opacity -= 0.1;
        }
      }, 50);
    }, 250);

    return false;
  });

  </script>

    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="./images/forkme_left_darkblue.png" alt="Fork me on GitHub" /></a>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1058552-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Användarvisningsbild
pi314
Inlägg: 5680
Blev medlem: 23 oktober 2021, 19:22:37
Ort: Stockholm

Re: Design av webbsidor.

Inlägg av pi314 »

Det ska till ett javascript också.

Kod: Markera allt

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
/*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/


var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

(function () {

var pre = document.createElement('pre');
pre.id = "view-source"

// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
  if (event.target.hash == '#view-source') {
    // event.preventDefault();
    if (!document.getElementById('view-source')) {
      pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
      document.body.appendChild(pre);      
    }
    document.body.className = 'view-source';
    
    var sourceTimer = setInterval(function () {
      if (window.location.hash != '#view-source') {
        clearInterval(sourceTimer);
        document.body.className = '';
      }
    }, 200);
  }
});
  
})();
{/code}

/Pi
Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Re: Design av webbsidor.

Inlägg av sodjan »

OK. Jag måste ha varit väldigt otydlig... :-)
Det är inte i resultatet där drag-n-drop önskas, utan i utvecklingsverktyget...
Wihelm
Inlägg: 588
Blev medlem: 18 juni 2019, 17:30:19
Ort: Nybro

Re: Design av webbsidor.

Inlägg av Wihelm »

Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Re: Design av webbsidor.

Inlägg av sodjan »

Ja, då snackar vi ju high-end.
Men tack! Det är nog bra så, har lite att kolla på...
DennisCA
Inlägg: 2249
Blev medlem: 13 maj 2014, 08:44:18
Ort: Finland, österbotten

Re: Design av webbsidor.

Inlägg av DennisCA »

Jag har alltid föredragit sitta i koden och skriva än drag & drop. Får känslan det gör mig lite föråldrad.
Användarvisningsbild
sodjan
EF Sponsor
Inlägg: 43150
Blev medlem: 10 maj 2005, 16:29:20
Ort: Söderköping
Kontakt:

Re: Design av webbsidor.

Inlägg av sodjan »

Jo men visst. Vi får se, det var en av våra programmerare som frågade.
Jag körde ju lite "visuellt" på den tiden VB6 var högsta mode. :-)

Vi ska även kolla på vad de har gjort inom andra delar av fabriken,
t.ex. de som utvecklat liknande applikationer och har använt Angular.
Vi kan kanske "sno" deras design och utgå från den.
Justera layout och jacka in våra Ajax anrop...
Nerre
Inlägg: 26655
Blev medlem: 19 maj 2008, 07:51:04
Ort: Upplands väsby

Re: Design av webbsidor.

Inlägg av Nerre »

Är inte ett problem att de flesta såna där verktyg bara har stöd för ett media (d.v.s. de har inte stöd för print eller speech utan det åker man på att koda själv om man vill ha komplett CSS)?

Å andra sidan verkar väldigt många webbsidor idag inte ens ha separat CSS för print, så när man försöker skriva ut blir det väldigt dåligt.
Skriv svar