Geolocation services

Maxmind GeoIP2 Precision Services

https://www.maxmind.com/en/geoip2-precision-services
https://dev.maxmind.com/geoip/geoip2/web-services/#Output_Examples
https://dev.maxmind.com/geoip/geoip2/javascript/

----

IP2Location API

https://lite.ip2location.com/https://www.ip2location.com/developers#free_open_source

Helps the user to geolocate the country, region, city, coordinates, zip code, ISP, domain name, timezone, connection speed, IDD code, area code, weather station code, weather station name, MCC, MNC, mobile brand name, elevation and usage type that any IP address or host name originates from.

----

http://about.ip2c.org/#about

IPs to country

+ fast and simple URL API
+ updated daily
+ has information on over 4,254,657,080 IPv4s

----

https://developers.google.com/maps/documentation/geolocation/intro

The Google Maps Geolocation API returns a location and accuracy radius based on information about cell towers and WiFi nodes that the mobile client can detect. This document describes the protocol used to send this data to the server and to return a response to the client.

ReverseGeocoding:
https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding

Note: https://developers.google.com/maps/documentation/geocoding/policies

The Google Maps Geocoding API may only be used in conjunction with displaying results on a Google map. It is prohibited to use Google Maps Geocoding API data without displaying a Google map.

----

https://wordpress.org/plugins/geoip-detect/

Wordpress plugin - works with: Maxmind and HostIP.info

https://github.com/yellowtree/wp-geoip-detect/

----

$.getJSON("http://ip-api.io/json/", function(result) { console.log(result); });

provides data like:
country, city, zip code, timezone and whether this IP address is bot,
spammer or TOR node.

----

More:

What Is the Best API for Geolocating an IP Address?
https://ahmadawais.com/best-api-geolocating-an-ip-address/

What are some alternatives to MaxMind's GeoIP database?
https://www.quora.com/What-are-some-alternatives-to-MaxMinds-GeoIP-database

https://www.trustradius.com/products/maxmind/competitors

https://www.digitalelement.com/

Google APi

https://stackoverflow.com/questions/18173242/getting-street-city-and-country-by-reverse-geocoding-using-google
https://stackoverflow.com/questions/17280787/google-maps-api-getting-closest-points-to-zipcode
https://stackoverflow.com/questions/6797569/get-city-name-using-geolocation

http://geocoder-php.org/Geocoder/
Geocoder is a PHP library which helps you build geo-aware applications
by providing a powerful abstraction layer for geocoding manipulations.

https://github.com/onury/geolocator
Geolocator.js is a utility for getting geo-location information, geocoding, address look-ups, distance & durations, timezone information and more...

CSS Elliptical Corners and Percents

Syntax

border-radius:x1 x2 x3 x4 / y1 y2 y3 y4;

Where:

x1 x2 x3 x4 are the horizontal radius for each corner (starting in top-left corner)
y1 y2 y3 y4 are the vertical radius for each corner

Example:

Border radius percents

border-radius:p1 p2 p3 p4 / q1 q2 q3 q4;

Where:

p1 p2 p3 p4 - percentages for the horizontal radius refer to the width of the border box
q1 q2 q3 q4 - percentages for the vertical radius refer to the height of the border box

Example:

Beautifull rope jumping robot css animation at mapbox.com


.robot{
 width: 300px;
 -webkit-animation: rainbow 4s steps(59) infinite;
}

.animate {
  -webkit-transition:all .125s;
     -moz-transition:all .125s;
      -ms-transition:all .125s;
          transition:all .125s;
  }

.robot-animation {
  background:url(img/footerguy-jump.jpg) no-repeat 0 0;
  background-size: auto 100%;
  height: 0;
  padding-bottom: 100%;
  transition: none;
  -webkit-animation: walk 2s steps(59) infinite;
     -moz-animation: walk 2s steps(59) infinite;
       -o-animation: walk 2s steps(59) infinite;
          animation: walk 2s steps(59) infinite;
  -webkit-animation-play-state:running;
     -moz-animation-play-state:running;
       -o-animation-play-state:running;
          animation-play-state:running;
}

@-webkit-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-moz-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-o-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

mapbox.com

Guide to Startup Marketing

The Ultimate Guide to Startup Marketing from Onboardly

50 Stunning Mobile Statistics

50 Stunning Mobile Statistics from Vala Afshar

Responsive email templates articles

http://zurb.com/playground/responsive-email-templates
-> they use floats for columns and don't support Outlook 2007, 2010, 2013

http://www.campaignmonitor.com/guides/mobile/
-> good old campaignmonitor

http://internations.github.io/antwort/
-> they use align:left for columns and display block for smaller resolutions

http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
-> also align:left and simple devicewidth class (no display block); good testing email app

Stamen - beautiful toner maps

http://maps.stamen.com/toner/embed#16/44.4374/26.0335

Good jquery carousels

Mobiles resolutions

Model	Width (px)	Height(px)	Default Orientation
Iphone 3G	320	480	Portrait
Samsung Galaxy	480	800	Portrait
Iphone 4	640	960	Portrait
BlackBerry Bold Touch 9900	640	480	Landscape

Widget pentru Vreme

Va place cutiuta pentru vreme din dreapta?

Iata cum a fost facuta:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

 $.ajax({

  url: "http://api.wunderground.com/api/dc5dec6546fbfb13/conditions/lang:RO/q/Romania/Bucharest.json",

  dataType: "jsonp",

  success: function(parsed_json) {

   var location = parsed_json['current_observation']['display_location']['city'];

   var temp_f = parsed_json['current_observation']['temp_c'];

   var img = parsed_json['current_observation']['icon'];

   var time = parsed_json['current_observation']['local_time_rfc822'].split(" ")[4];

   time=time.split(":");

   $("body").append("<div class='weather-box'><div class='icon'><img src=http://icons.wxug.com/i/c/i/"+img+".gif></div><div class='location'>"+location+"</div><strong>" + temp_f+"&deg;C </strong><strong>"+time[0]+":"+time[1]+"</strong> </div>");

  }

 });

});

</script>

Simplu nu?

Api@ http://api.wunderground.com este grozav si extem de simplu de folosit!

Ps. nu uitati sa inlocuiti numarul lung cu propia cheie api.

Obiecte in javascript

Metoda clasica de scriere a unui obiect:

 function Circle(radius){ 

this.radius = radius;   

this.getArea = function(){   

return (this.radius*this.radius*3.14);   

}   



this.getCircumference = function(){   

var diameter = this.radius*2;   

var circumference = diameter*3.14;   

return circumference;   

}

}

Exemplul ilustraza folosirea proprietatilor si metodelor obiectelor.

...............................................

Pentru ca in JavaScript obiectele sunt si vectori asociativi, atunci putem folosi sintaxa:





testObj = {

prop1:"hello",

prop2:"hello2",

prop3:new Array("helloa",1,2)

}



for(x in testObj) alert( x + "-" + testObj[ x ] )

sau folosind jquery:



jQuery.each(testObj, function(key, value) {

console.log("key", key, "value", value);

});

Iata si un exemplu mai complex ce foloseste jQuery si 2 functii utilitare:

$.extend si call

var contactForm = {



container: $('#contact'),



config: {

effect: 'slideToggle',

speed: 500

},



init: function(config) {

$.extend(this.config, config);



$("<button ></ button>", {

text: 'Contact Me'

})

.insertAfter( 'article:first' )

.on( 'click', this.show );

},



show: function() {

var cf = contactForm,

container = cf.container,

config = cf.config;



if ( container.is(':hidden') ) {

contactForm.close.call(container);

container[config.effect](config.speed);

}

},



close: function() {

var $this = $(this), // #contact

config = contactForm.config;



if ( $this.find('span.close').length ) return;



$('X')

.prependTo(this)

.on('click', function() {

// this = span

$this[config.effect](config.speed);

})

}

};



contactForm.init({

// effect: 'fadeToggle',

speed: 300

});

Mai multe detalii:
http://tutsplus.com/lesson/slides-and-structure/

Latimea siteurilor traditionale (css)

Facebook.com	981px (fixed)
Linkedin.com	980px (fixed)
Ebay.com (listing)	760px - 1200px (liquid)
Amazon.com	980px - 100% (liquid)
Mobile.de (fixed)	978px (fixed)
Bmw.de (fixed) (left aligned)	1024px (fixed)
Mercedes-benz.de (left aligned)	1000px (fixed)
Gsmarena.com	1002px (fixed)
Nytimes.com	972px (fixed)

Transitions and transformations with css3 and jquery fallback for ie

.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
 -moz-transform: rotate(315deg) scale(0.5);
 -o-transform: rotate(315deg) scale(0.5); 
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
 transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in; 
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}

.home-section img{
-webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 -ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}

For IE 9:

 <!--[if lte IE 9]>
  <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<script type="text/javascript" src="jquery-css-transform.js"></script>

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">

</script>

<script type="text/javascript">

$().ready(function() {
$('.home-section').hover(function () {								   
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {								   
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});			
	</script>
   <![endif]-->

Where to find jquery-animate-css-rotate-scale.js :
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!

More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/

Browser specific hacks - css filters

Webkit only css hack (safari, chrome):

@media screen and (-webkit-min-device-pixel-ratio:0) {

body{ background:red}

}

Firefox only css hack:

@-moz-document url-prefix() {

body{ background:green}

}

Opera only css hack:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

       body {background:orange}

 }

IE only css hack:

body {  
 background : green\9; /* IE9,IE8 and below */  
 *background : yellow; /* IE7 and below */  
 _background : orange; /* IE6 */  
}

More:
 http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

HTML 5 - Short Introduction

HTML5 Edition for Web Authors

http://dev.w3.org/html5/spec-author-view/
(Editor's Draft 22 January 2011)

Introduction

With the creation of the W3C, HTML's development changed venue. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML4 followed, reaching completion in 1998.

At this time, the W3C membership decided to stop evolving HTML and instead begin work on an XML-based equivalent, called XHTML. This effort started with a reformulation of HTML4 in XML, known as XHTML 1.0, which added no new features except the new serialization, and which was completed in 2000.

Around the time that HTML's evolution was stopped in 1998, parts of the API for HTML developed by browser vendors were specified and published under the name DOM Level 1 (in 1998) and DOM Level 2 Core and DOM Level 2 HTML (starting in 2000 and culminating in 2003).

The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004, where some of the principles that underlie the HTML5 work (described below), were presented to the W3C jointly by Mozilla and Opera.

Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specification. The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations, and that specifications need to be detailed enough that implementations can achieve complete interoperability without reverse-engineering each other.

The latter requirement in particular required that the scope of the HTML5 specification include what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also meant including significantly more detail than had previously been considered the norm.

In 2006, the W3C indicated an interest to participate in the development of HTML5 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 specification.

Since then, both groups have been working together. :) Happy end.

Basic HTML sample

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>

<p>This is a <a href="demo.html">simple</a> sample.</p>

</body>
</html>

HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS.

La granita intre HTML si Illustrator / intre text si imagine

Am plecat de la ideea de a desena o harta a Europei cu tarile in care am facut turism pana acum (in scop stimulativ). Si tot cautand pe google o harta buna, am ajuns la ideea: "de ce nu o harta vectoriala ?".

Instant am gasit linkul utilului wikipedia:

http://commons.wikimedia.org/wiki/File:Blank_map_europe.svg

Si dupa putina stilizare, stergand stilurile inline (la fel ca intr-un html obisnuit) si scriind urmatorul randulet:



#at,#ro,#it,#cy,#hu,#si,#hr,#sr,#bg,#es,#de,#ch {fill:#956}

Gata si harta:

Aici veti gasi o simpla poza, pentru ca nu pot uploda sau insera un SVG atat de complex in blogger (cu cateva clickuri beninteles).

Unelte diverse:

http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html - aplicatie pentru a converti svguri in canvasuri (html5)

http://uvdiv.blogspot.com/2009/08/how-to-create-svg-graphics-in-blogger.html - exemplu de inserare svg in html prin crearea ''on the fly" cu js

mineaeliza: { web design }

Geolocation services

CSS Elliptical Corners and Percents

Syntax

Where:

Example:

Border radius percents

Where:

Example:

Beautifull rope jumping robot css animation at mapbox.com

Retirement Visual Calculator

Other very good resources:

Guide to Startup Marketing

50 Stunning Mobile Statistics

Responsive email templates articles

Stamen - beautiful toner maps

Good jquery carousels

CSS3 essential tool-sites

Mobiles resolutions

Widget pentru Vreme

Obiecte in javascript

Latimea siteurilor traditionale (css)

Transitions and transformations with css3 and jquery fallback for ie

Browser specific hacks - css filters

Statistici - Versiuni Browsere, Siteuri Sociale, Sisteme de Operare

HTML 5 - Short Introduction

HTML5 Edition for Web Authors

Introduction

Basic HTML sample

La granita intre HTML si Illustrator / intre text si imagine

Freelancer Jobs

Pagini