Premýšľali ste niekedy nad tým, aké skvelé by bolo nakresliť niečo na papier a nechať to ožiť v skutočnom svete? To je niečo, čo Microsoft dosiahol s webovou aplikáciou Skletch2Code poháňanou AI, ktorá dokáže previesť ručne písané kresby z tabule na webové stránky HTML jediným kliknutím.
Sketch2Code dokáže previesť akékoľvek ručne nakreslené rozloženie webovej stránky do HTML za pár sekúnd. Tento nástroj využíva službu Computer Vision AI od spoločnosti Microsoft na detekciu objektov HTML vo výkrese a potom pomocou rozpoznávania textu extrahuje ručne písaný text na výkrese, aby skombinoval a vytvoril úryvky HTML všetkých prvkov dizajnu v obrázku.
Vďaka tomu môžu weboví dizajnéri a vývojári v priebehu niekoľkých sekúnd vytvárať prototypy HTML webových stránok v mnohých rôznych štýloch. Ak vás zaujíma, ako to funguje v backende, určite si prečítajte technické podrobnosti o Sketch2Code na webovej stránke spoločnosti Microsoft.
Nižšie je rýchly návod, ktorý vám ukáže, aké jednoduché je použiť Sketch2Code na prevod nákresov rozloženia webových stránok na skutočné stránky HTML.
Najprv nakreslite rozloženie svojej webovej stránky na tabuľu alebo biely list. Potom ho odfoťte a uložte do počítača. Potom kliknutím na tlačidlo nižšie otvorte webovú aplikáciu Sketch2Code vo svojom prehliadači.
Spustite webovú aplikáciu Sketch2Code
Keď máte webovú stránku otvorenú, kliknite na Nahrať dizajn a vyberte obrázok rozloženia webovej stránky, ktorý ste nakreslili na tabuľu alebo biely list.
Po nahraní ručne nakresleného dizajnu webovej stránky sa pohodlne usaďte a sledujte, ako Sketch2Code používa AI, ako automaticky generuje stránku HTML na základe rozloženia na obrázku, ktorý ste nahrali.
Po dokončení procesu sa vám zobrazí ukážka čerstvo vygenerovanej stránky HTML spolu s možnosťou stiahnuť si celý kód. Klikni na Stiahnite si svoj HTML kód tlačidlo, aby ste získali súbor .html s ručne nakresleným rozložením webovej stránky, aby ste si ho mohli otestovať a prezrieť si ho lokálne vo webovom prehliadači.
to je všetko. Dúfame, že Sketch2Code vám ušetrí čas pri prototypovaní rozloženia webovej stránky.