HTML5 and Canvas element - new graphic possibilities presented on chemical compounds

Praca porusza tematykę nowych technologii – HTML5, elementu wraz z językiem JavaScript, które dają twórcom stron internetowych coraz większe możliwości przy tworzeniu zaawansowanych aplikacji internetowych. Celem pracy jest opisanie w jaki sposób te technologie mogą być wykorzystane do rysowania różnego rodzaju elementów graficznych. Integralną częścią jest strona internetowa przedstawiająca modele związków chemicznych, które zostały stworzone za pomocą narzędzi opisanych w pracy. Wybrano czternaście związków o różnym stopniu skomplikowania i dla każdego zostały stworzone trzy modele – wzór strukturalny, model dwuwymiarowy oraz model trójwymiarowy. Dwa pierwsze modele pokazują w jaki sposób można korzystać z liter oraz prostych kształtów do rysowania różnego rodzaju obrazków. Ostatni model demonstruje bardziej zaawansowane możliwości, które daje język JavaScript przy połączeniu z elementem – tworzenie modeli trójwymiarowych, które nie tylko dają wrażenie trójwymiarowości, ale także możliwe jest ich obracanie oraz przybliżanie i oddalanie. Do tworzenia trzeciego modelu konieczne było skorzystanie z biblioteki pomocniczej (Pre3d.js), która umożliwiła przekształcenie prostego dwuwymiarowego obrazka w model trójwymiarowy. Dodatkowo na stronie znajduje się krótka historia rozwoju języka znaczników hipertekstu (HTML) oraz kluczowe elementy kodu, które były użyte do tworzenia modeli wraz z wyjaśnieniem za co dany fragment odpowiada.Praca pisemna składa się z czterech rozdziałów. Pierwszy rozdział wprowadza do problematyki, zwięźle opisuje serwis oraz definiuje cele pracy. Znajdują się w nim także podrozdziały, w których krótko opisane są źródła internetowe dotyczące podobnej tematyki oraz przegląd literatury. W drugim rozdziale zostały opisane dwie części serwisu: wizualna i informacyjna, wraz z załączonymi zrzutami ekranu stron. W trzecim rozdziale znajduje się dokładny opis zastosowanej technologii i użytych bibliotek. Zamieszczone tam zostały obszerne fragmenty kodu wraz z objaśnieniami. Została również poruszona tematyka dostosowania serwisu do starszych przeglądarek, które nie obsługują najnowszych technologii. Ponadto w rozdziale tym opisane zostały trudności, które pojawiły się podczas tworzenia projektu. Ostatni, czwarty rozdział podsumuje pracę, znajduje się w nim analiza zrealizowanych celów oraz propozycje dalszego rozwoju serwisu.

The diploma is about new web technologies – HTML5, element and it's JavaScript API which give great possibilities for web developers to create advanced and interesting web applications. The aim of this piece is to demonstrate how those tools can be used to create graphic elements on websites. Crucial part of the diploma is web application which presents different chemical compounds which were created using technologies mentioned before. Fourteen compounds were chosen and for each of them three models are available: molecular formula, two-dimensional model and three-dimensional model. First two kinds of models show how to use letters and simple shapes in element. The last model is more complex, additional JavaScript library is used to create 3D context. This library (Pre3d.js) allows to create from two-dimensional image 3D model. What is more, on the website is available the brief history of Hypertext Markup Language and also important pieces of code are explained.The written part of diploma consists of four chapters. First chapter introduces to the subject and shortly describes the web application and its aims. Similar Internet resources and literature about those new web technologies are also described in subsections. The second section is about visual side of the website and its architecture. The third chapter contains of a precise description of technologies and libraries used in the project and the very important aspect of adapting websites for older browsers. Also some technical difficulties which appeared during development of the application are described. Summary of the diploma and the analysis of achieved goals is covered in the last chapter with the suggestion how the website could be developed and extended in the future.