Archive for the ‘ html ’ Category

Los mejores CMS del 2010-2011 filtrados y opensource


Lista con los mejores CMS open source para el Q4 2010, Q1 2011, para novatos

Sin dudas el mejor CMS es aquel que programemos nosotros, pero si llegaste a este post posiblemente tengas apenas digerido el include del php o quizás ni eso,  por eso filtro esta lista, con los que podrás montar webs de una manera rápida, sencilla y profesional, demás esta decir que cada uno tiene sus traducciones al español y contenido de testeo el cual reemplazaremos pero nos sirve para ver como queda, además recomiendo probarlos en el Server local (simulador de webhosting en modo local xampp para Windows y lampp para linux) recomiendo que tengan a mano el firebug del firefox y un editor de codigo, ya tendrán ustedes el suyo propio sino el htmlpad va muy bien, ya verán para que….

CMS MADE SIMPLE

CMS completamente open source, con una gran galería de templates en calidad y cantidad, de rápido montaje y muy efectivo a la hora de entregar el control a sus dueños finales, este proceso de entregar el site y que el dueño final se sienta cómodo es critico, ya que si entregamos un joomla los dueños finales puede desde asustarse a la primera vista del panel de administración hasta perderse y modificar cosas del núcleo que desembocarían en un caos total, cms made simple en este caso se presenta en castellano con los contenido bastante separados, además de incluir los permisos de users y grupos para evitar conflictos mayores.

JOOMLA CMS

Debido a que nuestro nuevo sitio lo tenemos que entregar rápido, y aún no conocemos Joomla (supuestamente), baja a segunda posición, si bien es muy poderoso, es complejo de dominar, lo cual hace que nuestra entrega se vea demorada, ahora, si tienes 10-20  días para entregar el site, métete de lleno con el joomla, la comunidad de desarrolladores es la mas grande, los módulos para instalar son muchos, las templates son muchos, si ya conoces joomla, y no te gusta por h o por b, puedes probar made simple, el anterior, pero mi recomendación es que continúes con joomla, el cual subiría de posición si ya tienes conocimiento de joomla o eres experto en html, php y css ideal para sites de todo tipo, incluye comercio electronico, portales, foros y demas.

WORDPRESS

Cae a tercera posición, wordpress en una primera instacia te permite alojar tu blog en sus mismos servidores, pero cuando quieres avanzar y alojar tu blog en un servidor propio, tienes que pagar las redirecciones 301, además en sus servidores cada pequeño detalle que quieres tener, suma su dinero, si bien su css es mas dúctil que el resto, recomendación, monten wordpress en un servidor propio a la primera oportunidad, no dejen el blog en wordpress, a favor tenemos el hecho de que es muy fácil de publicar post sin complicaciones ni riesgos y además tiene ventajas a la hora de hacer seo comparado con Blogger. Ideal para blogs

Drupal

A medio camino entre joomla y made simple en términos de complejidad, también es una buena opción, tiene una gran comunidad de desarrolladores, buen soporte SEO y permisos de acceso editables y flexibles, drupal tendría la segunda posición en cualquier circunstancia si ya conoces made simple y joomla y tienes una opinión formada de ambos

MODX

Curioso y complejo, a medio camino ente un cms y un Framework. Tienes que programar de movida  todo el layout para que arranque, de ahí en mas tendrás que programar todo el front end entero, modx si bien es exageradamente complejo a la primera, la potencia es mucha y te da control total al finalizar el site

Quieren probarlos a todos? Perfecto tienen que instalar el xampp, lampp según tengan win o linux tiene licencia gnu y pesa muy poco para descargar, a que esperan? Luego de instalarlo les queda adentro de las carpetas de xampp una carpeta llamada htdocs sueltan el contenido del rar del cms que bajen ahí, luego en el navegador en la barra de direcciones tipean localhost y ya pueden ver su cms andando, quizas tengan que hacer una base de datos en el MySQL solo crean una nueva base de datos, pongan el nombre de la nueva base de datos y ya

Anuncios

SJR Parking Systems, nuevo sitio con css3 producido por Jarivia


SJR Parkingsystems, nuevo sitio con CSS3 producido en  Jarivia

vray hdri desarrollo web omer sjr parking systems

SJR Systems Parks es una empresa próxima  a vender sistemas de optimización de espacio en estacionamientos en colombia, basados en utilizar el espacio superior de un coche ya estacionado por medio de plataforma de elevamiento hidráulico,  SJR vende sistemas OMER LIFT, lider del segmento en europa, bajo las estrictas normas europeas que dan cuenta de la calidad de sus productos.

dada la inusual pero nesesaria naturaleza de sus productos se usaron animaciones 3D de sus productos, para mostrar tanto su diseño, como su comportamiento en aplicaciones reales, brindadole un alto valor agregado al sitio.

para el sitio se uso tecnología css3 y ajax, técnicas seo de posicionamiento a nivel de código y redacción con técnicas seo en algunas áreas cruciales.

desde Jarivia agradecemos a SJR por haber confiado ciegamente en nosotros.

52 Framework, framework para Html 5 y Css 3


52 FRAMEWORK, Destilando la potencia de CSS 3 en conjunto con HTML 5

html5 y css3 son el nuevo standar de diseño web y la tendencia de la próxima década, y de la mano de la comunidad del software libre nos llega este nuevo framework, recordemos que un framework css como el blueprint 960 nos ofrece la capacidad de escribir directamente las etiquetas html para luego modificar pequeños detalles de la hoja css, ademas de entre otras cosas, el reseteador css para equilibrar a todos los navegadores y crear verdaderas plataformas  web cross browsers;

basada en esta premisa y con las actualizaciones css de nivel 3 y html 5 nos encontramos con 52 FRAMEWORK CSS3 HTML 5

veamos cuanto de poder hay debajo del titulo y cuanta flexibilidad ofrece

  • sombras para textos y objetos de cajas
  • bordes rendondeados
  • con pocos hacks es posible habilitar todas las funciones para todos los navegadores
  • script embebidos sin nesecidad del atributo type
  • nuevos campos de introducción de texto (email, url etc)
  • usa los tags más comunes de html5 (header, nav, section, article, footer, y proximamente mas)
  • usa el nuevo selector css 3 “selection” que permite manipular las propiedades del texto seleccionado
  • usa una grilla de 16 columnas de 52 pixeles de ancho cada una separados por 8 pixeles
  • css3 gradientes para elementos block

ver demo de 52 framework

pagina oficial de 52framework

el software es código abierto y esta en constante desarrollo, y estan abiertas las plazas para participar del proyecto

pseudoclases dinamicas, :hover :active :focus, como darle mas interactividad a los links con CSS


con CSS y un poco de imaginacion podemos darle mucha mas nteractidad a nuestros documentos html, en este caso para los estados sobre, activado, y focus.

  • la pseudoclase :hover entra en actividad cuando un puntero esta sobre el link o elemento sin activarlo
  • la pseudoclase :active entra en actividad en el momento que el usuario presiona el mouse sobre el elemento, hasta que lo suelta
  • la pseudoclase :focus se activa cuando se hace foco sobre un elemento, como por ejemplo cuando nos ponemos a rellenar yy escribir dentro de un formulario
  • a:hover{color:red;}
    a:visited {color:blue;}

    un elemento puede combinar muchas pseudo clases a la vez

    CSS 2.1 no define si el padre del elemento en cuestion esta hover o active, es indiferente
    a:hover tiene que ser puesto despues de a:link y a:visited, de lo contrario las caracteristicas de hover bañaran el link entero por el tema de la cascada
    ejemplos
    a:focus { background: yellow }
    a:focus:hover { background: white }

star rating con html, php, js y un txt


Para la parte del css me he basado en el código de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y así ya no requiero una base de datos

El diseño de las star rating en el form html

Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el código del formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method=”post” action=”index.php”>
<ul class=’star-rating’>
<li class=’current-rating’ style=’width:<?php echo 25 * round($promedio);?>px;’>Currently 3.5/6 Stars.</li>
<li><a href=’#’ title=’1′ class=’one-star’>1</a></li>
<li><a href=’#’ title=’2′ class=’two-stars’>2</a></li>
<li><a href=’#’ title=’3′ class=’three-stars’>3</a></li>
<li><a href=’#’ title=’4′ class=’four-stars’>4</a></li>
<li><a href=’#’ title=’5′ class=’five-stars’>5</a></li>
<li><a href=’#’ title=’6′ class=’six-stars’>6</a></li>
</ul>
<input value=”0″ />
<input value=”Votar” />
</form>

La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial

AJAX

Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique
Para eso voy a hacer un simple javascript invocando mi librería jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src=”jquery-1.2.6.min.js”></script>
<script>
$(document).ready(function(){
// Detecto la estrella que es presionada
$(“li.star a”).click(function(event){
// Recojo el valor de la estrella
valor_actual=$(this).attr(“title”);
// Cambio el estilo para mostrar la estrella seleccionada
$(“li.current-rating”).css(“width”, valor_actual*25);
// Cambio el valor del campo hidden
$(“#my_vote”).attr(“value”, valor_actual);
});
});
</script>

Ya tenemos las estrellas, tambien se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>
Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el codigo php requerido es:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Verificamos si se ha votado
if (isset($_POST[‘my_vote’])) {
Abrimos el archivo datos.txt
$filename = ‘datos.txt’;
// Capturamos el valor del voto
$somecontent = $_POST[‘my_vote’].”\n”;
// Verificamos que nuestro archivo sea escribible
if (!$handle = fopen($filename, ‘a’)) {
echo “Cannot open file ($filename)”;
exit;
}
// Escribimos $somecontent en nuestro archivo
if (fwrite($handle, $somecontent) === FALSE) {
// Marcamos error de escritura
echo “Cannot write to file ($filename)”;
exit;
}
// El archivo se escribio correctamente y lo cerramos
fclose($handle);
}
//abro el archivo para lectura
$archivo = fopen (“datos.txt”, “r”);
$num_lineas = 0;
while (!feof ($archivo)) {
// Leo linea por linea las votaciones pasadas
if ($linea = fgets($archivo)){
// Guardo la cantidad de votaciones y sus valores
$num_lineas++;
$valores[$num_lineas]=$linea;
}
}
fclose ($archivo);
//print_r($valores);
// Calculo el total
$total=0;
for ($i=1; $i&lt;=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo “total: “.round($promedio);
?&gt;

Las 12 mejores librerias y frameworks para programación web


Las 12 mejores librerías

Esta es una lista de las 12 librerías más útiles que he encontrado y que utilizo a menudo, es una manera sencilla de utilizar la últimas tecnologias con un ahorro de tiempo considerable y resultados excelentes.
Estas librerías se basan en lenguajes como javascript,php,ajax,css…

1) Moo.fx – Su principal cualidad es que es muy ligera,más bien la podríamos definir como una diminuta libreria de efectos javascript escrita con prototype.js. Es fácil de usar,rápida y nos ofrece controles para modificar atributos como Height, Width, y Opacity con un gran rendimiento.Esta tambien optimizada para que escribas el menor código posible.

2) Rico – Una librería de uso abierto en JavaScript para crear aplicaciones amigables. Utiliza tecnologia Ajax, manejo de drag and drop , y otros muchos efectos.

3) Swat – Desarrollada por silverorange, Swat es un conjunto de herramientas open source para aplicaciones web escrito en PHP.

4) ColorCombos – ¿Quien no ha pensado nunca como una libreria de colores podria ahorrarnos cantidad de tiempo probando combinaciones?.Bien con esta aplicación podremos encontrarmultitud de combinaciones de colores solo seleccionas un color y se te mostraran diferentes combianaciones optimizadas.

5) script.aculo.us -Fácil de utilizar, compatible y potente ademas de proveerte de herramientas que dan a tu web un estilo Web 2.0.

6) Mochikit – Ligera y fácil de utilizar conseguirás resultados excelentes en muy poco tiempo.

7) Dynamic Drive CSS Library – Sin duda alguna podrás encontrar original y práctico código CSS tales como menus o botones que mejoraran el impacto visual de tu Web.

8 ) PEAR – Un framework y sistema de distribución de utilidades Php. PEAR nos ofrece complementos php agrupándolos en “Packages”.

9) DHTML Goodies – Una buena librería de scripts DHTML y AJAX.

10) dojo – Conjunto de herramientas open source JavaScript con la que obtienes resultados profesionales de manera facil y rápida.

11)jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web

12) MooTools es un Framework web orientado a objetos para JavaScript, de código abierto, compacto y modular. El objetivo de MooTools es aportar una manera de desarrollar JavaScript sin importar en qué navegador se ejecute de una manera elegante. MooTools aporta una API documentada más enfocada a la orientación de objetos que la implementación estándar soportada por los navegadores web.


mandame a Menéame


mandame a Fresqui


mandame a Twitter

template PHP HTML/CSS. REDUX


Proyecto tras proyecto, prueba tras prueba, siempre volvemos a escribir el mismo código una y otra vez.

El diseñador Phil Thompson ha liberado REDUX que es un simple y pero utilísimo template PHP HTML/CSS.

Este consta de :

  • una página HTML básica con el patrón de diseño MVC o Model View Controller(mi patrón de diseño favorito);
  • una cabecera o header HTML que se incluye como /templates/header.php;
  • un pie de página o footer HTML que se incluye como /templates/footer.php;
  • y un simple template para la clase  /class/template.class.php.

Acorta los tiempo pruebas, de desarrollo y evita tener que volver a escribir el mismo código una y otra vez con REDUX, simple, pequeño pero poderoso.

Visita : REDUX

Vía: CSS GLOBE