HTML aus Graphik?

[ravenheart_ggg]

Hallo,

ich suche nach einer Möglichkeit, eine HTML Seite "zusammenzuklicken".
Wichtig ist mir dabei, dass ich Buttons und Co exakt platzieren kann.
So etwas Ähnliches wie zB den QT-Designer, nur eben für Webseiten.
Das Ganze reicht für eine fest vorgegebene Auflösung / Bildschirmgröße.
Die Seite soll nur für eine Unterrichtsstunde zum Thema UX/UI dienen und soll nie betrieben werden.

[Th69]

Du meinst einen HTML-Editor, s. HTML-Editor WYSIWYG, kostenlos, online: 11 beste Tools im Vergleich (bes. "WYSIWYG mit Vorschau")?!

Ohne generelle HTML-Kenntnisse wird das aber nicht gehen - außerdem funktioniert das Layout bei HTML (standardmäßig) dynamisch, d.h. absolute Positionierung ist nur mit Aufwand möglich (per CSS).

Aber schau dir mal RocketCake (bzw. die Open Source-Alternative OpenElement) an, das sollte deinen Wünschen (u.a. Drag&Drop) am ehesten entsprechen.

[ravenheart_ggg]

RocketCake sieht auf den ersten Blick vielversprechend aus.
Leider lassen sich Elemente nicht frei platzieren?
Ich kann zwar den Handle nutzen, aber dieser lässt mich ein Element nicht an eine beliebiger Position bewegen

[Th69]

Wie ich schon schrieb, ist absolute Positionierung nicht so einfach in HTML, aber mittels CSS möglich: CSS-Tricks: Absolute, Relative, Fixed Positioning: How Do They Differ?

[Ein ehemaliger Benutzer]

Hi ,

du baust dir einfach in einer strliste die Tags für die html Seite auf, zB. aus einer XML -Vorlage
oder einer anderen Textdatei wo buttons,edits,statics,combos,colors,matrix usw. vorkommen sieht dann im Pseudo-gang so aus :

bool CPropXmlTree::CreateXmlHtmlItem(McbXMLElement *pChild)
{
	BOOL Hidden;
	CString str,sub,valuename,type,value,info,index,format,label(pChild->lpszName),style("style=\"position: relative; left: 300/");

	if(!GetAttributes(pChild,valuename,type,value,info,index,format,Hidden))
	  return false;

	//TRACE("----------------------\r\n");
	//TRACE("label=%s valuename=%s type=%s value=%s info=%s index=%s format=%s\r\n",label,valuename,type,value,info,index,format);

	if(strstr(label, "Root"))//keyFound
	{
		//inactive elements are not content of formular !
		str.Format("<tr><td align=\"left\"><u><b>%s</u></b></td><td><input type=\"hidden\" name=\"%s\" value=\"%s\" title=%s></td></tr>", valuename, valuename, "ROOTKEY", info);
		m_strLst.AddTail(str);

	}else if(label == "Edit")
	{
		int len(10);//value.GetLength());
		str.Format("<tr><td align=\"left\">%s</td><td><input type=\"text\" name=\"%s\" size=\"%d\" value=\"%s\" title=%s></td></tr>",valuename,valuename,len,value,info);
		m_strLst.AddTail(str);
	 
	}else if(label == "Combo")
	{
		str.Format("<tr><td align=\"left\">%s</td><td><select size=\"1\" name=\"%s\" title=%s>",valuename,valuename,info);
		m_strLst.AddTail(str);

		int idx(atol(value));
		for(int i(0); AfxExtractSubString(sub,index,i,','); i++)
		{ 
			if(i==idx)
			{
				str.Format("<option selected value=\"%s\">%s</option>",sub,sub);
				m_strLst.AddTail(str);
			}else
			{
				str.Format("<option value=\"%s\">%s</option>",sub,sub);
				m_strLst.AddTail(str);
			}
		}
			
		m_strLst.AddTail("</select></td></tr>");
	
	}else if(label == "Button")
	{
		str.Format("<tr><td align=\"left\">%s</td><td><input type=\"Button\" value=\"%s\" name=\"%s\" title=%s></td></tr>",value,valuename,valuename,info);
		m_strLst.AddTail(str);
	
	}else if(label == "Static")
	{
	  str.Format("<tr><td align=\"left\">%s</td><td></td></tr>",valuename);
	  m_strLst.AddTail(str);
	
	}else if(label == "Color")
	{
	  str.Format("<tr><td align=\"left\">%s</td><td></td></tr>",valuename);
	  m_strLst.AddTail(str);

	}else if (label == "Matrix")
	{
		str.Format("<tr><td align=\"left\">%s</td><td></td></tr>", valuename);
		m_strLst.AddTail(str);
	}

	return true;
}
Expand/Collapse

[Ein ehemaliger Benutzer]

@KahnSoft OP schrieb explizit, dass die Seite als Basis fuer UX/UI verwendet wird und du hast nichts besseres zutun, als nicht nur vollkommen am thema vorbei zu posten und zu allem ueberfluss auch noch ein table """design""" dahin zu rotzen?

[Klagenderlamer]

Also da macht man halt mit der fertigen GUI von der Entwicklungsumgebung ein Menü mit der Auswahl von Elementen irgendwo, und dann hat man da ein Feld für die Vorlage von der Website und jedesmal, wenn man im Menü etwas (Bild, Text, Tabelle(?) ) ausgewählt hat, klickt man anschließend auf das Feld für die gewünschte Position des Elements.
Und dann hat man da das HTML-Codefragment generiert (z.B. "<img src="[...]">) und das puffert man irgendwo in einem Struct-Array als String. Dann sind da je Eintrag noch X- und Y-Koordinaten der eben angeklickten Position in dem Feld im Struct-Eintrag mit drin.
Nach dem Zusammenklicken wird das ganze eingetragene Zeug dann in Y- und danach nach Eingrenzung mit zwei Zeigern jeweils in X-Richtung sortiert. Dann wird in X- und Y-Richtung durchiteriert. Man dividiert das X und Y des aktuellen Elements ganzzahlig durch einen Wert und vergleicht es mit der aktuellen Position, durch die im zu generierenden Dokument iteriert wurde. Soviele Umbrüche ( "<br>") und Ausrichtungen fügt man dann ein, bis die Diskrepanz runtergezählt ist. Dann summiert man die ermittelte Abweichung der Koordinaten im fertigen HTML-Dokument bedingt durch die eingestreuten Tags und das eingefügte Objekt zu den Sollkoordinaten und zieht diese variierende Diskrepanz, die am Anfang (0,0) war, dann auch noch zum Vergleich heran und macht mit dem nächsten Element genauso weiter und fügt ganz am Ende gewissermaßen als Verzierung "</html>" ein.
Hui, das wird noch schlimmer als frühe Versionen von Frontpage, aber eine einfache Funktionalität wäre hoffentlich schon gegeben. Für Denkfehler übernehme ich keine Haftung.

[Klagenderlamer]

Man könnte auch noch den User rechteckige Bereiche markieren lassen, in denen er allgemein Attribute modifiziert. Das braucht man für die korrekte Einleitung des HTML-Bodys eh. Die Bereiche könnten sich diesmal auch überlappen. Die Attribute werden dann diesmal auf einem Stack abgelegt und zweigleisig zu den festen Elementen einfach zusätzlich in die Ausgabe eingestreut, wenn gerade die Koordinate links oben oder rechts unten vom markierten Rechteck bearbeitet wird. Die Rechtecke sollten sich aber nicht teilüberschneiden, weil sonst würden sich die Tags verkeilen. Kompliziert wäre z.B. nur, wenn sich die Tags auf den Schriftgrad auswirken. Da müßte man dann z.B. den gestapelt resultierenden Font mit dem des aktuellen Objekts vergleichen und... zeilenweise, die WYSIWYG-Größe etwa eines Textstrings im Struct mit drin, Abstände einstreuen, ach, das wird zu kompliziert.

[Swordfish]

@Klagenderlamer Ich habe keine Ahnung was das soll. Es geht hier lediglich um die Suche/Empfehlung eines wysiwyg-tools.

[Klagenderlamer]

@Swordfish meine es schlampig gedacht in etwa so:
Link Kisten plazieren
Bloß sind dann die Rechtecke eine feste, zu insertierende HTML-Codesequenz.
Kann man aber eventuell auch für andere Sachen brauchen.

[Swordfish]

@Klagenderlamer Alter

[Mechanics]

@Klagenderlamer sagte in HTML aus Graphik?:

@Swordfish meine es schlampig gedacht in etwa so:
Link Kisten plazieren
Bloß sind dann die Rechtecke eine feste, zu insertierende HTML-Codesequenz.
Kann man aber eventuell auch für andere Sachen brauchen.

Hä?

[StephanJager]

Dieser Beitrag wurde gelöscht!

[Klagenderlamer]

@Mechanics Websitegenerator
Vielleicht wird es verständlich, wenn man das funktionierende 'Endprodukt' sieht.

[Swordfish]

@Klagenderlamer vielleicht wird für dich die Frage verständlich wenn du sie nochmal liest. sonst weiß ich auch nicht.

[Klagenderlamer]

@Swordfish Ja, es war nicht gefragt, einen rudimentären, eingeschränkten Editor zu verbrechen. Und es geht wohl wirklich nur mit Div und CSS und da spielt die Reihenfolge der Elemente im HTML-Code wohl auch keine Rolle. Ursprünglich gab es in HTML wohl nur Align mit left, center und right und da wurden wohl einzelne Bildblöcke nacheinander generiert und vom Browser irgendwie zusammengefügt, je nach Fenstergröße. Hätte mich mit der HTML-Syntax besser befassen müssen, aber die ist ja eh auch vermasselt.

[Ein ehemaliger Benutzer]

@Klagenderlamer vielleicht solltest du aus den 1990igern rauskommen und dich mal mit der realitaet des aktuellen jahrhunderts auseinander setzen....so als tipp...

[Klagenderlamer]

@Cardiac Ist das die Realität oder Nepp?
Waren das die tristen 1990er Jahre oder die ewig relevanten Grundlagen?
Schön anzusehen ist unser neues Jahrtausend ja schon, aber es ist halt immer auch die Frage, was dahinter ist.
Wenn man schon Tinnef programmiert, kann man dabei aber wenigstens was über die Grundlagen lernen und holt oft mehr raus.
Da wäre jetzt so ähnlich auch noch ein einfacher Leveleditor oder, wenn man etwa die Eingaben mit Backtracking durchprobiert, eine automatische Layoutoptimierung oder so drin. Sowas baue ich jetzt gerade darum; mal sehen, was es gibt.
Oder der Computer diktiert einen Weg.
Früher konnte man den Webseitenquelltext wenigstens noch entziffern. Aber heute blickt keiner mehr, was sie einem da alles für Hintertürle und annegebabbelte Sachen reinschrauben, die keiner wirklich braucht.
Nur eine antwortende Meinungsäußerung. Ich hoffe, daß der Thread jetzt nicht ausartet.

[Quiche Lorraine]

Und täglich grüßt das Troll-Posting...

[Klagenderlamer]

@Quiche-Lorraine Fläche zerlegen und einpassen
Das geht jetzt zwar am Thema vorbei, aber wenn das jetzt getrollt wäre, hätte ich nicht über 20 Stunden daran sozusagen gearbeitet. Es sind doch immer wieder dieselben Verfahren. Und mit dem anderen Programm könnte man nach kleinen Reparaturen statt HTML wohl genauso gut direkt die Steuerbefehle für ein CNC-Gerät generieren.

[Swordfish]

@Klagenderlamer sagte in HTML aus Graphik?:

Das geht jetzt zwar am Thema vorbei

Was solls? deine ganzen Beiträge in diesem Thema gehen am Thema vorbei.

@Klagenderlamer sagte in HTML aus Graphik?:

20 Stunden daran sozusagen gearbeitet

Gratuliere, du hast 20 Stunden sozusagen verschwendet. Davon abgesehen daß sowas kein vernunftbegabter Mensch in C machen würde.