Week 7

Project: Exposure Therapy Lab

Started on: October 10c, 2022

Completed on: October 13, 2022

Staff Guidance: Ruben, Marianne

Description:

1. For this project, I was asked to add a column to query and display the research paper for different topics. I also sorted the topic alphabetically.
2. I also added mobile responsive feature to the website so that the column can display accordingly to the screen size.
3. I am working on pagination of the website so that I can limit the display of the posts to probably 10 posts at the time, and the users need to click to go to the next page.
4. I also need to redo the banner for the consortium members.

 

Project: French Connexions

Started on: October 20, 2022

Completed on: October 20, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I will add 4 different pages that display 4 different topics including Vocabulary, Phonetics, Grammar and Interview. I was asked to add videos and modified the layouts so that it looked visually appealing.

Week 6

Project: Exposure Therapy Lab

Started on: October 10, 2022

Completed on: October 13, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I was asked to add a column to query and display the research paper for different topics.

1. In this project, I need to write and update different files to accomplish the objectives: creating template for the column and template for the page itself.
2. I will add different tags and different research paper with those tags as pages.
3. After that, I need to figure out how to display the appropriate research paper when a user clicks on a specific topic. This requires understanding of Javascript, Html and Twig files. I spent a lot of time doing this with Ruben

Challenges: In doing the project, I ran into some challenges relating to the backend and front-end

1. For the back-end, it was hard to navigate through Twig and JS files in order to handle response when the user clicks on a specific topic. It was also difficult to build a component in Grav so that the professor can add easily the topic directly from Grav Interface.
2. For the front-end, it was hard to adjust the different components to be responsive to different media sizes.

Inspiration From: https://beckinstitute.org/blog/category/substance-use-disorders/

 

Project: E-Anthro Lab Project

Started on: October 11, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, the first step is to flatten the website to see if I can rebuild the website without the help from CMS Drupal. So I copied and pasted the html. I downloaded all of the assets of the page including images and CSS files. When I looked back, the banner at the top doesn’t display accordingly, so I will look more into it after this.

 

 

 

WEEK 4

Training for Web Dev: Advanced Training Create Pixel Art

Started on: September 30, 2022
Completed on: September 30, 2022

Description: In this training, I learn to use Illustrator to create pixelated art. It was a really fun training because I got to learn more about different Illustrator tools to help me with painting over the image. For the image, I chose Vincent Van Gough.

Meeting with Clients and Web Dev Team

Happened on: September 26, 2022

1. Learn a ton about internal components of the website
2. Learn a ton about what to fix for the website
3. Learn a ton about how professionals work in the field – identify the problem and manage efficient workflow

 

Training for Web Dev: HTML/CSS

Started on: September 27, 2022
Completed on: September 27, 2022

Description: Learn about the fundamentals of HTML and CSS to create a beautiful layout and design for the website. For this training, I recreate one of the website on COLA about Development Studio.

After editing more and playing around with the CSS, here is my final product.

Training for Web Dev: Web Accessibility

Started on: September 28, 2022
Completed on: September 28, 2022

Description: I learn about UI/UX Design Training with web accessibility for everyone. I learnt that in order to make a good design, it needs to be perceivable, operable, understandable and robust.

UI/UX design Training:

Accessibilities Principles:

1. Perceivable:Designs should have options for people to perceive in whatever way they are able
2. Operable:UI designs should be keyboard accessible and designs should not cause seizures
3. Understandable:Designs should be readable and structured in a way that makes sense
4. Robust:Designs should be compatible with all devices + assistive technologies

Types of Disabilities:

1. Permanent: A person has one arm.
2. Temporary: A person’s arm is injured.
3. Situational: A person is working from home and has to hold their infant in one arm.

 

Task: Scan the website through WAVE which identifies some of the issues of the design, the layout or some other HTML components. Then, import it into Figma and fix the design.

I chose Cockrell and COLA homepage. Through WAVE, it notified that in some of the sections, the contrast is low. Therefore, I went ahead and added overlays to the images.

 

 

 

Training for Web Dev: History Of Design

Started on: September 29, 2022
Completed on: September 29, 2022

Description: I learn about the history of design with different design movements. At the end of the training, I was asked to follow a Youtube tutorial to apply my understanding in creating design following a movement of my choice. For the tutorial, I choose Make A Seamless Pattern Training. I learnt Photoshop: move objects, resize objects, copy/paste objects and make seamless patterns.

Week 3 (19 – 22)

Training for Web Dev: Git and Github basics

Started on: September 20, 2022
Completed on: September 20, 2022

Description: I learn the basics of using git on terminal line.

I learn to update the git by using git add -u, git commit -m ‘Sample message to commit’. and git push.

Here is the finished product and the second picture shows what is behind the scene.

 

Training for Web Dev: Add Help Docs

Started on: September 20, 2022
Completed on: September 20, 2022

Description: I learn how to add help docs to the Grav so that the new user who also want to edit blog and post it can locate the document to find extra help.

 

Training for Web Dev: WordPress Basic

Started on: September 20, 2022
Completed on: September 20, 2022

Description: I learn the basics of using git on terminal line.

I learn to update the git by using git add -u, git commit -m ‘Sample message to commit’. and git push.

Here is the finished product and the second picture shows what is behind the scene.

Through the trainings, I know how to:

1. Installing Astra Child Theme
2. Write and Publish a Page
3. Write and Publish a Post
4. Customize the theme
5. Change Properties in the Global Tab

 

Project: Finding a HTML embeddable Calendar

Started on: September 21, 2022

Completed on: September 21, 2022

Description: For one of the upcoming project, I was tasked with finding a HTML embeddable calendar. I did my research on 9 of them and chose 5 to include on the Google Docs. After diving deeper into the research, I found only 2 that showed their potential: Google Calendar and Tockify.

Requirements: 

1. Need to be embeddable in HTML
2. Little to no cost
3. Beautiful layout
4. Can customize with some of the elements
5. Can color code event and add one day or week long events

Challenges: 

I found a couple of embeddable HTML calendars, but it was hard to find one that satisfy or check all the boxes. When we rely on third-party app or service, it seemed harder to customize to our own preference although we do not need to worry about the database or a lot of the behind the scene operation for the app. Therefore, there are some sacrifices when we choose third party app.

Lesson learned: 

While uploading the documents, I choose Google Docs which is not very sustainable in the long run. Therefore, I learned to ask for protocol to follow so that future Web STAs can see, access and learn from my findings.

After asking Marianne for the protocol, she suggests to create a folder in Box and share the link to Box on Basecamp. Lessons learned indeed!

 

Tockify:

Google Calendar:

 

 

Training: Web Dev Basics: How to Use the Browser Inspect Tool

Started on: September 22, 2022

Completed on: September 22, 2022

Description: For this training, I will get to learn about the browser inspect tool of the website. This is extremely useful because it will allow developers to know the HTML elements and CSS styles for the website. If there is anything wrong with the layout, the dev can access the browser inspect tool to examine if any of the elements they did was wrong or not.

TASK:

1. HTML Modification: Change the banner image of the website of Department of Rhetoric Literature and Writing. The first image is the original photo. The second image is the image I need to change it into. For the third, I found a cool gaming banner so I wonder if that looks good on the website. I think it gives the website futuristic vibe. For the fourth, I want to change into a meme and I chose nyan cat meme and it brings to the website NFT vibe.

   

   

   

   

    

2. CSS Modification: Change the color of the pop-up with CSS panel.

   

   

   

   

   

 

 

 

 

 

Week 2

Training for Web Dev: Setting up WordPress, Grav and MAMP

Started on: September 12, 2022
Completed on: September 13, 2022
STA Guidance: Marianne Le

Description: After learning about the current and past projects for web developer, I learnt that the job is comprised mostly of learning about WordPress and using libraries and database supporting it. This training is about installing all of the necessary software relating to hosting and managing websites

WordPress: This is the content management system used originally for blogging and still remains the top CMS for quick and simplified blogging. Throughout the years, it grew in something much more powerful to control, design and manage your website. It can be used to host website, control users and provides a lot of plugins in giving a lot of functionalities for the users.

MAMP:  This is a free, local server environment that runs on PHP language which happens to be the language that makes up WordPress and Grav that I will need to maintain and create the website.

Grav: This has similar functions like WordPress, and the only different things about it is that it is optimized for maintaining websites that do not have any database.

1) Installing MAMP: I installed MAMP and get the directories set up with my own local files.

2) Setting up MAMP website: After changing the port to 5000 since I have my Jupyter set up on port 8888, I got my MAMP website set up on my local host.

3) Create Database for WordPress

4) Launch my own website on WordPress Database. The second picture is the admin dashboard for WordPress similar to STA blog WordPress. The port link: http://localhost:5000/wp-admin/. The link for MAMP: http://localhost:5000/MAMP/?language=English The link for website of the first picture: http://localhost:5000/

5) Installing Grav ad setting up admin account: Link for admin port: http://localhost:5000/admin Link for port: http://localhost:5000

I will include this sentence to remind me in the future of pointing at the correct file.

Remember: Every time you want to work on a project, make sure that your Document Root in MAMP is pointing to the right site. For example, if I am working on my “Grav Training Site”, it should point to my Grav-Training-Site folder.

 

Training: Use Gantry 5 on Grav

Started on: September 14, 2022
Completed on: September 15, 2022
STA Guidance: Marianne Le

Description: Next, I will learn how to use Gantry 5 on Grav.

1. Installation of Gantry 5: I downloaded the zip file for Gantry 5 software and uploaded to Grav Tools. Usually, I can directly installed from the plugins but because of some problems on Grav, I can not isntall that way.
2. After having Gantry 5 set up, I went ahead and followed through with the tutorials to modify pages.
3. There are a lot of things that I can modify on Grav. It allows me to use a lot of existing templates that they called Particles which include logo/image, social, scrolling back to the top, copyright and etc.
4. I can modify if there is nothing on the existing templates that can satisfy me. There are two files that I need to create so that I can modify the particles: a) example.yaml:  serve as a template for particle which include all the text fields, buttons and title in which I can customize in Gentry and b) example.html.twig: basicially a HTML file which I can modify and add the corresponding particle I created in yaml file into the right place. The directory folder to add these changes is your_root_directory/user/themes/g5_helium/layouts
5. To change the layout of the page with CSS file: I can create my own CSS  file and attach it to this directory your_root_directory/user/data/gantry5/themes/g5_helium/css

For the About Page, I created my own Button yaml and twig files for button. I also customize more the button with the CSS file as well.

Challenges: 

1. Installation of Gantry 5: For some reasons, I cannot install Gantry 5 with downloading the plugins from Grav, so I went ahead and installed directly from uploading the zip file
2. Loading the image: I forgot to check the SVG file and delete the code to display the image. Better be careful next time!

The end result for my Gantry Training with two pages: Home and About Page:

I changed the color with custom CSS file  and here is the update.

Training: Website 101

Started on: September 19, 2022
Completed on: September 19, 2022

Description: I learn about the basics of website including Domain Name System (DNS), Transmission Control Protocol and Internet Protocol (TCP), Hypertext Transfer Protocol (HTTP)  and Content Management Systems (CMS).

Basically, there are 4 simple steps involved at the minute you type in a domain name into your browser.

1. Find the server’s location: The Domain Name System will convert domain name into IP address and locate the server.
2. Send the data: After establishing a server connection, the browser will try to communicate with the server by sending HTTP request on TCP protocol.
3. Receive the data and Send back the response: The server receives and approves the  data. After that, the  server will send back the response to the browser.
4. Unpack the data and Display: After receiving the server’s package, the browser will assemble the component file (HTML, CSS/ JavaScript) and assets (Images, Buttons, Videos) and display the file on to the user’s device.

 Website 101