This lesson will guide you through laying out the UI for the HTML template for the logged in state of the MyProfiles web app. The API backend using Firebase Functions won't be covered here.
Using UI Libraries
In the previous lesson we created the template file that we'll use and edit for the Index file for the MyProfiles webapp. Our app will embed into the home page. This app will need navigation. We will use the single page app structure to achieve the layout.
MyProfiles uses W3.CSS for its CSS library, and we will also use font awesome fonts for quick and easy icons. Both libraries load via CDN. W3.CSS has many features that meet most of our design needs. This will make our footprint small and page load speeds faster. I am assuming you've played with the library at the W3Schools site to familiarize yourself with it last week.
What is the Single Page App Structure?
What is the Single Page App Structure?
Single page app structing is when you keep the user on the same page but dynamically change the user's view. The view is the content the user sees or interacts with. The view changes based on the users' actions or some other trigger. This type of format allows you to control the user's focus more and help keep things in a better flow for greater productivity.
We will have one code file but multiple view files. View files are HTML template files. Our views will contain some inline code called Scriptlets. Find more on scriptlets at:
https://developers.google.com/apps-script/guides/html/templates#:~:text=Apps%20Script%20templates
It can be cumbersome to have to remember all the menus, sub menus and where things are in a menu system for an app. A single page design is supposed to keep things quickly accessible and in the face of the user. Most of the features are fast for the user to get to. You do not load pages on top of pages or popups on top of popups.
You should not have more than one level of pages or popups from the top page. It isn't user friendly to have three popups open at once in order to achieve a feature. This can get the user lost and losing focus on their work. Most users have experienced this kind of frustrating design.
With single page design we can easily use a go back and go forward navigator to keep the user focused in getting work down. We can also use a tabbed layout to keep users focused on the task at hand. For example, many use a tabbed layout to get the user to configure their account in one space without leaving to go elsewhere. The tabbed layout allows them to see the sections for configuring and know if they need to update any section. In one view they can recall configuration tasks and get them done without leaving the screen.
We use ajax loading to control the use of server resources. Understanding how your users use your software is important in that you can design for the features they use most to be in the forefront and those they barely use accessible but not taking up unused space.
Consider the home page prime real estate. Every portion of the screen is important and need to be utilized using the most advantageous design based on user's usability of the web app.
Most web apps have enough commonality that you can use some similar app's statistical data on user useability to help make your single web page design more productive for the user.
Most web apps have enough commonality that you can use some similar app's statistical data on user useability to help make your single web page design more productive for the user.
I asked CoPilot to give examples of one page design for app scripts and the results are located at:
This lesson will focus on the main layout HTML template file. The JavaScript and other templates views will not be touched yet. We will build up to that.
Layout. The Cleaner the Better
In today's world people like to have things in their face and quick to get to and get done. They are usually multitasking on many items and want things to work quickly. A clean space with few options at once is more preferred.
You can design to meet this need. Our My Profiles web app will log uses in and then direct them to the Admin Area. If the user doesn't have an account, then they will get registered and then directed to the admin area. This used to be achieved with a cumbersome user interface that involved multiple screens or pages.
Our design will show a login button. When the user clicks the button a drop down with Social Logon buttons will appear. The user clicks the social network they want to log in with and we take care of seeing if they are a returning or new user and direct them accordingly.
Before I forget let me note that the social network log-in is used only because we are doing public data records. Iti s secure but there have been problems with super sensitive data getting misused by some developers. This led to many users not trusting social log in so much. In line with that I only used it for apps that will have mostly public data and doesn't need highly sensitive data like money info.
All of the Profile Search Cards will contain data that is public.
App Build Order
First, we will build the layout for the logged in state of the app. The reasoning for this is that this is where the bulk of the heavy lifting of functionality exist. With a single page web app, you can work to design for the screen where the most functions are required to screens where the least functions are required.
Our Logged-out state, the screens when the user isn't logged into an account, is very simple. The search box and the log in button are the only functions where a user can perform something on the screen, everything else is just display text and images.
The logged in state will contain a content area that different views load into via JavaScript. for now, just the CSS layout of the main load areas. We will have lesson for each view and then tie everything together with the JavaScript.
Code View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Public API Data</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css" />
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<!-- STATIC TOP CONTENT -->
<div class="w3-top w3-margin-bottom">
<!-- TOP NAV BAR NAVIGATION -->
<div class="w3-row-padding w3-theme-d2 w3-xlarge">
<div class="w3-bar">
<div class="w3-quarter">
<h3 class="w3-bar-item">My Profiles</h3>
</div>
<div class="w3-half">
<input type="text"
class="w3-bar-item w3-theme-14 w3-border-0 w3-padding"
value="Enter person name, business name or words" style="width:100%">
</div>
<div class="w3-quarter">
<a href="#" class="w3-bar-item w3-button w3-hover-red w3-left">
<i class="fa fa-search"></i>
</a>
<div class="w3-dropdown-hover w3-right">
<button class="w3-button w3-theme-d5 w3-hover-red">
<img class="w3-hide-small w3-circle" src="img_avtar.jpg" style="height:40px;" />
</button>
<div class="w3-dropdown-content w3-padding-large w3-theme-d5 w3-bar-block w3-border w3-card-4"
style="width:225px; right:20px">
<p>
<button class="w3-button w3-block w3-medium w3-round-large w3-theme-l4 w3-hover-red">
Edit Account
</button>
</p>
<p>
<button class="w3-button w3-block w3-medium w3-round-large w3-theme-l4 w3-hover-red">
Edit Search Card
</button>
</p>
<p>
<button
class="w3-button w3-block w3-medium w3-round-large w3-theme-l4 w3-hover-red">
View Search Stats
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- TOP NAV BAR PAGE TITLE -->
<div class="w3-container w3-theme-d1">
<p>Public API Data: Data from a free public API (JSON Placeholder) is displayed below. Up to 50 records are shown.</p>
</div>
</div>
<!-- Adding extra padding for display -->
<div class="w3-row w3-padding-64 w3-theme"> </div>
<!-- DYNAMIC MAIN CONTENT -->
<!-- This is where the content will change.
For now, some of the API testing is going to display temporarily.
-->
<div id="content" class="w3-row-padding w3-theme w3-animate-zoom">
<div class="w3-container">
Mock Profile Search Card records will get created and replace this data.
A search template will contain the layout and code. This area will have a placeholder
that will load the Home page html once it is completed. It could be a place to
display ads or announcements. That all will get covered in later lessons.
For now, this temporary API display will show until it is replaced.
Scriptlets are the code lines with the <? ?> text. IT loops through the results
that the Api sent in Json format and display it as blue cards.
-->
<div class="w3-grid"
style="grid-template-columns:auto auto auto auto;column-gap:8px;row-gap:12px">
<? for (var i = 0; i < data.length; i++) { ?>
<div class="w3-card w3-padding w3-blue">
<img class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0"
src="/img/erin-lindford.jpg" alt="" />
<div class="space-y-2 text-center sm:text-left">
<div class="space-y-0.5">
<p class="text-lg font-semibold text-black">ID:
<?= data[i].id ?>
</p>
<p class="font-medium text-gray-500">Title:
<?= data[i].title ?>
</p>
<p class="font-medium text-gray-500">Completed:
<?= data[i].completed ?>
</p>
</div>
<!-- this line should be one line but for readability's sake it isn't -->
<button class="border-purple-200 text-purple-600
hover:border-transparent hover:bg-purple-600
hover:text-white active:bg-purple-700 ...">
Message
</button>
</div>
</div>
<? } ?>
</div>
<? if (data.length===0)
{ ?> <p>No data retrieved from the API.</p> <? }
?>
</div>
<!-- Adding extra padding for display -->
<div class="w3-row w3-padding-16 w3-theme"> </div>
<!-- STATIC FOOTER CONTENT -->
<div class="w3-container w3-theme-d4">
<p class="w3-large w3-center">© Copyright notice goes here.</p>
</div>
</body>
</html>
What Am I Seeing in the HTML Index file?
The code view contains some code such as scriplets that won't be covered yet. We are only doing the layout and style using W3.CSS.
It is assumed you've played around with the library. If anything is missing, you can visit the W3Schools.com W3.CSS section. Their layout for lessons is straight forward and you can go to a specific feature to see the syntax for using it.
The Index.html file is the file that defines the single page layout and style. We have to states a logged in state and the logged-out state. The state determines what user interface the user will see and can use.
We'll cover the logged-out state lastly because it will tie in the work done before we get to that file. Both states use the same Index.html file and we use code to determine which version of the Index template the user will have access to use.
Also, the logged-out state is simple, has only two functions the user can perform: A search or the log in. The layout for the search results will depend on the profile search card data. The social log in is several popular social network log ins and code. The logged in state handles several pages and it makes more sense to build it first. By the time we complete the logged in state views and code the logged-out state views and code will make more sense.
Once a user is logged-in they will still have access to the search box. They will also see their account avatar. When they hover over it the admin menu to admin features will appear. It is simple because there are only 3 things the user needs to do; update their account info, update their Profile Search Card or see the stats gathered for their Profile Search Card.
We will create an HTML template file for each of those features. They will load into the main content area via JavaScript code we will cover in later lessons. For now, note the screen layout and style. The indigo theme of the W3.CSS library is used for the color pallet being used. The dropdown, navbar
Also, the logged-out state is simple, has only two functions the user can perform: A search or the log in. The layout for the search results will depend on the profile search card data. The social log in is several popular social network log ins and code. The logged in state handles several pages and it makes more sense to build it first. By the time we complete the logged in state views and code the logged-out state views and code will make more sense.
Once a user is logged-in they will still have access to the search box. They will also see their account avatar. When they hover over it the admin menu to admin features will appear. It is simple because there are only 3 things the user needs to do; update their account info, update their Profile Search Card or see the stats gathered for their Profile Search Card.
We will create an HTML template file for each of those features. They will load into the main content area via JavaScript code we will cover in later lessons. For now, note the screen layout and style. The indigo theme of the W3.CSS library is used for the color pallet being used. The dropdown, navbar
Note: the <!-- single or multi line comment text --> comments.
Use comments as much as possible but not too much. They bloat the size of a file unless you use a compression tool to remove the HTML comments for production files. In programming you will do things for test mode and some other things for production mode. Use them to recall what your intent with some block of code is about. It'll help if you come back month or years later or if someone else has to edit the file.
Note the CSS used for the div tags. Those are usually layout based tags and CSS to align and style them.
Use comments as much as possible but not too much. They bloat the size of a file unless you use a compression tool to remove the HTML comments for production files. In programming you will do things for test mode and some other things for production mode. Use them to recall what your intent with some block of code is about. It'll help if you come back month or years later or if someone else has to edit the file.
Note the CSS used for the div tags. Those are usually layout based tags and CSS to align and style them.
The single page template has 3 sections:
1. STATIC TOP CONTENT
This area will display the Top Navbar and the Page Title underneath.
The Top Navbar contains the site logo on the left, search box and search button in the middle and the Avatar with the drop-down menu for admin on the right. This is what shows once logged in. When not logged in an Account button shows with a dropdown for logging in or up. The code for this logged in or logged out display will be covered in later lessons when all gets tied together.
The Top Navbar contains the site logo on the left, search box and search button in the middle and the Avatar with the drop-down menu for admin on the right. This is what shows once logged in. When not logged in an Account button shows with a dropdown for logging in or up. The code for this logged in or logged out display will be covered in later lessons when all gets tied together.
The Page title will become dynamic in later lessons. It will become a variable that each page can change the value of. For now, it is hard coded with a static text display.
This entire area will stay static on the screen. As the screen scrolls this area will remain static, in place on the screen. This allows the user to always have access to this area.
2. DYNAMIC MAIN CONTENT
We're display the API call from an earlier lesson. That was just to demonstrate that you can call an Api, receive it's Json and then handle it and display it in a blue cards style with 4 cards per row. We'll use that technique with a prettier style and different data in our Search page template.
In later lessons we'll have enough foundation to take that out and replace with our dynamic content code that will load different pages based on user actions.
For now, that API placeholder will remain while we build and test our MyProfiles webapp.
3. FOOTER CONTENT
You can put menus, videos a sub layout of 2, 3, or 4 sections. We are keeping things simple and only showing that a website copyright notice can go there and we center it.
What next?
The next lesson will be short. It'll just outline the files we will need and what function they serve. Then we'll get into the admin files content and some of the code. per file.
BTW: Since we are trying to get people to DIY with their own projects from these lessons it will be text and not video based.
Test the file @ https://sites.google.com/view/myprofilesacp/testapi
No comments:
Post a Comment