Final Project Documentation Pablo Hernandez CSCI-N241 1 The Plan Site Purpose Since anime popularity is on the rise,the purpose for Weeabo Guide is to provide information towards animation from Japan. It's also important to understand how to support the creators. By creating a simplistic web page one can easily learn about animation from Japan, such as where to watch anime or read manga, without distracting ads in the way, like other websites tend to do. Needs Analysis These topics below will bring information to the newcomers of animation or just anybody wanting some info. ● Anime websites to watch anime ● Manga websites ● Anime creators ● Merchandising websites ● Recommended page ● News Goals 1. Provide resources to as where visitors can watch anime or read manga. 2. Educate those with little to no information on Japanese animation. 3. Help creator in the long run. Primary Audience 2 The primary audience for the website will be US teens such that watch late night Toonami on CN every Saturday, who are interested to learn more about the animation community from Japan, which consists of anime or manga. Secondary Audience The secondary audience for the website are those who already know what they're watching, but have no clue what to watch next. They will want to explore more anime to watch or manga to read. Competition The first website I looked was Nerdist: The Best Anime for Beginners to Watch ● It's just a list of animes ● It has a good template design ● Has anime that is either new or old ● It's like a blog The second website I looked was Kotaku: Anime Guide ● Lots of pictures ● Again just lists of anime nothing else ● Brief descriptions of anime ● ADS almost look like the anime themselves I saw most my competitors are just lists of anime,which it isn't bad, and aren't creator friendly. They show personal merchandise rather than legit merchandise for anime. They only sticked to one narrow list and nothing else. 3 Wire Frame Home Page 4 Websites Page 5 Recommendations Page 6 Merchandise Page 7 Site Map 8 Best Viewed Assumptions I believe the best website to see my website would be in Google Chrome Version 65.0.3325.181. I think a high speed internet would be best for my website to be loaded very fast. I think that screen size best fitted for my webpage would be anywhere from 13” and above. 9 Test Plan Validation According to W3C validator all pages are validated with no errors. According to CSS validator the style page is validated with no errors. All links are working properly. Flexibility Varying Window-Sizes Zooming in and out on the webpage, everything seems to enlarge and contract appropriately. When reducing the width of the window, at a point the navigation bar begins to produce another line for the navigation bar and stacking each other. Varying Font Sizes I used px the navigation bar , which was a mistake that I didn't knew until now, the navigation bar text size does not change. I will change the font size to em or percentage. Speed Could not test site with a modem. 10 Accessibility Some pages have the same title, so title cannot be used to distinguish pages Provide information about the general layout of a site using a site map or table of contents. Browser Independence Different Browsers I tested the site in Microsoft Edge, Chrome, and Mozilla FireFox. There wasn't much difference other than a little bit of difference in the size of the font and spacing. Printed Pages The pages did not print exactly the same, the background image was missing. JavaScript Off When I turned off the JavaScript everything was the same there wasn't any difference. Plugins Nothing appeared different. 11 Project Checklist Feature URL External Stylesheet https://cs.iupui.edu/~hernapab/n241/csspage/finalStyling.css Embedded Stylesheet https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/websites.ht ml#style CSS Style Comment https://cs.iupui.edu/~hernapab/n241/csspage/finalStyling.css Example of a style that https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/websites.ht overrides another ml#manga Header Comment https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm l Example of <table> https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/websites.ht ml#table Example of a https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm <blockquote> l#block Example of a <ol> list https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/recommen dations.html#list Example of a <ul> list https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm l#listul Example of a <dl> list https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/merchandi se.html#listdl Example of a PNG or GIF https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/recommen Image dations.html#gif Example of a JPG image https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm l#news Example of a <form> https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/merchandi se.html#sidebar Example of Typography https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm l#typo Example of a css-delivered https://cs.iupui.edu/~hernapab/n241/finalProject/finalWeb/homes.htm rollover effect l#navigation 12 Post-Project Analysis: I revised the merchandise page, I needed to add a form element which I forgot to include, so I had to consider how to place it with the page layout and what the form would be about. I learned a whole bunch of stuff. I learned how to do a css rollover effect. I realised that there’s a lot of code to write for just a website, I can’t imagine how much work, website designers put into the real world website pages that we use today. I had contingencies along the way, and had to work around them. I wanted to put the nav bar right next to the logo inside the header, I tried looking up how to online, some of the answers I got were too confusing, and decided to not go with those confusing solutions. I did manage to add the navigation bar inside the header with the picture, but I did not like the way it turn out, I couldn’t place it just the way I would of liked it. 13 Bibliography News Site Crystalyn Hodgkins, Black Clover Manga Gets Smartphone Game this Year https://www.animenewsnetwork.com/news/2018-04-22/black-clover-manga-gets-smartphone-ga me-this-year/.130681 Linked Websites http://www.animefreak.tv/ https://www1.gogoanime.se/ https://www1.gogoanime.se/ http://www.crunchyroll.com/ https://www.funimation.com/ https://www.399animeshop.com/? ​ https://www.animestuffstore.com/? ​ https://www.hottopic.com/search? ​ Pictures Pinterest, https://www.pinterest.com/pin/528187862523083523/ ​ Resource Wikipedia, https://www.wikipedia.org/ ​ 14 .