Buscando artículos sobre "HTML"
6-diciembre-2013
admin

Generador de partes de trabajo

Aplicación web que te genera los partes de horas mensuales en formato *.xls

DEMO: http://genparte.disastercode.com.es

GitHub: https://github.com/roberto-pf/GenParte

Tecnologías empleadas:
– Plugin Fullcalendar de Jquery para implementar el calendario.http://arshaw.com/fullcalendar/

– Nusoap, como servidor web para los días festivos.http://sourceforge.net/projects/nusoap/

– PHPExcel, como librería para generar la hoja de excel.http://phpexcel.codeplex.com/

– Diseño formularios:
Formly -> http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery
NiceForms -> http://www.emblematiq.com/lab/niceforms/

Pantalla Principal

Hoja de excel generada

17-noviembre-2013
admin

Android Web Generator

Ahora puedes convertir una página web (Responsive web design) en una aplicación Android con solamente usar la URL de la página.

La aplicación resultante funcionará sin problemas como mínimo en todos los dispositivos android 2.2 o superior. Y tendrá la siguiente estructura:

Android Web Generator Diseño

Para ello tienes que bajarte estos dos proyectos preparados para el eclipse de mi repositorio de GitHub:

Proyecto AppWebGenerator
Este proyecto es el que contiene la aplicación android resultante. Se deben seguir los siguientes sencillos pasos:

  • Paso 1:
    •   – Renombrar el nombre del proyecto por el nombre que prefieras.
    •   – Renombrar el nombre del pakete es.com.disastercode.appwebgenerator
    •   – Renombrar el nombre del pakete es.com.disastercode.appwebgenerator.menu
    •  
    •  Nota: hacerlo en este orden y usar el refactor que proporciona el eclipse.
    •  
    •  
  • Paso 2:
    •   Ir a res/values/strings.xml y dar valor a las siguientes variables:
    •   URL_DIR -> será la dirección web de la página que se quiere usar como si fuera una aplicación.
    •   TITLE_APP -> título que quieres que aparezca en la barra superior.
    •   myAdUnitId -> si deseas ponerle publicidad de admob aquí va el código de anuncio que corresponda. Dejarlo en blanco si no deseas que salga publicidad.
  •  
  •  
  • Paso 3:
    •   Sustituir las imágenes ic_launcher.png de los directorios, por las del logo que tendrá tu aplicación:
    •   – res/drawable-hdpi
    •   – res/drawable-ldpi
    •   – res/drawable-mdpi
    •   – res/drawable-xhdpi
    •   – res/drawable-xxhdpi
    •  
    • Es recomendable sustituirlos por otros que tengan el mismo tamaño.
    •  
    •  

Proyecto library
Este proyecto contiene la version 4.2 del actionbarsherlock.
Más info en: http://actionbarsherlock.com/

Se usa esta barra para la parte superior de la aplicación. Si se desea cambiar el color se configura en el fichero res/drawable/background.xml

Ejemplo de uso:

Web EcoDom: http://disastercode.com.es/appecodom
Se trata de una web (responsive web design) para llevar un control de gastos. Está realizada con el Framework de PHP Codeigniter junto con la extension Grocery Crud.
Además, se ha utilizado para dibujar las gráficas con estadísticas la libreria JGraph.

Aplicación android resultante

1-noviembre-2013
admin

Sencha Touch

Se trata de un framework para HTML5 que está pensado para desarrollar aplicaciones web para dispositivos móviles. Además, consigue efectos que aparentan ser los nativos tanto de dispositivos iOS como Android.

Sencha Touch nos permite aprovechar la potencia y flexibilidad de HTML5, CSS3 y JavaScript. Para ello hace uso de los nuevos elementos disponibles en la nueva especificación del estándar para utilizar video, audio, guardar datos offline. También consta de una librería con múltiples widgets de usuario y control para los eventos táctiles de los dispositivos. Además de los métodos estándares de eventos como touchstart y touchend, el framework añade una extensa lista de eventos útiles como tap, double tap o rotate entre muchos otros.

Enlaces de interes:
Sencha Touch
Documentación
Ejemplos
Tutoriales
Integración de Sencha Touch con PhoneGap

8-septiembre-2013
admin

Librerías para Gráficos en PHP

Fusioncharts
Puede integrarse con una multitud de tecnologías web como ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby, Python, o incluso simples páginas HTML. Funciona con todas las bases de datos incluyendo MS SQL, Oracle, MySQL, PostgreSQL, también con archivos CSV
Formato de Gráfico: Flash
Licencia: Libre y Comercial

PHP/SWF Charts
Es una herramienta para generar atractivos gráficos a partir de datos dinámicos. Genera un Flash con los cuadros y gráficos, también puede usar un XML para la generación de gráficos
Formato de Gráfico: Flash
Licencia: Libre y Comercial

amCharts
Es una caja de herramientas de gráficos de Flash para sus sitios web.
Puede extraer automáticamente los datos desde el simple archivo CSV o XML, o pueden leer datos generados dinámica con PHP,. NET, Java, Ruby, Perl, y otros.
Formato de Gráfico: Flash e Imagen
Licencia: Libre y Comercial

AnyChart
Es una solución flexible basada en Flash que te permite crear interactivos y gráficos de gran apariencia de flash. Es una cruz-navegador y multi-plataforma de gráficos destinados a la solución de todos los que se refiere a la creación del tablero de instrumentos, informes, análisis, estadística, financiera o de cualquier otra visualización de datos de soluciones.
Formato de Gráfico: Flash
Licencia: BSD license

pChart
Es una clase escrita en PHP para generar imagenes cartográficas desde una consulta SQL, un archivo CSV, o manualmente.
Formato de Gráfico: Imagen
Licencia: GNU General Pulic License

JpGraph
Es una clase que esta echa orientada a objetos, su requerimiento es PHP >= 4.3.1
Formato de Gráfico: Imagen
Licencia: QPL 1.0 (Qt Free License)

GraPHPico
Web & Utilería para generar gráficos de tipo estadístico en línea. Componente escrito en PHP + GD, genera gráficos en formato .PNG, actualmente existen los estilos Porcentaje, Barras y Pastel.
Formato de Gráfico: Imagen
Licencia: GNU General Public License (GPL), PHP License

WideImage
WideImage es una librería escrita en PHP5 orientada a objetos para la manipulación de la imagen, solo requiere la extensión GD2. La mayor parte del código esta probada con Simpletest.
Formato de Gráfico: Imagen
Licencia: GNU General Public License (GPL), PHP License

eZ components
Es un conjunto de módulos independientes para el desarrollo de aplicaciones PHP. El componente gráfico le permite crear línea, gráficos de barras y pastel.
Formato de Gráfico: SVG e Imagen
Licencia: BSD license

Fuente

13-agosto-2013
admin

Lector RSS realizado con AJAX

Función javascript que realiza petición ajax a una página php que será la que recupere el contenido del RSS:

function showRSS(str){
   if (str.length==0) {
      document.getElementById("rssOutput").innerHTML="";
      return;
  }
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","getrss.php?q="+str,true);
  xmlhttp.send();
}

Contenido de la página php,

//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google"){
  $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
} elseif($q=="MSNBC") {
  $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}

$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

echo("< p>< a href='" . $channel_link
  . "'>" . $channel_title . " < /a>");
echo($channel_desc . "< /p>");

$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++) {
  $item_title=$x->item($i)->getElementsByTagName('title')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_link=$x->item($i)->getElementsByTagName('link')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_desc=$x->item($i)->getElementsByTagName('description')
  ->item(0)->childNodes->item(0)->nodeValue;

  echo ("< p>< a href='" . $item_link
  . "'>" . $item_title . "< /a>");
  echo ($item_desc . "< /p>");
}

FUENTE con el ejemplo

13-agosto-2013
admin

Librerías javascript para crear presentaciones

Ahora, además de Microsoft Powerpoint, Keynote u otras aplicaciones conocidas también podemos crear presentaciones con html. Para ello podemos encontrar numerosas librerías javascript pensadas para crear presentaciones por medio de HTML y Javascript.

Te permiten realizar transiciones, pantalla completa o accesos con el teclado entre muchas otras cosas. La principal ventaja que tiene es que al estar realizadas vía web simplemente tendremos que acceder a la URL donde subamos la presentación y no tenemos que asegurarnos de que el ordenador en cuestión tenga instalado el software necesario.
También son ideales para presentar y explicar un servicio a nuevos visitantes de una forma original.

Algunos de ellos son:

Deck.js: se trata de una bonita biblioteca JavaScript para crear presentaciones HTML.
Mientras que los usuarios avanzados pueden crear presentaciones totalmente personalizadas, hay plantillas y temas para los usuarios novatos que permiten crear una presentación de diapositivas estándar sin ningún esfuerzo.

Fathom.js: Este es un plugin de jQuery que nos permite crear las diapositivas en HTML, con estilos CSS y controlar la lógica de presentación con JavaScript. La navegación se puede manejar con el teclado, el ratón o el desplazamiento. Permite la definición de un video para sincronizar con la presentación de diapositivas.

Html5slides: está desarrollada por Google. Cuenta con 2 temas incorporados y soporta 3 diseños diferentes (normal, faux-widescreen, pantalla ancha).

Dzslides: consiste en un solo archivo HTML5 CSS3 que hace de plantilla para construir las presentaciones. Además, dispone de 2 funcionalidades: incrustar el resultado en otras páginas y mostrar diapositivas con un panel de control.

Slippy: es una librería de presentaciones HTML realizada con jQuery. Además de navegar por las diapositivas con las siguientes teclas prev-que permite a los usuarios ir directamente a la diapositiva que desee con las teclas numéricas.

S5: Un popular motor de presentación basada en estándares que tiene todas las características que podemos pedir, incluyendo: auto-escalado de texto, representación incremental, URL única para cada diapositiva, indicador de progreso y mucho más…

17-junio-2013
admin

Lista de plugins para utilizar en el firefox

1. – Video DownloadHelper
La manera fácil de descargar y convertir vídeos de cientes de sitios similares a YouTube.
También funciona para audio y galerías de imágenes.

2. – Firebug
SFirebug se integra con Firefox para poner una gran cantidad de herramientas de desarrollo a su alcance mientras navegas. Usted puede editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web …

3. – Greasemonkey
Este plugin te permite Personalizar la forma en que una página web muestra o se comporta, mediante el uso de pequeños fragmentos de JavaScript.

4. – CacheViewer Continued
Se trata de un plugin para Firefox que permite interactuar con la caché del navegador de forma sencilla. Con CacheViewer Continued puede previsualizar las imágenes, ver los detalles de las entradas de caché, guardar los archivos de la memoria caché en otro lugar, y eliminar los archivos de la caché.

5. – FoxyProxy Standard
FoxyProxy es una extensión Firefox que cambia entre uno o más proxies automáticamente, en base a patrones de la URL. Dicho de otra manera, FoxyProxy automatiza el proceso manual de modificar los parámetros de las Propiedades de Conexión de Firefox. El cambio de servidor proxy depende de la página a cargar y de las reglas de selección definidas por el usuario.

27-abril-2013
admin

Carácteres Unicode

Code Result Description
C1 Controls
U+0080 PAD – Padding Character
U+0081 HOP – High Octet Preset
U+0082 BPH – Break Permitted Here
U+0083 NBH – No Break Here
U+0084 IND – Index
U+0085 NEL – Next Line
U+0086 SSA – Start of Selected Area
U+0087 ESA – End of Selected Area
U+0088 HTS – Character (Horizontal) Tabulation Set
U+0089 HTJ – Character (Horizontal) Tabulation with Justification
U+008A LTS – Line (Vertical) Tabulation Set
U+008B PLD – Partial Line Forward (Down)
U+008C PLU – Partial Line Backward (Up)
U+008D RI – Reverse Line Feed (Index)
U+008E SS2 – Single-Shift Two
U+008F SS3 – Single-Shift Three
U+0090 DCS – Device Control String
U+0091 PU1 – Private Use 1
U+0092 PU2 – Private Use 2
U+0093 STS – Set Transmit State
U+0094 CCH – Cancel character
U+0095 MW – Message Waiting
U+0096 SPA – Start of Protected Area
U+0097 EPA – End of Protected Area
U+0098 SOS – Start of String
U+0099 SGCI – Single Graphic Character Introducer
U+009A SCI – Single Character Introducer
U+009B CSI – Control Sequence Introducer
U+009C ST – String Terminator
U+009D OSC – Operating System Command
U+009E PM – Private Message
U+009F APC – Application Program Command
Latin-1 Punctuation and Symbols
U+00A0   Non-breaking space
U+00A1 ¡ Inverted Exclamation Mark
U+00A2 ¢ Cent sign
U+00A3 £ Pound sign
U+00A4 ¤ Currency sign
U+00A5 ¥ Yen sign
U+00A6 ¦ Broken bar
U+00A7 § Section sign
U+00A8 ¨ Diaeresis
U+00A9 © Copyright sign
U+00AA ª Feminine Ordinal Indicator
U+00AB « Left-pointing double angle quotation mark
U+00AC ¬ Not sign
U+00AD Soft hyphen
U+00AE ­® Registered sign
U+00AF ¯ Macron
U+00B0 ° Degree symbol
U+00B1 ± Plus-minus sign
U+00B2 ² Superscript two
U+00B3 ³ Superscript three
U+00B4 ´ Acute accent
U+00B5 µ Micro sign
U+00B6 Pilcrow sign
U+00B7 · Middle dot
U+00B8 ¸ Cedilla
U+00B9 ¹ Superscript one
U+00BA º Masculine ordinal indicator
U+00BB » Right-pointing double-angle quotation mark
U+00BC ¼ Vulgar fraction one quarter
U+00BD ½ Vulgar fraction one half
U+00BE ¾ Vulgar fraction three quarters
U+00BF ¿ Inverted Question Mark
Letters
U+00C0 À Latin Capital Letter A with grave
U+00C1 Á Latin Capital letter A with acute
U+00C2 Â Latin Capital letter A with circumflex
U+00C3 Ã Latin Capital letter A with tilde
U+00C4 Ä Latin Capital letter A with diaeresis
U+00C5 Å Latin Capital letter A with ring above
U+00C6 Æ Latin Capital letter AE
U+00C7 Ç Latin Capital letter C with cedilla
U+00C8 È Latin Capital letter E with grave
U+00C9 É Latin Capital letter E with acute
U+00CA Ê Latin Capital letter E with circumflex
U+00CB Ë Latin Capital letter E with diaeresis
U+00CC Ì Latin Capital letter I with grave
U+00CD Í Latin Capital letter I with acute
U+00CE Î Latin Capital letter I with circumflex
U+00CF Ï Latin Capital letter I with diaeresis
U+00D0 Ð Latin Capital letter Eth
U+00D1 Ñ Latin Capital letter N with tilde
U+00D2 Ò Latin Capital letter O with grave
U+00D3 Ó Latin Capital letter O with acute
U+00D4 Ô Latin Capital letter O with circumflex
U+00D5 Õ Latin Capital letter O with tilde
U+00D6 Ö Latin Capital letter O with diaeresis
Mathematical Operator
U+00D7 × Multiplication sign
Letters
U+00D8 Ø Latin Capital letter O with stroke
U+00D9 Ù Latin Capital letter U with grave
U+00DA Ú Latin Capital letter U with acute
U+00DB Û Latin Capital Letter U with circumflex
U+00DC Ü Latin Capital Letter U with diaeresis
U+00DD Ý Latin Capital Letter Y with acute
U+00DE Þ Latin Capital Letter Thorn
U+00DF ß Latin Small Letter sharp S
U+00E0 à Latin Small Letter A with grave
U+00E1 á Latin Small Letter A with acute
U+00E2 â Latin Small Letter A with circumflex
U+00E3 ã Latin Small Letter A with tilde
U+00E4 ä Latin Small Letter A with diaeresis
U+00E5 å Latin Small Letter A with ring above
U+00E6 æ Latin Small Letter AE
U+00E7 ç Latin Small Letter C with cedilla
U+00E8 è Latin Small Letter E with grave
U+00E9 é Latin Small Letter E with acute
U+00EA ê Latin Small Letter E with circumflex
U+00EB ë Latin Small Letter E with diaeresis
U+00EC ì Latin Small Letter I with grave
U+00ED í Latin Small Letter I with acute
U+00EE î Latin Small Letter I with circumflex
U+00EF ï Latin Small Letter I with diaeresis
U+00F0 ð Latin Small Letter Eth
U+00F1 ñ Latin Small Letter N with tilde
U+00F2 ò Latin Small Letter O with grave
U+00F3 ó Latin Small Letter O with acute
U+00F4 ô Latin Small Letter O with circumflex
U+00F5 õ Latin Small Letter O with tilde
U+00F6 ö Latin Small Letter O with diaeresis
Mathematical Operator
U+00F7 ÷ Division sign
Letters
U+00F8 ø Latin Small Letter O with stroke
U+00F9 ù Latin Small Letter U with grave
U+00FA ú Latin Small Letter U with acute
U+00FB û Latin Small Letter U with circumflex
U+00FC ü Latin Small Letter U with diaeresis
U+00FD ý Latin Small Letter Y with acute
U+00FE þ Latin Small Letter Thorn
U+00FF ÿ Latin Small Letter Y with diaeresis
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

Páginas:«1234»

Categorias

Linkedin