Imani Jai's ICT Journal

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:

Ta-da! This app took a looooong time, partly because I was skipping small things (I wasn't reading properly). I think it's working now though!

Thursday, December 6, 2012

TextGroup App

I just finished another app that sends a text to a group of people. It didn't take long -- no where near as long as the last one. (:

Here are the components I needed for this app:

TextBox - this is where the user will enter the message; renamed MessageText; set the hint to "Enter a message"
Button - this is what the user will click after entering the message; renamed TextGroupButton; set text to "Text Group"
Label - this will report when the message has been sent; renamed StatusLabel; set text to "status"
Texting - this is the component that sends the text

To send the text, I needed to set two properties of the Texting component: the phone number and the message. Once these properties are set, I call the SendMessage function to actually send the text. This is what it will look like in Block's Editor (except the 1112222 will be replaced with an actual phone number):

Next, I'll modify the blocks to text more than one number at a time (note: in this version, the numbers are predetermined. So to choose different numbers, I would have to modify the blocks. There's a way to make the app so that the user can pick different numbers every time, but I don't know how to do that yet):

I'll reconfigure the blocks already in TextGroupButton.Click, and it'll look like this:

Now, when the TextGroupButton is clicked, the Texting1.Message property is set to the message entered by the user in MessageText. Then the foreach block begins executing. The two lines of blocks nested within the foreach will be executed three times, because there are three items in the list PhoneNumbers . The first time they are executed, the value var will hold the value "1112222", and the message will be sent to that number. As soon as the message is sent, the app will "loop up" and repeat the foreach blocks. The second time through, the value var will hold "3334444", and the message will be sent to it. On the third iteration, var will hold "5556666", and the third text will be sent out.

Next I modified the blocks so that the status label reports the last message sent. The updated TextGroupButton.Click looks like this:

This is what the final looks like:

This is what the app looks like:

I want to figure out how to make the app using the database, so that the user can pick different numbers every time they decide to use the app.

This app wasn't as complicated as the other one, but I still liked doing it..... I like knowing how things work!

Wednesday, November 28, 2012

QuizMe App

I've completed another app, and this one I really like. It's called QuizMe, and the tutorial made it about baseball, but I switched it up and made it about something else. The topic I used was the movie "The Land Before Time", which is a very old animated movie I watched as a little girl about dinosaurs.

This app wasn't that hard to make, but it took a while. The first couple of things I had to do involved creating the interface for the app, which was pretty straight forward. I created the following components:

Image - this is the picture that shows up in the app
Label - this displays the current question; renamed QuestionLabel
HorrizontalArrangement - this organizes the AnswerPromptLabel and Text, which are coming next
Label - this is the text that will prompt for an answer; renamed AnswerPromptLabel
Text Box - this is where the user will enter text for their answer; renamed AnswerText
Label - this is where "correct" or "incorrect" will be displayed; renamed RightWrongLabel
HorizontalArrangement - this organizes the AnswerButton and NextButton, which are coming next
Button - this is what the user uses to submit their answer; renamed AnswerButton
Button - this is what the user uses to move on to the next question; renamed NextButton

The next couple of things I did included uploading the image I was going to use and setting "Image"'s picture property to that imagine. I changed QuestionLabel's text property to "Question:" ; AnswerPromptLabel's text property to "Enter answer:" ; AnswerText's text property to "Please enter an answer:" ; AnswerButton's text property to "Submit" ; NextButton's text property to "Next" ; RightWrongLabel's text property to "correct/incorrect". I moved AnswerPromptLabel and AnswerText into HorizontalArrangement1 and moved AnswerButton and NextButton to HorizontalArrangement2.

^ This is what it looked like, only my picture was one of the Land Before Time characters.

I won't go into too much detail about what I did in the Block's Editor because that would take all day, but I'll show you:

My questions were:

In what year was the first The Land Before Time released?
What kind of dinosaur was Chomper?
Whose mom died?
What were the dinosaurs called that Little Foot and his friends were afraid of?
When was the last The Land Before Time released?

This is what I did next:

My answers were:

1988
T-Rex
Little Foot
Sharptooths
2007

For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component. To get it to do that, this is what I had to put together:

Next I had to program the behavior of NextButton. I already defined the current QuestionIndex to remember the question the user is on. When NextButton is clicked, the app needs to increment this variable, e.g., change it from 1 to 2 or from 2 to 3, etc., and then use the resulting value to select the new "current" question. This is what I had to do:

What the app needs to do is ask a question-- check a condition-- when the NextButton is clicked, and execute different blocks dependending on the answer. One way to ask the question is to ask, "is the variable currentQuestionIndex already 3?" If the answer is yes, you should set currentQuestionIndex back to 0 so the user is taken back to the first question. Here's what I did:

The current app shows the same image, no matter what question it is on. I changed this so that a picture pertaining to each question will pop up on the screen when that question is reached. This is how:

After I put the pictures in, I had to modify the NextButton.Click event-handler so that it modifies the picture depending on what question the user is on:

Next, I added blocks that report whether or not the user answered the question correctly. The RightWrongLabel had to be modified to report whether or not the answer is correct:

To blank out the RightWrongLabel and the AnswerText, I did the following:

This is what the Block's Editor looked like when I finished:

This is what the app looks like:

That took a lot of explaining but it was fun (:

Wednesday, November 14, 2012

What's New?

So these past couple of weeks, I've been working on a website called App Inventor, which is a site that helps people create their own applications for Android. It's really cool, and not very difficult. The first app I made was called Hello Purr, and itmakes a picture of cat "meow" when it is touched. It was the easiest app I created. The last one I created was a version of Whack-A-Mole. It took two full days to make, and although it's done and functional, I'm not completely satisfied with it. Pretty soon, I'm going to start making my own apps that we can use in class.

Now that I know how to do this, I can make apps that I think are fun too. My favorite app that I've made so far is the Magic 8 Ball, which everyone's heard of: you ask a "yes" or "no" question, shake the device, and it gives you an answer. I LOVE things like that, even though they're not real.....

I'll let you know what's coming next!

Monday, June 4, 2012

ELL Book

Because I am writer, Mr. Elkner has asked me to write a book for the HILT students. There aren't many books out there for teenagers who, because English isn't their first language, are on a lower reading level than other high schoolers. I was given a list of words to use, and I am working on a book for them. What I actually decided to do was take a book that I wrote, the one entitled "Cupid's Arrow", and redo it so that the HILT students can read it. I needed to edit Cupid's Arrow anyway because I had a couple issues with the characters and the plot development, so this is the perfect opportunity. My goal is to be done by the end of the week, but if not, I know it'll be done by the end of the school year.

(:

Friday, May 25, 2012

Sigil

Mr. Elkner installed a program on my computer to replace eCub. It's called Sigil. It does the same thing as eCub in the sense that it converts word documents (well, text or HTML documents) to ePub format. But the best part is that you can also edit the text/HTML document once it's in ePub format. You can add images, cover pages, a table of contents, chapter breaks, and more! This is really cool, because I needed to work on the spacing of one of the books I put on my Nook.

Sigil is really cool! I downloaded it onto my computer at home and am using it to edit another of my books right now! Thank you, Mr. Elkner!

Thursday, May 17, 2012

I Did It !

I finally did it! I converted two of my books, "True Love" and "Centipedophobia", into eBook format and put them on my Nook. It was very simple and, even better, it was FREE!

First, Mr. Elkner downloaded eCub onto my computer. eCub is the program that converts documents into eBook format. Before you can convert a document to eBook format, go to the document and click "save As." Then save it as a text (.txt) document. If you don't do this, eCub won't be able to convert the book. Once the program is downloaded, you click on the icon. Then click "New Project". It will take you to a screen where you have to type in the title of the book, the author, and the identifier. I'm still not sure what the identifier is, but I type in a different number for each book that I convert. There are other areas that can be filled in, but that is optional. Then click next. After that, you have to locate the folder that your text document is saved in. Hit the next button. You can hit the next button again. Then you will come to a screen that has a box with checked items in it. Make sure that your document is checked. If not, nothing will convert over. Hit the finish button. Now you will see a smaller screen with the title of the book on it. Up at the top is a button that says "Compile." Press that. Once eCub is finished, your book is now in eBook format! It will be saved in the same folder as your original document.

Next, Mr. Elkner downloaded Calibre. You can use Calibre, or Adobe Digital Editions. Both are free. Click the icon of whichever program you downloaded. For this blog, I will describe what to do in Calibre. Once the Calibre library pops up, plug in your eReader. A button that says "Device" will pop up on the top. That's how you know your eReader is registered. Next, click the button on the top that says "Add Books." Browse for the epub format of your document and click OK. Now your book is in your Calibre library! You can drag and drop it to the button that says device, or you can right click and click on "Send it to device", or you can click the item and then click the button at the top that says "Add to device."

That's all you have to do! Make sure you eject your device before you unplug it, and then you are done!

Monday, May 14, 2012

eCub

Mr. Elkner downloaded eCub on my computer so I can convert my books and poems to ePub format. I converted "True Love" to ePub format and will put it on my Nook tomorrow when I bring the cord. Yay!

Friday, May 11, 2012

My Nook

I just bought a Nook SimpleTouch. It is very simple and is in black and white, but I only use it for reading. Once I convert a poem to epub format, I should be able to download it to my Nook and show it to friends and family. I may even be able to make it available for the "Lend Me" system that Nook's have, in which I would be able to lend the poem to my friends.

I am about to convert my novel "True Love" into epub format. My aunt is reading it and giving me feedback on it, and once that is done, I will print a couple of hard copies and convert it to an eBook. (: