Js scripts für js freien html Text?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
browser
code
dokument
element
file
funktion
inhalt
komprimieren
listen
menge
parameter
server
sinn
stelle
stellen
suche
target
text
verzichten
-
Hi,
mit js kann man sich ja html/CSS in ein LegobaukastenSystem zurechtlegen, womit ein finaler js freier html stream generiert wird, den man sich dann per AusgabeTextarea aus der browserseite holen (dort auch per js schön übersichtlich gliedern) und in ein pures html/CSS file kopieren kann, das dann ohne javascript läuft. Damit kann eine komplette html Seite samt CSS-Vorlauf generiert werden, weil sichs ja nur um einen "toten" Text handelt, der im GenerierungsModus nicht abgearbeitet wird.
Mit target Pseudoklassen läßt sich html intern verlinken, ohne jedesmal was hochladen zu müssen.
Damit hat man eigenständige Webseiten in einem einzigen html file zusammengefasst.
Nun suche ich nach solchen scripts zur Anregung, weil das bei mir total wild ausartet, gar nicht mehr zu bremsen ist.
Also z.B. js scripts zur Textgestaltung wären ganz gut, die pures html/CSS generieren.
Solche functions sind in den html text stream mit '+' einfach zu integrieren.
Dazu kanns streamferne Hilfsfunktionen geben, die diese TextaufbauFunktionen flankieren.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Und jetzt bitte nochmal in einer Form, die man auch verstehen kann.
Sorry, ich habe keinen blassen Schimmer, was Du sagen willst.
FF, confused -
Oh, pardon.
Also mal ein einfachstes Beispiel:
function div(left,top,txt) { return '<div style="position:absolute;left:'+left+'px;top:'+top+'px;">'+txt+'</div>' }
Das kann dann z.B. als var stream=div(100,100,"Hier kommt Text")+..... umgesetzt werden.
Zum Schluß enthält der stream die komplette html-Seite, weil ja überall was addiert werden kann.
Auch html/CSS-Text kann zw. +...+ stehen, es geht auch +[....+[...]+...]+.... zur besseren Gliederung.
Nun suche ich solche scripts, die kompexe Aufgaben erledigen, von mir aus 20 Parameter haben können.
Bisher hab ichs "nur" zu 10 Parametern gebracht. Was beim Funktionsaufruf an Parametern fehlt, wird intern entsprechend behandelt, bzw. man kann sich ja Parameter mit "" oder 0, -1 usw. als intern autogeneriert oder nicht beabsichtigt kennzeichnen.
Damit kann man sich komplex ineinander verschachtelte Konstrukte zusammenstellen, wobei Parameter selbst wiederum Funktionen sein können.
Beitrag zuletzt geändert: 22.10.2009 14:01:24 von hobbypfuscher -
Welchen Sinn soll das ganze haben?
Wer sauberes JS schreibt brauch am Ende nicht mehr als einen kleinen Initialisierungsblock in seiner HTML Seite. onXXX im HTML sollte heutzutage niemand mehr verwenden. -
Mal schauen, ob ich dich richtig verstanden habe.
Du möchtest also einen Homepagegenerator bauen, der auf Javascript basiert.
Alles, was man sich so zusammengeklickt hat, wird in eine Textarea gepackt,
Jedes Element, das ausgewählt wird, wird an den Content-String der Textarea angehängt.
Deren Inhalt wird letztendlich per Copy-and-Paste in eine HTML-Datei übertragen, welche dann, auf dem Webspace abgelegt, die Homepage darstellt.
Nun suchst Du JS-Funktionen , die spezielle HTML-Elemente generieren.
Richtig?
FF
Beitrag zuletzt geändert: 22.10.2009 14:28:51 von fatfreddy -
Ja, es soll ohne js laufen, wobei das html/CSS aber mit js generiert wird.
Der Sinn liegt darin, alles in einem file zu haben, womit man intern verlinken kann, ohne den server weiterhin anzufragen.
Damit sollte man flink mit internen links vergleichbar mit "hover" die Seite durchnavigieren können.
Wäre gut, dazu sowas wie zip zu haben, womit der htm/CSS Text locker auf 1/5 zu komprimieren wäre.
Viell. wird Kompression z.B. in CSS3 oder so mit reingenommen.
Geht gar nicht mal ums Generieren einer kompletten homepage, sondern um komplexe js scripts, die dazu Komponenten zur Verfügung stellen, die alle raffinierten Feinheiten und die Kombinationsvielfalt von html/CSS besser verfügbar machen.
Komplexe scripts könnte man dann wiederum ineinander verschachteln.
Damit ist bestimmt weit mehr zu erreichen, als den puren CSS/html Text laufend vor Augen haben zu sollen, den man sich dann gar nicht mehr anzugucken braucht, zumal er dann in Riesensequenzen ausartet. -
hobbypfuscher schrieb:
Der Sinn liegt darin, alles in einem file zu haben, womit man intern verlinken kann, ohne den server weiterhin anzufragen.
...und dafür ein großes Dokument an den Client senden zu müssen, der eventuell nur Bruchstücke davon benötigt.
Hmm, finde ich nicht vorteilhaft.
Wäre gut, dazu sowas wie zip zu haben, womit der htm/CSS Text locker auf 1/5 zu komprimieren wäre.
Speichere dein Dokument als php-skript, dann kannst Du per GZIP kompremieren. Bei "handelsüblichem HTML-Code in normaler Größe kann man darauf aber problemlos verzichten, da der Effekt nur gering ist.
Geht gar nicht mal ums Generieren einer kompletten homepage, sondern um komplexe js scripts, die dazu Komponenten zur Verfügung stellen, die alle raffinierten Feinheiten und die Kombinationsvielfalt von html/CSS besser verfügbar machen.
Gerade "raffinierte Feinheiten von HTML/CSS" werden sich m.E. nicht durch automatisch generierten Code ausnutzen lassen. Dazu bedarf es des Überblicks über das ganze Dokument und händischer Optimierung.
Du hast 2 HTML-Dokumente auf deiner HP. Sind diese in der von dir gewünschten Art entstanden?
Dann Folgendes: Sie sind voll mit redundantem Code. Ich vermute, du generierst die einzeelnen Elemente sequentiell.
Das zwingt zu überflüssigen absoluten Psitionierungen. Die Abhängigkeiten und Positionierung einzelner Elemente können deine Skripte nicht mit Sicherheit verfolgen. Zumindest nicht mit vertretbarem Programmieraufwand.
Ein händisch sauber erstellter Code, mit Trennung von HTML und CSS, wird deutlich übersichtlicher und vor allem deutlich einfacher zu pflegen sein.
FF
-
Und der Browser muss bei weniger Code auch weniger arbeiten. Denn JS ist nicht immer schnell, wenn die ganze Seite davon wimmelt....
noch nen kleines Beispiel wie man es nicht machen sollte.
So nicht!
... <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> <a name="blubb" onmouseover="this.style.fontWeight='bold';">1234</a><br /> ...
Sondern so!
... <a name="blubb">1234</a><br /> <a name="blubb">1234</a><br /> <a name="blubb">1234</a><br /> <a name="blubb">1234</a><br /> <a name="blubb">1234</a><br /> <a name="blubb">1234</a><br /> ... <script type="text/javascript"> // <![CDATA[ var blubbs = document.getElementsByName('blubb'); if (blubbs !== null && blubbs.length > 0) { for (var i=0, il=blubbs.length; i<il; i++) { blubbs[i].onmouseover = (function() { return function(obj) { obj.style.fontWeight = 'bold'; } })(blubbs[i]); } } // ]]> </script>
Das mag auf den ersten Blick wie mehr Aufwand aussehen. Aber spätestens bei langen und großen Listen spart man sich so eine Menge Code und Datenbalast ein. -
fatfreddy, der code dort wurde aus lauter sequentiellen js-functions generiert.
Händisch wäre mir das bereits bei nur so wenig Inhalt schon nicht vertretbar.
Dabei gehts um verkettete Listen mit GIMP SchlagschattenMenus, die ohne js wohl gar nicht anders darstellbar sind.
Die vielen Positionierungen sind menubedingt. Wüßte nicht, wie die Menus sonst darstellbar sein sollten.
Dazu würde ich mir nun komplexe js text functions wünschen, die so alles bieten und kombinieren, was eben CSS dazu drauf hat.
Ohne derartige functions gäbs diese Demos nicht, die doch ziemlich einsam zeigen, wie man ohne js mit Menus frei herumfuhrwerken kann.
An die Stelle der hot spots (mit den beiden dicken gelben hor. Linien) sind interne target Pseudoklassen getreten.
Jetzt gehts mir um möglichst komplexe TextStrukturierung, ohne sich dazu in den Variabilitäten und in der Kombinatorik ihrer CSS-Feinheiten verstricken zu müssen.
Js wie onmouseover usw. kommt damit erst gar nicht vor.
Vermutlich läßt sich recht gut auf js verzichten, während man mit den targets quasi-autarke Webseiten auf einen Schlag hochlädt und so schnell wie mit onmouseover, nur eben per Mausclick durchnavigiert.
Dabei soll so wenig wie möglich gescrollt werden müssen.
Der Anreiz soll steigen, alles rasch mal möglichst übersichtlich und ohne die übliche linkZeit durch zu navigieren.
Wäre super, wenn target links nicht mal angeclickt werden müßten, was ja Sinn machen würde, weil man die Seite damit nicht verläßt.
Ich vermute mal, daß es auch bei wesentlich kleineren Auflösungen statt 1920x1200 gut läuft, auch mit den IE's von Bill Soft.
Sollte eigentlich mit jedem browser funktionieren - aber das nur nebenbei.
X1b....html benötigt als zip nicht mal 10 %.
Mir unverständlich, wieso das immer noch nicht zum Browserstandard gehört.
Könnte man ja ggf. selektiv abfragen und hochladen.
CodePflege ist pure js-Funktionalität. Der generierte html/CSS Text interessiert dabei schon nicht mehr, weil er ja nur automatisches Resultat ist.
Viell. mal js des X1b-Beispiels:
stream+=(divstart("start","bckgrd")+us(200,14+200,strt)+us(0,24,nav)+vid)+ (divstart("b1","bckgrdb1")+us(300,15+200,tgt1)+us(0,24,nav)+vid)+ (divstart("b2","bckgrd")+us(10,32+50,tgt2)+us(0,24,nav)+vid)+ (divstart("b3","bckgrd")+us(100,30+50,tgt3)+us(0,24,nav)+vid)+ (divstart("b4","bckgrd")+[fs(30,25+50,z,500,500,50,50)+ us(400,400,z)+fe]+ [fs(500,100,z,800,500,-30,50)+ us(500,400,dbl)+us(-50,450,dbl)+fe]+ us(60,420,dbl)+us(0,24,nav)+vid)
Selbst das lädt dazu ein, sowas noch komplexer zusammen zu fassen und zu vereinheitlichen, während die Komponenten immer weiter verfeinerbar sind.
In dem Fall sinds Textvariabalen, die functions enthalten.
Beitrag zuletzt geändert: 22.10.2009 17:04:24 von hobbypfuscher -
Der Sinn des Unternehmens erschließt sich mir noch immer nicht so recht.
Wie es mit Barrierefreiheit, unterschidlichen Medien und Browserkompatibilität aussieht, hab ich mir jetzt noch nicht angeschaut.
.
Bin ja auch kein großer Freund von javascript, aber wo es sinnvoll einsetzbar ist, nutze ich es dann doch.
Für Webseiten ohne reload und mit ein-/ausblendbaren Blöcken würde ich vermutlich eher auf Javascript und das Gespann Ajax-PHP zurückgreifen. Ich würde mal behaupten, daß der Code dann auch leichter zu pflegen ist.
Da bin ich vermutlich nicht der Einzige und deshalb glaube ich nicht, daß Du die gewünschten Funktionen irgendwo fertig findest. Die wirst Du wohl selbst schreiben müssen.
FF -
Der Sinn soll sein, per js umfassend CSS/html Text zu generieren, der dann ohne js läuft.
Barrierefreier gehts viell. gar nicht, als auf js zu verzichten und alle browser zu bedienen.
Ich hab nix gegen js, aber es kann in der Anwendung unterbleiben.
Wäre halt schön, CSS/html Text aus js Bibiliotheken zu erhalten.
Es gibt ja viele js und auch CSS scripts, aber nichts, was mit js html/CSS herstellt.
Das kann man völlig ohne server nutzen, womit eigene Heimanwendungen in BrowserReichweite kommen, wie z.B. mindmaps, Ablaufpläne, Tabellenkalkulation - also durchaus auch mit js-Integration.
Das fasziniert, weils zudem betriebssystemunabhängig ist, während die browser immer leistungsfähiger werden, wobei auch 3D kommt.
CSS in 3D wäre super, ebenso diese zip-Geschichte implizit fest integriert, ohne viel eigenes Zutun.
Ich stelle immer wieder fest, daß CSS/html erst mit eigenen js functions, die diese Texte herstellen, so richtig komplex ausbaubar ist.
Erst damit nutzt man einem sonst evtl. verborgene Feinheiten und Kombinationen.
PHP deckt das zu, bedingt server und jede Menge overhead.
Js könnte zur wichtigsten PC-Sprache werden, von browsern präcompilierbar und mit z.B. C++-Funktionalität erweitert werden.
Das wäre ein wichtiger Schritt hin zum Web-OS.
Aber zurück zu den angesprochenen Menus. Sowas findet sich leider nicht so ausgeprägt im web.
Mich wundert es, wieso das so ein MauerblümchenDasein fristet - mit den bekannten armseligen NavigationsMenus, die ja fast ihren Namen nicht verdienen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
