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.

El famoso diseñador TimVanDamme diseñó su mini sitio el Theme Visiting Card y todo el mundo lo elogió mucho por concepto único y muy bonito.

Algo bueno acerca del tema de tarjetas de visita es, usted no tendrá que tocar una sola línea de código. El tema viene con Tema Panel de control desde donde se puede establecer todos los aspectos del tema. Si no es necesario que algunos de ellos aparezcan, simplemente deje en blanco y no aparecerá.

Descargar – Demo

Python es un lenguaje de programación fácil de aprender y potente. Dispone de eficaces estructuras de datos de alto nivel y una solución de programación orientada a objetos simple pero eficaz. La elegante sintaxis de Python, su gestión de tipos dinámica y su naturaleza interpretada hacen de él el lenguaje ideal para guiones (scripts) y desarrollo rápido de aplicaciones en muchas áreas y en la mayoría de las plataformas.

El intérprete de Python y su extensa biblioteca estándar están disponibles libremente, en forma de fuentes o ejecutables, para las plataformas más importantes, en la sede web de Python, http://www.python.org, y se pueden distribuir libremente. La misma sede contiene también distribuciones y direcciones de muchos módulos, programas y herramientas Python de terceras partes, además de documentación adicional.

Esto es algo de que logra este potente programa si estas interesado en el tema descarga el manual en español.

Descargar manual

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/

Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la página. Junto con las flotaciones [propiedad float] (véase la lección 13), el posicionamiento proporciona muchas posibilidades de crear presentaciones avanzadas y precisas.

Principios que rigen el posicionamiento CSS

Imagina la ventana de un navegador como un sistema de coordenadas:

Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenadas.

Digamos que queremos posicionar un título. Usando el modelo de caja (véase la lección 9) el título aparecerá así:

Headline

Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS:

h1 {

position:absolute;

top: 100px;

left: 200px;

}

El resultado será el siguiente:

Como puedes observar, el posicionamiento con CSS es una técnica muy precisa a la hora de colocar elementos. Es mucho más sencillo que intentar usar tablas, imágenes transparentes o cualquier otra cosa.

Posicionamiento absoluto

El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vacío después de ser posicionado.

Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja.

Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento:

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

}

Ver ejemplo

Posicionamiento relativo

Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posicion.

La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento.. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.

Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento:

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

Ver ejemplo

Resumen

En las dos lecciones anteriores, hemos aprendido a flotar y posicionar elementos. Estos dos métodos proporcionan muchas oportunidades de construir tus páginas sin tener que usar métodos anticuados como usar tablas o imágenes transparentes en HTML; en lugar de estos métodos anticuados, usa CSS: es más preciso, ofrece más ventajas y, además, es mucho más fácil de mantener.

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

Si Quiero usar un fondo en dos colores que se vayan mezclando, como hago.

Esto no es posible usando hojas de estilo, lo único que puedes hacer es usar una imagen de fondo. Esta imagen, normalmente es muy delgada y larga, por ejemplo, una línea vertical de 2 pixeles de ancho y de 1000 pixeles de altura. Es un truco puesto que como la imagen se repetirá, el efecto final es un fondo a dos colores.

A continuación hay un ejemplo:

Via: Tejedoresdelweb.com

En este artículo básico de manejo de Photoshop vamos a tratar la herramienta varita mágica, que sirve para hacer selecciones de una manera sencilla y rápida. Quizás este artículo no represente mucha dificultad, pero pensamos que será útil para nuestros lectores más inexpertos y para ir completando nuestra gama de tutoriales sobre las herramientas de Photoshop. Por ahora, todos los artículos sobre el programa los estamos publicando en el manual Taller de Photoshop.

Recuerdo las palabras de un amigo, colaborador y ex-compañero de trabajo, Angel Deblás, -un fiera del diseño gráfico- cuando comentaba hace bastante tiempo algo como esto: “Por facilidad, vamos a utilizar la varita mágica para hacer esta selección, aunque no debería utilizarla.” Su comentario me sorprendió y aun lo recuerdo hoy. Por supuesto, le pregunté qué quería decir con que no debería utilizar la varita mágica, ya que yo la encontraba tan útil. Angel me comentó que siempre hay en Photoshop alguna manera de hacer una selección y que quede mejor que utilizando la varita mágica.

La razón por la que me he parado a escribir este comentario en este artículo publicado en desarrollo web .com, es que me parece ideal como introducción y para transmitir los conocimientos de un profesional del diseño que una vez pude absorber. Así que, aunque la varita mágica nos parezca útil, sin lugar a dudas, tenemos que administrar su uso y no pasarnos de cómodos. A veces convendrá utilizar la selección poligonal o la herramienta de pluma.

La herramienta varita mágica de Photoshop sirve, como decía, para hacer selecciones. Las selecciones que se pueden hacer con la varita son de cualquier tipo, cuadradas, redondas, poligonales o de formas irregulares, así que es bastante versátil. El uso es el siguiente:

Seleccionamos la herramienta varita mágica, que tiene esta forma:

Luego podemos hacer clic en cualquier parte de una imagen con la varita y entonces obtendremos una selección dentro de la imagen. Para establecer los límites de la selección, Photoshop evaluará los colores que hay al lado del pixel marcado con el clic y si son el mismo, o similares, la selección también abarcará esos puntos. De esta manera, continúa muestreando colores de la imagen y añadiéndolos a la selección si son parecidos. El resultado es que la selección va creciendo por las partes de la imagen que tengan un color homogéneo o similar. Así pues, los límites de la selección creada serán marcados por la forma de la propia imagen y los colores que tenga.

La varita nos sirve, por ejemplo, para seleccionar siluetas en una fotografía. Por ejemplo, si tenemos una foto con un cielo homogéneo y utilizamos la varita sobre el cielo, se seleccionará toda la área azul. Podemos ver en la siguiente imagen una selección hecha con la varita mágica del cielo de esta foto tomada en Valencia.

Como veremos en la imagen, se ha seleccionado la mayoría del cielo, ajustando los bordes de la selección al borde de las figuras captadas en la foto. Como veremos, no todo el cielo se ha seleccionado, porque hay partes del mismo que no son muy parecidas al color azul sobre el que hemos hecho clic inicialmente y por tanto no se han muestreado como colores parecidos y no se han cargado en la selección.

Opciones de la varita mágica de Photoshop

Con las opciones de la herramienta varita podemos modificar su comportamiento, para por ejemplo, decir cuan estricto o tolerante debe ser el muestreo de la imagen para definir los bordes de la selección. Las opciones de cualquier herramienta de Photoshop las podemos ver generalmente en la parte de arriba de la ventana del programa y si no aparecen, podemos forzar que se muestren con el menú Ventana – Opciones.

La más importante de las opciones de varita es la Tolerancia. Que permite especificar con un número cuan tolerante o estricta a cambios en los colores es la selección. A menor valor de tolerancia, más estricto será el muestreado de colores. De tal modo que, si ponemos tolerancia cero, sólo se seleccionarían las partes contiguas al punto donde hemos hecho clic de la imagen que tengan el mismo color. Si la tolerancia es muy alta la selección se expandirá, aunque los colores varíen más. Si al hacer la selección de la anterior imagen hubiéramos marcado tolerancia más alta, por ejemplo 60, se hubiera seleccionado toda la área de la foto que corresponde al cielo.

Por tanto, para ajustar las partes de la imagen que entrarán dentro de la selección con la varita, debemos ajustar el valor tolerancia.

Entre las opciones también hay otras importantes:

Suavizar, permite que los bordes de la selección se suavicen, de modo que aunque sean curvos, no se produzca un pixelado.

Contiguo, es para que la selección sólo sea de píxeles contiguos. Es el modo por defecto y como hemos explicado la herramienta. Pero si no lo marcamos, permite seleccionar todos los pixel de la imagen que tengan un color parecido, aunque no estén contiguos al lugar donde hemos hecho clic inicialmente.

Muestrear todas las capas tiene una utilidad interesante cuando trabajamos con distintas capas en Photoshop. Una cosa importante: con la varita mágica en principio hacemos selecciones sobre la capa en la que estamos trabajando, sin muestrear otras que puedan estar abajo o arriba. Si seleccionamos muestrear todas las capas, haremos que la varita se fije en todas ellas como si fuera una sola.

Vía: Desarrolloweb.com

El Suckerfish menús que originalmente al ser utilizado tenia problemas con Safari y Opera, por lo que utilizó una variante basada en Suckerfish llamado Hijo de Suckerfish.

A partir de ahí se a tenido que hacer algunas modificaciones en WordPress.

<div id=”toolbar”>

<?php wp_list_pages(); ?>

</div>

3. In your header.php paste the following.

<script language=”javascript”>

sfHover = function() {

var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=” sfhover”;

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(” sfhover\b”), “”);

}

}

}

if (window.attachEvent) window.attachEvent(”onload”, sfHover);

</script>

4. style.css

Lo queríamos hacer horizontal por lo tanto utilizamos lo siguiente en nuestro archivo style.css.

/*menu */

#nav {

margin-left: 295px;

list-style: none;

background: #900;

padding: 0;

border: 1px solid #fff;

border-width: 0px 0px 0px 1px;

}

#nav ul {

margin: 0;

padding: 0;

height: 1em;

}

#toolbar form {

margin: 0;

padding: 0.1em 2em 0.1em 0em;

height: 1em;

}

#toolbar input {

margin: 1px;

}

#nav a {

display: block;

color: #fff;

text-decoration: none;

padding: 0.1em 2em;

}

#nav li {

float: left;

padding: 0;

background: #900;

border: 1px solid #fff;

border-width: 1px 0;

}

#nav li ul {

position: absolute;

left: -999em;

height: auto;

width: 14.4em;

w\idth: 12.9em;

font-weight: normal;

border: 1px solid #fff;

margin: 0;

list-style: none;

}

#nav li li {

padding-right: 1em;

width: 13.4em;

border: 0px;

}

#nav li ul a {

width: 12em;

w\idth: 9em;

}

#nav li ul ul {

margin: -1.75em 0 0 14em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

background: #F20000;

}

/* end menu */

5. Usted debería estar preparado para seguir. Buena suerte!

6. Editar wp-includes/template-functions-post.php
en torno a la línea 326 comentar o sustituir.

$output .= ‘<li class=”pagenav”>’ . $r['title_li'] . ‘<ul>’;
with
$output .= ‘<ul id=”nav”>’;

Si lo pruebas y funciona o no, hace tu comentario, Gracias

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í