Web-site-notes
This is stuff about my web site, www.edburdick.net
Contents
This Wiki
This wiki is part of my edburdick.net web site. These pages are notes about new learnings and interesting challenges I have run across in building and maintaining the site.
My photo pages
The vast majority of the space used on www.edburdick.net is photos and a few videos. Most of the photo albums are created using jAlbum, a great program (free with small ads on your albums, $39 one-time charge for basic license with no ads) for creating web-based photo albums. jAlbum has a "skinnable" user interface, meaning that a wide variety of different album layouts and capabilities can be designed and implemented by users. Some of the skins require a modest license fee, but most are free. I used a skin called Matrix for a long time because it creates the illusion when you click on a thumbnail that the thumbnail just expands to fill the screen with your photo, and then allows you to easily start a slide show or go to the next or previous photo. But more lately, with all of the small screen devices like smartphones and tablets, I spent some time searching for skins that do well with the "swiping" type user interface. I started using Turtle, maybe the oldest skin, but which has kept up very well. More recently, better responsive skins have shown up. My most recent at this point is PhotoSwipe, which does a good job with swiping on a phone, but also has a good interface for a laptop. For my top level index page, I use JavaScript to directly generate the page from and XML definition file, which makes it easy to add albums to the list.
Before using jAlbum, I wrote my own software to general my albums from text files, but jAlbum with skins makes much nicer albums in much less time. Click here to see my photo site.
Local Server on EJBDESK
To test web site stuff, I run the Apache web server on my desktop. It comes as part of xampp, which is a nice bundle for PHP development. By default, the server listens on port 80, but that port was being used by the Microsoft web server, IIS. My solution was to uninstall IIS, because my web site is a Linux based site, which uses Apache. Before that, I just used port 8080 for the apache server, but that gets messy. Some stuff I learned...
The command netstat is a good way to find out what ports are being used, and by what processes.
netstat -ano | find ":80" | find "LISTENING"
will show all of the processes that are listening on port :80
C:\Users\ed>netstat -ano | find ":80 " | find "LISTENING" TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 280 TCP [::]:80 [::]:0 LISTENING 280
The number at the end is the process ID (PID), which you can get more details on by opening the task manager with CNTL SHIFT ESC and choosing the Details tab. In this example, the PID I want to see is 280, which show this...
Name PID Status User name CPU Memory (active private working set) UAC virtualization httpd.exe 280 Running edburdick 00 5,288K Disabled
Using the right click menu on that line and picking Open File Location shows me that it is at C:\xampp\apache\bin, which is what I would expect.
The URL for the local server is http://LOCALHOST/<file>, and the <file> it will route to is in C:\xampp\htdocs\. For example, http://LOCALHOST/index.html with pick up C:\xampp\htdocs\index.html
If <file> is left blank, it defaults to index.php, which shows the xampp dashboard.
Making things responsive with CSS
Things have changed since I started all of this web stuff. Because most web browsing these days is done with phones, my pages are way out of step with screen sizes, so it is time to do something about it. The other big change is the progress made with CSS ("Cascading Style Sheets",) including ways of modifying content to be displayed with different layout on different screen sizes and even on landscape vs portrait orientations.
Learning more about CSS
I have used CSS for style stuff like text fonts and sizes, etc, but I have not used the stuff for making my pages responsive. As I learn stuff, I am recording it here, just to have a place to keep notes for myself. Maybe others can benefit from it.
About CSS
CSS, an acronym for Cascading Style Sheets, is a formal way to set styles, like colors, fonts, and the part I am trying to learn about, page layout. It is not HTML or JAVASCRIPT, but is a separate language, quite a bit different from other web languages, which I find a bit annoying, but so be it. The CSS code is surrounded by the <style> and </style> tags, and this block is inside of the <head> </head> tags. You can also use one CSS block for multiple pages by putting it in a separate file and linking to it like this...<link rel="stylesheet" href="mystyle.css">, also inside of the <head> </head> block. The CSS file, mystyle.css in this example, is just CSS code without the <style> </style> tags. You can also build up a style by including css files in other css files using something like this: @import "mystyle2.css";
A style sheet is made up of a series of rules that modify the behavior of the objects in the Data Object Model created by the html code or scripts on the page. A simple example would be a rule to make all h1 tags render in green with an underline, as shown below. A CSS rule consists of a selector and one or more declarations. Each declaration has a property and a value. In this example, the selector is the HTML element h1, which will select all h1 html tags, and the declarations specify properties color and text-decoration with values green and underline
- h1 {color:green; text-decoration: underline;}
You can also group elements together in the selector like this:
- h1, h2, p {color:red;}
So why is it called a "selector?"
The way I understand it, the HTML code is parsed without the CSS stuff first, creating the internal data structure, the Data Object Model (DOM.) The DOM can be manipulated directly using JavaScript code, or another language, say Python. So the DOM is created, and then the style is applied to it. The objects a CSS rule acts on is specified through a selector. So if the selector is p, the rule will be applied to all of the <P> (paragraph) elements in the DOM.
Selectors can match HTML elements as shown above, or they can use the following matching criteria...
- All elements. This is just an asterisk like a wildcard...
* {color:black;} - The element with a specific HTML id...
#address {color:blue}
- This would select the tag <p id=#address>
- Elements with a designated class, expressed as .classname
- .redheading {color:red;} would select <h1 class="readheading">
- Elements of a specific type with a designated class, expressed as element.classname
- h2.blueheading {color:blue;} would select <h2 class="blueheading">, but not <h1 class="blueheading">.
Using CSS to make a Responsive Web Page
W3 Schools has a nice tutorial on this. I am going through the tutorial and taking some notes here.
The viewport meta tag
Conceptually, the view port is the visible part of the page, including everywhere you can access with scroll bars on the device (computer, phone, etc)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Adding this to the <head> section of the page provides a way for code that creates the page, including CSS code, to find out how wide the screen of the client device is. The initial-scale value of 1.0 just tells the browser to do no zooming when the page is first loaded.
W3.CSS
Looking at W3 Schools, I am seeing great tutorial material about CSS, but I also see that they support a sort of framework CSS file that probably does everything I will every need, so I don't have to learn every last thing about creating my own CSS, but can just use theirs. There is also a framework called Bootstrap, which is mostly a JavaScript library, but I am reading that, though it does offer some additional features, and some people use them together, W3.CSS is a good place to start for a general CSS stylesheet and support for responsive pages.
