Entry #7: Better Images on your Website
As we learned in class, there are two types of images in computers, rasterized (pixel based) images, and vector based image. Vector based image, although they are post-rasterized by the rendering engine of the web browser, resize much nicer than pre-rasterized images (.jpg, .png, .gif, etc), making them always look nice and never pixelated, no matter the size. In profession web design, these vector based images are used whenever possible to keep everything looking the same no matter the size of the web browser, since it varies so much from device to device, and monitor to monitor.
However, vector images are not shown the normal way, and are a special type of media, so in HTML must be used in a different set of tags then the image tags.
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>
<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text> <!-- Used to add nice text in front of the image-->
</svg>
</body>
</html>
This piece of code is also directly a part of HTML5, and is good practice
because you always want to use the most up to date features of web design.
For this example, I used a photo of a witch that was an .svg. It produced the following result.
If you want to learn more on SVGs, go to the following website!
http://www.sitepoint.com/add-svg-to-web-page/
Entry #6: Simple Javascript Hover Animation
Some important aspects of a webpage can be responsive to a user when they interact with them. This is very helpful and can be used to help focus a readers attention on a section of the webpage. On many websites you will see versions of this javascript that make it so when a picture is hovered over, it gets larger to be more visible.
The HTML:
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<script src="js/test.js" type="text/javascript"></script>
</head> <body>
<div class='test'>IMPORTANT CONTENT HERE</div>
</body>
</html>
The CSS:
.test
{
height: 300px;
width: 300px;
border: 1px solid black;
text-align: center;
background-color: red;
}
The Javascript:
$('.test').hover(function() {
$(this).animate({
height: '350px',
width: '350px'
}, 300);
},function() {
$(this).animate({
height: '300px',
width: '300px'
}, 300);
});
When all put together, the code should produce the following result:
https://jsfiddle.net/CvhkM/5098/
Thanks to the following resource for providing me with a version of the javascript which I was able to edit in order to change it to my liking.
http://stackoverflow.com/questions/3755381/looking-to-build-an-expand-on-hover-contract-on-blur-div
Entry #5: Fixing the Bootstrap Navigation Bar
When using bootstrap, as a class we learned the way to get the nav bar into a website, by importing (or linking) the bootstrap filed to the webpage, and then copying the nav bar code on the website into the webpage html.
After doing the above, the code will most likely look like the following, and produce the following result as well.
(Please note, I would insert this as actual code to make it look nice, but for security reasons the webpage does not allow it)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar-default navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="
#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-left navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn-default btn">Submit</button>
</form>
<ul class="navbar-right navbar-nav nav">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Although it looks really nice, the drop down menus, as well as the navigation hamburger icon (which appears when on a mobile device) do not work at all. In order to fix this problem, you need to link each necessary file correctly.
Javascript files are linked in the bottom of the body tag, in order to initialize anything that responds in a webpage. To do this, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
to the bottom of the body section. Make sure to change the path of the second line if it does not match the part to the files you have already downloaded.
On the other hand, to link the css files (which will style the webpage to look nice) insert the following links to the top of the webpage. (Inside the head section)
<link href="/css/bootstrap.min.css" rel="stylesheet">
Once again, ensure that the file directory is correct to get bootstrap to load correctly.
Now, the navbar should load correctly and allow drop down menus like the following picture shows:
If you are looking for more information either
ask Albert, or Connor (very good at bootstrap)
or refer to
http://www.getbootstrap.com/
Entry #4: Pop Up Confirmation Boxes
Sometimes, when visiting a webpage it is nice to have a pop up box to alert a user. This can be to warn them of an error, or just for some extra information. Often times they are used when a website is still being developed. This is because the box takes focus, causing the webpage to not be usable until the box is recognized and read by the user. That way the web developer can easily notify all users who visit the page that the page is a work in progress.
Javascript Code: (Create a new javascript file with the following code)
alert("I am an alert box");
HTML Code: (Paste this anywhere in the beginning of the body)
<script src="FILEPATH.js"> </script>
Don't forget to change the 'FILEPATH.js' to the directory of the javascript file you just created!
That's all! That very simple piece of code will allow you to create a pop up window on your webpage!. Keep in mind, you can also change the message in quotes in the java script section! That way you can have a custom message integrated into the web page.
For more information on this, read the following webpages!
http://www.w3schools.com/js/js_popup.asp
http://www.w3schools.com/tags/att_script_src.asp
Entry #3: Adding a YouTube Video
Youtube videos are a very god way to make your website look even more professional. The video adds a lot more content to your page, looks nice, and can be used to give your audience a source of information not only from text, but from audio as well. A very good example of a website with a video is on http://www.thenewboston.com, since the website has text explaining what he does and his videos, but also the actual video embedded into the webpage to watch.
HTML Code: (Insert anywhere into body section of HTML code)
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
That's all! That very simple piece of code will allow you to embed any YouTube video that is publicly available. To change the video that is displayed, altar the second line, and change the link within the quotations into a link that goes to the video you want on the webpage. Keep in mind, you can also change the "width" and the "height" that are within the first line of code in order to altar the dimensions of the video being played.
Entry #2: Gradient Divs
Gradients are a really good way to transition from one color to another on a webpage. They are very useful, if used correctly. CSS3, the newest version of CSS adds very good support for gradients, and make them easy to use on a webpage. A good example of a gradient is on mrscullen.com, where she uses a gradient for her navigation bar.
HTML Code:
This can vary. Within the HTML of your website, create a div that you want to be gradient, and make it have a class or id that you can apply properties to in CSS. For example,
<div id="grad1"></div>
CSS:
Now, in the CSS code, you will have to access this div through whatever tag you used with the div (in the HTML above), and insert the gradient code (bolded) that will change the div to have a gradient color.
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
Keep in mind, that depending on the code you use in your website, the height, name, and way you reference the div may be different. However, make sure to include all 4 lines that define the background, as they allow all different webbrowsers to show the gradient. Also, the colors in the parentheses can be changed to your liking.
The above code would create the effect below.
If you want to learn more about gradients, and different types of gradients, visit http://www.w3schools.com/css/css3_gradients.asp!
Entry #1: Simple Flipping Animation Using CSS3 and HTML
How to make a div flip in CSS. This is a very nice feature you can add to a website, that looks good, and is easy to add. This is the perfect tool for linking websites to your webpage. For example, you can take a websites logo (fav icon),and put it onto your web page. Then, you can make it so that when the mouse hovers over the image, the image flips (horizontally or vertically), and displays a brief description of the website, and even a button that links to the webpage.
HTML Code:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
CSS Code:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
For further information, feel free to read the website:
http://davidwalsh.name/css-flip
and be sure to click on the 'demo' link, to see the code in action!
Comments (5)
Lori said
at 12:00 pm on Feb 24, 2015
4/4. Great post on a very useful topic. Can't wait to try this code out myself. I suggest providing an image which visually helps display the action of the code.
Lori said
at 8:08 am on Mar 17, 2015
Entry #2: 4/4. Model work! Very useful post and wonderful to see you apply CSS3. Your instructions and very clear.
Lori said
at 8:23 am on Mar 31, 2015
Entry #3: 3/4. All required elements are posted but be sure to report on a more advance topic. We learned how to post a YouTube video in Intro. Web.
Lori said
at 8:47 am on Apr 9, 2015
Entry #4: 4/4. This is a unique post with all the required elements. I like how you provided an example of when someone would provide a pop-up message.
Lori said
at 7:54 am on May 20, 2015
Entry #5: 4/4
Entry #6: 4/4
Both of these are very useful and Adv. 1 level entries. I really like the bootstrap post.
You don't have permission to comment on this page.