Introducción a HTML5

Posted on 5 febrero, 2013 by triplepar

Qué es HTML5

HTML5 es el nuevo standard para páginas HTML. La versión previa de HTML es la 4.01 la cual surgió en 1999 y desde entonces ha habido muchos cambios en programación para web

HTML5 es todavía un trabajo en desarrollo, sin embargo, la mayoría de los buscadores principales ya han agregado soporte para muchos de los nuevos elementos y apis del HTML5.

Cómo inició HTML5 ?

HTML5 surgió con la cooperación de World Wide Web Consortium (W3C) y la Web Hypertext Application Technology Working Group (WHATWG).

WHATWG estuvo trabajando en los formularios y aplicaciones y W3C trabajó en XHTML 2.0. En 2006, deciden unirse para crear esta nueva versión de HTML.

Se establecieron algunas reglas en la creación del HTML5, tales como:

  • Las nuevas funciones deberían estar basadas en HTML, CSS, DOM, y JavaScript
  • Reducir la necesidad de plugins externos (como Flash)
  • Mejor manejo de errores
  • Más marcadores para reemplazar código script
  • El proceso de desarrollo del lenguaje deberá ser visible al público

Código mínimo para una página HTML5

A continuación un ejemplo del código mínimo para que una página en HTML5 sea correcta:


<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
</head>

<body>
Contenido del documento......
</body>

</html>

Novedades en HTML5

Algunas de las principales características incorporadas en HTML5 son:

  • El elemento <canvas> para dibujo en 2D
  • Los elementos <video> y <audio> para reproducción de medios
  • Soporte para almacenamiento local
  • Nuevos elementos para contenido específico, como <article>, <footer>, <header>, <nav>, <section>
  • Nuevos elementos en formularios, como calendar, date, time, email, url, search

Soporte HTML5 en los navegadores

HTML5 no es todavía un standard oficial y ningún navegador tiene soporte completo para el HTML5, sin embargo, los navegadores más importantes, como: Safari, Chrome, Firefox, Opera, Internet Explorer continúan agregando nuevas características para el soporte del HTML5 en sus nuevas versiones.

Referencias HTML5

En W3Schools podrás encontrar información sobre etiquetas, atributos globales, eventos standard y demás novedades de HTML5
W3School

Posted in HTML5 | Tagged | Leave a comment

Función para eliminar valores duplicados de un arreglo php

Posted on 26 enero, 2013 by triplepar

En esta ocasión me vi en la necesidad obtener un arreglo eliminando los valores duplicados en el mismo en php, la función que ayuda exactamente para eso es:

array_unique

Esta función elimina los valores duplicados en un arreglo, aquí la sintaxis y un ejemplo:

// arreglo array_unique ( arreglo );
$arreglo1 = array("a" => "azul", "rojo", "b" => "azul", "verde", "rojo");
$resultado = array_unique($arreglo1);
print_r($resultado);

Con este ejemplo obtendríamos el siguiente arreglo:

Array
(
    [a] => azul
    [0] => rojo
    [1] => verde
)

Sencilla la función pero muy útil de repente

Saludos

Posted in Funciones PHP | Tagged | Leave a comment

Ordenar un arreglo (array) multidimensional en php

Posted on 22 noviembre, 2012 by triplepar

Pequeño código bastante útil y eficiente para ordenar Arrays multidimensionales alfabéticamente.

function ksort_deep(&$array){
    ksort($array);
    foreach($array as $value)
        if(is_array($value))
            ksort_deep($value);
}

// ejemplo de uso:
ksort_deep($allowed);

// para verlo en acción
echo print_r($allowed,true);

Gracias por el tip:
http://yophpro.com/trucos/ordenar-un-array-multidimensional-con-php.html

Posted in Php | Tagged , | Leave a comment

Configurar cuenta de correo en Outlook 2003 o 2007

Posted on 14 noviembre, 2012 by triplepar

Ejecute el programa Microsoft Outlook 2003 o 2007 en la PC que desea configurar el correo y sigua los pasos que se muestran a continuación:

Paso 1:Ejecute Outlook 2003 o 2007 en su PC personal o del trabajo.

Paso 2:En el menú “Herramientas” haga click sobre “Configuración de la cuenta”.

Verá en pantalla la ventana que se muestra a continuación. Por favor, haga click sobre “Nuevo” (opción resaltada en rojo).

Paso 3: Se abrirá una nueva ventana donde se solicita “Elegir servicio de correo electrónico”. Allí haga click sobre “Microsoft Exchange, POP3, IMAP o HTTP”, como se muestra en la imagen, y luego seleccione “Siguiente”.

Paso 4:Ahora empezamos a completar los datos de la cuenta de correo.

Se piden tres: Nombre, Dirección de correo electrónico y Contraseña, como se muestra a continuación:

En cada caso deberá indicar:

* Su nombre: Nombre del titular de la cuenta de correo, por ejemplo, Juan López.

* Dirección de correo electrónico: Allí deberá incluir la cuenta que desea configurar. En nuestro ejemplo, info@misitio.com

* Contraseña: La contraseña que Ud. asignó a la cuenta de correo desde el panel de control Ferozo.

* Repita contraseña: Ingrese nuevamente la contraseña de su cuenta de correo.

Luego de ingresar los datos, tilde la opción “Configurar manualmente las opciones del servidor o tipos de servidores adicionales”, ubicada al pie de la ventana, y haga click en “Siguiente”.

Paso 5: Elija la segunda opción, “Correo electrónico de Internet”, y haga click en “Siguiente”, como se muestra a continuación:

Paso 6:Ya casi terminamos. Nos falta configurar correo entrante y saliente. En pantalla aparecerá esta ventana:

Los primeros datos están completos. Hay que ingresar sólo cinco, como se detallan a continuación:

* Tipo de cuenta: Puede optar entre POP3 e IMAP, dependiendo de sus necesidades.

* Servidor de correo entrante: Si se trata de una cuenta POP3, el servidor llevará la formapop3.exchange.sudominio. En nuestro ejemplo es pop3.exchange.misitio.com. Si fuera una cuenta IMAP, el servidor lleva la forma imap.sudominio. En nuestro ejemplo sería imap.exchange.misitio.com.

* Servidor de correo saliente: El servidor llevará la forma smtp.sudominio. En nuestro ejemplo es smtp.exchange.misitio.com.

* Nombre de usuario: La cuenta de correo que estamos configurando. En nuestro ejemplo, info@misitio.com.

* Contraseña: La contraseña de su cuenta de correo.

Luego de completar estos datos, haga click en “Más configuraciones”.

Paso 7:En la pestaña “Servidor de salida” asegúrese de tener tildada la opción “Mi servidor de salida (SMTP) requiere autenticación”. Allí, elija la opción “Utilizar la misma configuración que mi servidor de correo de entrada”.

Paso 8:En la pestaña “Avanzadas” debe reemplazar el valor del puerto del servidor de salida que actualmente esta en 25 debe dejarlo con “26”.

Paso 9: Haga click en “Aceptar” y luego en “Siguiente”. ¡Felicitaciones, terminamos de configurar la cuenta! Para cerrar el asistente de Windows haga click en “Finalizar”.

Posted in Configuraciones del Hosting | Leave a comment

Configurar cuenta de correo en Outlook 2012

Posted on 14 noviembre, 2012 by triplepar

Ejecute el programa Microsoft Outlook 2010 en la PC que desea configurar el correo y sigua los pasos que se muestran a continuación:

Paso 1. En el menú seleccione Archivo, ahí se encuentra en el menú de la izquierda Información y dentro la opción de  Agregar cuenta (encuadrado en rojo).

Paso 2. Seleccione la última opción la de Configurar manualmente…

 

Paso 3. Escoger la primera opción, Correo electrónico de Internet.

Paso 4. Rellene todos los campos de la siguiente manera:

  • Información del usuario
    • Su Nombre: El nombre que quiere que aparezca al enviar un correo.
    • Dirección de correo electrónico: Su correo electrónico, en el ejemplo: correo@su-dominio.com.
  • Información del servidor
    • Tipo de Cuenta: POP3.
    • Servidor de correo entrante: Inserte mail.su-dominio.com.
    • Servidor de correo saliente(SMTP): Como el entrante inserte mail.su-dominio.com.
    • Nombre de usuario: Escriba la cuenta de correo, correo@su-dominio.com.
    • Contraseña: La contraseña de su cuenta de correo.

Una vez relleno todos los campos seleccione Más configuraciones…, aparece en la imagen en el cuadro rojo:

Paso 6. Una vez seleccionado Más configuraciones aparece una ventana donde tiene que escoger la pestaña Servidor de Salida, ahí seleccione Mi servidor de salida (SMTP) requiere autenticación..

Paso 7. Ir a la pestaña avanzadas y en el puerto de salida (SMTP) sustituir el 25 por 26 (Esto debido a que Infinitum de Telmex bloquea el puerto 25). Hacer click en aceptar para cerrar esta ventana..

Paso 8. Hacer click en el botón: Probar configuración de la cuenta y si todo está en orden aparecerán palomitas en las pruebas, hacer click en siguiente y terminar

Con esto queda configurada la cuenta de correo en Outlook 2010.

Posted in Configuraciones del Hosting | Leave a comment

Instalar fuentes TTF en vps con linux CentOS vía SSH

Posted on 5 noviembre, 2012 by triplepar

Que tal

Hace ya algunos días que no publicaba nada en el blog, pero hoy les traigo un dato que les va a ser de mucha ayuda. Supongo que alguno de ustedes ha luchado más de alguna vez con el asunto de embedding fonts o incluir fuentes en nuestro sitio web por medio de CSS con @font-face. Voy a hacer omisión del asunto del @font-face y los tipos de archivos de fuentes para cada navegador (ttf, eot, svg, woff) para pasar directamente a lo que a esta publicación corresponde: como subir e instalar fuentes TTF (True Type Font) en nuestro servidor VPS (rentado en mi caso) mediante SSH y nuestro usuario y contraseña de root. Aquí los pasos:

1. Subir el archivo de la fuente (TTF): Lo primero que debemos hacer es subir el archivo de la fuente (.ttf) al servidor, para esto, en nuestra terminal (yo lo hago en MacOS) vamos a utilizar el comando scp el cual nos permite subir archivos o carpetas a un servidor, lo importante en este paso es subir el archivo a la carpeta indicada, la cual es: /usr/share/fonts. La sintaxis que en mi caso utilicé es:
scp -P111 ruta_archivo_local.ttf root@ip_servidor:/usr/share/fonts
Donde -P indica el puerto (por default es 22), al ejecutar el comando te pedirá tu contraseña de administrador, la introduces y tendrás ya en tu servidor el archivo de la fuente TTF.
2. Ingresar vía SSH: Ingresamos al vps vía ssh con el comando ssh, mi sintaxis de este comando fue algo así:
ssh ip_servidor -p111 -lroot
Donde en -p se especifica el puerto de conexión y en -l el usuario (en este caso root). De igual manera, al ejecutarlo te pide contraseña de administrador.
3. Ir al a carpeta /usr/share/fonts Cualquiera que sea tu forma de llegar a esta carpeta mediante el comando cd, hay que ir a dicha carpeta para comprobar que si se subió nuestro archivo de la fuente ttf (en mi caso hago un cd .. para ir una carpeta arriba y de ahí ya tengo visible la carpeta usr y puedo ir fácilimente hasta /usr/share/fonts.
4. Verificamos que se haya subido el archivo de fuente ttf: Ya en la carpeta especificada en el punto anterior hacemos un ls para ver el listado de dicha carpeta y compobar que exista nuestro archivo ttf que subimos.
5. Reiniciamos X Server: Ejecutamos el comando /sbin/service xfs reload para reiniciar X Server (No me pregunten mucho sobre este tema, no soy un experto en linux :S)
6. Ver fuentes instaladas actualmente El comando fc-list nos permite ver el listado de fuentes instaladas en el servidor, podemos ejecutarlo antes de instalar nuestra fuente nueva para comprobar que se instala correctamente
7. Ejecutar: rpm -qa | grep font Como les comenté no soy un experto en linux pero en el foro que me encontré algo de este proceso venía esta instrucción así que la ejecuté y después verificamos nuevamente el listado de fuentes instaladas con fc-list y veremos que ya tenemos nuestra nueva fuente instalada y lista para poderla usar en nuestra página web, tal y como utilizarías la Arial o la Times, con font family, ejemplo:
font-family:"mi fuente nueva", Arial;
Sin necesidad de las complicaciones o de repente inconsistencias del @font-face

Espero les sirva la información

Saludos

Posted in General, Linux | Leave a comment

Redireccionar a página de error o sitio suspendido con .htaccess

Posted on 13 julio, 2012 by triplepar

Hola

Hoy quiero compartir con ustedes un código que nos sirve para esas veces que queremos suspender una cuenta, que estamos actualizando un sitio web, o que simplemente queremos mandar a todos los usuarios a una página web para x cosa:

RewriteEngine On
RewriteCond %{REQUEST_URI} !pagina_a_mostrar.html$
RewriteRule ^(.*) /pagina_a_mostrar.html [L,R=302]
Posted in General | Tagged , | Leave a comment

Problemas con acentos y ñ’s al trabajar con html, php y mysql

Posted on 31 mayo, 2012 by triplepar

En días anteriores publiqué sobre los problemas con los acentos en javascript. Muchas veces me he encontrado también con el problema de acentos y eñes al guardar datos en mysql mediante php, así que buscando en internet me encontré algunos consejos o tips para lograr que se guarden correctamente tus datos.

Lo primero es asignar cotejamientos correctos al crear tu estructura de datos en mysql, en la creación de la base de datos y sus tablas debemos asignar utf_unicode_ci y en los campos de texto de nuestras tablas, donde tenemos la posibilidad de requerir guardar acentos o eñes asignamos como cotejamiento utf8_spanish_ci.

El siguiente punto es tener en todas nuestras páginas html y php el meta del tipo de contenido con charset utf-8

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

Si nuestro documento php recibe petición mediante ajax o es puro código php no olvidemos asignar el tipo de contenido con charset utf-8 con la funcion header() de php

header("Content-Type: text/html;charset=utf-8");

Y la parte más importante (por la que la mayoría hemos sufrido durante mucho tiempo, es asignar a nuestra conexión mysql el charset utf-8, les dejo el ejemplo con PDO que a mi me ha funcionado:

try {
    $options = array(
        PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
    ); 
    $db = new PDO('mysql:host=' . mysqlhost . ';dbname=' . base_datos . ';', bd_user, bd_pass, $options);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch( PDOException $e ) {
    echo "Error de conexion: " . $e->getMessage();
}
return $db;

Aplicando estas recomendaciones ya solo nos queda ser cuidadosos en el uso de las funciones html_entity_decode() y htmlenties()

Posted in Mysql, Php | Tagged , , , | 3 Comments

Selectbox html con opciones de varios renglones

Posted on 25 mayo, 2012 by triplepar

Quizás esto no es muy común, pero quién dice que nunca lo necesitarás (como me pasó a mi). En uno de los desarrollos que tenemos para el ISSSTE necesitaba un select en el que sus opciones pudieran ser de varios renglones debido a que el texto de ellas es demasiado grande (nombres de medicamentos con su respectiva presentación). Traté de hacerlo con estilos en CSS, definiendo el size, tratando de darle estilo a la etiqueta (option), en fin, de varias maneras, y nada.
Recordé que en jquery algunos plugins de autocompletar te generan selects dinámicamente, algunos con div otros con listas así que voltee a ese lado para tratar de hacerlo pero al intentar modificar sus estilos y demás programación no lograba hacer lo que necesitaba. Así llegue a la penosa necesidad de hacerlo de cero :S
Continue reading →

Posted in CSS, Html, Javascript, Jquery | Tagged , , , | Leave a comment

Remplazar caracteres de cadena de texto en javascript

Posted on 25 mayo, 2012 by triplepar

Hola

Ayer pasé un buen rato para lograr sustituir comas (,) por puntos (.) de una cadena de texto que tomaba de un input text en javascript, estuve viendo en varios foros y blogs opciones como la función replace() tanto con javascript como con jquery pero quedé con algunas dudas ya que en algunos lugares mencionaban que esta función solo remplaza la primer ocurrencia es decir si mi cadena es: “hola, quiero remplazar todas las comas, pero no se como” el resultado obtenido sería: “hola. quiero remplazar todas las comas, pero no se como” y esto no es lo que necesitaba. También por ahí me encontré comentarios de que la función replace() no era compatible con internet explorer, en fin, todo esto me llevó a tomar la decisión de hacer mi propia función recorriendo la cadena de texto caracter por caracter. Aquí se las dejo:
Continue reading →

Posted in Javascript, Jquery | Tagged , | Leave a comment