My IMS 422 Advanced Web Design Project. Here I designed an application for Miami University students to write about their memories at Miami from specific locations. In this project I used HTML, CSS, Javascript, PHP, and MAMP (local server)
2. Skeumorphism
Project two is a website optimized for mobile devices. It will know
where the user is and present information relevant to the user
based on their location. Use the techniques taught about
Skeuomorphism to come up with a Big Idea for a mobile website
that leverages the user’s location to deliver content about
information in the Oxford area.
Your process should include:
•
•
•
•
•
•
-WireFrames w/ Feedback
- Mockups
- Build a Content Management System
- Use the location API
- Development &Track Process
- Final Phase- Edits & Finish
3.
4.
5. Big Idea
Miami Stories
My app is geared toward Miami Alumni who want to share their
experiences at Miami at a specific location. When Miami Alumni share
their stories, current Miami students can view the history of a certain
location by signing on to the app. This app would be perfect for
perspective freshman who want to get a “home” feeling when visiting the
campus. The tour guide can guide his tour to download the app and tap
the “Find Stories” button when they arrive at a new location. By using the
“Find Stories” element of the app, people can feel more connected to the
stories they are reading because the story happened right around where
they are.
This app will become a database of all the Miami memories that are
created throughout the years, and will be used as a way to connect
alumni, current students, and prospective students. Students can be
inspired by reading the stories previous students have written, and want to
share their own experiences with the community.
6. The Deetz
Find Stories Close To You
Choosing this option in the app will bring you to a loading page that says
“Locating Stories around you”. Once the location API has detected your
geographical location you will be brought to a page that lists the stories that
happened around your location. The app will show you how far you are from
the stories location and list the stories from closest to you first. When you
click a story you will be able to access a picture that shows the story or the
location, and then access the text of the story underneath. To return to the
homepage a back button is provided on the bottom left.
Read Stories
Choosing this option in the app will bring you to the entire database of
stories. This option will also contain a CMS that allows you to write your own
stories. Once you submit a story, it will be sent to an administrator to check
for appropriateness(me). I would also like to expand on this functionality by
incorporating a “search” element where you can search stories by year,
gender, type, and length.
7. Index.html
This index.html page is
the homepage of the
application that is
currently being run off of
local MAMP servers. To
make additional pages I
used MAMP’s PHP
MyAdmin to create
databases that would be
generated when called
on. This homepage
allows you to choose two
options to view stories.
8. Continued
Using the Instagram
API, I connected my
homepage’s picture
to the Miami
University Instagram
Photo Feed. Every
time a user
navigates back to the
homepage the feed
will refresh and a
new photo will be
shown.
9.
10. After choosing the “Find
Stories Close To You”
button you are brought to
a page that displays
stories that are near you
based on your location.
This functionality uses
the location API to detect
your geographical points
and match that up with
stories in the database
that are near.
11.
12.
13.
14. What I learned
Introduction to Server Side Programming
- Using a local server (MAMP) to run PHP code
- Creating databases in PHP MyAdmin to hold the content
- Connecting the databases to the application
-How to write PHP and use its functions
Using APIs
- location API
- Instagram API
Application Functionality
- Thinking about elements such as the back button
- Creating a target audience for the app so it’s functions can
meet the needs of its users
