Kézzel rajzolt tervek átalakítása HTML kóddá, ingyen

Weboldalakat készíteni olykor nagyon szórakoztató, olykor pedig rendkívül embert próbáló tevékenység. Mindenesetre minél több hasznos, egyszerűen használható segédeszköz áll a rendelkezésünkre, annál inkább megkönnyíthetjük a saját dolgunkat. Nos, a weboldalak felépítésének megtervezéséhez például rengeteg remek mockup alkalmazás vár bevetésre az interneten, de ma mutatunk egy megoldást azoknak is, akik jobban szeretnek hagyományos módon, papíron kipróbálni elrendezéseket. A papírt és tollat mindenki maga intézi, a kézzel rajzolt tervek átalakítása HTML kóddá viszont már a Microsoft ingyenes, online szolgáltatásának feladata lesz. Nem kell hozzá semmi, csak a kedvenc böngészőnk.

Sketch 2 Code: kézzel rajzolt tervek átalakítása HTML kóddá

A Microsoft-féle Sketch 2 Code (közvetlenül itt érhető el) feladata a kézzel rajzolt weboldal tervek HTML kóddá konvertálása, s ezt meglepően hatékonyan oldja meg, annak dacára, hogy azért még béta verzióról beszélünk csak.

Az online alkalmazás felismeri a rajzolt elemeket (gombok, szövegek, feliratok, képek stb.), illetve azok elrendezését, majd az egészből korrekt HTML kódot varázsol. Így a papír alapú terveket könnyedén átültethetjük a képernyőre, rögtön a böngészőben megjelenítve, immár nem kézzel hevenyészett változatban.

Értelemszerűen a weboldal tervezésekor azért az általánosan elfogadott jelöléseket kell alkalmaznunk a képek, bekezdések, gombok és egyéb elemek esetén, de aki amúgy is foglalkozik webfejlesztéssel, ezekkel tisztában van, hiszen szinte minden mockup alkalmazás így működik. A bekezdéseket jelző vízszintes vonalakat a program Lorem ipsum szöveggé alakítja át, a képek esetében viszont nem helyettesít semmit ingyenes stock fotókkal, csak jelöli a helyüket a megszokott módon.

Az oldalon találunk néhány előre szkennelt példa rajzot is, amelyekkel elsajátíthatjuk a használatot. Ha befejeztük az ismerkedést, máris felölthetjük saját rajzainkat, amelyeket pár másodpercnyi gondolkodás után HTML kódként látunk viszont. A Predicted Object Details gombra kattintva átnézhetjük, mit, hogyan értelmezett a program, míg a Downbload Your HTML code azonnal letölthetjük a kész HTML fájlt.

Extra tipp: helykitöltő képek generálása

Aki esetleg már megvan a felépítéssel, de a tervek prezentálásához szüksége lenne néhány ingyenes, helykitöltő képre, annak javasoljuk korábbi cikkünket, amelyben összeszedtük a legjobb ingyenes eszközöket erre a célra.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató