Schlagwort-Archive: bootstrap

ext-gwt one page diagram

one is using ext-gwt for the creation of graphical user interfaces, a couple of things are needed, that such construct is maintainable and configurable, from the backend. all sources are written in java and then compiled to javascript. websockets, ajax, all the fancy stuf will be conducted in „object manner“ on that level.

architecture diagram
gui architecture for static content blocks and dynamic inlays

i noticed, that the dynamic part of a page is the minor part, that matters. the static part, with css, js and so on, needs a lot of attention, while coding. so i tryed some 3rd party stuff, with jquery for success.  with“bootstrap“ the div-container are prepared, configured and accesible from the dom-tree and the context in general. the page can be separated with ease and little effort, on version changes. some diagram might help to prepare the page design over all elements.

landing.page.-.reworked

as i moved the landing page from plain html to a framework-based construct, i picked  up bootstrap for this issue. having jquery and css prepared, is half the way to a nice site.  i had plain javascript under construction as well, but fiddling from scratch with a handful of methods or classes, was to slow and in the end sucking, so i was happy to get a proper toolkit to work with.

landing page screenshot
landing page – section: scope

using version 2 of bootstrap did the trick over the past year, but as i noticed, the new version 3 was on the door.  new fonts, a bunch of icons and all for free. okay, some features are hard to find, but the result is a fast page and the dom-tree is ready in something like 800ms. using the social plugin from g+ makes the complete page a bit slow, but the scoring for search engine optimization (seo) will give the return.

furthermore, i implemented blueimp-gallery, font-awesome, bootswatch, piecemaker and jquery(mobile) as backbone for that libs. that is quite a lot, but as i wanted the page delivered by a servlet, the  structure and usability was more in the focus. beside that nice modules, the result and presentation is it worth. it took me a while to grow the inner organisation of the topics, the documentation and examples for each package is less then expected.

landing page screenshot
landing page – section: service/tech

the next step is, to use lesscss as condenser for the bloated javascript and stylesheet files, and shrinking them to the objects, that are realy needed for the site itself.  so i need to stick into node.js, npm and other superglue for server-side javascript. its not my cupcake, but it looks like i need to dive into that. running that on windows would need cygwin and my experiences with that leads me to work on pure linux.

landing page screenshot
landing page – section: service/tech

anyhow, the raw stuff is done, finetuning, colors, text and tiny changes will come the next time. but all-in-all, its just to have a presentable domain by hand.

singlePageHTML

beim rumsurfen und vergleichen von downloadgeschwindigkeiten einzelner webseiten, der zeit bis der dom-tree geladen ist und die seite fertig gerendet ist, hat mich von der singlepagevariante überzeugt, die auf ioioioio.eu nun sichtbar ist.

das ding heißt bootstrap und bezeichnet sich als framework. ( wir erinnern uns, framework calls you – you call the library ) … nunja, es soll wohl der komplette baukasten gemeint sein. jquery und kompiliertes javascript tun ihr übriges. die seite ist mit ihrem brutto-volumen von einem megabyte in etwa einer sekunde geladen. die g+ einbettung dauert dann ein wenig länger. gecached ( wiederholt geladen ) ist sie in etwa 500ms aufgebaut und dauert mit dem gugl-geraffel dann knapp über eine sekunde und braucht dann nur noch ein paar kilobyte zu laden.

mir gings im wesentlich darum ein seitendesign zu nutzen, welches in einer datei ausgeliefert, dennoch eine simple navigation ermöglicht. grund ist, das ich solche seiten mit generieren will, die dann statisch auf dem file system vorliegt und daher ultra-fast ausgeliefert werden kann. da es sich jedoch um pures html handelt, ist die erstellung des inhaltes im editor dann nicht so lecker.

die nutzung eines rich-text-clients ( wysiwyg editor ) ist da dann immer noch notwendig, eine synthese aus diesen beiden habe ich bisher noch nicht entdeckt, aber auch noch nicht konkret danach gesucht. ich wollte meine landing page erneuern, mit jquery rumspielen und das ist dann halt dabei rausgekommen. könnte schlimmer sein 🙂

eine der möglichen templates für die seiten in der cloud könnte dann in etwa so aufgebaut sein und in aussehen und verhalten durchaus ähnlich sein. als passive oder statische seite sehe ich dieses design für brauchbar an.