Temas

[ahora mismo]

Traducción y adaptación de: HTML 5 for Beginners. Use it now, its easy!

Hay un montón de artículos sobre HTML5, especialmente desde que llegó  Google Wave (porque es la primera app reconocida en ese lenguaje, pero  toda la información que necesitas para poder empezar a usarlo ahora  mismo es algo más complicado de encontrar. En este artículo  vamos a simplificar un poco las cosas.
 

 
 
   Estoy seguro de que ya lo sabeis, Internet Explorer no soporta HTML5.  Sorpresa, sorpresa!. Así que lo primero que aprenderemos a hacer será:  
Hackear IE usando javascript

 
Hay un buen sitio llamado HTML5Doctor que nos da la solución  perfecta. Se trata de un script en javascript que fuerza a IE a 'ver'  los siguientes tags de HTML5:

Código [Seleccionar] Expandir

<article>, <aside>, <audio>, <bb>,  <canvas>, <datagrid>, <datalist>,
<details>,  <dialog>, <eventsource>, <figure>, <footer>,  <header>, <hgroup>,
<mark>, <menu>,  <meter>, <nav>, <output>, progress>,  <section>, <time>,
and last but not least <video>.
Se puede descargar desde aquí
Obviamente usar javascript no es la mejor forma de fijar el problema,  ya que si lo desactivamos la página dejará de funcionar. Lo único que  podemos hacer es asegurarnos que con JS desactivado la página funcionará  correctamente.
HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.
Ahora los navegadores más reconocidos del mercado reconocerán  nuestros códigos (IE, Safari, Chrome, Firefox, Opera)
Empezando a usar HTML5

Uno de los principales beneficios de HTML5 es que podemos deshacernos  en gran parte del código duplicado. No hay que seguir definiendo todo  por una id o una clase porque los elementos por defecto ya están  construidos.
Entre otros elementos, para tus cabeceras puedes usar <header>,  para la navegación <nav>, para el pié, adivina..., <foot>.  También, con el tag <section> puedes dividir tu contenido usando  <article>. Con esos tags podemos lograr que los navegadores capten  la relevancia del contenido de una forma más simple, eso nos ayudará  con el SEO y, por supuesto, significa menos tiempo codeando. De todas  formas podemos seguir usando <div id="header"> pero las nuevas  etiquetas tienen un mejor y más simple uso
Hay otros dos grandes avances en HTML5 con el que se hará la vida más  fácil a los desarrolladores. La primera es:
El tag <video>

 
Para usar el tag <video> tenemos que hacerlo así:

Código [Seleccionar] Expandir

<video src="/video.ogv" >
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
La línea entre <video> y </video> es para aquellos  navegadores que no usen HTML5.
Un problema con este tag es que Apple decidió no dar soporte al  formato abierto OGG en Safari. Así que para dar soporte a todos los  navegadores tendremos que poner 2 sources

Código [Seleccionar] Expandir

<video width=320 height=240 controls>
<source src="/video.ogv" type="video/ogg">
<source src="/video.mp4"; type="video/mp4";>
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>

El segundo avance es:
Validación de formularios

 
Desafortunadamente la mayoría de navegadores aún no dan soporte. De  echo, estoy bastante seguro que Opera es el único que da soporte de  momento. De todas formas he decidido incluirlo porque creo que será una  característica brillante...
Con HTML5 seremos capaces de validar la información de un input  simplemente indicandole que tipo de dato esperamos.

Código [Seleccionar] Expandir

<input type="email" required>
<input type="date">
<input type="url">

También podemos usar el autofocus, de esta forma:

Código [Seleccionar] Expandir

<input type="email" required autofocus>

Que simple es!

bueno.. como no vengo yo a dar problemas ....

Tengo una tabla de comentarios que guarda entre otras cosas la id del autor y la id del moderador que acepta dicho comentario...

bien yo hago un join a la tabla de usuarios para ver el real_name del usuario

pero no tengo idea como hacer el join a la tabla para ver también el real_name del moderador...

Código (sql) [Seleccionar] Expandir

mysql> describe web_news_comments;
+------------+-----------------------+------+-----+-------------------+----------------+
| Field      | Type                  | Null | Key | Default           | Extra       |
+------------+-----------------------+------+-----+-------------------+----------------+
| id_com     | int(10) unsigned      | NO   | PRI | NULL              | auto_increment |
| id_new     | int(10) unsigned      | NO   | MUL | NULL              |       |
| autor      | mediumint(8) unsigned | NO   | MUL | NULL              |       |
| comentario | varchar(255)          | NO   |     | NULL              |       |
| hora       | timestamp             | NO   |     | CURRENT_TIMESTAMP |       |
| id_mod     | mediumint(8) unsigned | YES  | MUL | NULL              |       |
+------------+-----------------------+------+-----+-------------------+----------------+

y la consulta que tengo ahora es:

Código (sql) [Seleccionar] Expandir

mysql> SELECT c.id_com as id, m.real_name as autor, c.comentario, c.hora, m.real
_name as id_mod FROM web_news_comments c, smf_members m WHERE id_new = 14 AND id_mod is no
t null AND c.autor = m.id_member;
+----+-------+------------+---------------------+-----------+
| id | autor | comentario | hora                | id_mod |
+----+-------+------------+---------------------+-----------+
|  9 | mod   | asdas      | 2010-02-03 15:42:06 | mod       |
+----+-------+------------+---------------------+-----------+
1 row in set (0.00 sec)

como es normal me saca en autor e id_mod el mismo nombre cuando son distintos.. solo que no he sabido seguirlo...

pd. la tabla smf_members es muy larga pero por decir algo seria

id - login_name - real_name

saludos
nax

Bueno, ayer programando unas cosillas me saltó este "problema"

que en realidad no es un problema, solo es incomodo....

tengo una web que carga un index, y según parametros carga una web u otra...
bien, el caso es que la página que carga tiene una función principal y dentro otras funciones

el code es algo así:

index.php

Código (php) [Seleccionar] Expandir


<?php
include_once('text.php');
include_once('functions/basic.php');

if ($_GET['ac'] == 'news')
   include_once('news.php');

head(); //las 3 mas abajo
middle();
foot();
//no es exactamente así pero para que se entienda xD
?>

<?php
functions/basic.php

Código (php) [Seleccionar] Expandir


function head() {
      echo 'los heads y el inicio de una tabla';
}
function foot() {
     echo 'el final de la tabla y el pie de pagina';
} ?>


news.php

Código (php) [Seleccionar] Expandir


<?php

function middle() {

echo 'la continuacion de la tabla'.funcion().'cierro celdas'; //lo raro esta aqui
}
function funcion {
 echo 'por ejemplo el contenido de la celda';

}
?>


que sucede? bueno... funcion() al ser llamada mostraria "por ejemplo el contenido de la celda" encima de la tabla que se creó y la celda donde deberia ir se veria mal...

como lo arreglo?

Código (php) [Seleccionar] Expandir


echo 'la continuacion de la tabla'; funcion() ; echo 'cierro celdas'; //lo raro esta aqui


es eficaz pero es mas molesto que poner un par de concatenaciones... alguien sabe porqué sucede esto? (si pongo un return y no un echo sucede lo mismo...

dejo un par de imagenes:
asi está mal:http://img130.imageshack.us/img130/9913/funcionesmal.jpg
así esta bien:http://img63.imageshack.us/img63/3640/funcionesbien.jpg

saludos
nax

[Amarillo superior:]

Bueno primero tengo mucho sueño, asi que si me dejo algo me lo hacen saber y mañana lo publcio  

Estoy diseñando la base de datos para un sitio que queremos hacer con unos amigos.

Esto es lo que tengo diseñado:

url:http://img266.imageshack.us/img266/8137/esquemamysql.jpg
esta todo compactado para que entre en la imagen  

1. Las tablas son myisam y llevan foreing keys (FK) algún problema en ello??

Bueno e separado las diferentes partes por colores, las que no tienen color son funciones generales.

Los mediumint(8) son valores de un id de usuario smf.. no e puesto la tabla porque es un lio  

Todas las relaciones son 1:N con FK.

Empiezo a explicar:

Amarillo superior:
es un sistema de noticias con comentarios, una tabla de noticias y otra de comentarios.
la tabla secciones es porque habrá varias páginas que usen el sistema de noticias, entonces con esa tabla me ahorro hacer varias tablas iguales.
(el web_ es solo un prefijo para distinguir de smf)

Azul:

es una area de consultas, sigue un sistema casi igual que el de las noticias.
la tabla de secciones se refiere al area de consulta que se hará.
ejemplo: sección: informatica; sección:medio ambiente, etc

Verde pequeño:
Es una bd que solo linka con el responsable de la ong.
Contiene una descripcion y esas cosas xD

verde grande:
es un sistema de peticiones de oración [ok si no creen me da igual, de que trata la web no es el caso   ] y mas abajo otro sistema de noticias.
El sistema de noticias solo varia en los otros que se guardan noticias para todo tipo de users-visitantes y noticias de ambito privado (un grupo concreto de users).

El sistema de oración es lo mas complicado de toda la web creo yo, lo explico mas o menos:

Contamos con un responsable de país (un admin), responsable de Comunida autonoma, provincia, comarca y ciudad.
Bien, a los usuarios se les presentan los datos según los datos que dieron de donde son y cuando envian una petición esta se envia al responsable directo (lease el de ciudad), si el de ciudad cree que es una peticion de caracter comarcal la envia a su superior (el responsable de comarca).
Para eso habia pensado usar el campo de "relevancia" cuanto mas alto mas arriba busca en la bd, pero aun no lo tengo del todo claro....
el resto son categorias de oracion y los votos.

Bueno también se pensó el crear un Top10 de las peticiones para cada zona.

Explico como va esa parte:

El responsable de una ciudad recive X peticiones de las cuales toma 10 como importantes, esas 10 se guardan en un top10 de su ciudad.
Esas mismas 10 se envian al responsable de comarca (las de todas las ciudades de la comarca), el responsable recive todas ellas y selecciona 10 que agrega al top 10 de la comarca, esas 10 se envian a la provincia y así hasta llegar al final.

Esa parte no se como diseñarla, así que si hay ideas son bien recibidas  

Rosa:

Es como una red social, los usuarios se agregan a las categorias que les gustan en la pagina principal se listan las ultimas noticias de todas las redes y en cada red las noticias de esa red.

Amarillo abajo:

es una zona de indignados, ejemplo: estoy indignado "porque el pan es caro"  

entonces hay ciertas tematicas (indignaciones politicas, de familia, dinero... etc)
y la gente puede comentarlas y votar por ellas.


y eso es todo!
el modlog es un log de las acciones de los mod's
y la papelera no es mas que eso  

el id_mod también linka con la tabla de usuarios smf, pero en estos casos le id_mod suele ser quien acepta los comentarios que requieren moderacion

Este es mi segundo diseño de una bd tan grande así que no me maten!!! el primero fue al finalizar el FP I... y espero ancioso el FP II el año que viene para poder darle mas caña al mysql...
si hay grandes catastrofes en el diseño me pegan un poco y lo corrijo  

Desde ya mis mas sinceras gracias por el simple hecho de leer esto.
Y si amportan alguna idea será bien recibida y valorada.

Cualquier dato extra que necesiten haganmelo saber!

saludos
nax

[aquí]

Bueno, hace tiempo que vengo con este problemilla encima, y una de las razones de que tuviese el blog medio dejado era exactamente eso...

Los códigos que encontraba por la red o coloreaban o formataban con stripslashes, pero ninguno hacia ambas cosas..

Hoy mismo di con un código PHP, por supuesto, que permite (por medio de stripslashes) introducir carácteres especiales al código y a la vez lo colorea.

He modificado el código original porque me resulta mas cómodo como lo e dejado. Pero si a alguien le interesa el original se puede encontrar aquí  (En realidad es una modificación del original, pero es en la que yo me e basado)

Esta es la muestra y el código a la vez (ok perdon, la muestra aqui no se ve XD miren la fuente )

Código (php) [Seleccionar] Expandir


<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" style="margin-bottom:40px">

<div id="formulario">

<textarea rows="20" cols="80" name="codigo"></textarea> <br />
<input type="submit" name="enviar" value="Formatear" /></div>

</form>

<?php

   if (!empty($_POST['codigo'])) {
      
      $codigo = $_POST['codigo'];
      $codigo = str_replace("t", "   ", $codigo);
      $codigo = highlight_string(stripslashes($codigo), true);
      
      $codigo = str_replace("#ECE6B4", "#ECE6B4", $codigo);
      $codigo = str_replace("#3769f6", "#3769f6", $codigo);
      
      echo '<div id="formatado" style="border: double #dfdfdf;"> <h3>El code formatado </hr>';
      echo '<p>' . $codigo . '</p><hr />';
      
      $file = fopen("tmp.txt", "w");
      fwrite($file, $codigo);
      fclose($file);
      
      $lineas = file('tmp.txt');
      unlink('tmp.txt');
      
      for ($i = 0; $i < count($lineas); $i++)
         $resultado = $resultado.htmlentities($lineas[$i]);
      
      echo '<h3> Inserta ste codigo en tu site: </h3>' .$resultado.'</div>';
   }

?>


Trabaja con el mismo estilo que el original pero con 2 cambios:
1- El original pone numeros, cosa que al copiar codes hay que ir borrandolos...
2- El original me dió problemas de formato al copiar el code a dreamweaver, por lo que e tenido que hacerlo a mano xD

Así que espero que lo disfruten y lo usen mucho, yo de seguro que lo usaré

Fuente: ~ Syntax Error ~

Buenas, resulta que estoy trabajando en un script de reconocimiento de captchas y me sucede un problema un tanto singular

Este es el captcha ejemplo:



y esta una letra aislada por el script, con la previa funciona Limpiar() aplicada


remarco lo de la función Limpiar() aplicada porque como veis, lo que hace es eliminar el fondo y trabajar con 2 colores, blanco y negro.
de esa función resalto esto:

Código (php) [Seleccionar] Expandir

//Recorremos cada pixel
for ($x = 0; $x < $w; $x++) {
for ($y = 0; $y < $h; $y++) {

//asignamos los valores numéricos a los canales RGB
$rgb = imagecolorat($imagen, $x, $y);
$r = ($rgb >> 16) & 255;
$g = ($rgb >> 8) & 255;
$b = $rgb & 255;

if ($r > 220 && $g < 200 && $b < 200) {
$f = imagecolorresolve($newimg, 0, 0, 0);
imagesetpixel($newimg, $x, $y, $f); //Pintamos negro si es una letra roja
} else {
$f = imagecolorresolve($newimg, 255, 255, 255);
imagesetpixel($newimg, $x, $y, $f); //Sino pintamos blanco
}
}
} //End for


sobre todo el tema $rgb con la función imagecolorat. en este caso funciona perfectamente.

después de aislar la imagen, la idea es crear un registro de cada pixel y el color que contiene (blanco o negro) entonces para ello uso otra funcion createdatamap()

Código (php) [Seleccionar] Expandir

for ($x = 0; $x < $w; $x++) {
for ($y = 0; $y < $h; $y++) {

$rgb = imagecolorat($imagen, $x, $y);
$r = ($rgb >> 16) & 255;
$g = ($rgb >> 8) & 255;
$b = $rgb && 255;

if ($r < 220)
$color = 1;
else
$color = 0;

//creamos el datamap
$datamap .=":".$x.",".$y.",".$color;
}

ahora... el problema está en el $rgb....
a diferencia del caso anterior me reconoce todo como 0 ($color = 0) y nunca como 1. es decir nunca encuentra negro y siempre blanco...
le di muchas vueltas a las imagenes prové de crear el datamap sin separar las imagenes.. enfin un monton de cosas...

al final empezé a dumpear las variables y encntré que el $rgb es 0... es decir no toma valor... porqué? no lo se... en la función anterior el $rgb si toma valor al querer limpiar el fondo, pero en este no..

aunque yo los vea igual..

en los 2 casos $w y $h se sacan de aqui:

Código (php) [Seleccionar] Expandir

$w = imagesx($imagen);
$h = imagesy($imagen);

y $imagen en la primera función es la imagen del captcha y en la 2nda es el carcter limpio

saludos y gracias
nax

[PHP Benchmark]

PHP Benchmark nace como un sitio en el cual su único objetivo es demostrar que no todos los procesos similares de PHP funcionan a la misma velocidad, podeis visitar la página, pero para aquellos que no les gusta el inglés dejo las partes que me parecieron mas curiosas:

comillas dobles (") contra simples (')

+ 105 %   comillas simples (') en una string vacia: $tmp[] = ''';
+ 102 %   comillas dobles (") en una string vacia: $tmp[] = "";
+ 100 %   simples ('). 20 bytes de texto: $tmp[] = 'aaaaaaaaaaaaaaaaaaaa';
+ 103 %   dobles ("). 20 bytes de texto: $tmp[] = "aaaaaaaaaaaaaaaaaaaa";
+ 102 %   simples ('). 20 bytes de teto y 3 $: $tmp[] = 'aa $ aaaa $ aaaa $ a';
+ 106 %   dobles ("). 20 bytes de teto y 3 $: $tmp[] = "aa $ aaaa $ aaaa $ a";
+ 100 %   dobles ("). . 20 bytes de teto y 3 \$: $tmp[] = 'aa \$ aaaa \$ aaaa \$ a';

Conclusión: en este caso podemos llegar a la conclusión de que ambas formas no suponen una gran diferencia de velocidades y que con las comillas dobles, escapar los carácteres como $ (\$) supone un ahorro de tiempo, mínimo eso si.

foreach() vs for() vs while(list() = each())

+ 100 %   foreach($aHash as $val);
+ 657 %   while(list($val)) = each($aHash);
+ 119 %   foreach($aHash as $key => $val);
+ 688 %   while(list($key,$val)) = each($aHash));
+ 238 %   foreach($aHash as $key => $val) $tmp[] = $aHash[$key];
+ 757 %   while(list($key)) = each($aHash)) $tmp[] = $aHash[$key];
+ 300 %   Get Key-/value-array: foreach($aHash as $key[]=>$val[]);
+ 329 %   Get Key-/value-array: array_keys() / array_values()
+ 381 %   $key = array_keys($aHash);  $size = sizeOf($key); for($i=0; $i < $size; $i++) $tmp[] = $aHash[$key[$i]];

Conclusión: La conclusión mas obvia que podemos sacar es que foreach() es mas rapido que while() y
for()


acabo con este que me pareció muy muy curioso:

Test del bucle For

El test se orienta a, si el rendimiento cambia al calcular el tamaño de una variable antes del for o en el momento que declaramos el for.

Ejemplos:
antes del for: "for ($i=0; $i<$tamaño; $i++)"
en el for: "for ($i=0; $i<sizeOf($x); $i++)"

+ 100 %      Antes del for con count()
+ 50058 %   En el for con count()
+ 100 %      Antes del for con sizeof()
+ 50421 %   En el for con sizeof()

Conclusión: este es quizá el ejemplo mas claro a la hora de programar nuestras aplicaciones, hemos de tener muy en cuenta que el tamaño deveriamos calcularlo antes de declarar el for() para así agilizar sustancialmente nuestra aplicación.

Sin mas os animos a visitar la página del autor: http://www.phpbench.com/

Entrada original: My blog: Syntax Error