Imani Jai's ICT Journal: 2013

Thursday, June 6, 2013

Nav-Collapse

Okay so today, I added in the one line of <meta> that I talked about in one of my previous posts to the Hilt website. It definitely did the job as far as resizing goes, but it looks TERRIBLE:

Matt told me about nav-collapse, which I will look into. I think it'll be helpful. What it will do is this: when the site is being viewed on a screen above x number of pixels, it will look as it normally does. However, when it is viewed on a screen below z number of pixels, it will look different - as in, there will be another set of css for mobile viewers. I think this will help a lot, because there's just too much stuff on the regular site - albeit, it's good stuff.

I'll blog again tomorrow about what I find out!

Tuesday, May 28, 2013

Mobile Checker

I found a site that will check to see if your webpage is mobile-friendly (mobile-compatible) and, if it isn't, tell you what you need to fix so that it is.

http://validator.w3.org/mobile/

It's really cool, and I think it's helped me begin to fix my site! :)

Friday, May 24, 2013

Twitter Bootstrap

I think I've figured out Twitter Bootstrap. It's kind of complicated, though, and I don't 100% understand everything I've done with it. I think I've found a better tutorial at http://www.revillwebdesign.com/twitter-bootstrap-tutorial/

I'll run you through what I've done so far, though. First thing is you have to download bootstrap and extract the files. Once you've done that, you move the extracted files into whatever folder you'll be working out of. For example, I made a directory in my public_html called bootstrap and placed the extracted files in there. After that, you don't have to touch them.

I made an index.html that I was working with. In that index.html file, I copied and pasted the HTML and CSS code from my blog (the awesome one with the lion on it) so I could work with that. This is what the beginning of my HTML looked like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

If you didn't notice, what I added in there is the <meta name="viewport" content="width=device-width, initial-scale=1.0"> . That does something to the width so that the width of the page changes depending on the size of the device viewing it. Make sense?

<style>

@import url(style.css);

</style>

What I added in there was the <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> which also helps with the resizing of the web page based on the width/height of the device it is being viewed on.

That's all I did! This is what the webpage looked like on my iPhone BEFORE the responsive CSS:

This is what is looks like NOW:

As you can see, it looks weird. HOWEVER, do you see the difference in the size of the text? That's soooo much progress. My personal CSS is somehow conflicting with the CSS that bootstrap provided me, so I have to go in and see what I can do. Maybe this new tutorial can help??

Tuesday, May 7, 2013

I DID IT!

I FINALLY figured out how to get my header to look normal! I googled CSS positioning and also looked through the online book I'm studying, and it helped me out!

Here's what my CSS looked like at first:

header {
position: fixed;
margin-right: 2%;
}

I thought the fact that I had display: table; was messing it up, but what I found out was SO simple, it hurts. Here's my new CSS:

header {
position: fixed;
right: 2%;
}

THAT'S IT. All I had to do was take out the margin! Now, this is what it looks like:

Friday, May 3, 2013

Good week

I figured out how to get my header to stay where it is:

header {
position: fixed;
}

The only problem is, when I fix the position, it moves the header over so that not all of it is visible. I'll show you:

BEFORE

AFTER

See what I mean? It's annoying and I haven't yet figured out how to fix it. I think it has something to do with the fact that I have

header {
display: table;
}

in my CSS. Maybe not, but that's all I can think of. Everything is valid, so it's not some discrepancy that is messing everything up. Any ideas?

Monday, April 22, 2013

This Week

Since my website looks the way it is supposed to, what I'm working on now is trying to get it to be mobile-compatible. Mr. Elkner is letting me borrow his book, titled "Responsive Web Design with HTML5 and CSS3"

When I start getting somewhere and begin to learn the information I'm looking for, I'll check back in :)

Friday, April 19, 2013

SUCCESS!

So I figured out how to fix my blog! The problem was so simple..... Mr. Elkner suggested that I validate it to see what was wrong, and the only problem was that I accidentally closed an <li> with a </ul> instead of with a </li>. So I fixed that, and the lion is back in proportion.

I added background-attachment: fixed so that the lion doesn't scroll with the text on the screen, and it looks really nice. The thing that I struggled with was getting rid of all of the unnecessary tags that I was using and replacing them with fewer, less complicated tags. For example, I had the title of my blog and the icon inside <section> tags, when it really should have been inside a <header> tag. I also had <br><br><br><br><br> under what is now my header to put a space between the title and the beginning of my posts. Instead of using a whole bunch of breaker tags, I replaced that with margin-bottom: 5% in my CSS.

The biggest problem I had was getting the title and icon to stay in the upper right hand corner. I ended up putting them in a <div> to separate it from everything else, and added float: right to my CSS. This is what I did to my CSS:

header {
display: table;
width: 100%;
text-align: right;
margin-bottom: 5%;
}
header div {
display: inline-block;
text-align: right;
float: right;
}
header img {
display: inline-block;
float: left;
height: 100px;
width: 100px;
padding: 2%;
}
header h1 {
display: inline-block;
font-family: 'Covered By Your Grace', cursive;
font-size: xx-large;
float: left;
}

Everything looks perfect now. As you can see, I changed a lot of the pixels to percentages so that the page will look good on any size screen. I'll post the link below, as well as a screenshot of the page, so you can see yourself.

I've begun to look at the book 'Responsive Web Design with HTML5 and CSS3'. I'm hoping that that will help me make my site mobile compatible :)

This is what it looks like now. Isn't that sooo much better? I was even able to add my Korean nuke picture in without it messing up the alignment!

Ignore my computer background, haha! I made the screen smaller so you can see how it adjusts.

I scrolled down so you can see how the lion doesn't move, even when the text does.

Go look for yourself! LOOK AT MY COOL LION WEBSITE THAT HAS NOTHING TO DO WITH LIONS!

Hope you like it :)

Friday, April 12, 2013

Week of April 12th

Soooooooooo this blog is quite frustrating. The picture of the lion looks amazing- until I start actually putting things on the blog. I had a problem with the last blog I was making as well. I've figured out that it's because of the max-width element I put in the body. I took that out, but it didn't do anything.

This is my CSS and HTML code. Below is a picture of how the lion is supposed to look:

This is how it looks with text:

The difference is noticeable and it's very annoying. There's a website that has a kind of tutorial that I'm going through, but I haven't found any solutions to my problem so far. I was thinking about putting all of the text in a div, but I'm not sure if that would do anything. Oh well, we'll see.

Here's the link: My Lion Blog (:

Wednesday, April 3, 2013

Fourth Quarter

What shall I do fourth quarter? I want to continue with the blog I made because it's a lot of fun. Plus, when I get distracted, the blog is kind of my way out of that. Some of the things I want to learn are:

How to use percentages/ pixels so that my webpage displays properly on any computer screen

How to properly use divs/ sections to have multiple (as in, more than two) columns on a page

I'll keep the blog I have now, and continue working on my Breaking Benjamin fan page. On that site, I am going to embed videos and lyrics, and have multiple different pages linked off of the home page.

Friday, March 1, 2013

This week's progress

Sooooo this week I've been working on my family reunion website. It's coming along pretty well. I only have the home page and the directory started; the others are still not made yet.

In the directory page, I have a table that I will eventually have everyone's contact information set up in. Next week, I'm going to work on adding lines in the table to separate the columns so that it looks a little neater. It doesn't sound like it will be hard, but I will be learning all new things.

Here's a link to what I've done so far:

Home Page

Directory

I'll blog again on Tuesday, if not earlier, to go into detail a little more. I forgot to blog until the last minute today, so this is just a quick run-through.

Wednesday, January 23, 2013

Third Quarter/Second Semester

1. What are your educational goals?

This quarter, I hope to learn more about perfecting HTML and CSS techniques. I'm not sure what's included in the course description, but I would like to learn more about JavaScript as well. I'd like to be able to incorporate things like comment boxes and login forms in my sites.

2. What are you going to produce?

I have several websites that I am working on. One is for my aunt's tenant; he runs his own small business and needs a website to promote it. I'm doing this through WordPress, but will be editing the HTML files. I am going to make a website for my dad as well, and although WordPress is cool, I'd rather create the HTML and CSS files from scratch because then I know how everything works and how to fix things when they don't work properly.

:) :) :) :) :)

Thursday, January 3, 2013

TextGroup App Part II

I updated the Text Group app so that the user adds phone numbers to the group by choosing from the phone's contact list, and removes them by choosing from the items already in the group.
The tutorial covers the following App Inventor components and concepts:

The foreach block for repeating operations on a list.
The PhoneNumberPicker component for accessing the phone's contacts.
The ListPicker component for allowing the user to choose a number for removal.
The Texting component for sending texts.
The TinyDB database component for storing the phone list in a database.

The user interface for Text Group, Part II has a textbox, button, and status label for sending the group text, just as in Part I. I then added a PhoneNumberPicker and ListPicker components for adding and removing phone numbers from the list, along with a Texting component and a TinyDB component, both of which will appear in the "non-visual" component area.

The following components were added:
- Label named GroupHeadingLabel; this is the header for the list of phone numbers that will appear
- Label named MembersLabel; this is where the list of phone numbers will appear
- Horizontal Arrangement named HorizontalArrangement1; this is used to organize the add and remove buttons (pickers) horizontally
- PhoneNumberPicker named PhoneNumberPicker1; this allows the user to choose phone numbers from their contact list
- ListPicker named RemoveListPicker; this allows the user to remove a number from the phone numbers in the group
- TinyDB named TinyDB1; this is for storing and retrieving group's phone numbers from database

I set the properties of the components in the following way:

Set the Hint of MessageText to "enter a message"
Set the Text of TextGroupButton to "Text Group"
Set the Text of StatusLabel to "status".
Set the Text of GroupHeadingLabel to "-- Group -- ".
Set the Text of MembersLabel to "members will appear here".
Set the Text of PhoneNumberPicker1 to "Add Member".
Set the Text of RemoverListPicker to "Remove Member"

In the first part of the TextGroup App, I made this:

For this app, I still want the list but you don't want any pre-defined numbers in it, becuse the numbers will be added by the user of the app. So I removed the text blocks with the numbers and leave the make a list block empty. I needed the following behaviors:

When the user clicks the "Add Member" button (the button associated with the PhoneNumberPicker), the picker will appear for the user to choose a number. When the choice is made, the app will add the chosen number to the PhoneNumbers list and update the database.
When the user clicks the "Remove Member" button (the button associated with the RemovListPicker), the picker will appear for the user to choose one of the numbers already in PhoneNumbers. When the choice is made, the app will remove the number from the list and update the database.
When the app begins, the numbers stored in the database are retrieved and loaded into PhoneNumbers.

The list of phone numbers in the contact list will appear when the user clicks the PhoneNumberPicker 's associated button: that behavior is built-in to the component. When the user makes a choice from the contact list, PhoneNumberPicker 's AfterPicking event is triggered. I just had to to program this to add the chosen item to the list and update the database. All of the blocks needed look like this:

At this point the app shows the user the phone numbers that have been added. I created a procedure that displays the list with each phone number on a separate line. I had to call the procedure in the PhonePicker1.AfterPicking event, below the add items to list block, so that the updated list is displayed. The call to the procedure replaced the blocks that set the MembersLabel.Text directly to the list.

To allow the user to remove a phone number from the list, I had to get the PhoneNumbers list into the RemoveListPicker that appears when the user clicks "Remove Member". Unlike the PhonePicker component, which gets its data from the phone's contact list, ListPicker requires you to explicilty load the items that will appear. I did this by setting the Elements property of the ListPicker component. I did this within the RemoveListPicker.BeforePicking event, which is triggered right when the user clicks the button but before the list is shown.

Next, I coded the RemoveListPicker.AfterPicking event so that the user's choice is removed from the PhoneNumbers list.

When changes are made to the PhoneNumbers list, they are also stored in a databse. I had to add a behavior so that the data stored in the database is loaded when the app launches.

I programed the Screen1.Initialize event-handler so that the saved list of phone numbers is retrieved from the database and placed in the PhoneNumbers list and the display is updated to show the list:

Imani Jai's ICT Journal