Buscando artículos sobre "HTML"
25-abril-2013
admin

Incrementar días a una fecha con javascript

Código que muestra una función que devuelve la fecha actual aumentada o disminuida en días dependiendo de los días recibidos como parámetro.

/**
 * Funcion que devuelve fecha actual y fecha modificada n dias
 * Tiene que recibir el numero de dias en positivo o negativo para  
 * sumar o restar a la fecha actual.
 * Ejemplo:
 *  mostrarFecha(-10) => restara 10 dias a la fecha actual
 *  mostrarFecha(30) => añadira 30 dias a la fecha actual
 */
function mostrarFecha(days){
    fecha=new Date();
    day=fecha.getDate();
    month=fecha.getMonth()+1;
    year=fecha.getFullYear();

    document.write("Fecha actual: "+day+"/"+month+"/"+year);
    

    tiempo=fecha.getTime();
    milisegundos=parseInt(days*24*60*60*1000);
    total=fecha.setTime(tiempo+milisegundos);
    day=fecha.getDate();
    month=fecha.getMonth()+1;
    year=fecha.getFullYear();

    document.write("Fecha modificada: "+day+"/"+month+"/"+year);
}


Fuente

25-abril-2013
admin

JSBin, JSBeautifier y JSFiddle

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa.

En http://jsbin.com podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública. (Más info.)

JSBeautifier, te organiza y modifica estéticamente tu código Javascript, de modo que este sea más placentero a la vista y siga estándares de formatos de programación.

jsbeautifier.org

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
Al igual que as anteriores se trata de una herramienta 100% web. Lo que JSFiddle te ofrece es un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Con JSFiddle eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

JSFiddle

26-febrero-2013
admin

Scraping con PHP usando cURL y DOMXPath

Para conectarse a una página web y obtener el código html de ella se puede utilizar la librería cURL.
Documentación: http://php.net/manual/es/book.curl.php

Como ejemplo se muestra esta función que recibe como parámetros la dirección web de la que se desea obtener la información.

function getDomUrl($url){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_REFERER, "");
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
	curl_setopt($ch, CURLOPT_ENCODING, "ISO-8859-1,UTF-8;q=0.7,*;q=0.7");
	curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 
               (Macintosh; Intel Mac OS X 10_6_6) AppleWebKit/535.19 
               (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19");

	$body = (curl_exec($ch));
	curl_close($ch);

	return $body;	
}

A continuación, para procesar este DOM obtenido de una página web podemos utilizar la librería DOMXPath.
Documentación: http://php.net/manual/es/class.domxpath.php

Esta librería utiliza XPath (XML Path Language) que se trata de un lenguaje que permite construir expresiones que recorren y procesan un documento XML.
Documentación: http://es.wikipedia.org/wiki/XPath

Ahora tenemos una función que recibe como parámetros el DOM de una página y una expresión regular XPath que extraerá una parte de dicho DOM.

			
function getDomXPath($domh, $path){
	$xpath = new DOMXPath($domh);
	return $xpath->query($path);
}

Por último, un ejemplo de uso de estos métodos:

$dom = new DOMDocument();
$domhtml = getDomUrl("http://www.disastercode.com.es");
@$dom->loadHTML($domhtml);
$trozo = getDomXPath( $dom, "//div[@id='plantilla']/center/table[2]/tr/td/center/table/tr/*/a[@id='neutro']/../..");

16-noviembre-2012
admin

Herramientas online para crear nubes de etiquetas

Si deseas crear una de esas nubes de etiquetas donde se muestran las palabras claves o los temas más populares de un sitio web o blog. Ahora puedes hacerlo de forma sencilla mediante diversas herramientas online que nos permiten crear la nube de tags sin mucho esfuerzo.

Por orden de preferencia:
Tagxedo – http://www.tagxedo.com/app.html (Pide instalar Silverlight)
TagCrowdhttp://tagcrowd.com/
Tagulhttp://tagul.com/
TagCanvas – http://www.goat1000.com/tagcanvas.php
Wordlehttp://www.wordle.net/
ToCloudhttp://www.tocloud.com/

8-agosto-2012
admin

Crear un select multiple con checkbox . Utilizando JQuery.

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};

$(".multiselect").multiselect();

Fuente

12-julio-2012
admin

Juego de diamantes online

Este juego ha sido realizado bajo las tecnologías DHTML, JQUERY y PHP.

Para su realización se ha optado por reutilizar un proyecto ya existente y que estaba basado en un motor de juego realizado en javascript de tipo Open Source.
Para obtener más información consultar, Open Source Diggy:

http://www.mobilegameengines.com/html5/engines/128-diggy

https://github.com/richtaur/diggy

La dirección es http://diamantebomba.disastercode.com.es.

10-julio-2012
admin

Juego de memorizar parejas Online

Se ha realizado otro juego en HTML 5, JQuery y PHP. El juego es muy similar al anterior del rompecabezas. Consiste en una aplicación web que a partir de una serie de imagenes te genera un panel con 16 casillas que se deben ir abriendo de dos en dos acertando los pares iguales.
Cada pantalla tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar la pantalla que generan tus fotos y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://hazparejas.disastercode.com.es.

24-junio-2012
admin

RompeCabezas Online

Se ha realizado un juego en HTML 5, JQuery y PHP. El juego consiste en una aplicación web que a partir de una imagen te genera un rompecabezas que luego puedes intentar resolver.
Cada imagen tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar el rompecabezas que genera tu foto y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://rompecabezas.disastercode.com.es.

14-junio-2012
admin

Incrustación de fuentes con CSS3

CSS3 tiene la capacidad de embeber las fuentes dentro de la página web. Esto abre a un gran abanico de tipografías y evita las restricciones de las propias fuentes que vienen definidas en el estándar de CSS.

Se debe tener en cuenta que para que la fuente sea compatible con todos los navegadores se debe añadir la fuente en diferentes formatos:
.TTF o .OTF – la mayoría de los navegadores admiten estos tipos.
.EOT – Microsoft creó hace unos años este formato. El problema es que solo se visualizan con internet explorer. Lo bueno, es que es compatible desde IE4.
.SVG – Para otros navegadores como opera o safari (incluida su visualización en el iphone o el ipad)
.WOFF (Web Open Font Format) – Soportado hasta ahora por Firefox y Opera por el resto en futuras versiones.

@font-face {
     font-family: "MiFuente";
     src: url('Chunkfive.eot');
     src: local('ChunkFive'),local('ChunkFive'),
          url('Chunkfive.woff') format('woff'),
          url('Chunkfive.otf') format('opentype'),
          url('Chunkfive.svg#ChunkFive') format('svg');
}

Para conseguir fuentes hay una gran variedad de recursos por la red donde encontrarlas p.e. Google Font Directory. Además, hay aplicaciones online que permiten convertir p.e. una fuente en formato TTF a cualquier otro formato en Font2Web.

13-junio-2012
admin

Nuevos selectores en CSS3

En CSS3 se han añadido nuevos selectores, que se unen a los ya existentes en CSS2. A continuación pueden verse algunos de ellos:

Selectores de atributos
A partir del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
a[href^=»http:»] { … }
Fin del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
a[href$=».com»] { … }
Cualquier sub-cadena del atributo
Selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
img[src*=»fotos»] { … }

Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento h3 independientemente de qué elementos se encontraban en el medio.


Los pseudo-elementos
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3 (aunque cambia su sintaxis se utiliza :: en vez de : delante del nombre de cada pseudo-elemento:
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado (este es nuevo en CSS3).

Los pseudo-clases
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
:not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector.

Páginas:«12345»

Categorias

Linkedin