Overview
“This project Using web technologies (HTML, CSS, and JavaScript) create a digital response. This digital response could tell a story, express your views, communicate your ideas or raise awareness about something you care about. It might be playful, provocative, or thought provoking. The digital response could be a web site, a web app, an interactive infographic, or a non-linear narrative. It is expected that your piece will be based on an adaptation of an existing example rather than creating one from scratch.”
5/3/2018
Introduction to HTML, CSS and Javascript
Creating a digital postcard in codepen :
We were given a template to edit to gain a better understanding of HTML and CSS.
Using X-Ray Googles to edit web pages:
12/03/18
Looking at codepen I really liked this interactive sketch, it reminded me of processing.
This sketch caught my attention because of the phone numbers. I think a number generated sketch could be very interesting.
https://codepen.io/demorite/full/PRPqej/
The visuals in this pen reminded me of stains. I automatically thought of making the colours brighter. It could be a great interactive process suggesting female struggles with their periods. It could be a statement against advertisement and how they portray pads and tampons as clean and use blue liquid to portray absorbency. This puts a kind of denial and shame on the this topic and it’s strange since most every woman experiences it.
I decided to play with this sketch and change some values.
I changed the background to white to show the contrast between the stain and a colour that represents something clean and pure. I made the colours brighter and more opaque. I’m still trying to figure out how to make the hue lean towards red/orange/pink very warm and bright colours.
14/03/18
Clue is a great application for mobile phones. It helps women track their periods, their ovulation and many other very important things. Clue keeps improving their information and accuracy they have information sourced by studies and many experts and doctors. It’s an easy way to learn about your body and track it. I have been using this app for over a year and it’s a great help. It helps track your period for three months ahead based on your previous data the more it knows about you the more accurate it will be.
I am considering creating a website which will generate I’m important facts and information about cycles, periods and general female sexual health. Many people have created a taboo around this topic and I would like to create a fun interactive page which will make it easy to learn and gain knowledge.
Clues reason for creating the website:
“We want to close the global knowledge gap about menstrual and reproductive health.”
I have found this pen which generated random quotes every time you press the button. I think this would be a great pen to edit I could put menstrual cycle facts gathered by clue inside the pen and then use css to create a desired and interesting layout.
Finding accurate sources and facts:
https://www.womenshealth.gov/menstrual-cycle
Considering which quotes I should use I decided to make sure I am using accurate information from a reliable website which is why I choose the one linked above.
I want to make the website encouraging which is why after using a very long quote for my example,
“Menstruation is a woman’s monthly bleeding, often called your “period.” When you menstruate, your body discards the monthly buildup of the lining of your uterus (womb). Menstrual blood and tissue flow from your uterus through the small opening in your cervix and pass out of your body through your vagina.During the monthly menstrual cycle, the uterus lining builds up to prepare for pregnancy. If you do not get pregnant, estrogen and progesterone hormone levels begin falling. Very low levels of estrogen and progesterone tell your body to begin menstruation.”
I knew many people wouldn’t want to read facts in this format which is why I decided to take informative snippets from each informative passage like this one:
“Ovulation is when the ovary releases an egg so it can be fertilized by a sperm in order to make a baby.”
http://www.periodgame.com/#intro
My statement of intention
In this project I wanted to tackle an issue some people feel uncomfortable about causing it to become a taboo. Periods are experienced by women, some as young as 8 years old, on average of 40 years. On average a period cycle lasts 28 days, this varies for woman as every cycle is unique, meaning it happens once a month for an average of 4-8 days. This is uncomfortable, it can mess with hormones and feelings, it can even be painful. In my own experience many people, men as well as woman, usually teenagers don’t know very much about this topic because they maybe heard about it in one biology lesson and forgot anything that they were taught, even if they remember there are a lot of important facts that biology teachers choose not to mention. This leads to feelings of embarrassment and shame in women and girls over something that is uncontrollable to them and is very natural. I remember in primary school a period being the biggest secret, we’d make up our own code names just so the boys wouldn’t know what we were talking about. Because of my own experience and interactions with this issue I done some research and looked into an app that I personally use called ‘Clue’. Once I read some articles with a lot of useful information I found a quote for why they decided to create this helpful website in the first place “We want to close the global knowledge gap about menstrual and reproductive health.” It’s so simple yet so important. The simplicity of this quote inspired my layout and the length of my facts, if something is simple and easy to follow it encourages people to engage which is the aim. In my research I found a period board game for kids who are about to enter puberty. I thought this was a great move in the right direction. Their tag line was “We’re changing the way we talk about periods. Now it’s time to change the way we teach them.” This is also what my concept is considering, I want people to be able to access this knowledge in a fun and playful way. I believe ignorance is a huge problem and even though to some people period talk seems like the least important thing to be considering, I believe that once ignorance is taken out of the equation it can have a bigger impact on feminism and women’s rights.
Final layout
https://codepen.io/martazofiapalacz1999/full/RMRVbe/
The html I choose to work with turned out to be very difficult and complicated. I didn’t manage to make everything the way I hoped but I learned a lot and managed to change a lot. I tried a few different pictures and managed to resize them. The twitter webpage button was coded in a very strange way and it was difficult to even move where I wanted it. I managed to add an information like successfully change it’s colour and position it is linked to clue. I decided to keep the interface very simple and minimal like the quotes because my idea was to create something about woman’s health which isn’t scary and i’t approachable. I changed the colours in the webpage to shades of red (fun fact depending on the flow and day of your period the blood changes colour) this way each time you read a new fact a new colour pops up.
Ideas for improvement and change
If I was to do this again I might consider a 2.0 version like a 28 day cycle explaining what’s happening at each stage of the menstrual cycle, what emotions occur and other important facts. This could be a visual circle and each stage could become bigger once your mouse hovers it. I could also have made a game based on the kids game linked earlier or create my own.
Testing
Mobile Phone
Since the website was designed on codepen I sent it to myself and it works however it’s not published so the image didn’t show, the link works and so does the button it’s only the image that doesn’t show up.
Safari
All links and buttons work the way I planned.
Firefox
All links and buttons worked on Firefox however the image was slightly overlapping the twitter button.
Conclusion
Overall I really enjoyed working with the concept I chose and looking at examples of other’s work and researching my topic. It was frustrating to change code produced by someone else however I managed to solve most problems I encountered. I like the fact the website lets you publish the chosen fact straight to twitter, it’s an easy way to inform people and spread knowledge.
Marta Zofia Palacz 