Skip to content

a sample virtual library ( landing page ) for the course Tech Management

Notifications You must be signed in to change notification settings

devz-throwable/virtual-library

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 

Repository files navigation

Virtual Library Web 1.0

This is a sample virtual library for the course Tech Management. This is the way to implement Web 1.0. It's not about development, it's about knowing how things work like protocols, browsers and passing of data from a user request, the server will respond and will give the page through HTML together with CSS, the browser will render it and boom ... you now have an elegant website.

Rationale

Tech Management requires us to know at least how things work in the Tech field. Doing a simple hands-on like this will further enhance it. It enhances efficiency, reduces costs because we know how systems work.

Again, this is Web 1.0. If you will be testing this at the mobile browser, you will see that it is responding but not fully. Fully mobile responsive will require us to use a framework (and also JavaScript), which we are avoiding. Well, it's just an advanced one once you know this core.

Did you know that Bootstrap was developed by a team in Twitter, so that Twitter would be fully mobile-responsive as we are using it today ? That's how hard it is to achieve the mobile responsiveness. But there is an alternative lightweight framework for that, if you still want to pursue this personally, the W3.CSS

https://www.w3schools.com/w3css/defaulT.asp

Web 1.0 really fits for the landing pages of businesses or schools, like the samples I presented last time. Even the PNU Library landing page is a static website. It's cost-effective, easy to be maintained and lightweight.

Web 2.0, on the other hand, will require server-side scripting and doing CRUD operations in the backend. There are so many available websites there, one is

https://librarika.com/

that uses OPAC and all the services a Library can offer. For Web 2.0, you don't need to create your own system, because it's already available even for free ( but there is no such thing as free ). In short, you simply use it.

Aside from being part of our course topic, this is a preparation for your future career. What if you are asked in the interview what you know about tech ? and how do you integrate it in the Library ? or maybe you will be asked to maintain a site of that Library ? or maybe create one, like this ? And what if they are the only reasons for you to land a job ? Because applying for high-paying jobs requires a lot of skills, competition and retention is very high. Seems it's all worth it. We would never be able to predict that, the most important thing is you already knew it in the first place. I would never be hired as a software developer outside the teaching field if I did not acquire these skills too.

Steps

Click the index.html and click view raw.

or simply click this link

https://raw.githubusercontent.com/devz-throwable/virtual-library/main/index.html

CTRL + A and copy, paste it either on Notepad or online HTML compiler like JSFiddle

https://jsfiddle.net/

Personally, I use VS Code for better experience because I already have VS Code for software development. You can install that too, open it and simply paste it there.

And here is the deployed website on GitHub Pages

https://devz-throwable.github.io/virtual-library/

to view the rendered web page locally, save the file as index.html and right click and open it in Chrome.

To customize your own images and gifs, once you are done designing your own, upload it publicly and simply get the image address, paste it at the intended target and you're done.

The Gallery, as you can see, only has three, I will be requiring you to have 9, so you will need to have another 2 rows containing 3 columns. These are your personal favorite books that you want to share with others. Originally, every thumbnail in that library should be clickable and the user will be redirected to another page, but that will make it very complicated, so just the caption of those books will do, but according to your personal opinion, not the searchable summary of each book.

Why GitHub

I use GitHub to simply deploy it. Once it's deployed, you can see it anywhere. It's not anymore the local copy of your development.

It's one feature of GitHub and it's called GitHub Pages. Mostly, this is being used for landing pages and documentations, even mini-blogging. And it's free.

You also have other CMS ( like WordPress and Wix ) that you can deploy a website without knowing much HTML and CSS. The downside ? It's limited free. Once you encounter a feature that you want for your site, you need to pay for it. It's not highly customizable. On the other hand, using pure web core and frameworks, you can do exactly what you want. Another downside is being too slow that will discourage users to view your landing page, which is a big loss particularly for businesses.

As for your submission, you don't need to do this deployment anymore. You will only submit your index.html file.