Now that went FAST! What a semester!

I just put up a quick survey under our assignments area, mind filling this out when you have a few minutes?

You have all been amazing students, and I want to thank each of you for the time we’ve shared this semester… I wish you the very best as you continue your journey through school and into your future careers.

The world of the web is constantly evolving every single moment, and my job is to prepare you the best I can, within only a few semesters together…

Our main focus has been split between two battling topics… Developing a website from complete scratch with HTML & CSS code, and also learning how to use today’s most popular web tool, called WordPress, that has taken over nearly 40% of the entire internet running nearly 100,000,000 different websites.

Both are extremely powerful, and knowing both in today’s world, make you extremely valuable. Knowing WordPress will allow you to fire up brand new websites overnight, and also step into the majority of existing client websites. Also knowing the basics of code, will allow you to advance into more web development and open endless doors into all areas of web and IT.

If I were going to leave you with one last comment before you are off on your own, remember that nearly anything you are trying to create may only be one Google Search away… Or AI! And if you are still having trouble finding it, break your task down into more basic pieces, and start with those searches first…

Keep in mind that I have also been offering Specialized Lab credits with students as well who want to continue education together in some capacity, where you can choose what you want to focus on with one specific goal in mind… This could be working on a live website for a client, building your own small business website, or even a portfolio for yourself as well. We can meet remotely and I can help keep guiding you into your next steps as you begin your career in Web Development and working with future clients.

You got this… Keep cranking. Keep learning. And Congratulations!

Have a great rest of your finals week, and CHEERS TO BEING DONE !!

Remote Week Participation: (D2L Discussions Area)
Please see our Remote Week Discussion Challenges & catch up on everything before the end of the semester.

Assignments/Homework: (D2L Assignments Area)
Please see our Assignments Area & catch up on everything before the end of the semester.

Great job everyone!

Dustin Grice
[email protected]
952-200-7732

WHAT IS API?

What is an API? In English, please.
https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/
https://www.howtogeek.com/343877/what-is-an-api/

Lecture Links:
https://www.creativebloq.com/web-design/apis-developers-need-know-121518469
https://rapidapi.com/collection/cool-apis

GAME & APP DEVELOPMENT

Learning how to code natively for iOS, Android, etc is a whole different world, however today there are many tools out there to help us build apps without knowing how to write this type of code…

—–Gaming can be as simple as writing HTML, CSS, and some Javascript!—–
https://www.w3schools.com/graphics/game_intro.asp

Learn CSS games the fun way!
https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
https://tutorialzine.com/2016/05/10-fun-browser-games-for-learning-web-development
Moving Targets: https://codepen.io/elad2412/pen/hBaqo
Coronavirus Invaders! https://codepen.io/elad2412/pen/wvabjXy
Super Mario! https://codepen.io/ashleynolan/pen/rpjHg

Sample CSS Games:
https://minocernota.com/articles/pure_css_game/
https://codepen.io/collection/AKkZro
https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5

Creating an App is much different… However exploring app development can lead you into creating games or any types of apps!

—–Native Apps vs Hybrid Apps—–
Native Apps – Built with Apple’s X Code, Java for Android, etc
Hybrid Apps – Built with HTML, CSS, & Javascript
https://blog.techmagic.co/native-vs-hybrid-apps/

Ionic Framework:
Ionic is a framework that essentially allows developers to create hybrid mobile apps using web technologies like HTML, CSS and JavaScript.
https://ionicframework.com/

React Native Framework:
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript.
https://reactnative.dev/

Also look into Adobe’s Phone Gap:
https://phonegap.com/
*This will then package your mobile site into an app to submit to the app stores! Sweet! This is an Adobe product as well:) Completely free. (There may be plugins developers charge for similar to WordPress)

—–Searching for New App Builders—–
https://www.google.com/search?q=app+builder&oq=app+builder&aqs=chrome..69i57j0l5.5103j0j7&sourceid=chrome&ie=UTF-8

Here are some that generally charge monthly to use:
https://appery.io/appbuilder/
http://www.apps-builder.com/product
https://appinstitute.com/features/

Build an App with a Drag & Drop Builder for Free to Start:
https://thunkable.com
*Quicker results/satisfaction… Even right here in class. Might be something to keep moving forward with for a project.

—–Companies Who Build Apps—–
https://buildfire.com/
https://builder.engineer.ai/home

—–What about Consoles? XBOX & PS4?—–
TONS of popular games are built with a program called Unity Video Game Engine I’ve always wanted to explore more of this myself, this would even bring you in a console gaming direction as well… Build your content once and deploy across all major AR, VR, mobile, desktop, … With Unity, you can target PS4, Xbox One, Nintendo Switch, and Google Stadia.
https://unity.com/

WHAT IS UX & UI?

What is UX Design? User Experience Design:
UX applies to anything that can be experienced—be it a website, a coffee machine, or a visit to the supermarket. The “user experience” part refers to the interaction between the user and a product or service. User experience design, then, considers all the different elements that shape this experience. A UX designer thinks about how the experience makes the user feel, and how easy it is for the user to accomplish their desired tasks. For example: How easy is the checkout process when shopping online? How easy is it for you to grip that vegetable peeler? Does your online banking app make it easy for you to manage your money? The ultimate purpose of UX design is to create easy, efficient, relevant, and all-round pleasant experiences for the user.

What is UI Design? User Interface Design:
Unlike UX, user interface design is a strictly digital term. A user interface is the point of interaction between the user and a digital device or product—like the touchscreen on your smartphone, or the touchpad you use to select what kind of coffee you want from the coffee machine. In relation to websites and apps, UI design considers the look, feel, and interactivity of the product. It’s all about making sure that the user interface of a product is as intuitive as possible, and that means carefully considering each and every visual, interactive element the user might encounter. A UI designer will think about icons and buttons, typography and color schemes, spacing, imagery, and responsive design.

Think about it like this:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” or “UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”

More about the Difference between UX and UI:
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look and function.

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI.”

How to become a UX Designer:
https://careerfoundry.com/en/blog/ux-design/how-to-become-a-ux-designer/

How to become a UI Designer:
https://careerfoundry.com/en/blog/ui-design/how-to-become-a-ui-designer/

Check out this online tool we will use today & follow along:
https://mockflow.com/

You will love this! It’s a blast, and an extremely useful tool that’ll come in handy down the road.

WHAT IS A DATABASE?

A database is a structured collection of data organized for efficient retrieval, storage, and management.

It serves as a central repository for storing and managing information in a way that facilitates easy access and manipulation.

A database management system (DBMS) is used to interact with the database, allowing users to create, update, retrieve, and manage data. MySQL is a popular open-source relational database management system. It is widely used for building and managing databases in various applications and websites. MySQL follows the relational model, employing tables with rows and columns to store and organize data, and it supports SQL (Structured Query Language) for querying and manipulating the data within the database.

WHAT IS PHP?

What is PHP?
PHP is an acronym for PHP: Hypertext Preprocessor
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
PHP is free to download and use
PHP is an amazing and popular language!

It is powerful enough to be at the core of the biggest blogging system on the web (WordPress)!
It is deep enough to run the largest social network (Facebook)!
It is also easy enough to be a beginner’s first server side language!

What is a PHP File?
PHP files can contain text, HTML, CSS, JavaScript, and PHP code
PHP code is executed on the server, and the result is returned to the browser as plain HTML
PHP files have extension .php

What Can PHP Do?
PHP can generate dynamic page content
PHP can create, open, read, write, delete, and close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your database
PHP can be used to control user-access
PHP can encrypt data

With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.

Why PHP?
PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP supports a wide range of databases
PHP is free. Download it from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side

What does PHP code look like?

PHP code can actually be added into an HTML page, by using the <?php ?> tags, as long as your file ends with .php and your server supports PHP.

<!DOCTYPE html>
<html>
<head>
    <title>Advanced PHP Example</title>
</head>
<body>

<?php
    // PHP code embedded within HTML
    $message = "Hello, World!";
    echo "<h1>$message</h1>";

    // Displaying current date and time
    $currentDateTime = date("Y-m-d H:i:s");
    echo "<p>Current Date and Time: $currentDateTime</p>";
?>

</body>
</html>

What is PHP used for?
https://alexwebdevelop.com/what-is-php-used-for/

W3 Schools PHP Tool:
https://www.w3schools.com/php/default.asp

Where can I learn more?

https://www.w3schools.com/php/php_intro.asp

Demo Part 1: Splitting Up HTML Code with PHP Includes

Demo Part 2: Custom PHP WordPress Plugin

PHP WordPress Plugin creation code:
https://www.dreamhost.com/blog/how-to-create-your-first-wordpress-plugin/

<?php
/**
* Plugin Name: Very First Plugin
* Plugin URI: https://www.yourwebsiteurl.com/
* Description: This is the very first plugin I ever created.
* Version: 1.0
* Author: Your Name Here
* Author URI: http://yourwebsiteurl.com/
**/
?>

This is a link to find the PHP WordPress Plugin Shortcode creation code:
https://torquemag.io/2017/06/custom-shortcode/

function my_shortcode_function() {
return 'Hello world!';
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );

What is a README.txt file?

https://www.mygreatlearning.com/blog/readme-file/

Introduction to Javascript

What is Javascript?
JavaScript is a powerful and versatile programming language that plays a crucial role in modern web development, enabling developers to create dynamic and interactive web applications.

More Simple Terms:
JavaScript is like a magic language that helps make websites do cool and interactive things. It’s like the superhero of the internet, making web pages fun and exciting for everyone!

1. Purpose:
   • Web Development: JavaScript is primarily used to add interactivity and dynamic behavior to web pages. It allows developers to manipulate the content of a webpage, handle user interactions, and create dynamic user interfaces.
   • Client-Side Scripting: JavaScript is executed on the client’s browser, enabling real-time updates and interactions without the need to reload the entire webpage.
2. Features:
   • Interactivity: JavaScript allows developers to create responsive and interactive user interfaces. It can handle events like button clicks, form submissions, and mouse movements.
   • Asynchronous Programming: JavaScript supports asynchronous programming, allowing tasks to be executed independently of the main program flow. This is essential for handling tasks such as fetching data from servers without blocking the user interface.
3. Syntax:
   • C-like: JavaScript’s syntax is influenced by the C programming language, making it familiar to developers from similar backgrounds.
   • Scripting Language: JavaScript is often referred to as a scripting language due to its dynamic typing, automatic memory management, and ease of use for quick development.
4. ECMAScript:
   • Standardization: JavaScript is based on the ECMAScript standard, which defines the rules for the language’s implementation. Modern browsers and environments follow ECMAScript specifications to maintain consistency in language features. (ECMAScript is a standardized scripting language specification that serves as the foundation for JavaScript and other scripting languages. It defines the rules and features that scripting languages must adhere to, ensuring consistency and interoperability across different environments and implementations.)
5. Frameworks and Libraries:
   • Node.js: Allows JavaScript to be used for server-side programming, extending its capabilities beyond the browser.
   • React, Angular, Vue: Front-end frameworks that facilitate the development of complex and interactive user interfaces.
   • Express: A popular back-end framework for building web applications using Node.js.
6. Integration:
   • HTML and CSS: JavaScript works seamlessly with HTML and CSS, forming the trio of technologies commonly used in web development (HTML for structure, CSS for styling, and JavaScript for behavior).
   • APIs: JavaScript can interact with various APIs (Application Programming Interfaces) to fetch and send data, enabling integration with third-party services.
7. Cross-browser Compatibility:
   • Client-Side Execution: As a client-side scripting language, JavaScript needs to be supported by web browsers. Modern browsers like Chrome, Firefox, Safari, and Edge have robust JavaScript engines.

More information via Mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Learning More from W3Schools

https://www.w3schools.com/js/default.asp

CodePen Examples

EMAIL CAMPAIGNS & AUTOMATIONS

Email campaigns and automations are powerful tools in the context of WordPress and WooCommerce for several reasons:

Customer Engagement: Email campaigns allow you to stay in touch with customers, keep them informed, and engage them with personalized content.

Customer Retention: Automations can be used to nurture existing customers, encourage repeat purchases, and build long-term relationships.

Targeted Marketing: Email campaigns enable precise targeting based on customer behavior, preferences, and purchase history.

Sales Boost: Well-timed email campaigns can promote product offers, discounts, and upsells, leading to increased sales and revenue.

Cart Abandonment Recovery: Automations can help recover abandoned carts by sending reminder emails, reducing lost sales.

Product Recommendations: Email campaigns can suggest related or complementary products, enhancing the shopping experience.

Feedback and Reviews: Automations can solicit feedback and encourage customers to leave reviews, boosting social proof and trust.

Segmentation: Emails can be segmented to reach different customer groups with tailored messages, increasing relevance and response rates.

Integration: Email marketing platforms can be integrated with WooCommerce for seamless data synchronization and management.

Analytics: Email campaign performance can be tracked and analyzed, providing insights for continuous improvement.

Personalization: Emails can be personalized with customer names and product recommendations, enhancing the customer experience.

Overall, email campaigns and automations are essential tools for WordPress and WooCommerce, empowering businesses to drive sales, retain customers, and enhance their marketing efforts with data-driven strategies.

EMAIL CAMPAIGN IDEAS

Email 1 – Announcement:

Subject: “Spring Sale is Here!”
Content: Announce the start of the spring sale, highlight key products, and offer a limited-time discount code for subscribers. Include visually appealing images and a clear call-to-action (CTA) button.

Email 2 – Product Showcase:
Subject: “Top Picks for Spring”
Content: Showcase a selection of popular spring products, provide brief descriptions, and emphasize the unique features of each item. Include customer reviews and ratings to build trust.

Email 3 – Flash Sale Alert:
Subject: “Last Chance for Spring Savings!”
Content: Create urgency by announcing a 24-hour flash sale with even higher discounts. Encourage immediate action with a countdown timer and a bold CTA.

Email 4 – Abandoned Cart Recovery:
Subject: “Did You Forget Something?”
Content: Send a reminder email to customers who abandoned their shopping carts. Display the items left in the cart, offer an additional incentive, and provide a direct link to complete the purchase.

Email 5 – Exclusive Offer:
Subject: “Spring VIP Offer for Subscribers”
Content: Reward loyal subscribers with an exclusive offer, such as early access to a new collection or an extra discount. Show appreciation for their support.

Email 6 – Spring Cleaning Tips:
Subject: “Refresh Your Space this Spring”
Content: Share valuable content related to spring cleaning, home organization, or product usage tips. Include links to related products in your store.

Email 7 – Thank You and Survey:
Subject: “Thank You for a Wonderful Spring!”
Content: Express gratitude to customers for their support during the spring sale. Encourage them to take a satisfaction survey, providing feedback and insights for future improvements.

Email 8 – Post-Sale Follow-Up:
Subject: “How Are You Enjoying Your Purchases?”
Content: Follow up with customers who made purchases during the spring sale. Ask for product reviews and provide post-sale support information.

Email 9 – Newsletter Subscription Invitation:
Subject: “Stay in the Loop – Subscribe Now!”
Content: Invite recipients to subscribe to the store’s newsletter for updates on future sales, new arrivals, and exclusive offers.

Remember to segment your email list to ensure the right content reaches the right audience.

AUTOMATION IDEAS

Here are some sample automations that can happen in the background for an e-commerce store, complementing the email campaign:

Cart Abandonment Workflow: When a customer abandons their cart, an automation can send a series of reminder emails with personalized product recommendations, enticing the customer to return and complete their purchase.

Upsell/Cross-Sell Suggestions: Based on a customer’s purchase history, automate product recommendations that appear on the website, suggesting related or complementary items during the shopping experience.

Inventory Alerts: Automations can trigger alerts to restock popular products or remove out-of-stock items from the website, ensuring a seamless shopping experience.

Personalized Product Recommendations: Automatically generate product recommendations on the homepage, product pages, or in email campaigns based on a customer’s browsing and purchase history.

Order Confirmation and Tracking: When a customer makes a purchase, automated order confirmation emails can include tracking information, ensuring transparency and keeping customers informed about their order’s progress.

Abandoned Wishlist Follow-Up: For customers who create wishlists but don’t make a purchase, an automation can send follow-up emails with discounts or incentives for wishlist items.

Review Requests: After a customer receives their order, an automation can send a request for a product review, contributing to social proof and building trust with potential customers.

Loyalty Program Updates: Automated notifications can inform customers about their loyalty program points, rewards, and special offers, encouraging repeat purchases.

Restock Notifications: Customers can opt-in to receive automated notifications when a previously out-of-stock product becomes available, increasing the chance of a purchase.

Birthday or Anniversary Offers: An automation can send personalized birthday or anniversary offers to customers, making them feel valued and encouraging them to shop.

Customer Feedback Surveys: Automatically trigger feedback surveys to collect insights and improve the shopping experience.

These background automations can enhance the customer journey, drive sales, and improve customer satisfaction without direct email communication. They create a more personalized and responsive shopping experience, increasing the likelihood of customer retention and loyalty.

Taking WordPress to another level of customization with Custom Post Types, Advanced Custom Fields, and Custom Post Grids

https://wordpress.org/plugins/post-grid/
https://wordpress.org/plugins/wp-ultimate-post-grid/
https://wordpress.org/plugins/content-views-query-and-display-post-page/

https://wordpress.org/plugins/custom-post-type-ui/
https://pluginize.com/plugins/custom-post-type-ui-extended/

Advanced Custom Fields (ACF®)

More:
https://athemes.com/collections/best-wordpress-grid-plugins/

—–Learning Website Caching for Improving Website Speed & Performance—–

Introduction to Website Performance and Caching your Website.

What is Caching:
https://winningwp.com/what-is-website-caching-and-why-is-it-so-important/

Website Performance Test Tool:
https://gtmetrix.com

WordPress Caching Plugins:
https://www.isitwp.com/best-wordpress-caching-plugins-compared/

—–More Powerful WordPress Plugins—–

Better Search Replace
A small plugin for running a search/replace on your WordPress database.

Coming Soon Page, Under Construction & Maintenance Mode by SeedProd
The #1 Coming Soon Page, Under Construction & Maintenance Mode plugin for WordPress.

Contact Form 7
Just another contact form plugin. Simple but flexible.

Contact Form CFDB7
Save and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin.

Duplicate Post
Clone posts and pages.

Email Log
Logs every email sent through WordPress

Google Analytics for WordPress by MonsterInsights
The best Google Analytics plugin for WordPress. See how visitors find and use your website, so you can keep them coming back.

Imsanity
Imsanity stops insanely huge image uploads

SG Optimizer
This plugin will link your WordPress application with all the performance optimizations provided by SiteGround

Simple Custom CSS and JS
Easily add Custom CSS or JS to your website with an awesome editor.

WordPress MU Domain Mapping
Map any blog on a WordPress website to another domain.

WP Security Audit Log
Identify WordPress security issues before they become a problem. Keep track of everything happening on your WordPress including WordPress users activity. Similar to Windows Event Log and Linux Syslog, WP Security Audit Log generates a security alert for everything that happens on your WordPress blogs and websites. Use the Audit Log Viewer included in the plugin to see all the security alerts.

Duplicating Websites?
https://wordpress.org/plugins/ns-cloner-site-copier/

—–Final Project Introduction—–

Starting our Final Project on this first day of class…

By the end of the semester we’ll be creating one professional WordPress website including the following:
-Minimum of 1 Product or Service For Sale
-Contact/Support Page or System
-Blog with Organized Categories
-Static Pages such as FAQ Page, About
-Email Newsletter Sign Up Form & Welcome Email & Discount Coupon Code
-Custom CSS Code
-Javascript Code

It is up to you to decide what type of website you’d like to build.

—–Learning about WordPress Multisite Networks!—–

If you’ve been working with WordPress for a while, there’s a chance you might have more than a few sites running. If your sites have a few things in common, you might wonder: is there a more efficient way to run them than managing them as single installs?

WordPress Multisite could be what you’re looking for. It lets you create a network on your WordPress installation, meaning that you can then run as many sites as you want in that network, all on one instance of WordPress. Think of this: WordPress.com is a great example of a WordPress Multisite installation running millions of sites.

What is a WordPress Multisite Network?
https://kinsta.com/blog/wordpress-multisite/

WordPress Multisite is a way of adding multiple sites to your WordPress installation. It’s a feature that you can add to either your existing or newly-created WordPress site. To activate WordPress Multisite, you add a few lines of code to a couple of files in your WordPress installation. Then you create sites in your network. The existing site stays there, with its URL unchanged, while the new sites are added on top.

Setting Up a WordPress Multisite Network:
https://www.wpbeginner.com/glossary/multisite/