En este post vamos hablar de una web que va a ser de utilidad si estas buscando respuestas sobre desarrollo, su nombre Htmleando.com.

Sus temas, Html, php, api, css , dominio, estándares, google, herramienta, html, ie6, ie7, imagen, javascript, json, programación, prototype, regex, seo, symfony, trafico,  utf-8 y todo lo que respecta a temas de programación, te vas a encontrar con un sistema bien sencillo, el post es una pregunta y después tienes las respuesta al problema.

Sin muchas vueltas te las responden los editores con las habilidades para estos temas.

Escribo esta entrada en reconocimiento al servicio que hace esta web a todos aquellos que estamos en el tema de la programación o aprendiendo y muchas veces nos encontramos en un callejón sin salida.

Y aquí encontraran muchas de esas respuestas.

Continuamos con dos plantillas más. En este caso estas plantillas son ideales al momento de montar tu empresa ya sea de Marketing o una empresa de hosting y dominios.

Muy fácil de editar con Frontpage o Dreamweaver, colocar tus enlaces hacer una pagina con tus datos presentaciones y mas.

Como siempre esperamos tus comentarios y opiniones.

Descargar Plantilla

Descarga tu Plantilla

El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cómo se construye el modelo de caja:

El modelo de caja en CSS

A primera vista, la imagen anterior puede parecer muy teórica, así que intentemos usar el modelo en un caso real con un encabezado y algo de texto. El código HTML de nuestro ejemplo es el siguiente (extraído de la Declaración Universal de los Derechos Humanos):

<h1>Artículo 1:</h1>

<p>Todos los hombres nacen libres

e iguales en diginidad y derechos. Están

dotados de razonamiento y consciencia y

deberían de comportarse entre sí con

espíritu de hermandad.</p>

Si añadimos algo de color e información sobre la fuente, el ejemplo se podría presentar así:

El ejemplo contiene dos elementos: el elemento <h1> y el elemento <p>. El modelo de caja para los dos elementos se puede ilustrar como sigue:T

Aunque puede parecer un poco complicado, la imagen muestra cómo cada elemento HTML está rodeado por cajas, cajas que se pueden ajustar usando CSS.

Resumen

En esta lección hemos introducido el modelo de caja. En las tres lecciones siguientes examinaremos más detenidamente cómo crear y controlar elementos del modelo de caja.

Via: http://es.html.net/tutorials/css/

Cómo comprimir tus archivos JS (código Javascript) desde PHP con JSMin. Explicamos el funcionamiento de la librería JSMin, en su versión para PHP.

Cuando se trata de optimizar una página web, cada Kilobyte cuenta. Como sabemos, cuanto menos pesada en bytes sea una página web, más rápido se transfiere por Internet y antes la puede visualizar el usuario. En este artículo vamos a ver una librería que nos puede ayudar a comprimir un archivo con código Javascript, para que ocupe menos espacio y se pueda transferir más rápidamente por la Red.

¿Cómo se puede comprimir un código Javascript?

El concepto que tenemos de compresión de archivos seguramente tenga relación con los conocidos .zip u otros formatos de compresión como el .rar. Pues la compresión que vamos a ver para códigos Javascript no tiene nada que ver. No os vamos a explicar que comprimáis el archivo con zip y lo publiquéis.

En realidad, en este caso, la compresión se basa en una optimización del código para que ocupe menos espacio. Como podemos saber, a la hora de programar, colocamos muchos caracteres de más en el código, que no son del todo necesarios. Esto ocurre con, por ejemplo, espacios de más, saltos de línea, tabulaciones, pero sobre todo con los comentarios al código.

JSMin lo que hace es revisar el código Javascript, analizarlo y devolver una nueva versión de ese código, al que se le ha suprimido toda la información superflua. El resultado consiste en un código Javascript que sigue ejecutándose perfectamente en el navegador, con las mismas sentencias y funcionalidades, pero que ocupa mucho menos.

¿Dónde puedo obtener JSMIN para PHP?

El script que estamos comentando, JSMin para PHP, podemos descargarlo gratuitamente desde una página de Google Code, donde está publicado para descarga:http://code.google.com/p/jsmin-php/

Además, para el que le interese, dejamos el link a la página web oficial del producto, donde se ofrecen unas explicaciones básicas sobre qué hace JSMin para comprimir el código Javascript.

http://www.crockford.com/javascript/jsmin.html

¿Cómo comprimir el código con JSMin para PHP?

JSMin tiene una función, que debemos ejecutar para comprimir un código Javascript. Dicha función recibe un parámetro, que es una cadena con el código Javascript que queremos comprimir. Devuelve una cadena con el código, después de eliminar la información innecesaria y compactar las sentencias.

Lo primero de todo sería incluir la librería con el JSMin para PHP, que hemos debido descargar desde la propia página web del producto, para obtener la versión más actualizada.

include (“jsmin-1.1.1.php”);

Luego podemos utilizar la función minify de la clase JSMin, que realiza el trabajo de comprimir el código JS.

$codigo_comprimido = JSMin::minify(“//codigo javascript”);

Debemos pararnos para explicar esta línea de código, que puede sorprender por el operador :: de PHP (se ven los “::”?)

El operador :: de PHP sirve para invocar métodos de clases, lo que en algunos lenguajes se llaman métodos estáticos, con la particularidad que no hace falta tener ningún objeto instanciado de esa clase para poder ejecutar el método. Es decir, llamamos al método sin pasar por ningún objeto, simplemente con el nombre de la clase.

En ese caso, el include jsmin-1.1.1.php había definido una clase llamada JSMin. Esa clase tiene un método llamado minify(). Con JSMin::minify() estamos llamando a la función minify() declarada en la clase JSMin, sin necesidad de haber creado ningún objeto de esa clase.

Script PHP para leer código Javascript de un archivo de texto y generar otro archivo de texto con el código comprimido

Para finalizar, voy a mostrar un código PHP que he creado para comprimir un archivo Javascript, basándome en JSMin.

Este script define un nombre de archivo que se quiere comprimir y genera otro archivo en el mismo directorio que se llama igual, pero comenzando con “comprimido_”. Ese archivo comprimido contiene el mismo código Javascript, una vez pasada la función minify() de JSMin.

<?
$archivo_script_js = ‘navegador.js’;

include (“jsmin-1.1.1.php”);
$codigo_comprimido = JSMin::minify(file_get_contents($archivo_script_js));

$archivo = fopen(“comprimido_” . $archivo_script_js, “w+”);
fwrite($archivo, $codigo_comprimido);
fclose($archivo);
?>

Como se puede ver, se define arriba del todo el nombre del archivo que tiene el código PHP a comprimir.

Luego se realiza la compresión y se escribe los resultados en un archivo nuevo. El archivo antiguo se llama en este script “navegador.js” y el fichero nuevo con el script comprimido, que se creará en el mismo directorio, se llama “comprimido_navegador.js”.

Conclusión sobre comprimir los códigos JS

Ten en cuenta que la compresión no es un proceso reversible. Guarda siempre una copia de seguridad de los archivos con el código original, que la necesitarás si deseas editar el código.

Eso es todo. Espero que sea de utilidad esta clase para comprimir archivos Javascript desde PHP.

Vía: DesarrolloWeb.com

A traves del tiempo se han experimentado muchos tipos y maneras de programar una Web.

Una de ellas es el uso de tablas para la estructura o esqueleto de la página.

¿Porque el uso de tablas nos podrí­amos preguntar?

Con la voraz competencia de los útimos tiempos, en el campo de la Web y el comienzo de la era de los sistemas CMS, se a hecho necesariamente importante la optimización de nuestras paginas Web.

La tabla permite en primer lugar y muy importante, que nuestra página sea fácil de visualizar en el explorador, sin tener que esperar interminables segundos o minutos para poder determinar el contenido de una Web.

 Segundo permite ordenar el contenido de la misma, colocando pequeños títulos o subtí­tulos, y asi encontrar el contenido, que el ínter nauta busca a la hora de llegar a nuestra Web.

Estas son dos de las causas de porque el uso de las tablas debe ser considerado importante, a la ora de programar nuestra Web.

Acá dos ejemplos sencillos de tablas.

<table width=”100″ height=”16″  border=”1″ cellpadding=”1″ cellspacing=”1″>
<tr>
<th width=”32%” height=”50%” colspan=”2″ bgcolor=”#003399″ scope=”col”>&nbsp;</th>
<th colspan=”2″ scope=”col”>&nbsp;</th>
</tr>
<tr>
<td height=”50%”>&nbsp;</td>
<td>&nbsp;</td>
<td width=”33%”>&nbsp;</td>
<td width=”35%”>&nbsp;</td>
</tr>
</table>

Este se ve así

­Sin bordes y espacios entre.

<table width=”100″ height=”16″>
<tr>
<th width=”32%” height=”50%” colspan=”2″ bgcolor=”#003399″ scope=”col”>Celda conbinada </th>
<th colspan=”2″ scope=”col”>Titulo</th>
</tr>
<tr>
<td height=”50%”>celda dividida </td>
<td>celda dividida</td>
<td width=”33%”>&nbsp;</td>
<td width=”35%”>&nbsp;</td>
</tr>
</table>

Este se ve así

Suena impresionante no, bueno basta de palabras comenzamos de nuevo con plantillas prediseñadas si esta pensando en una Web con linda vista, esta plantilla es quizás la que buscas.

Delicious_Fruit, Vista previa Descarga.

El atributo rel=nofollow, de los enlaces, sirve para que los buscadores no continúen reastreando a partir de esos enlaces.

16/7/08 – Dejemos aquí una pequeña reseña sobre un atributo que se está convirtiendo en esencial en los enlaces y que no habíamos comentado en nuestro manual de HTML, aunque sí habíamos visto algo en nuestro manual de posicionamiento en buscadores.

Nofollow es un atributo de los links HTML (etiqueta <A>), que sirve para definir o marcar el comportamiento de los buscadores cuando rastrean nuestra página web en busca de contenidos para indexarlos. Por defecto, cuando un buscador visita una página web va recorriendo todos sus enlaces y va indexando su contenido en su base de datos de páginas. Esto es algo que hacen automática y periódicamente. Ocurre tanto con los enlaces internos a otras páginas de nuestro sitio como con los enlaces externos a otras páginas web. Los motores que recorren las webs de enlace a enlace, se llaman arañas.

Ahora bien, nosotros podemos, a través del atributo rel=”nofollow”, decirle a un buscador que no continúe indexando los contenidos de la página a la que lleva un enlace en particular.

Lo haríamos así:

<a href=”URL_DEL_ENLACE” rel=”nofollow”>TEXTO_DEL_ENLACE</a>

Un poco de historia sobre nofollow

Para completar estas notas habría que comentar que el atributo fue creado por iniciativa de Google y Blogger en 2005, como una idea para detener el spam de enlaces en sitios web que permiten a los usuarios la participación.

Una práctica común de las personas que pretenden promocionar una página web es realizar comentarios o participaciones en páginas web, en las que insertan enlaces a sus propios sitios. Esto se conoce como spam de enlaces, o con el término de spamdexing.

Con el atributo rel=”nofolow” se pretenden mitigar los efectos de ese tipo de spam en los sitios como foros, blogs, o cualquier página que permita la interacción con la comunidad de visitantes. Algunas páginas como la Wikipedia lo utilizan en todos los enlaces externos.

Actualmente el atributo ren=nofollow está bajo patente, aunque esta está liberada de royalties, lo que quiere decir que se puede utilizar sin limitación y sin tener que pagar nada.

Cómo interpretan los buscadores el Nofollow

El atributo es tenido en cuenta no sólo por el motor de indexación (araña) del buscador Google, sino también por otras arañas de buscadores tan importantes como Yahoo! o MSN. Aunque hay que decir que cada buscador hace un uso particular del atributo.

Habría que aclarar que los buscadores a menudo siguen el enlace que se ha marcado como nofollow, visitando aquella web que se había enlazado. Lo que ocurre realmente es que no tienen en cuenta el link para asignarle ranking o directamente no lo indexan.

Promoción de webs y nofollow

Sobra decir que este atributo resulta bastante potente a la hora de trabajar con la promoción de una página web, puesto que altera directamente el comportamiento de los buscadores al rastrear las páginas, enlace a enlace.

Así pues, los SEO, promocionadores de páginas o personas que trabajan en el posicionamiento en buscadores, lo tienen muy en cuenta en sus técnicas para su trabajo del día a día. Existen diversas técnicas que utilizan este atributo para realizar promoción de webs, como la que explicamos en el artículo Arriesgada pero excelente técnica SEO usando rel=nofollow, pero el uso más importante es el que se ha comentado ya en este artículo: ponerlo a los enlaces externos para no transferir ranking o posicionamiento desde nuestra web a otras webs externas.

Otra técnica relacionada con nofollow, pero más segura, para que no se indexe parte del contenido de nuestra página, es el uso del archivo robots.txt, que ya hemos comentado anteriormente en DesarrolloWeb.com.

Via: DesarrolloWeb.com

Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página, aplicar una animación a un elemento (que aparezca/desaparezca, que se desplace, etc.).Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para poder utilizar las utilidades de DOM, es necesario “transformar” la página original. Una página HTML normal no es más que una sucesión de caracteres, por lo que es un formato muy difícil de manipular. Por ello, los navegadores web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular.Esta transformación la realizan todos los navegadores de forma automática y nos permite utilizar las herramientas de DOM de forma muy sencilla. El motivo por el que se muestra el funcionamiento de esta transformación interna es que condiciona el comportamiento de DOM y por tanto, la forma en la que se manipulan las páginas.DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.La siguiente página XHTML sencilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Página sencilla</title> </head>   <body> <p>Esta página es <strong>muy sencilla</strong></p> </body> </html>

Se transforma en el siguiente árbol de nodos:

Figura 5.1. Árbol de nodos generado automáticamente por DOM a  partir del código XHTML de la página

En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican las relaciones  entre nodos. Dentro de cada nodo, se ha incluido su tipo (que se verá más  adelante) y su contenido.La raíz del árbol de nodos de cualquier página XHTML siempre es la  misma: un nodo de tipo especial denominado "Documento".A partir de ese nodo raíz, cada etiqueta XHTML se transforma en un  nodo de tipo "Elemento". La conversión de etiquetas en nodos se realiza  de forma jerárquica. De esta forma, del nodo raíz solamente pueden derivar los  nodos HEAD y BODY. A partir de esta derivación  inicial, cada etiqueta XHTML se transforma en un  nodo que deriva del nodo correspondiente a su "etiqueta padre".La transformación de las etiquetas XHTML habituales genera  dos nodos: el primero es el nodo de tipo "Elemento" (correspondiente a  la propia etiqueta XHTML) y el segundo es un  nodo de tipo "Texto" que contiene el texto encerrado por esa etiqueta  XHTML.Así, la siguiente etiqueta XHTML:<title>Página sencilla</title>Genera los siguientes dos nodos:

Figura 5.2. Nodos generados automáticamente por DOM para una  etiqueta XHTML sencilla

De la misma forma, la siguiente etiqueta XHTML:<p>Esta página es <strong>muy sencilla</strong></p>Genera los siguientes nodos:

Nodo de tipo "Elemento" correspondiente a la etiqueta  <p>.
Nodo de tipo "Texto" con el contenido textual de la etiqueta  <p>.
Como el contenido de <p> incluye en su interior otra  etiqueta XHTML,  la etiqueta interior se transforma en un nodo de tipo "Elemento" que  representa la etiqueta <strong> y que deriva del nodo  anterior.
El contenido de la etiqueta <strong> genera a su vez otro  nodo de tipo "Texto" que deriva del nodo generado por  <strong>.




Figura 5.3. Nodos generados automáticamente por DOM para una  etiqueta XHTML con otras etiquetas XHTML en su interior

La transformación automática de la página en un árbol de nodos siempre sigue  las mismas reglas:

Las etiquetas XHTML se transforman en  dos nodos: el primero es la propia etiqueta y el segundo nodo es hijo del  primero y consiste en el contenido textual de la etiqueta.
Si una etiqueta XHTML se encuentra dentro  de otra, se sigue el mismo procedimiento anterior, pero los nodos generados  serán nodos hijo de su etiqueta padre.


Como se puede suponer, las páginas XHTML habituales producen  árboles con miles de nodos. Aun así, el proceso de transformación es rápido y  automático, siendo las funciones proporcionadas por DOM (que se verán más adelante) las  únicas que permiten acceder a cualquier nodo de la página de forma sencilla e  inmediata.Via:Librosweb.es

A continuación, se muestra un primer script sencillo pero completo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>El primer script</title>   <script type="text/javascript">   alert("Hola Mundo!"); </script> </head>   <body> <p>Esta página contiene el primer script</p> </body> 

</html>

En este ejemplo, el script se incluye como un bloque de código dentro de una página XHTML. Por tanto, en primer lugar se debe crear una página XHTML correcta que incluya la declaración del DOCTYPE, el atributo xmlns, las secciones <head> y <body>, la etiqueta <title>, etc.

Aunque el código del script se puede incluir en cualquier parte de la página, se recomienda incluirlo en la cabecera del documento, es decir, dentro de la etiqueta <head>.

A continuación, el código JavaScript se debe incluir entre las etiquetas <script>…</script>. Además, para que la página sea válida, es necesario definir el atributo type de la etiqueta <script>. Técnicamente, el atributo type se corresponde con “el tipo MIME”, que es un estándar para identificar los diferentes tipos de contenidos. El “tipo MIME” correcto para JavaScript es text/javascript.

Una vez definida la zona en la que se incluirá el script, se escriben todas las sentencias que forman la aplicación. Este primer ejemplo es tan sencillo que solamente incluye una sentencia: alert(“Hola Mundo!”);.

La instrucción alert() es una de las utilidades que incluye JavaScript y permite mostrar un mensaje en la pantalla del usuario. Si se visualiza la página web de este primer script en cualquier navegador, automáticamente se mostrará una ventana con el mensaje “Hola Mundo!”.

A continuación se muestra el resultado de ejecutar el script en diferentes navegadores:

Figura 2.1. Mensaje mostrado con “alert()” en Internet Explorer

Figura 2.2. Mensaje mostrado con “alert()” en Firefox

Figura 2.3. Mensaje mostrado con “alert()” en Opera

Como se puede observar en las imágenes anteriores, el funcionamiento de la utilidad alert() en los distintos navegadores es idéntico. Sin embargo, existen grandes diferencias visuales en la forma en la que se presentan los mensajes.Via: Librosweb.es

Consulta:

Hola,
Estoy buscando la forma de cambiar el valor de una línea en un txt sin tener que regenerar el txt por completo. Seria como hacer un update en sql.. cambias la línea en concreto según la “id” por ejemplo.

Supongamos que el contenido en el txt es:
lalalala res nose lala
cortaraki iee ueue llla
232323 ieieie ooo aaa

..y quiero que la segunda linea “cortaraki” cambie el contenido. Entonces mi php es:

$filename = “prueba.txt”;
$dataFile = fopen( $filename, “r+” );

if ( $dataFile )
{
while (!feof($dataFile))
{
$buffer = fgets($dataFile, 4096);

$iezoo = split(‘ ‘,$buffer);

if ($iezoo[1] == “cortaraki”){
fwrite($dataFile, “otracosa uno dos tres”);
}
else{
//nada…
}
}
fclose($dataFile);
}

Pero solo consigo crear una 4a línea, no me modifica esa en cuestión.

Me podes echar una mano?

Respuesta:

Para empezar, el uso de archivos es muy tedioso y te quita mucho tiempo.

Te sugiero uses una tabla en base de datos.

Por otro lado si decides continuar con el uso de archivos échale un ojo a estas dos funciones:
file_get_contents: para obtener todo el contenido del archivo. referencia: http://mx.php.net/function.file-get-contents
str_replace: para sustituir la cadena que tu quieras. referencia: http://mx.php.net/str_replace

Otra solución alterna sería:

/*1 obtienes todo el contenido*/
while (!feof($dataFile))
{
$buffer[] = fgets($dataFile, 4096);
}
/*Sustituyes la linea N */

$buffer[N] = “Otra cosa”;

Via: Desarrolloweb