BootPly – edytor „przeciągnij i upuść” dla Bootstrapa

Opublikowany 8 czerwca 2017 w Web Development.
Tagi: , , .

Cały świat ma bzika na punkcie gadżetów. Od zakupów artykułów spożywczych do tworzenia projektów związanych z dokonywaniem rezerwacji podróży, możesz zrobić to wszystko za pomocą dosłownie kilku kliknięć na swoim smartfonie lub tablecie. Nic dziwnego, że aktualnie swoje pięć minut mają wszelkiej maści aplikacje i strony internetowe. Ale czy jako ich użytkownik zwracasz uwagę na to, jak bardzo ich budowa jest złożona i skomplikowana? Zastanawiałeś się kiedyś, ile godzin pracy, badań, monitorowania i testowania potrzeba do stworzenia idealnej witryny lub aplikacji internetowej, z której możesz w dowolnym momencie skorzystać, by ułatwić sobie życie na co dzień? Pewnie nie.

Programiści aplikacji naprawdę ciężko pracują na stworzeniem tych intuicyjnych, responsywnych i, dla laika, wręcz nieprawdopodobnych technologii, które my – zwykli ludzie – nazywamy „aplikacjami” i chętnie się nimi posługujemy. Czy nie byłoby w dobrym tonie, gdyby ktoś teraz zrobił coś naprawdę miłego dla tych wszystkich twórców? Coś, co pomogłoby zaoszczędzić im trochę czasu i przy okazji uprościć cały proces tworzenia aplikacji? Właściwie to właśnie zrobili autorzy BootPly. Zmienili sposób, w jaki buduje się aplikacje internetowe, przy użyciu jednej z najbardziej popularnych platform programistycznych frontend – Bootstrap.

Nieźle, co?

BootPly – przyjazny edytor i kreator Bootstrap

Dla tych, którzy wcześniej nie zetknęli się z „Bootstrap” – jest to wolna i otwarta platforma sieci Web, przeznaczona do projektowania stron i aplikacji internetowych. Zawiera szablony HTML i CSS do projektowania typografii, formularzy, przycisków, elementów nawigacji i innych elementów interfejsu, a także opcjonalnych rozszerzeń JavaScript. Chociaż Bootstrap zyskuje ogromną popularność ze względu na swoje cechy, niestety korzystanie z niego wymaga poświęcenia trochę czasu na jego naukę. Szczególnie początkujący mogą mieć trochę pod górę pod tym względem.

Jednak BootPly na szczęście jest tym, co sprawia, że korzystanie z Bootstrap staje się zabawą. Ułatwia pracę z Bootstrap, umożliwiając programistom wykorzystanie ich repozytorium kodu, snippetów, przykładów oraz szablonów. Platforma oferuje twórcom Bootstrap edytor wizualny przeciągnij i upuść, który mogą wykorzystać do szybkiego projektowania i tworzenia aplikacji sieciowych. Ponadto jest zintegrowany z innymi popularnymi wtyczkami Bootstrap, mikro-bibliotekami i frameworkami, takimi jak FontAwesome, Bootstrap Select, Angular JS, Isotope, Google Maps i innymi.

Oto niektóre z najlepszych funkcjonalności BootPly:

  • ułatwia ręczne programowanie dzięki opartemu na JavaScript edytorze HTML i CSS
  • zawiera wizualny kreator przeciągnij i upuść do szybszego projektowania
  • daje dostęp do tysięcy przykładów, darmowych motywów, szablonów i układów
  • udostępnia repozytorium kodu, łatwe do przeszukiwania i udostępniania
  • umożliwia kontaktowanie się ze społecznością twórców w oparciu o system reputacji

BootPly nie sili się na to, by być czymś więcej niż jest w rzeczywistości i jest to zdecydowanie jedna z największych jego zalet. Jest prosty, konkretny i efektywny.

Korzystanie z BootPly

Istnieje kilka sposobów tworzenia z użyciem BootPly. Krótko przedstawimy każdy z nich. Zatem wejdź na stronę główną narzędzia, a ujrzysz następujące opcje, z których możesz skorzystać:

  • ręczne programowanie
  • przeciągnij i upuść
  • Play Now
  • przycisk na dole „Get Started with BootPly Now”
  • link na górze prowadzący do „Boot Bundle”

Ręczne programowanie, Play Now i „Rozpocznij” („Get Started”) przekierowują Cię na tę samą stronę – ekran z wieloma panelami, pozwalający natychmiast rozpocząć kodowanie. Istnieją dedykowane panele dla JavaScript i CSS oraz jeden dla głównego kodu. Znajdziesz tu również panel podglądu na dole oraz pomocne linki w lewym pasku bocznym. Rozpocznij pisanie kodu i skorzystaj z bazy CSS, komponentów, ikon itp. za pomocą różnych list rozwijanych. Gdy Twój kod będzie już gotowy, możesz go uruchomić używając przycisku „Uruchom” („Run”) w menu plików. Rezultat zostanie wyświetlony w panelu podglądu. Możesz także tymczasowo „zapisywać” swój kod za pomocą przycisku zapisu w menu plików. Jednak żeby trwale coś zapisać, będziesz musiał się zarejestrować.

Żeby to zrobić, kliknij przycisk „Login” w prawym górnym rogu ekranu. Podaj wymagane informacje i zarejestruj się. Narzędzie nie prosi o informacje o karcie kredytowej podczas rejestracji. W dowolnym momencie, jeśli zauważysz, że panele robocze są zbyt małe do wygodnego programowania, możesz przełączyć tryb wyświetlania na „pełny ekran” za pomocą przycisku dostępnego tuż pod panelem CSS. Podobnie sprawa się ma, jeśli chodzi o sprawdzenie, jak Twój projekt będzie wyglądał na smartfonach lub tabletach. Służy do tego przycisk „Smartphone/Mobile device preview”.

Możesz programować, wykonywać, testować, usuwać, ponownie programować, poprawiać i powtarzać powyższe czynności wiele razy, dzięki BootPly. Bez żadnych ograniczeń. Dlatego nazywa się go placem zabaw Bootstrap. Jeśli Twój kod jest ostatecznie gotowy i zechcesz go zapisać na swoim komputerze za pomocą wygodnego przycisku „Pobierz” („Download”), znajdującego się pod panelem CSS, musisz wykupić płatną subskrypcję.

Jednak ważnym aspektem, który należy wziąć pod uwagę, jest to, że samo programowanie, wykonywanie i testowanie nie wymaga od Ciebie logowania. Z drugiej strony, korzystanie z edytora wizualnego przeciągnij i upuść już tego wymaga. W efekcie, żeby zobaczyć prawdziwą moc narzędzia, będziesz musiał się zarejestrować.

  • Przeciągaj i upuszczaj elementy #Bootstrap przy pomocy @BootPly bootply.com/ via @MonitoringStron

    Tweetnij to

Plusy i minusy

Nie trzeba chyba wymieniać ewidentnych plusów tego narzędzia. I szczerze mówiąc, było nam ciężko znaleźć jakieś jego wady. W rzeczywistości, dzięki BootPly tworzenie aplikacji sprawia tyle frajdy, że nawet jeśli znaleźlibyśmy jakąś niedoróbkę, to prawdopodobnie zupełnie byśmy ją zignorowali.

Podsumowanie

Pokochaliśmy BootPly! Jeśli jesteś projektantem witryn internetowych, który spędza całe godziny przy pracy nad aplikacjami i rozwojem stron internetowych, koniecznie powinieneś przetestować to narzędzie. Będziesz mógł korzystać z większości jego funkcjonalności zupełnie za darmo, co czyni go w naszych oczach jeszcze lepszym.

monitorowanie strony internetowej

Dodaj odpowiedź:

Opisy narzędzi dla webmasterów i e-marketerów

  • Śpij dobrze, webmasterze
  • Zamów powiadomienia o nowych postach


  • Obserwuj nas


  • Przeglądaj Kategorie


  • Śpij dobrze, webmasterze
Więcej w Web Development
Programuj, testuj i ucz się z JSFiddle

Czy kiedykolwiek słyszałeś termin „Code Playground”? Jeśli lubisz programowanie, masz ciągłą potrzebę poszerzania swojej wiedzy, śledzisz w Internecie społeczności branżowe...

Zamknij