Author: Anna Arsiriy

Final Presentation: Developing a Personal Brand

Anna ArsiriyART 415 Web Design

You can see Anna’s final presentation here.

Quick overview

Nowadays, all artists have a lot to worry about. We have to make our work and start building our career at the same time. We work hard, but we don’t have that much of a business and marketing strategy knowledge. Marketing is usually the last thing we want to spend our time doing. But it’s a crucial part in our practice.

Your name becomes your brand. Your personal brand is a blend of your work, your artistic drive and attitude with a sound understanding of your professional goals. The more specific you are about your work and who will enjoy it, the more targeted and genuine your marketing will be. And then all of it gets translated into your portfolio website, social media networking, etc.

 

 

 

RESTful API

Anna ArsiriyART 415 Web Design

API  (application programming interface) is a set of tools by which one application interacts with another. Here is a simple diagram provided by MLSDev which explain what REST API is.

A simple definition of RESTful API can easily explain the notion. REST is an architectural style, and RESTful is the interpretation of it. That is, if your back-end server has REST API and you make client-side requests (from a website/application) to this API, then your client is RESTful.

REST API stands for REpresentational State Transfer Application Programming Interface. It is an architectural style for distributed hypermedia systems. That’s how it was described when it was presented in 2000 by Roy Fielding.

Ok, we all know what hyperlink is. But what is these “distributed hypermedia systems”? Hypermedia is pretty much everything we see on the Internet including hyperlinks and hypertext which means more than just text is capable of being hyperlinked, such as graphics, videos, and music files.  Simply put, the Web is a system of hyperlinked hypermedia. In other words, “distributed hypermedia systems” is a general term and the World Wide Web is an example of it. Smartbear.com explains REST API through the following:

Many (but not all) APIs relying heavily on HTTP can be considered “RESTful,” and REST is typically used as an alternative style in which to read and write Web services and APIs, alongside programming standards such as SOAP (Simple Object Access Protocol), WSDL (Web Services Description Language), and RPC (Remote Procedure Call). Most significantly, because REST APIs almost always use HTTP syntax—including the verbs GET, PUT, POST, etc.—they are widely considered to be the definitive form of hypermedia APIs.

According to restfulapi.net,

RESTful APIs enable you to develop any kind of web application having all possible CRUD (create, retrieve, update, delete) operations. REST guidelines suggest using a specific HTTP method on a specific type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged).

But put more simply, in terms of its use in RESTful APIs, CRUD is the standardized use of HTTP Action Verbs. For each of these functions, there’s something that we need to check whether it has been returned from the server. The response includes whether it was successful or not and potentially some other information. Usually, the response is simply either success or failure.

 

WORK CITED

“A Beginner’s Tutorial for Understanding RESTful API.” Mlsdev.com, mlsdev.com/blog/81-a-beginner-s-tutorial-for-understanding-restful-api.

“Hypertext Transfer Protocol.” Wikipedia, Wikimedia Foundation, 10 Feb. 2019, en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods.

“What Is Hypermedia?” SmartBear.com, smartbear.com/learn/api-design/what-is-hypermedia/.

“REST.” REST API Tutorial, restfulapi.net/http-methods/#get.

The following Lynda Tutorials were super helpful as well: iOS App Development:RESTful Web Services.

My Research about SEO Visibility and Google Search Console

Anna ArsiriyART 415 Web Design

SEO or Search Engine Optimization is a worldwide system of signals every web designer needs to know about. I like how Search Engine Land explains the principles of SEO through The Periodic Table shown below:

 

It might look complicated at first glance. Well… It is complicated. At least before you get to know how it works.

In brief, it is a science of the Internet which is making sure that your content generates the right type of signals.  Search systems as Google and Bing are the main “liberians” of the Internet. They collect data from all over the Internet and help web users to find and collect what they are looking for. Every search engine has an algorithm turning the info into useful search results. As a web designer, I should notice that everything (words, titles, links) matters on the website because it will help search engines to find my site faster.

According to MOZ,

Here’s how it works: Google (or any search engine you’re using) has a crawler that goes out and gathers information about all the content they can find on the Internet. The crawlers bring all those 1s and 0s back to the search engine to build an index. That index is then fed through an algorithm that tries to match all that data with your query.

…

That’s all the SE (search engine) of SEO.

The O part of SEO—optimization—is where the people who write all that content and put it on their sites are gussying that content and those sites up so search engines will be able to understand what they’re seeing, and the users who arrive via search will like what they see.

Optimization can take many forms. It’s everything from making sure the title tags and meta descriptions are both informative and the right length to pointing internal links at pages you’re proud of.

 

Now, there are many powerful SEO tools in today’s marketing world. However, most of them are not free since too many websites want to be “on top of everything”. When I did my research about SEO the most important tool I learned about is Google Search Console.  This free tool provided by Google is a great way to gain insights about your site in one main platform. Again, according to Search Engine Land,

Google Search Console (formerly Google Webmaster Tools) is a free web-based SEO tool for webmasters to track both the indexing and crawling stats from Googlebot while also providing metrics to help optimize a website for organic visibility. This SEO tool is useful to monitor metrics and discover new insights to help increase your organic footprint.

Since I build my website on WP Woocommerce, I asked WP support team about Google Search Console and they were very helpful by providing the following link with the Instruction on How To Verify Your Site in Order to Use the Webmaster Tools. So I was able to learn how to create meta tags which look similar to this:

<meta name=”google-site-verification” content=”occl3MguMz-o6khAFT_q9KOz45scp7F-bBQLCBU” />

and how to add them to my homepage.

Luckily, WP takes care of indexing my site and all of the necessary SEO for me without me having to do anything at all except for the steps I mentioned above.

The same instructions were applied with verification my site through Bing, Yandex and Pinterest. Still need to learn how to verify through Yahoo.

 

 

WORK CITED

“The Periodic Table of SEO Success Factors.” Search Engine Land, Search Engine Land, searchengineland.com/seotable.

“What Is SEO? SEO Meaning + Definition.” Moz, Moz, 21 Jan. 2019, moz.com/learn/seo/what-is-seo.

Schwartz, Barry, et al. “The SEO’s Guide to Google Search Console.” Search Engine Land, Search Engine Land, searchengineland.com/library/google/google-search-console.

“Webmaster Tools.” Support, 17 Jan. 2019, en.support.wordpress.com/webmaster-tools/#google-search-console.

Thesis Statement (Web Design E-Commerce Project)

Anna ArsiriyART 415 Web Design

Nowadays, professional web design is not only the process of technical creation of a website, but it also involves aspects of graphic design, branding, functionality, usability, and engaging with “the client”. E-commerce is one of the most exceptional challenges of web design. When it comes to making effective e-commerce web design, there are many other complex and super important things to keep in mind. While user friendliness and simplicity are still the keys, web designer should always keep in mind the following aspects:

  • SEO and search marketing, as well as some basics of Social Media Marketing
  • Easily manageable CMS (content-management system)
  • Powerful Marketing Suite (running promos, using coupon codes, etc.)
  • Mobile Responsive Design (sales across all devices)

So, it’s not all just about design. Since development of any enterprise website is a large-scale project which presents its own challenges, often web designers should collaborate with/subcontract other developers. From “the client” (those who own the shop) to the server and from the server to “the customer” (those who buy from the shop), web designer is the main bridge between all those things in e-commerce.

Intro => Semiotic Square

Anna ArsiriyART 415 Web Design

Intro

This final semester, I decided to build a web site based on a project I’ve worked on during my break. Over the break, I created an online store for selling winter baby clothing – which works just like Amazon.

You can see my beautiful brand-new shop HERE! 🙂

This is a real e-commerce shop for purchasing stuff with your credit card or PayPal account and stuff will be shipped to the customer anywhere in the world.

Now. I’m about to build an e-commerce web site for a real shop (“the client”) on WP WooCommerce base. As of today, I am already collaborating with people (“the client”) who own a physical store and desire to sell their stuff virtually as well.

The biggest issue that comes with this project is how to sync inventory of the physical store with the inventory of the e-shop. I need to write a code which will be able to connect their Springboard Retail Point of Sale database inventory with e-commerce website I want to create. In other words, we would need to develop a program which will be using their API to connect two platforms (WooCommerce and Springboard Retail POS). This is something that I’m hoping to get help with from IT people.

 

Closer to the Point

First, as I already noticed last year, Semiotic square is a graphic representation that leads to the correct thesis statement. Second, I want to emphasize that one of the main goals this semester will be to learn and understand the following terms and concepts:

  • Application Programming Interface (API)
  • Rest API
  • HTTP Methods for RESTful services
  • REST vs JSON
  • OAuth, OAuth Flow
  • Protocols, Responses from servers, Versioning

…which leads me to representing E-commerce as a complex system of Data-Server-Web-Client interrelations based off of the semiotic square shown below.

Final Presentation: Final Rendered Walkthrough Animation and Still Lives

Anna ArsiriyART 415 Interior Design

I completed an interior design of a 2-story house which is as much functional and convenient, as aesthetically pleasing and also represents optimization of space. I created floor plans of an entire house in AutoCAD 2017, made sketches of different rooms in SketchUp Pro 2018, and modeled the final product of an interior space of the kitchen/dining/living area in 3Ds Max 2018.

The project took an entire semester. Not only I learned how to use these multiple softwares, but also learned a lot about interior design concepts in general. The project is described step-by-step in my previous blog posts.

The RAM sequence created and saved through 3Ds Max actually was not of the best quality so I uploaded an image sequence in Premier Pro and added the title text. The final rendered animation is presented in YouTube and takes 28 seconds. Please make sure you set up a max video quality of 720p. Otherwise, by default YouTube makes it a very poor quality animation.

 

These are the still lives (photo realistic renderings) of my final scene which present different lighting (also rendered at different quality and using different render engines).

  1. Daylight. Autodesk Raytracer. 3000 x 2000 px

2. Night time. Autodesk Raytracer. Some lights are on. 1280 × 720 px

3. Night time. Autodesk Raytracer. All lights are on. 3000 x 2000 px

4. Draft quality night time image. Quicksilver Hardware Renderer. 256 iterations. 1920 × 1080 px

 

Creating Architectural Walkthrough of My Scene: Final Animation Rendering Process

Anna ArsiriyART 415 Interior Design

To render an animation I saved out to an image sequence. I was still using ART renderer. Everything was done through Render Setup Menu. The main things that needed my attention are encircled in red in the following screenshot.

I created 250 individual JPEG files, one for each frame – from …/walkthrough_0001.jpeg through …/walkthrough_0250.jpeg.

Since I set the time for each frame = 10 min (and ~25dB quality), I could render 6 frames per hour. So the entire process took over 40 hours. I was praying my computer wouldn’t die.

Then, I played an image sequence using RAM player where I loaded those 250 frames which allowed me to play them back in real time.