martes, 28 de junio de 2016

tipo de letra CSS ver un tipo de letra que no esta instalado por defecto en el navegador

// bajarse el tipo de letra

<!DOCTYPE html>

<head>
<title>EmbeddedFont</title>

<style type = "text/css">
@font-face {
font-family: "Miama";
src: url("Miama.otf");
}
@font-face {
font-family: "spray";
src: url("dinNextLight.ttf");
}
h1 {
font-family: Miama;
font-size: 300%;
}
h2 {
font-family: spray;
}
</style>

</head>

<body>
<h1>Embedded Font Demo</h1>
<h2>Here's another custom font</h2>
</body>

</html>

.

(fuente original)
http://www.dummies.com/how-to/content/how-to-use-embedded-fonts-for-your-html5-and-css3-.html

How to Use Embedded Fonts for Your HTML5 and CSS3 Based Web Pages

By Andy Harris from HTML5 and CSS3 All-in-One For Dummies, 3rd Edition

Although an HTML5 web developer can suggest any font for a web page, the font files are traditionally a client-level asset. If the client doesn't have the font installed, she won't see it. Fortunately, CSS3 supports a sensible solution for providing downloadable fonts.

The style does not work like most CSS elements. It doesn't apply markup to some part of the page. Instead, it defines a new CSS value that can be used in other markup. Specifically, it allows you to place a font file on your server and define a font family using that font.

  @font-face {
  font-family: "Miama";
  src: url("Miama.otf");
  }

The font-family attribute indicates the name you will be giving this font in the rest of your CSS code. Typically it is similar to the font file name. The font-family attribute is the URL of the actual font file as it is found on the server. After a font-face has been defined, it can be used in an ordinary attribute in the rest of your CSS code:

  h1 {
  font-family: Miama;
  }

Here's the code for the custom font example:

<!DOCTYPE html>
 <head>
 <title>EmbeddedFont</title>
 <style type = "text/css">
  @font-face {
  font-family: "Miama";
  src: url("Miama.otf");
  }
  @font-face {
  font-family: "spray";
  src: url("ideoma_SPRAY.otf");
  }
  h1 {
  font-family: Miama;
  font-size: 300%;
  }
  h2 {
  font-family: spray;
  }
 </style>
 </head>
 <body>
 <h1>Embedded Font Demo</h1>
 <h2>Here's another custom font</h2>
 </body>
</html>

Although all modern browsers support the @font-face feature, the actual file types supported vary from browser to browser. Here are the primary font types:

TTF: The standard TrueType format is well-supported, but not by all browsers. Many open-source fonts are available in this format.
OTF: This is similar to TTF, but is a truly open standard, so it is preferred by those who are interested in open standards. It is supported by most browsers except IE.
WOFF: WOFF is a proposed standard format currently supported by Firefox. Microsoft has hinted at supporting this format in IE.
EOT: This is Microsoft's proprietary embedded font format. It only works in IE, but to be fair, Microsoft has had embedded font support for many years.

You can use a font conversion tool like onlinefontconverter.com/ to convert to whatever font format you prefer.
It's possible to supply multiple src attributes. This way, you can include both an EOT and OTF version of a font so that it will work on a wide variety of browsers.
When you use this technique, you need to have a copy of the font file locally. It should be in the same directory as your web page. When you begin hosting on a web server, you'll want to move your font file to the server along with all the other resources your web page needs. Just because you can include a font doesn't mean you should. Think carefully about readability.
Also, be respectful of intellectual property. Fortunately there are many excellent free open-source fonts available. Begin by looking at Open Font Library. Google Fonts is another great resource for free fonts. With the Google Font tool, you can select a font embedded on Google's servers, and you can copy code that makes the font available without downloading.

domingo, 26 de junio de 2016

tamaño de un fichero upload form html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

jueves, 16 de junio de 2016

tamaño interior del navegador BODY

El tamaño interior se consigue con:
Ancho
(window.innerWidth);
Alto
(window.innerHeight);

tamaño resolucion de la pantalla monitor v2

google maps api opciones del mapa que no se vea opciones

        var mapOptions = {
        zoom: 12,
        center: posicionFinal,
        mapTypeControl: false,
        navigationControl: false,
        zoomControl: false,

        disableDoubleClickZoom: true,

        streetViewControl: false
        }

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

.

google maps api evento cambiar zoom

map.addListener('center_changed', function() {

    var elzoom=map.getZoom();

alert(elzoom);

    cityCircle.setCenter(map.getCenter());
    cityCircle.setRadius(radio);

});

.

google maps api pintar un circulo

var myLatlng = {lat: 38.35, lng: -0.49};

   var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.1,
      strokeWeight: 1,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: myLatlng,
      radius: 4000
    });

// radius se expresa en metros

.

google maps api pintar en un DIV las coordenadas del raton

google.maps.event.addListener(map, "mousemove", function (event)
{
var latLng = event.latLng;

document.getElementById('centro').innerHTML=latLng;

});

.

google maps api saber cuando ha finalizado de cargar el mapa

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

miércoles, 15 de junio de 2016

google maps limites bordes del mapa visible

var lat0 = map.getBounds().getNorthEast().lat();
var lng0 = map.getBounds().getNorthEast().lng();
var lat1 = map.getBounds().getSouthWest().lat();
var lng1 = map.getBounds().getSouthWest().lng();

timer wait interval javascript reloj

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<button onclick="mover()">MOVER</button>
<button onclick="parar()">PARAR</button>

<script>

var myVar;

function mover()
{
myVar = setInterval(function(){ myTimer() }, 1000);
}

function myTimer()
{
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function parar()
{
    clearInterval(myVar);
}
</script>

</body>
</html>

.

sábado, 4 de junio de 2016

api vibrar vibre vibracion pagina web

Php Help Desk