Todo Para el WebMaster

Esta librería de clases en PHP nos permite tener una máxima experiencia en seguridad para ataques de XSS (Cross-site scripting), filtrando con excelente eficiencia los datos enviados por métodos como POST, GET o incluso al almacenar directamente en la base de datos.

Este es usado ampliamente por los mas reconocidos CMS como joomla, wordpress, drupal.

Además también es posible filtrar nuestro codigo HTML en formularios wysiwyg para validar el código con los estándares de la W3C, o simplemente filtrar el código mediante nuestra propia lista de código valido.

Link: http://htmlpurifier.org/

Bordes Redondeados

Lo primero es la solución definitiva para bordes redondeados, directamente con css, SIN
IMAGENES y funcionando en todos los navegadores... esto se logra gracias al archivo border-radius.htc

Archivo - Demo

HTML

< class = "curved">Div con esquinas redondeadas< / div >

CSS

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}

Distintos bugs solucionados

Dean Edwars acaba de actualizar IE7-js, la librería Javascript que nos permitirá mejorar en muchos aspectos Internet Explorer, por ejemplo los problemas con los CSS’s, transparencias con las imágenes PNG bajo IE 5 o IE 6.
Sin duda con esto ahora en tu poder, IE dejara de ser tan molesto a la hora que debas diseñar ya que este Javascript hará que Internet Explorer se comporte acorde con los estándares web. Además puedes usarlo directamente desde los servidores de Google o bien descargar las liberarías para usarlo desde tu propio servidor.

Demo - Descargar

Características
Entre las características que presenta esta librería, tenemos selectores CSS, propiedades CSS y HTML, entre las cuales destacamos:

Selectores CSS parent > child :hover :first-child [attr] [attr="value"] [attr*="value"]

Propiedades CSS background-image cursor display max-height max-width min-height min-width position

HTML PNGs transparentes Doble margen Contenido sin scroll

Luego de mucho tiempo de "virtualidad" en esta y otras comunidades hemos tomado la posta para armar una serie de Cafés en todo el país y en forma simultanea.

La realidad es que en Argentina estamos bastante más retrazados en estos temas que otros paises y tampoco sabemos con exactitud cúal es la magnitud de nuestra Comunidad en el País. Por eso queremos poner manos a la obra en este asunto y te invitamos a sumarte.

La idea es hacer un Café en cada lugar del país donde hayan al menos dos usuarios que puedan juntarse a compartir, aprender y divertirse. Tal como es la filosofía de los Café Joomla alrededor del mundo. Para ello hemos planteado diferentes núcleos o reuniones todos a desarrollarse el día viernes 20 de noviembre de 2009 a las 19:30 hs.

Los lugares los iremos informando en el foro que hemos creado solo para esta discución y con acceso restringido a usuarios, ya que necesitamos algo de compromiso extra en esto. A medida que se definan los núcleos, es decir las ciudades y los lugares físicos donde se desarrollarán las reuniones las iremos publicando en este post para que sean muy claro y unos días antes del evento haremos llegar una gacetilla a todos los Usuarios de la Comunidad.

Cómo podés ayudarnos?

1. Creando un núcleo, es decir una reunión en tu ciudad. Es posible que hayan varias reuniones en diferentes lugares en una misma provincia, pero queremos evitar que hayan dos núcleos a menos de 50 km de distancia. La idea es conocernos personalmente y estrechar vínculos. Revisá si en tu ciudad no hay ya una iniciativa, si es así solo tenés que abrir un post en el foro y comenzar la convocatoria.
2. Sumándote a un núcleo existente y ayudando en la organización. Para ello deberás visitar al menos una vez al día el foro y además difundir la actividad donde te sea posible.
3. Ayudando con la difusión. Ya sea en tu blog o web, tu grupo de amigos o en otras comunidades donde puedan haber interesados, podés referir esta noticia o hacer tu propio post.

Luego de todo esto, la idea es poder llegar a mediados del 2010 a realizar el primer Joomla Day Argentina, por eso es muy mportante conocernos y comenzar a hacer vínculos más fueres que nos permitan, no sólo como decimos, divertirnos y compartir, sino encarar tan importante tarea para el desarrollo de la comunidad en nuestro país.

Te invitamos a sumarte cuanto antes!
Visitá el Foro y enterate de las novedades

SimplePie un librería para codeigniter con muchas clases y funciones, se utiliza para crear de manera rápida y fácil un lector de RSS y usarlo en nuestros proyectos en CI.
Tiene muchas funcionalidades como obtener datos del autor de los feed, promocionar marcadores sociales y lectores de feed populares como google o yahoo.
Lo mejor de todo es la excelente documentación tanto del API, como tutoriales y otras cositas.

Link simplepie.org

Codeigniter es un framework para php, que realmente me ha gustado, es fácil de aprender , instalar y usar.
He leído bastante en la red buscando un framework para trabajar, y decantamos por este.
Entre las opciones encontramos a Zend, Cake PHP, symphony entre otros, pero resultaron ser robustos en demasía; a raíz de esto pesados, dificiles de instalar y de aprender.
Claro, si el objetivo es hacer grandes aplicaciones, como ser una empresa donde trabajan una docena o más estos resultan ideales.
Pero en nuestro caso, solo buscamos algo ligero, que no traiga problemas, sino soluciones y además rápidas. Sus librerías son más que suficientes para escribir el codigo necesario, ahorrando tiempo y esfuerzo. digamos, para no reinventar la rueda.

A continuación les dejo la guía de usuario en español

También podemos descargar el manual en español

Vale aclarar, que el uso de framework requiere un minimo conocimiento de lenguajes orientados a objetos y también PHP. Si ya has experimentado un poco con ambos, pues codeigniter sera fantástico!!

Link codeigniter.com

Wix permite a sus usuarios crear páginas web con un estilo profesional utilizando la tecnología Flash.

Wix es una herramienta gratuita que nos permite desarrollar sitio web en flash con calidad de diseñador gráfico. Además de sitios permite desarrollar aplicaciones, contenidos y animaciones.

El manejo de la herramienta es bastante simple e intuitivo, no requiere conocimientos de css, php o similares.
Una vez realizado nuestro trabajo podemos utilizarlo en nuestro sitio con la utilización de una etiqueta embebed para html similar a la de yootube.

Link www.wix.com.

Hemos encontrado una manera atractiva de llevar a cabo un dinero extra aprovechando los movimientos de nuestros sitios, mediante la acción de referir el uso a otros usuarios de determinado sitio de pago por visitas, click y compras.
En nuestro caso hemos encontrado atractivo BeRuby.com y comenzamos a fomentarlo con buenos resultados hasta el momento.

La idea se basa en referir usuarios y obtener beneficios, no solo por nuestros movimientos, sino por los generados por nuestros referidos y a su vez también por los referidos de estos.

Pueden ver un vídeo más explicativo Aquí. No dejes de probarlo por cree que no va a servir, nada se pierde y hay mucho por ganar, animamos a buscar otro tipo de alternativa viable para mejorar los ingresos.

Link BeRuby.com

Se trata del modelo de linksharing tan famoso, taringa, liberado. esta desarrollado con SMF (simplemachines), tiene las mismas prestaciones y es muy facíl su implementación.
Trabaja con php 5 + mysql asi que cualquier servidor les servira.

Todavia se encuentra en una fase beta de construcción, si eres programador y te interesa puedes unirte a la comunidad.

Funciones:
———-
Sistema de Puntos / Rangos / Monitor de usuarios
Galeria de imagenes / Bloques para anuncios publicitarios
Sistema de comentarios / Panel de moderacion
Panel de administracion / Categorias editables
Asignacion de permisos / Reporte de Posts
Seccion de Reglas / A cerca de
Themes editables / Y mucho más!

———————-

Requerimientos del servidor:

Servidor con Soporte PHP 4 en adelante y base de datos Mysql

10 MB libres en disco para la instalación.

link: SPIRATE.NET

Muy buen vídeo, una parodia de Matrix corriendo bajo Windows xp, esta en ingles pero seguro que lo esencial del vídeo se entiende a la perfección aunque no entiendas de este idioma.

Un tooltip

es una herramienta de ayuda visual, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

En este post vamos a crear tooltip personalisados utilizando solo CSS.

Como Primera acción veamos en detalle el codigo CSS, este es el corazón y pulmón de nuestros ToolTips.
Como veran el codigo es bastante simple para quienes conocen lo minimo de CSS.

a.tooltip { /*Propiedades del texto visible*/
position

determina la forma en que se ubica un elemento.


RELATIVE: es el valor por defecto.


ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.

: relative; /* posición */
text-decoration: none !important; /* Eliminamos el subrayado */
color:#0080C0 !important; /* Cambiamos el color de texto */
font-weight:bold !important; /* negritas al texto */
}

a.tooltip:hover

Define el estilo cuando el ratón pasa sobre él.

{/*Hace aparecer el cuadro*/
z-index

Número de orden dentro de la pila de elementos
como los elementos pueden ubicarse en posiciones absolutas dentro
de la página, algunos pueden superponerse visualmente con otros,
para controlar cuál estará por encima, les asignamos un número entero,
cuanto más alto sea el número, más arriba estará.

:999; /* Definimos que este por encima de todo */
background-color:#000000; /* obligatorio definir color de fondo */
}

a.tooltip span { /* Ocultamos el elemento */
display

establece si un elemento será mostrado y cómo será mostrado


BLOCK: un salto de línea antes y después del elemento


INLINE: ningún salto de línea antes ni después del elemento


NONE: no se mostrará

: none;
}

a.tooltip:hover span { /*Propiedades del cuadro*/
display

establece si un elemento será mostrado y cómo será mostrado


BLOCK: un salto de línea antes y después del elemento


INLINE: ningún salto de línea antes ni después del elemento


NONE: no se mostrará

: block; /* se muestra el cuadro */
position

determina la forma en que se ubica un elemento.


RELATIVE: es el valor por defecto.


ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.

: absolute; /* posicion de cuadro */
top:2em; left:2em;
width:250px; /* ancho del cuadro */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* color de fondo*/
color: #FFFFFF; /* color del texto */
}

Ahora crearemos las etiquetas que le daran vida...

<a class="tooltip" href="#"> el texto visible
<span> el texto oculto (cualquier código HTML)
</span>
</a>

Fuente: Vagabundia

Esto surgio con la necesidad de crear un menu estatico a pedidio de un cliente;
en un primer momento se cree que va a resultar un poco complicado, tal vez, hasta necesario utilizar javascript.

Pero encontre una solución al problema de una manera asombrosamente simple.... CSS.

Como primer paso creamos el div que va a contener el texto estatico.

<div class="static-id"></div>
Aqui el contenido estatico....
</div>

Ahora vemos a continuación el codigo CSS.

static-id {
position: fixed;
}

Tal vez seria mucho mas simple de la sguiente manera.

<div style="position: fixed;"></div>
Aqui el contenido estatico....
</div>

Ejemplo de menu estatico.

Solo tiene un pequeño problema, no funciona en IE6.
Espero les sea de utilidad, o por lo menos educativo.

Las Transparencias son un efecto espectacular, lamentablemente no son muy populares. una del as mayores razones es que antes se usaba imagenes PNG, por el pobre soporte que tenia IE6.

Esto empezo a cambiar con la utilización de IE 7 y Firefox que se volvieron cada vez mas populares en el sistema operativo de Windows.

Aqui presentamos la manera de crear transparencias utilizando la llamada opacity tag y las propiedades de opacity filter basados en IE.

Como puedo crear columnas transparantes uq e funcionen en todos los navegadores?

Esto es posible utilizanco CSS. Crearemos una columna de fondo
transparente con un tamaño, y dentro colocaremos una columna transparente y más pequeña aque la anterior donde se pondra el contenido.



Empezemos
Definimos las columnas:

<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>

Nosotros podemos camabiar la posición de la columna contenedora: position: relative; float; left; esto nos permite cambiar la posición de la columna de contenido dentre de la columna transparente.

column-1 {
position: relative;
float: left;
width: 500px; /* Se puede cambiar el ancho */
}

Ahora crearemos la columna transparente...

css.overlay{
position: absolute;
top: 0; /* permite subir y bajar la columna */
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* para viejos navegadores Gecko-based */
filter:alpha(opacity=65); /* para IE6&7 */
}

Ok. Ahora veamos el codigo para la columna de contenido:

column-1 .content {
width: 460px;
padding: 20px;
}

Ya casi terminamos. Como veras hasta ahora, el contenido aparece por debajo, para solucionar esto utilizamos la posicion relative.

css.content {
position: relative;
}

Terminamos, solo queda resolver un problema, como siempre, que funcione en IE:

* Usamos el asterico para que solo sea leido por IE-6 */
* html #column-1 .overlay {
height: expression(document.getElementById("column-1").offsetHeight);
}

Puedes mirar un muy buen Ejemplo.

Puedes descargar el codigo fuente Aqui.

Fuente Original bitsamppixels.com.

Mediante el uso de XHTML / CSS + JQuery (AJAX) se logra este espectacular Slide de simple diseño y una gran versatilidad, además de un excelente efecto de animación.

Este Slider, posee un contenido principal, que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay pequeñas imagenes que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier parte del slide. Además cada parte diferente del Slide permite tener una breve descripción y un titulo sobre una columna transparente montada sobre la misma imagen del slide.

• Auto-play. No solo permite cambiar las distintas muestras del Slide, sino también permite ir rotandolas de manera automática cada un periodo de tiempo determinado.
  
• Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

Ver demo
LINK: Auto playing featured Content Slider

Este servicio web permite mejorar la velocidad de carga de tu site redimensionando las imágenes que forman parte del mismo.

Tanto al subir imagenes desde tu ordenador a través de tu navegador web, o indicando la dirección URL de una imagen, Smush it comprimira de forma automática para proporcionar en un zip, una imagen muchos menos pesada que la original y sin apenas pérdida de calidad.

Este soporta formatos de imagenes gif, jpg, png y gif con animaciones.

Para aquellos que usan Mozilla Firefox existe una extensión de Smush it que se integra como un botón en la barra de estatus del navegador web y hace más sencillo si cabe la tarea de redimensionar imágenes.


LINK: Smush.it.

Espectacular herramienta que nos permite editar de manera online nuestro archivo .htacces mediante un sencillo formulario que nos va preguntando que preferimos para las determinadas opciones existentes.

Los archivos .htaccess permiten modificar la "conducta" del servidor web de los planes UNIX (Apache Web Server) lo cual permite hacer muchas "cosas".

Nos permite:

* Direccionar a las paginas de error, para no permitir que el usuario ingrese a un sector no debido; errores mas conocidos: 405, 405, 406, 407, 408, 500, etc
* Definir paginas por defecto.
* Definir las directivas de redireccionamiento, tanto permanentes como temporales.
* Definir la restricción de acceso a determinadas IP.


LINK: www.htaccesseditor.com

Nos Permite Saber:

• Páginas indexadas en diferentes buscadores y redes sociales
• Ranking, al menos según tres medidores
• Validaciones XHTML, CSS y RSS
• Sindicación, cuanta gente nos lee realmente vía RSS
• Diagnostico, completo informe sobre cosas a mejorar
• Backlinks, para saber quién nos está referenciando
• Marcadores sociales, es bueno saber quien habla de ti y desde donde.
• Análisis de metatags
• Pagerank
• Visitas diarias
• Precio orientativo por la venta de un enlace y del sitio

Si desean darle diferentes estilos a los párrafos de sus proyectos web, Typechart será un sitio indispensable para visitar. Typechart es un sitio que nos presenta diversas formas de resaltar el contenido de nuestro blog, jugando con las propiedades de nuestras fuentes. Lo bueno es que nos permite ver en tiempo real como se verían nuestras fuentes tanto en Windows como en MAC. Y lo mejor de todo, es que una vez que hemos encontrado una idea original podremos obtener el código CSS que nos permitirá luego, obtener en nuestros proyectos online los mismos resultados. Encontraran cantidad de opciones y ejemplos, que podrán poner a prueba en sus futuros diseños.

Enlace Typechart

TableKit es una tabla basada en HTML que utiliza el framework Prototype. Permite la implementación de ordenamiento de columnas (sorting), modificación de tamaño de columnas, y edición de los campos de manera automatica mediante el uso de AJAX.

A simple vista parece un sistema de ordenación de tablas, pero las sorpresas están un poco más ocultas

• Ordenación dinámica mediante Javascript
• Redimencionamiento mediante Javascript
• Editable en vivo
• Usa el potencial de Prototype para realizar todas las funciones.

Enlace: www.millstream.com.au/view/code/tablekit/

Ejemplo: www.millstream.com.au/upload/code/tablekit/

El equipo de Ferca Network sigue lanzando proyectos interesantes este año. Esta vez GenFavicon una practica aplicación online que nos permitirá generar en simples pasos favicones para nuestro sitio web. Para utilizarlo GenFavicon nos permite subir desde muestro ordenador una imagen con un tamaño máximo de 4mb o bien introduciendo la url de una imagen que ya tengamos online. Una vez que subimos nuestra imagen podremos optar por elegir el tamaño que tendrá nuestro favicon, entre las medidas usuales para ello, 32×32, 48×48, 64×64, 128×128 px. Posteriormente daremos un click sobre la opción “captura y Previsualización”, opción que nos permitirá visualizar y recordar el área de la imagen con la cual deseamos crear el favicon. Por ultimó, solo queda descargar nuestro bonito favicon.

Enlace GenFavicon