Mini Project 8. Sketch Gallery Page
Matrix Generator
Brief introduction:
After opening the page, the viewer can interact with the matrix generator which provides the opportunity to generate various patterns that look like matrixes. Instructions are below the interactive canvas.
Technical part & Things that I learnt:
I tried to put two sketches into one page. The first time I failed because I packed the two into one shared HTML, CSS, and javascript file, so one of them didn’t show at all. But with the help of Professor Godoy, I got to realize that I had to separate them into two individual folders that contain their own HTML, CSS, and javascript files. So the two sketches finally showed altogether on one page.
Also thanks to the help of Professor and Taojie, I got to successfully adjust the size of the canvas of the two sketches by giving styles to the iframe tags so it looks fine now.
Mio also gave a piece of useful advice: before writing and running javascript in VS, it would be clearer to sketch js code on p5.js to see the result immediately, so that changes will be made in quick response to the result shown.
Reflection
- How can orderly file name conventions (html files, CSS files, images, etc.) prevent errors when building a website?
- Easy identification: With a consistent naming convention, files can be easily identified and located, reducing the chances of accidentally omitting or misplacing files during development.
- Clear file relationships: A structured naming convention can indicate the relationships between files, making it easier to understand how they are interconnected. For example, using a prefix like “main-” for the main CSS file or “header-” for the header image can help identify their specific roles.
- Avoiding conflicts: By adhering to a naming convention, naming conflicts can be prevented when multiple files have similar or identical names. This ensures that each file has a unique identifier, reducing the risk of overwriting or confusing files.
- When would you want to use classes, when IDs?
Classes:
- Reusability: Classes are designed for reuse. They allow you to apply the same styling or functionality to multiple elements on a page or across different pages. For example, you can create a class called “button” and apply it to multiple buttons throughout your website, providing consistent styling and behavior.
- Grouping and specificity: Classes enable you to group elements with similar characteristics or functionality. By assigning a class to multiple elements, you can target and style them collectively using CSS selectors. This approach is particularly useful when you want to style a specific group of elements, such as a navigation menu or a set of related items.
IDs:
- Uniqueness: IDs are intended to be unique identifiers for individual elements on a page. Each ID should only be assigned to one element. This uniqueness allows me to target and manipulate specific elements using CSS or JavaScript. For example, I can use an ID to apply a specific style to a single element or to target it for dynamic interactivity.
- Anchoring and linking: IDs are often used to create anchor links within a webpage. By assigning an ID to a specific section or element, I can link directly to that section from other parts of the page or from external pages. This is commonly seen in navigation menus or tables of contents.
- Which limitations did you run into in the styling of your page?
It feels not very convenient if I want to put multiple stuff in the same y position with different x positions. By saying this, I am referring to the fact that I can use <br> or <p> to have a blank line, which indicates it’s direct to have “y position” adjusted because it would not have to turn to CSS to do so. However, with “x positions”, one can’t simply achieve it only with HTML.
- How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are the advantages of each over the other?
WYSIWYG editors like Microsoft Word offer a user-friendly and visually oriented approach to editing and styling text, making them suitable for non-technical users and print-focused documents. On the other hand, HTML provides greater control, flexibility, and efficiency, making it ideal for web development professionals who require structured content, customization, dynamic interactivity, and optimal performance on the web.
- Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
In my webpage, HTML is used to structure the content of the webpage, while CSS is used to style the content and layout. JavaScript is used to add interactivity and dynamic functionality to the webpage.
Writing HTML and CSS involves creating markups and stylesheets using specific syntax and rules to create the desired layout and visual appearance of the webpage. In contrast, p5.js is a JavaScript library used for creative coding, which involves using programming concepts to create interactive and visual experiences on the web. Writing p5.js involves using JavaScript syntax and concepts to manipulate graphics and animations on the webpage.