[ARCHIVED] Assignment 3 - Field Guide

[periode]

Make your application portable by (1) being designed for mobile and (2) including a map component. You should use media-queries to make your webpage designed for mobile, and you should have one component that includes a map and connects your topic to a specific physical location (in Berlin or elsewhere).

Submit your google drive link and a short paragraph commenting on what you did, and what you could develop further.

[chaerin-d]

In this assignment, I added a map on each page which has a pin mark of the locations of the restaurants available to try out SSAM in Berlin. Now the app is available in different sizes and I used mobile size for the screen recording. In the future, I would like to develop getting reviews in the app from the people who visited the restaurant and did they liked it or not to have more engagement for the visitors.

Link to Google Drive: https://drive.google.com/drive/folders/1bULxHWrDkeFoZrTiXxUCYVUjEdCw7usU?usp=share_link

[chaerin-d]

https://drive.google.com/drive/folders/1bULxHWrDkeFoZrTiXxUCYVUjEdCw7usU?usp=drive_link

[periode]

Grade: 93 (A-)

The website looks mostly good on mobile, with some margins that could be increased, but the last page is very unreadable! It could have been a good approach to resize the gif and soundcloud embed in order to make it all fit on the screen.

[Caythian]

https://drive.google.com/drive/folders/1RcbvV50XP4-UTrwpxHgxbb9rcLVyRw1y?usp=sharing
In this assignment, I added a new map component and @media in css. file. Meanwhile I also adopted some of the suggestions professor gave in exercise 1- that is, I changed the menu icon and added a paper flipping sound effect to the menu. The process of changing format is tedious, but truly rewarding when seeing the final result.

[periode]

Grade: 99 (A)

The website looks great both on website and mobile, and the addition of the map makes the visitor want to go there! It could have been interesting to add some photos of the studio in the popup.

[liunikolai]

In this assignment, I added a map to the Related Artists page marking the location of all the artists and bands mentioned on the website to the Related Artists page. I also adjusted the layout to fit smaller screens using media queries. I would try to adjust the size of the images in the media queries if I had more time, as I have yet to figure out how to adjust components that are not in the CSS.

https://drive.google.com/drive/folders/167B3O6ck0ieK5bEEDNgzWMYrQBklJqKi?usp=sharing

[periode]

Grade: 95 (A-)

The website looks almost great on mobile, especially given the unique layout it has on desktop. Some readability issues could be solved by giving a background color to thext, and making sure that the text has a z-index higher than the images. Additionally, the fact that the menu opens on hover, combined with the fact that there is no such thing as hover on mobile, makes it impossible to navigate between pages!

[lizalmonds]

I optimized the layout the format for mobile screens using media queries. I had a hard time with formatting as I find flex-box difficult. I found formatting issues with the text on the second page as well as noticing components would get cut off. If I had more time, I would spend more time troubleshooting this issues. I implemented a map showing the locations of centers where undelivered mail goes to.

https://drive.google.com/drive/folders/1aQOfoB0_UtHZ7-DsdIJ5QqvKFvEb75w4?usp=sharing

[periode]

Grade: 99 (A)

This looks great, is to the point, playful and informative! The research on the map is very relevant, and one would only wish there would be a bit more to read (e.g. an example of an abandoned letter?), or links towards further resources

[RobbinHezhengWu]

For this project, I chose to present very different content than before in order to better incorporate the map feature. I picked some memorable and visit-able Berlin Architectures and marked them on the map of the website. A popup with detailed information about each building appears when it is clicked on. In addition, the whole site can be rendered perfectly on a mobile screen, and I made the header's list no longer render on iPhone using @media.
However, the site may feel inadequate because all the content is hidden inside the popups. Secondly, instead of basing the rendering on the content of the first two assignments, I chose a completely new theme.

https://drive.google.com/drive/folders/1aNpavXnRJ1xEywOLIhoWHanLZruIlSlg?usp=drive_link

[periode]

Grade: 99 (A)

The website looks great! You did a good job at focusing on the map, making the logos and art direction and making the menu responsive to the mobile view. However, it would have been nice to have at least one About page to give context about what the visitor is looking at, and how the different locations were chosen.

[karldib]

Using Media statements, I made my layout compatible with mobile screens. Moreover, I added maps with preset coordinates of some of the pictures that I took, however I had trouble finding the coordinates of all of them, so I decided to stick to those that were taken in landmarks that I can look up coordinates for. I also added context to the images I picked by adding some text next to the maps. I struggled to get the maps right where I wanted them but I kept trying and ended up with a pretty decent result that I'm happy with.

https://drive.google.com/drive/folders/1IwoYWZtIkxEByJpLR638HM2GzMEHT7_l?usp=sharing

[periode]

Grade: 90 (A-)

The website's main page adapts quite well to the mobile view, but the map sections are unreadable due to an overlap of the map and of the text. Furthermore, there's not way to know which image can be clicked or not and why, which makes for quite a confusing experience.

[jacksonkkingg]

I added a page about how techno was born in a Detroit which includes the map, and my website was already mobile compatible because of how centered it is-- but, besides that I used the media query to change the dimensions of the map when one is on mobile so it looks better. To develop my website more, I would make it look more aesthetically pleasing, as it is very barebones.

https://drive.google.com/drive/folders/1dsi1ubh4jpphHeY3CZ0DX-8obqzQqzju?usp=drive_link

[periode]

Grade: 95 (A)

The website is very readable on mobile, and the map adapts quite well to the smaller size. However, the marker you decided is a bit too generic to have an informative value: maybe you could have pointed to the Belleville highschool, where the "Belleville Three" went, or to the factories of Roland where the TR909 was manufactured.

[bhornik]

In this version I was able to build out my website with the proper CSS styling, added a map that shows the user where to listen to Samba Rock in Berlin, and is formatted for mobile. If I had more time I would fix my mobile styling by figuring out how to display the videos properly. I also would add more content overall, giving more context about the genre and a few more artist pages.

https://drive.google.com/drive/folders/1zBBB_xeFlTbnvKOhaAhI93EfOz3qOiEr?usp=sharing

[periode]

Grade: 93 (A-)

The videos and content of the website are very nicely navigable on desktop, but the layout breaks on mobile, and the map even disappears (to make it appear, you need to set the position to "absolute" when the screen width is small enough)! For the navigation, you could use display: flex, and set flex-direction: row for desktop and flex-direction: column for mobile.

[Ambraaaliu]

In this assignment, I added a Leaflet map with the Chinese Culture Center in Berlin and Guqin Learning School in Berlin to the web. With the professor's suggestion, I redone the construction and fingering part with an English guide that would to better for every viewer. Also, because my Web is a continuous design I added a header menu that will help viewers choose the information more directly. I'm still adjusting the layout to adapt to the mobile version.

Google Drive link: https://drive.google.com/drive/folders/1HfHOCkC7cH7s-sEGYZ9JAQZu7iwCunK7?usp=sharing

[periode]

Grade: 93 (A-)

The content of the app is quite good, but it's almost impossible to read in mobile view! You should review the examples for media query and change the style of your images and text boxes such that they align vertically

[zbyiii]

https://drive.google.com/drive/folders/1uo5vzVgd21Aq6AkPee-5Sa8VrekrGwBg?usp=drive_link
I added a map to show the location of nushu museum in Hunan province, China. I used media-queries to change the style and make it more suitable for smaller screen. I changed the font-size and margin for the mobile version, which makes reading the text easier. For further improvement, I would like to add some interactive element to make it more interesting to explore.

[periode]

Grade: 94 (A-)

The map you added looks very nice, but there is only one marker, and the popup still has the placeholder text! It would have been better to add the legend of the map as the content of the popup, and possibly think about other places that are relevant to nüshu (are there specific locations where archives from nüshu were found?)

[alkashiwag]

https://drive.google.com/file/d/1UM8SwEAn8Cz7DTdECEjeGDGnuJ-zKOJj/view?usp=drive_link
I added a map to showcase basketball courts around berlin where you may be able to get in contact with other fans. From my experience it's easy to meet other basketball fans. I'm still struggling to create multiple webpages.