14
Concepts Covered: HTML, CSS, JavaScript & a cursory overview Of Server-side development Using PHP & MySQL Brielle Pearson IMS 422 Advanced Web Design

Miami Stories

Embed Size (px)

DESCRIPTION

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)

Citation preview

Page 1: Miami Stories

Concepts Covered:HTML, CSS, JavaScript & a cursory overview Of Server-side developmentUsing PHP & MySQL Brielle Pearson

IMS 422

Advanced Web Design

Page 2: Miami Stories

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

Skeumorphism

Page 3: Miami Stories

SITEMAP

Page 4: Miami Stories

WIREFRAMES

Page 5: Miami Stories

Big IdeaMiami 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.

Page 6: Miami Stories

The DeetzFind 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 StoriesChoosing 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.

Page 7: Miami Stories

Index.htmlThis 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.

Page 8: Miami Stories

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.

Page 9: Miami Stories
Page 10: Miami Stories

Find Stories Near You

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.

Page 11: Miami Stories
Page 12: Miami Stories
Page 13: Miami Stories
Page 14: Miami Stories

What I learnedIntroduction 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