RSS Feed

Category Archives: Internet

Viva la Open Web

Posted on

Today was probably the biggest day for the open web in a long time.

WebM is a new project, lead by Google, Mozilla, opera and many other web leaders, http://www.webmproject.org is their new home. WebM is a open web video project, using the newly open sourced codec VP8 by On2 technologies, owned by Google and released under a royalty free, open source licences today at Google I/O.

Currently Chrome, Firefox and Opera all Support WebM, in the latest nightly builds. Links below. Using the Matroska container (.mkv files) for holding the VP8 and Ogg/Vorbis.

Opera

Chrome

Firefox

EDIT: opera

WebM/VP8 is supposed to be the highest quality, highest compressions, best bandwidth usage and just overall the best codec out there.  Now that it’s open source, the codec debate should die. OGG is nice, but nothing compared to VP8. H.264 is pricey and not free/open anything.  Opera and Firefox previously supported OGG.  IE9 and Safari supported H.264. Chrome Supported both, but Chromium only supported Ogg.

On the first day, Opera, Firefox and Chrome (presumably Chromium as well) have put their full weight behind Webm. Chrome is the builder of webkit,  so presumable safari will join on board the VP8 bandwagon. The only Problem with this being the universal web video codec, is IE9 who has only said they will support H.264, but I suspect that will change in the coming days.

This just in: IE9 to support WebM/VP8


Screenshot of Firefox 3.7A running WebM on youtube.

Among the other goodies released today, are the Google Web font directory. Fonts hosted at google that you can click to embed into your own website. http://code.google.com/webfonts

Happy Surfing on the open web, No beach tags required.

Notes on apache

Posted on

Some notes I made for myself for setting up my server again, which runs php 5.2, and has pretty directories and a few other goodies. Hope this helps someone.

All instructions are good for opensuse 11.2 with apache 2.2.

Enabled directories:

Add this to httpd.conf

srv/www/htdocs/alpha1beta/files”>

Options Indexes FollowSymLinks MultiViews

</Directory>

repeat as desired

Add CSS styling directories:

edit /etc/apache2/mod_autoindex-defaults.conf

Add IndexStyleSheet “http://alpha1beta.com/css/indexstyle.css

to the end of it, and add the CSS sheet to the directory.

Change icons:

Add this repo

http://download.opensuse.org/repositories/home:/javierllorente/openSUSE_11.2/

zypper install apache2-icons-oxygen

zypper install apache2-icons-oxygen

HttpD.conf

Comment out:

#Include /etc/apache2/mod_autoindex-defaults.conf

Add:

Include /etc/apache2/mod_autoindex-defaults-oxygen.conf

Follow instructions at Add CSS styling directories: to add the css back to it.

Adding Google analytics to a 404 or other error page

Get your google analytics code

CD usr/share/apache2/error/include/

Edit bottom.html

Add the GA code right above </body>

Add Search to a 404 or other error page

CD usr/share/apache2/error/include/

edit top.html

Add this in the CSS area

#search{

padding: 4px;

width: 400px;

position: relative;

margin-left: auto;

margin-right: auto;

margin-top: -60px;

}

Below the <h1>…</h1>

Add this, customize as needed

<form name=”gs” id=”gs” method=”get” action=”http://www.google.com/search”&gt;

<div id=”search”>

<table><tr><td>

<input type=”text” name=”q” size=”25″ maxlength=”255″ value=””>

<input type=”submit”value=”Google!”>

</td></tr>

<tr><td>

<input type=”checkbox” name=”sitesearch” value=”alpha1beta.com”>Only search Alpha1beta.com<br>

<input type=”checkbox” name=”sitesearch” value=”alpha1beta.wordpress.com”>Include Alpha1beta.wordpress.com<br>

</td></tr></table>

</div>

</form>

The 2nd checkbox can be removed, but it uses if you want to have a 2nd site search option, IE. A blog posted at wordpress/tumblr.

Php.ini timezone

edit /etc/php5/apache2/php.ini

find “[Date]

; Defines the default timezone used by the date functions

; http://php.net/date.timezone

;date.timezone =

Remove the ; to uncomment date.timezone, and add your timezone as found

http://www.php.net/manual/en/timezones.php

End result looks like this

[Date]

; Defines the default timezone used by the date functions

; http://php.net/date.timezone

date.timezone =America/New_York

php.ini file size upload

Search ‘upload_max_filesize’

Set to something like

upload_max_filesize = 25M

Search ‘post_max_size’

Edit to something matching or higher than max_filesize, like this

post_max_size = 25M

How to use google chrome as a web develpment tool

With Google chrome now support official extensions, Chrome is becoming a pretty sweet web development tool. I had always used it to test my pages on Chrome, as well as Safari, Arora, IE8, Firefox 3.5, Firefox 3.6 or 3.7, and Opera whatever the latest was. I try to test on Safari Mobile when I can, but do not own any apply products.

I develop for HTML5 so I’m including all the HTML5 goodness too.  Now of course you have to be able to code yourself and understand how to use each of these to help you, but there’s some great addons to help with HTML, CSS and JS web development.

Among the great extensions for web development are:

HTML Validation — http://goo.gl/Hg7E

Pendule — http://goo.gl/xqZy

HTML5 Outliner — http://goo.gl/9RlA

HTML5 Markup Detector — http://goo.gl/oHkD

Firebug Lite — http://goo.gl/Z01q

Web Developer Mini — http://goo.gl/ehYf

Chrome Web Developer Tools —http://goo.gl/qW44

(Google) Analytics  Helper — http://goo.gl/s8m5

Inline Code finder — http://goo.gl/PFpR

Javascript Console — http://goo.gl/WiTI

BuiltWith Technilogy Profiler — http://goo.gl/ckLk

If you have any more, please add them in the comments.

But some of it is also built in, with google chrome dev tools.

Devtools allows you to inspect a document in every way imaginable.

Console

Storeage (offline data storage and cookies)

CPU profiling

Timeslines of rendering

Scripts with debugging

Resource monitor, which is an amazing tool for tracking images and scripts loading, along with style sheets and just about everything.

And the best of all Elements, which shows you every element, the css that goes with it, and even lets you test out removing certain css commands to see what it effects on the page.

The best part is the ability to edit actually CSS elements as a user style, to test out better styles or different sizes, etc.