Sida 1 av 1
Design av webbsidor.
Postat: 12 mars 2023, 15:54:31
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?
Re: Design av webbsidor.
Postat: 12 mars 2023, 17:01:23
av ffredrik
Har du testat Node-Red?
Re: Design av webbsidor.
Postat: 12 mars 2023, 18:20:55
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.
Re: Design av webbsidor.
Postat: 12 mars 2023, 18:39:03
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.
https://sv.wix.com/
Re: Design av webbsidor.
Postat: 12 mars 2023, 21:46:17
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.
Re: Design av webbsidor.
Postat: 12 mars 2023, 22:06:00
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
Re: Design av webbsidor.
Postat: 12 mars 2023, 22:50:18
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.
Re: Design av webbsidor.
Postat: 13 mars 2023, 00:23:53
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>
Re: Design av webbsidor.
Postat: 13 mars 2023, 00:26:56
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 {'<':'<','>':'>'}[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
Re: Design av webbsidor.
Postat: 13 mars 2023, 10:03:52
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...
Re: Design av webbsidor.
Postat: 13 mars 2023, 10:18:41
av Wihelm
Re: Design av webbsidor.
Postat: 13 mars 2023, 10:32:39
av sodjan
Ja, då snackar vi ju high-end.
Men tack! Det är nog bra så, har lite att kolla på...
Re: Design av webbsidor.
Postat: 14 mars 2023, 11:46:16
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.
Re: Design av webbsidor.
Postat: 14 mars 2023, 14:14:43
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...
Re: Design av webbsidor.
Postat: 14 mars 2023, 19:49:16
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.