Project B: Website Draft
Project Title: Days Records Archive
Link to my project: https://rebeccax10ng.github.io/CreativeCodingLab/Rebecca_ProjectB/
Brief Description and Concept:
The project includes three main functions: image capture, sound recording and sound playing. The user should be able to take a picture through their cameras, customize the cover of the disc and record a sound clip that would be attached to the disc. Then, an url can be generated. Another person can have access to the disc and sound clip via this link. There might be a rotation animation for the disc and make it play as if it was a real one being played in the player.
Visuan Documentation:
Coding:
Many problems happened when adjusting the layout. At first, all elements are put in absolute positions. It looks good when being displayed on my computer fullscreen, but after adjusting the screen size, things went wrong. Finally, I chose putting these elements in a flexbox and make the flex direction to be in column. I also tried to use event listener to access html values with p5 script.
Reflection:
- How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
- It avoids messing up with variable names and makes it easier to come back later and understand the codes.
- When would you want to use classes, when IDs?
- I use classes when this element would be use many times. If I want this style to be available only once, I use IDs.
- Which limitations did you run into in the styling of your page?
- I hope I could add some animations in html page, which is now too hard for me.
- How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
- Text editors have GUI and the learning cost is lower. Writing html is much harder but can be more customized once learned.
- Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
- The syntax of HTML and CSS are different; connecting different pages together and visualize them requires more attention.