Yelena Ye

link to the project: https://yyyyyelena.github.io/CCLab_Yelena/frida/ 

Project Description:

Yelena Ye

Frida Kahlo: Beyond the Mirror

Stamp a portrait with elements from Frida Kahlo’s artwork

2023

Elevator Pitch: 

Frida Kahlo: Beyond the Mirror allows users to unleash their creativity and connect with the art of Frida Kahlo. It allows users to recreate their captured photo with some elements from Frida Kahlo’s artworks. In this way, users will not only have fun making their artworks, but also gain a deeper appreciation for the artistry and symbolism behind Frida Kahlo’s personal style.

Abstract:

Frida Kahlo: Beyond the mirror is an interactive project sourcing inspiration from the renowned Mexican artist Frida Kahlo. The project comprises two parts. Part one is a brief introduction of the artist and showcases some of her artworks, especially her self-portraits. These self portraits demonstrate her signature style of painting characterized by thick eyebrows and bold use of colors. Part two is an interactive project that allows users to create their own portrait with elements derived from Kahlo’s painting. 

The motivation behind this project is the observation that the art world has historically been male-dominated, with female artists facing persistent underrepresentation and marginalization. As a feminist icon, Frida Kahlo boldly challenged traditional gender roles and societal expectations of women through her unconventional life and thought-provoking artwork. By offering an interactive project that engages users with Kahlo’s art in a fun and creative way, this project aims to not only promote appreciation of her work but also to raise awareness about the ongoing struggles faced by women in the art world. Ultimately, Frida Kahlo: Beyond the Mirror serves as a platform for reflection on the critical issues of underrepresentation and gender disparity in the field of art.

Project description: 

This is a project inspired by female artist Frida Kahlo. 

WebPage1: Webpage 1 is a basic introduction to Frida Kahlo. You will see:

• • Some Basic Information of Frida Kahlo
  • Some of her paintings & short analysis, with link to the webpage that gives detailed information on the paintings
  • Some of her quotes
  • Reference links and suggested readings
  • A link to the second webpage where you can create your portrait sourcing inspiration from her paintings

I want to make the page more interactive, for example, the introduction on her painting will not show until you click on the painting. But I think such interactive page is really hard to code for me. So… we will see.

WebPage2: Create your portrait with stamps

This is a page generated by P5.js. When you click on the button “capture”, you activate your camera and your video will be shown in the black area. The stamps for you to choose from are on the right. These are from her painting self portrait dedicated to Dr Eloesser. I might include other options in the future, like her painting The Frame.

The background of the canvas shows a texture that is supposed to be the watercolor texture. But it isn’t so satisfying, so I just used it as the background 😛

A failure: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page/

The second failure but better than the first one: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page-withSliderInsideP5js/ 

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
• When would you want to use classes, when IDs?
• Which limitations did you run into in the styling of your page?
• 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?
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
  • Name the files using the same standard. I encounter the problem when working on project B because I jump between _ and – when naming images lolll. This is very annoying;;
• When would you want to use classes, when IDs?
  • Class can be used for multiple elements, while Id can only be used for one. I think it is very helpful when editing the styles of elements. 
• Which limitations did you run into in the styling of your page?
  • I tried to create two slider bars in the html page, and I did achieve that, but I have been spending three days figuring out how to link them to my P5.js sketch, and I failed😭😭 this really stressed me out a lot. But at least in this process, I figured out the class and id thing. 
  • In the second link, I keep the slider bars in the P5.js sketch. I tried to use different variables to stick them in a set position, but I failed again😅. Considering I will not be using the slider bar in my final project, I decided to quit completely😰😰.
• 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?
  • Many text editors have auto mistake correction, so I don’t have to worry about the typos. And it’s much easier to just select the styles in text editors. (I always have the impulse to drag things on webpage to style them when editing the webpage.
  • Visual studio gives suggestion/ recommendations when writing HTML/ CSS page, which is very helpful when exploring different properties. 
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
  • I always forget to set the canvas as: let cnv = createCanvas(900,800);  cnv.parent(“canvasContainer”);

 

• I also struggled a lot with CSS, so I searched online for instructions. Here are some of my notes:
• Q: what does display: flex mean?
• A: display: flex is a CSS property that is used to create a flexible layout for HTML elements. It enables you to easily control the positioning and alignment of elements within a container by allowing you to specify how much space each element should take up within the container.
• When you set the display property of a container to flex, it transforms the container into a flex container. This means that the container’s child elements become flex items, and can be arranged and positioned using a set of flexbox properties.
• Some of the key properties that you can use to control the layout of flex items include:
• justify-content: controls the horizontal alignment of flex items within the container.
• align-items: controls the vertical alignment of flex items within the container.
• flex-direction: controls the direction of the main axis along which flex items are laid out.
• flex-wrap: controls whether flex items are allowed to wrap onto multiple lines if there is not enough space to fit them on a single line.
• flex-grow: controls the amount of space that a flex item should take up within the container, relative to the other flex items.
• Overall, display: flex provides a powerful and flexible way to create complex and responsive layouts using HTML and CSS.

 

• Q: what are the other property for display in css?
• A: Besides display: flex, there are several other values that can be used with the display property in CSS to control how an HTML element should be displayed on a webpage. Here are some of the most commonly used ones:
• display: block: This value makes the element a block-level element, which takes up the full width of its parent container and creates a new line after it.
• display: inline: This value makes the element an inline-level element, which allows it to flow within a line of text and does not create a new line.
• display: inline-block: This value makes the element an inline-level block container, which behaves like an inline element, but also allows for padding, margins, and setting a width and height.
• display: none: This value completely hides the element from the page, so it takes up no space and is not visible to users.
• display: table: This value makes the element behave like a table.
• display: table-cell: This value makes the element behave like a table cell.
• display: grid: This value turns the element into a grid container, which can be used to create complex layouts with multiple rows and columns.
• Each of these values has its own unique properties and behaviors, and can be used in different ways depending on the needs of your webpage layout.

 

• Q: what does position: relative mean?
• A: position: relative is a CSS property used to position an HTML element relative to its normal position within the document flow. When an element is set to position: relative, it remains within the normal document flow but can be shifted in any direction using the top, bottom, left, and right properties.

 

• Q:what is the difference between display and position?
• A:display and position are both CSS properties used to control the layout and positioning of HTML elements on a webpage, but they have different syntax and serve different purposes.
• display is used to control how an element should be displayed on the page, such as whether it should be a block-level element, an inline-level element, or a flex container. The display property takes a single value, such as block, inline, or flex.
• position, on the other hand, is used to control the position of an element on the page, such as whether it should be fixed in place, absolute, or relative to its parent container. The position property takes a value such as static, fixed, absolute, or relative.
• In summary, display controls the basic layout of an element, while position controls the positioning of an element within its layout.

 

In the early days of Internet, the term “New Media” describes digital publishing forms during the process of communication and distributing contents. It indicates the emergence of multimedia. New Media Art refers to the art generated by new technologies and concerned with the cultural, political and atheistic possibilities of these tools. For me as a reader reading this work 15 years later, I think the forms of New Media Art expands a lot with the development of technology. In my understanding, it becomes more interactive and more engaging. And artists definitely feel more comfortable using these tools. I really like the statement “by deploying these technologies for critical or experimental purposes, New Media artists redefine them as art media” in this work. I think New Media artists utilize the technologies in creative and innovative way, and are not limited by the technology. AI generated works can also be counted as New Media Art as well. But it also brings along the problem of intellectual property. 

Work before 2000:

Reference: https://philamuseum.org/collection/object/89204

In Brillo Boxes, three Brillo boxes are positioned in slightly different angles, but the name of the product can be easily read. Other famous pieces created by this artist, Andy Warhol includes the painting and the photograph Campbell’s Soup Cans. The forms of his art works include canvas painting, photography, video art, and filmmaking. In my understanding, Andy Warhol uses his art pieces as commentaries on mass production, commercialization and capitalism. His pieces pose the questions that can everyday, mundane items be art? How can they be art? Where is the boundary? How do we define the artistic value of a certain object?

 

 

 

 

 

Work after 2000: 

Reference: https://www.metmuseum.org/art/collection/search/284985 

Every Shot, Every Episode by Jennifer and Kevin McCoy is definitely a very new form of art to me. The video player and the screen are displayed in the briefcase, and the collection of labeled CDs are stored somewhere next to the briefcase. The McCoys use thousands of individual shots from Starsky & Hutch to create a fictitious world, and classified them based on the structural technique, stock character or action. In this way, they expose the repetitive patterns in making so-called successful films and TV shows. For audience to view the contents, they have to pickup one CD and put it in the CD player. In this sense, this art piece is very interactive. 

 

• The author mentions beneficial and “ill effects” of the Web. Describe two examples of these effects from your own experience on the web. 
  • The term “ill effects” reminds me of the concept of poor image. The illegal spread of photos, videos and media is made possible through the web, which hurts the intellectual property rights of the original creators.
  • Although I have never experienced cyber-bullying before, it is a very serious social issue and may even cause people to suicide. Cyber-bullying extents the time and space of the bully, which is very harmful. 
• In your own words, describe the concepts below, contrast them to one another and, if possible, share associations from your own experience on the web.
  • Universality and Isolation
    • Universality: This concept describe the accessibility of the web. The web is accessible to everyone at any time and in any where. The content types, language, quality, and the device used to access the information should not be the barrier to access the information. 
    • Isolation: Isolation refers to the idea that certain links can only work within specific websites. It may generate central information platform, thus hindering the accessibility of information. It is harmful to the universality of the Web. 
  • Open Standards and Closed Worlds
    • Open Standards: Standards that are free of charge, may have expert involved, widely acceptable, can be used without others’ permission. It allows for a diversity of options. 
    • Closed Worlds: Closed Worlds refers to not applying open standards. It creates a world with walls that information can’t be shared freely. 
  • The Web and the Internet
    • The Web: The Web is an application that runs on the Internet. 
    • The Internet: The Internet is a network that transports information among computers under the rulings of certain protocols. 
• The author talks about his visions for “the Web in the future”. More than 10 years after this text was published, identify the elements of his vision and discuss the ways in which they are (or aren’t) still present in today’s web. Feel free to also point out issues that have since arisen (e.g. the idea of “fake news”), and discuss how they might relate to the author’s vision.
  • Openness and Accessibility: The Web is quite widespread now. With electronic devices in hand and wifi, people can gain access to the information they are looking for. However, the degree of development in different areas is very uneven. In areas with poorer economic development, people enjoy less accessibility than those in well-developed areas. 
  • Personal Empowerment: Berners-Lee envisioned a world where users have the ability to control their data and privacy. Although there are policies and actions to enhance personal information privacy, it is still a very big issue in the Web. Hacker issues also pose threat on privacy. 
  • Collaboration and Creativity: The Web does improve the collaboration among people, companies and countries. But as countries are competing the technological development with each other, wars on the Internet, or tech development in general still exists and is deteriorating.