Web design is a key element to the success of any website. Technology is constantly improving and features and design principles that were once considered advanced, have now become dull. This an Emerging Web Technology and Trends Portfolio Showcase Website that has been created by me as an assignment requirement. Listed below is a description of all my assessments required in the development of creating the content for this showcase website. I have also listed below a reflection statement describing the process and handling of the tasks that were required by my instructor in creating the portfolio.
This assessment required me to put together a Web Trends Report describing at least three new or emerging trends in the web development field and to give my opinion on if this trend will become a standard in the industry, and to apply some type of ranking scale for each trend. This report was to be done as a webpage, employing valid HTML and CSS code and design standards. I chose to design my webpage using one of the emerging web trends, parallax scrolling. I also chose to describe five new emerging web trends and linked each to an outside reference.
In deciding to use an online resource for a parallax scrolling page layout, I ran into the issue of having my text not being seen clearly, because of the background image. I solved this problem by using photoshop to fade the image, and by making my text bolder and larger. The parallax scrolling page layout does not look well on mobile devices, because you cannot see the background image clearly. Fading the photo helped a bit with this issue as well.
TutorialThis assessment covered the emerging trend of mobile design. I was instructed to employ the techniques and skills that I have learned in studying mobile responsiveness and enhance those skills beyond my current level when creating my project.
I felt as though I may be a little rusty with my coding since I have been away from any type of HTML or CSS studies for about a year and half. But once I had an idea of what I wanted to do and how I wanted my page to look, I just simply researched the code and modified it to how I wanted it to look on my webpage. Media Queries in the beginning were very confusing to me, but they are making much more sense now. I did know about the 44px size for mobile devices from my class last year, but that seems to have increased to 48 pixels. I am much less frustrated because I now understand how to make things work. And if it isn’t working, I now move on to a different strategy versus spending countless hours trying to make the impossible happen.
TutorialIn this assessment I was to demonstrate an emerging web trend of choice, dark mode. In my project choice I was instructed to show that I was innovative in my self-directed learning abilities and enhance those skills learned when creating my project page.
I have never coded a dark theme webpage. I generally prefer to choose the lighter colors for the body of a webpage, and usually I will use darker colors for the font, borders, and possibly icons. I used a resource, W3 Schools, that was suggested by one of my peers. This resource provided code that toggled back and forth from a light to dark page or vice versa, using a button. I chose to make the dark theme the main webpage, that could then be switched to a light version using the toggle button resource. I chose a few dark colors that worked well together from a resource that I found that provided a pallet of dark colors. I did not want to make the webpage too dark, by using black for the body. I instead chose a color that I felt was tolerant to my eyes, as I find dark websites hard to look at and read. I also used a resource to help change the look of the original toggle button. I felt the webpage turned out nice, it looks good in both dark and light color themes, and I was still able to keep the webpage responsive.
The only difficulty I encountered was trying to figure out how the get the text on the button to read different on both the dark and light version of the webpage. I could not figure out how to do it, so I instead had text inside the footer displayed only on the dark theme. I did this by implementing the CSS code display none, for the light themed version. The skills gained in coding a dark theme webpage would be learning code that changes the webpage from light to dark, learning to code a fancy button, and learning that by using display none, you can have some content seen on one page and not on the other.
TutorialThis assessment covered the topic of the emerging web trend Progressive Web App (PWA). After studying the given materials, I was instructed to demonstrate the skills and design standards learned by creating an installable PWA.
In my opinion, developing and designing a PWA is difficult. I find the code to be very complex, and I find it very easy to make mistakes. I had struggled quite a bit with this assessment, from the look of the app to the function of the app. Designing the PWA for mobile to desktop was difficult, as it looks much better on mobile versus desktop. It took many attempts, and many resources to help me get the PWA to install and function off-line.
TutorialIn this assessment I was to demonstrate an emerging web trend of choice, building a dynamic responsive landing webpage. In my project choice I was instructed to show that I was innovative in my self-directed learning abilities and enhance those skills learned when creating my project page.
I enjoyed creating this webpage using dynamic elements such as animation, video, and a dynamic scrolling effect. I found a tutorial video to use and altered it a little to create the webpage that I had envisioned in my head. The most difficult part for me was the responsiveness with the navigation bar and the sidebar. I simply added media queries to make it more responsive.
TutorialThis assessment covered the topic of a new software project, VR Content. After studying the given materials, I was instructed to demonstrate the skills and design standards learned by creating VR Content for the web. The Framework I used to build my VR Content, is A-Frame. I used the tutorial listed below and made some design changes to the framework.
The pros of using the A-Frame were that it is a simple framework built on three.js, which is a JavaScript library and API based on WebGL for creating 3D computer graphics in a web browser, there is support for the major headsets, and it will work on a standard desktop or smartphone that is not VR equipped. My experience with working with the A-Frame was ok, it was time consuming create the content that I wanted to create. And I was unsuccessful in trying to add images or sounds. If I did have to list any cons it would be that it was time consuming to style, other than that it works pretty well at achieving the look of a 3D experience.
Tutorial Example WebpageThis assessment covered the topic of AI web applications. I was instructed to create a webpage and focus on an application I have not used before. I was also instructed to create a tutorial demonstrating how I implemented the web application. I provided a PDF file of the tutorial on my example webpage.
I decided to create a webpage that used the application of text to speech. I found many tutorials out there, and the one I chose worked well. The only thing I really had problems with was making the webpage responsive after adding code to the html file. I needed to use media queries, and it took a long time for me to get the media queries right and the webpage to look fairly decent on the smaller mobile devices.
Tutorial Example WebpageEmerging Web Trends
of 2023....