Website making: Part 3

The shock! Our school also had another team. They had brought a website a few days back which they had designed not by programming but by using MS FrontPage. Thus, it had lacked the modern features like CSS, and looked a bit like Avirup's 'Government Website'. But, that day, they were desperate for flash technology. On the day of the competition, on the 7th, they brought something that literally brought our eyes out. He had a 3D VIDEO GALLERY!!! And a 3D PHOTO GALLERY as well!!! We lost hope. The only thing that we had was huge information, simplicity, and a user-friendly navigation system.
        During the competition, the judge asked us various questions which Avirup answered smartly. I told him the technologies which we had used: HTML5, HTML, JavaScript, CSS, Java Applets. At the end of our session, he looked at our masthead. I had made a section called 'About the website', where I had included all the information sources. This was our savior. This is where the other team got beaten. Yeah, our info, and design were also an advantage...the navigation bar which linked to each and every page was another savior. But, the judge did say that they had violated copyrights of YouTube. In the end, we did win. I had become quite doubtful then, because of their fantastic layout. But, I was satisfied with my work, and had made myself ready to accept the loss as well (but, yes...had we lost, I would have been deeply grieved. The hard work would have all gone to vain).
        I have learnt a lot about the internet, and of course about website designing and HTML, CSS, JavaScript coding from this project. That's what I am happy for apart from the competition...

Read More

Website making: Part 2

The home page was done. But, the whole thing was still left. It was a Saturday. I wanted to make a simple, user-friendly, and sophisticated-looking design for most of the other pages. I write in a blog...:P You know that, of course, but that didn't strike my mind then. I just surfed the web for more and more webpage designs. Then, came a blog called 'The Flower Blog'. Actually, it was a tutorial for creating a blog like design. I opened it, and although the page was huge, I knew that this was the thing that would be the standard design for all my other pages. All I needed to do was implement this design and a huge part of my work would be done. Thus I decided to come back home from my maths tuition and start working on the design. I would learn new things as well...

        At 8:00 PM, it was on!

        I opened the bookmarked tutorial page and started studying. This was the first time I came across the concept of CSS: Cascading Styling Sheets. This was the thing that would actually help my website look 'sophisticated'. I created the page, the basic HTML version as the tutorial instructed. Then, I opened another file and wrote down the required CSS. The file was 'master.css'. By 11:00 PM, the thing was done! A huge job done! The basic layout without any content looked like this:

Yeah, well there was one director, but it did not have any pictures, and it was an un-edited version. I had just copied and pasted it from Wikipedia. Well, I don't have pictures of the first looks. This one is a bit different. The menu on top is actually a navigation bar that remains fixed whether you scroll down or not. I introduced this 'hanging-menu' in school. That was another major achievement. But, anyway that was it! I went to sleep that night with a sense of peace. Little did I know that still a HUGE JOB was left. 

        The next day I had a lot of problem in including another article to that page. But, ultimately I did it. Then, within the next 3 days, I finished the video and photo collection pages as well. The photo collection page was a good one. It was one where I used JavaScript to include two arrows that would move the gallery on either sides as soon as the mouse was moved over it. The gallery was actually a collection of thumbnails. Above it was the preview panel. The photo collection looked like this:

Well, above it was the headers and the usual menu. But, this was the main content. This saved a lot of space.

        Then came the video gallery. Now, that was a problem. I came to know about a concept called 'inline frames'. That would help to open multiple things in the same portion of the page, not at the same time of course. However, I could get nothing in mind as to how to implement it to open the videos. There would be the usual layout, and on top would be the thumbnails. On clicking, the corresponding video would open. However, I could not achieve it that night (the night I was working on). A kind of worrying sense crept into my head. While I slept, the HTML tags were floating in my head. Now, it's a case of belief for you. The next day at morning I had the whole thing cleared out in my head. It was a simple logic again and within an hour I implemented the idea. Thus, the video gallery was ready!

        With that, the basic layout of the whole website ended. The only thing left was the quiz app. I decided to make it in school using Java Applet and later embed it into my website. I thought that now the major job was done. Because Avirup would be bringing in the information and providing it to me. This was my biggest blunder. I wasted time in my school creating the quiz app slowly and chatting with my friends(because the Rhapsody mood was on...no studies at all!). Avirup had a lot of jobs to do. He was in a one act play, he had prefect duties, and he had other jobs as well. He became so busy, that ultimately although he downloaded the info, he did not create the final matter that I would include into the website. 

        The last two days were the busiest days of my life. I worked from morning till night and woke till 4 AM for the two days.

        But, in the end, at 3:50 AM, on the 7th of December, the website was complete! I simply smiled at the huge work that had been done. I created the masthead of the website. Finally, I did not have the mood to re-check the whole thing. The finishing corrections were not made that day, rather that night. I went to sleep with a huge sense of satisfaction, relief and happiness inside me. Smiling mildly, I dozed off to sleep. The next morning, after all my daily morning routine habits, I went to school with a new blazer, the pen drive and disc, and my synthesizer on my back (I would also be playing the background score for some of my friends who were doing the one act play).

Read More

Website Making: Part 1

Hello Yoko! This is gonna be really exciting to describe. 3 weeks ago, our computer tutorial ma'am had asked two boys to get ready for making a website. Unfortunately, she didn't ask me. I didn't know much about HTML coding and other stuff then, but I still had the interest of doing it. And, that naturally saddened me a bit. I tried to forget it as much as possible, but it stayed on my mind. Finally, one day when I was entering the computer laboratory in my school, the same ma'am (who also teaches in our school), and our two other teachers were discussing something. I had incidentally entered first on that day. Suddenly, ma'am looked up and said something to the other two teachers. I became a bit hopeful, although not expecting much. Quite surprisingly, as everyone came to the lab, she asked us to sit quietly as she would be making an announcement. We all followed. Then came the news. She said that on that day, she would be making choices and even asking us to start working on a new website for the inter-school competition that would be occurring during our school fest(that was just 10 days away). The first person she pointed was me!!! I held on to my excitement firmly, as she asked me if I would like to participate. Calmly, that is as calmly as possible, I said "Yes ma'am", and nodded my head. Next she chose the first boy of our class. We were made a team...:) Then, as the class started, she gave us a page which contained all the instructions for the competition and the guidelines and of course, the topic: Bengali films. The thing is that I don't really remember the original topic, but the idea was to make a Bengali films timeline showing the transition of Bengali films from the old times, to the modern times, laying stress on the three legendary directors: Satyajit Ray, Mrinal Sen and Ritwik Ghatak. Anyway, ma'am asked me if I knew a bit of HTML coding to start with. The truth was that at that time I knew very little: only how to include text in a webpage...:P Still, I said yes.
        As the class ended and we went back to our classroom, I started discussing with Avirup(my team-mate) the plan. He added newer ideas, and then we finally decided what the different pages would be: a timeline, the three contemporary legends, directors, actors and actresses, a video collection, a photo collection, a review page, and an interactive quiz. We sort of decide how the home page was at that time, but later I changed it. Anyway, I told him that I would create the home page on that day and the next day I would be bringing it in school. Thus, the project started...the project that was quite a sort of dream to me. And, believe me, I never thought that I would ultimately be able to finish it. I visualized the pages in my head, but like my previous school project: a shopping application in Java(my first application), I only assumed that the thing would somehow be done...I had no idea HOW it would be done...

---

        That evening after I went home, I connected my laptop to the internet, and started searching for a complete HTML tutorial for beginners. I never found a good one, but ultimately I found a site that provided a good tutorial. I knew of one from before called w3schools.com, but it was a bit vague. The other site was good enough. I searched for a good HTML editing software, but found none. So I started coding in notepad. I finished creating the first layout of my homepage after an hour! There was so much to learn. Although it was pleasing, it didn't yet have the real content. I changed fonts, backgrounds, but, still the main links and contents were missing, and my conception was still hollow. I continued this 'researching' till 2 AM, but still hadn't made much progress with my homepage. Too tired to continue any more, I fell asleep.
        Next day, in the morning, I again coded a bit. I had a holiday on that day. I did a bit of my school studies, but not much. I studied HTML on my laptop mostly that day. At night, I was beginning to worry. I still hadn't made the links. The trouble was that I didn't know how to include soft buttons, like the ones modern webpages have. 

        Then, luck struck me! I was looking at various websites, when suddenly I saw one which had those soft buttons, and quite suddenly like a brainwave, the idea of how to make the buttons struck me too! I was simultaneously chatting with Avirup on Facebook...on discovering how to do it, i started typing gibberish in my chat box. Avirup said, "pagol holi naki?" As if screaming, I wrote in caps: BUJHTE PERECHI!!! ETO SIMPLE JINISH TA MATHAAY ASHCHILO NA!!!

        Using Photoshop, I created buttons, and using Picasa, I included the text that was supposed to be on the buttons. The logic for highlighting the buttons whenever the user would move his/her mouse over it was simple: on detecting the mouse, the image for the button would simply change, in other words, a new image would replace the old one with a new colour, and on moving the mouse away, the old image would be restored! Thus, my 'soft buttons' were ready for use! I made 8 buttons in Photoshop that night, and by 3 AM, the home page was ready: a nice textured black background, a heading on the top of the page, then the 8 buttons, a small description, a picture of the three legendary directors, and finally a footer: a copyrighted name (The Bengali Films Timeline), the year, and links to the about us and contact us pages. After saving it, I went to sleep...the next day, Avirup was really delighted, and he constantly said, "Government website hoyni ekdom!" Our government department websites have a poor layout. That's what he didn't want to happen to our website. I knew that he was pleased too...:) Thus, the first challenge ended. Although my concepts about websites were not 100% clear, I got the idea of how to design a basic, yet complete webpage.

My Home Page

Read More