{"id":1476,"date":"2024-04-09T11:25:17","date_gmt":"2024-04-09T11:25:17","guid":{"rendered":"https:\/\/howtogeek.blog\/pl\/?p=1476"},"modified":"2024-04-09T11:25:17","modified_gmt":"2024-04-09T11:25:17","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-pl","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/pl\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-pl\/","title":{"rendered":"Jak przekonwertowa\u0107 r\u0119cznie rysowane uk\u0142ady witryn internetowych na kod HTML za pomoc\u0105 programu Sketch2Code firmy Microsoft"},"content":{"rendered":"

Czy zastanawia\u0142e\u015b si\u0119 kiedy\u015b, jak fajnie by\u0142oby po prostu narysowa\u0107 co\u015b na papierze i pozwoli\u0107, aby o\u017cy\u0142o w prawdziwym \u015bwiecie? C\u00f3\u017c, to w\u0142a\u015bnie uda\u0142o si\u0119 firmie Microsoft dzi\u0119ki aplikacji internetowej Skletch2Code opartej na sztucznej inteligencji, kt\u00f3ra umo\u017cliwia konwersj\u0119 odr\u0119cznych rysunk\u00f3w z tablicy na strony internetowe w formacie HTML jednym klikni\u0119ciem.<\/p>\n

Sketch2Code mo\u017ce w ci\u0105gu kilku sekund przekonwertowa\u0107 dowolny, r\u0119cznie narysowany uk\u0142ad strony internetowej na HTML. Narz\u0119dzie wykorzystuje us\u0142ug\u0119 Computer Vision AI firmy Microsoft do wykrywania obiekt\u00f3w HTML na rysunku, a nast\u0119pnie wykorzystuje rozpoznawanie tekstu do wyodr\u0119bniania odr\u0119cznego tekstu z rysunku w celu po\u0142\u0105czenia i zbudowania fragment\u00f3w HTML wszystkich element\u00f3w projektu na obrazie.<\/p>\n

Dzi\u0119ki temu projektanci i programi\u015bci stron internetowych mog\u0105 niesamowicie szybko tworzy\u0107 prototypy HTML witryny internetowej w wielu r\u00f3\u017cnych stylach w ci\u0105gu kilku sekund. Je\u015bli chcesz wiedzie\u0107, jak to dzia\u0142a w backendie, koniecznie przeczytaj szczeg\u00f3\u0142y techniczne dotycz\u0105ce Sketch2Code na stronie Microsoftu.<\/p>\n

Poni\u017cej znajduje si\u0119 kr\u00f3tki samouczek pokazuj\u0105cy, jak proste jest u\u017cycie Sketch2Code do konwersji rysunk\u00f3w uk\u0142adu witryny internetowej na prawdziwe strony HTML.<\/p>\n

Najpierw narysuj uk\u0142ad swojej witryny na tablicy lub bia\u0142ej kartce. Nast\u0119pnie zr\u00f3b zdj\u0119cie i zapisz je na swoim komputerze. Nast\u0119pnie kliknij przycisk poni\u017cej, aby otworzy\u0107 aplikacj\u0119 internetow\u0105 Sketch2Code w przegl\u0105darce.<\/p>\n

<\/figure>\n

Po otwarciu witryny kliknij przycisk Prze\u015blij projekt<\/strong> i wybierz obraz uk\u0142adu witryny narysowany na tablicy lub bia\u0142ym arkuszu.<\/p>\n

Wybierz i prze\u015blij r\u0119cznie narysowany uk\u0142ad strony internetowej<\/figcaption><\/figure>\n

Po przes\u0142aniu r\u0119cznie narysowanego projektu strony internetowej usi\u0105d\u017a wygodnie i zobacz, jak Sketch2Code wykorzystuje sztuczn\u0105 inteligencj\u0119 automatycznie generuje stron\u0119 HTML w oparciu o uk\u0142ad przes\u0142anego obrazu.<\/p>\n

Po zako\u0144czeniu procesu zostanie wy\u015bwietlony podgl\u0105d \u015bwie\u017co wygenerowanej strony HTML wraz z opcj\u0105 pobrania pe\u0142nego kodu. Kliknij przycisk Pobierz sw\u00f3j kod HTML,<\/strong> aby pobra\u0107. html r\u0119cznie narysowanego uk\u0142adu strony internetowej, dzi\u0119ki czemu mo\u017cna go przetestowa\u0107 i wy\u015bwietli\u0107 podgl\u0105d lokalnie w przegl\u0105darce internetowej.<\/p>\n

Kliknij przycisk \u201ePobierz sw\u00f3j kod HTML\u201d.<\/figcaption><\/figure>\n

Ot\u00f3\u017c \u200b\u200bto. Mamy nadziej\u0119, \u017ce Sketch2Code oszcz\u0119dzi Ci czas podczas prototypowania uk\u0142adu strony internetowej.<\/p>\n","protected":false},"excerpt":{"rendered":"

Czy zastanawia\u0142e\u015b si\u0119 kiedy\u015b, jak fajnie by\u0142oby po prostu narysowa\u0107 co\u015b na papierze i pozwoli\u0107, aby o\u017cy\u0142o w prawdziwym \u015bwiecie? C\u00f3\u017c, to w\u0142a\u015bnie uda\u0142o si\u0119 firmie Microsoft dzi\u0119ki aplikacji internetowej Skletch2Code opartej na sztucznej inteligencji, kt\u00f3ra umo\u017cliwia konwersj\u0119 odr\u0119cznych rysunk\u00f3w z tablicy na strony internetowe w formacie HTML jednym klikni\u0119ciem. Sketch2Code mo\u017ce w ci\u0105gu kilku […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[130,176],"class_list":["post-1476","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/1476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/comments?post=1476"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/1476\/revisions"}],"predecessor-version":[{"id":1477,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/1476\/revisions\/1477"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/media?parent=1476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/categories?post=1476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/tags?post=1476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}