Below you will find pages that utilize the taxonomy term “hugo”
Posts
Web 1: build a semantic html5 page
Goal The student must understand basic html5 elements and what is meant by semantics. The goal is to have an accessible page for spoken browsers and the visually impaired that can be easily styled. The page must validate correctly with the W3’s html validator, https://validator.w3.org.
We will start with a basic structure that will include a: * header * main ** two sections * an aside * footer The content can be Lorem Ipsum, https://lipsum.
Posts
Web 2: build a semantic html5 login page styled with a basic css framework
Goal To understand an html5 post form styled using an advanced css reference style sheet. The page must validate correctly with the W3’s html validator - https://validator.w3.org.
The page content can be made more realistic if you want, but you can just use the basics as suggested below:
page title: [Co-op’s name] login
header title: [Co-op’s name] app
info paragraph stating please log into my app
userid form field with a label that explains what it is, and length and maxsize 8 characters
Posts
Web 3: build a basic html site using a semantic html5 template page
Goal The student must understand basic html5 elements and what is meant by semantics to create a site of pages. The pages must validate correctly with the W3’s html validator, https://validator.w3.org.
Building on exercise 2, take the login form’s structure and create a site template. From this template create 4 other pages:
a welcome or landing page
a second page
a third page
a logout page.
1) The pages titles and headers have to be renamed appropriately.
Posts
Web 4: basic php login page with semantic html5
Goal This exercise is a leap forward and requires that the student learn basic php from whatever source works best for them.
The student uses basic php to process form data. The page must validate correctly with the W3’s html validator - https://validator.w3.org also, for any custom css - http://jigsaw.w3.org/css-validator/.
Structure:
the login page, index.php, contains a form that calls itself when the user submits the form
the authentication logic checks:
Posts
Web 5: php controlled site with semantic html5
Goal The student uses basic php to build a full website. Login variables will be kept in memory between page loads using php’s $_SESSION superglobal. In the process, code will be separated to reduce duplication. I will present a prototyping code layout that I have found useful.
The pages must validate correctly with:
the W3’s html validator, https://validator.w3.org.
the W3’s css validator, http://jigsaw.w3.org/css-validator/
Naming conventions:
all lowercase with underscores separating words
Posts
Web 6: php semantic site with a php router
Goal The student uses their php website to secure their code by introducing a php router architecture [fyi: technically a front-controller pattern].
The student replaces the sample pages - described below, with the logic from their php website. The result is that the student’s website now works with a router that is accessed from the public folder. This helps prevent hackers from accessing the php logic.
After reading the tutorial, if you have questions about how the router works, contact me.
Posts
Web 7: connect php site to a mysql database for login check
Goal Instead of using an array to hold valid users and their passwords, a mysql innodb table - called users, is queried. Its structure is:
username:
is the primary key
fullname
password
See the sql template file for the innodb table skeleton.
The student determines what data type the fields should be when creating the table.
Finally, the student uses sql through the pdo library to authenticate the user logging into the basic php site.
Posts
Web 8: Accessibility using Aria roles and attributes
Goal This is a gentle introduction to adding accessibility to webpages using Aria roles and attributes, since it is a complex topic. Along with using semantic HTML 5 elements, it is hoped your webpages will be navigable by a spoken browser user.
After the basic tutorial(s) below, the student will add Aria attributes and roles to their previous login form. They will also add examples from the MDN aria-labelledby ref - https://developer.
Posts
An Article
There are things to note!
1 2 3 public static void main( String args[] ) { System.out.println("Foobar!"); (1) } 1 Print something