CAT | Diseño web

Todos hemos leído miles de discusiones por blog y comunidades que si Joomla es mejor que Drupal o que Drupal es mejor que Joomla.

Sin duda el Core de Drupal le da un par de vueltas a Joomla por mi experiencia, pero este no es el tema lo que quiero es mostrar una lista de módulos para Drupal que facilitan enormemente crear una red social con este fantástico CMS.

Aunque está lista de módulos no te garantizan el éxito de tu red social sino una temática especializada y de interés común a miles de personas, también te ayudará un diseño profesional esta lista de módulos Drupal te hará la vida más fácil y tu comunidad tendrá una comunicación más rápida, divertida y será muy fácil que tus usuarios se relacionen entre si y compartan tu contenido por toda la red.

Lista de módulos para crear una red social

  • Share/Bookmark

, , ,

Hace unos días recibí en mi email una invitación para participar en una nueva comunidad que fomenta concursos de diseño y programación a precios ridículos, cuando digo ridículos no quiero ser malo y faltar a nadie, sino que por ejemplo un cliente pida un diseño de una página web a decenas de diseñadores y oferte 50€ como incentivo.

Se trata de páginas como www.increable.com o www.twago.com o varias más que abra en el mercado pero las desconozco.

Funcionan de tal forma, un cliente les paga 25€ para poder crear un anuncio, en este anuncio el cliente hace un encargo a decenas de diseñadores dados de alta en la comunidad, estos diseñadores presentan decenas de ideas y el cliente puntúa y finalmente elige la idea que más le guste.

El ganador se lleva el premio que el cliente oferto en su anuncio descontando del suculento premio un 10% que debe pagar a la página que publica el anuncio del concurso.

Es muy interesante el funcionamiento de alguna de las páginas citadas y de sus participantes ya que en la mayoría de las veces el cliente describe con dos lineas de texto sus necesidades, pero en cosa de pocos minutos aparecen decenas de propuestas cada cual más descabellada.

El cliente va diciendo por comentarios que quiere y que le gusta más, incluso algunas páginas permiten que el cliente puntué con estrellas el trabajo que más le gusta. Cual da pie a que unos se copien a otros y presenten trabajos muy similares.

También observe que algunos diseñadores daban consejos a los anunciantes con bastante criterio y estos lo desechaban o lo hacían de menos, demostrando una ignorancia total y falta de criterio.

A final el cliente elige el trabajo que más le gusta como si de cuadros se tratarán y no trabajos reales con un espíritu serio de venta o comunicación o captación de nuevos clientes.

El cliente elige lo que le gusta a el, lo que cree que es bonito y lo que le llama la atención a el, demostrando que no respeta su producto no cree en su producto y le importa muy poco la imagen de su empresa sino disponer de algo que le saque del apuro a un buen precio.

Un amigo me comento cuando le enseñe una de las páginas; “Ya pero estos son diseñadores malos tío, low cost” le corregí haciéndole ver que no es que sean diseñadores malos sino empresarios nefastos, irresponsables, ignorantes y sin conocimiento del trabajo de un diseñador, sin el mínimo respecto por una profesión que desconocen.

Sin conocimientos de ventas, de marketing, de colores, de psicología, de mercado, de comunicación, etc…

En este caso veo nace una nueva rama en la profesión “el diseñador de concurso”, aquel que diseña para el cliente, para ser elegido y ganar el premio, no para vender o comunicar o crear una marca.

Decenas de diseñadores trabajando horas y horas sin directrices claras por 50€, no se si es correcto y si alguien más que las páginas se beneficia, pero lo que si se es que no es ecológico ni sano, es un gran derroche de energía y horas con el ordenador encendido, Internet y impresoras.

Es una forma de empobrecer la profesión y denigrar a sus profesionales un poco más, conociendo España como la conozco no me extrañara ver alguna de estas empresas recibir el premio o por fomentar el empleo o empresa revelación del año.

“Ojo se que existen empresarios que saben más de su producto, mercado y necesidades o de como vender su producto que algunas agencias de comunicación.”

Pero por estás páginas aun no se a dado el caso.

  • Share/Bookmark

,

Jun/10

27

Diseñar una página web

Muchos diseñador gráficos de la vieja escuela se ven en la situación de diseñar una página web por encargo de agencias de desarrollo web.

¿ Que es lo que debe tener en cuenta un diseñador gráfico a la hora de diseñar una página web ?

1- Debes pensar distinto a cuando creas un folleto o cartel.
El elemento principal en el diseño web no son las imágenes o el logotipo, sino los titulos y los contenidos.

Compras un producto por su imagen pero uno en internet no encuentra una página por su imagen sino por su contenido.

Dale el contenido inmediatamente no líes al usuario con gráficos o imágenes que tarden en cargar, recuerda que te encontraron por el contenido y no por las bellas imágenes que puedas crear.

Un folleto te lo llevas a casa si te gusta y te interesa, un cartel te impacta cuando pasas frente a el y lo lees, pero si en una web no encuentras rápidamente lo que buscabas sin tardar más de 3 segundos apretarás el botón “atrás” para seguir buscando.

Un diseño web comprometido con el contenido contribuye en mayor medida a uno que hace prevalecer la gráficos.

2 – Más Illustrator y menos Photoshop.
Las formas vectoriales y el color plano se lleva de maravillas con la web. Para ser más claros, si sus diseños usan mas Illustrator que Photoshop, seguro que su pagina cargara mucho mas rápido.

Internet ama los vectores y la verdad que Photoshop fue creado para trabajar con imágenes y retoque fotográfico, aunque cada día se use más.

No caigas en el error de crear imágenes con texto incluido, ya que debes respetar los textos como textos y las imágenes como imágenes.

3 – Maquetar una página tal cual el diseño original

Debes tener en cuenta el diseñador que Html y CSS no permiten realizar cualquier cosa, tiene algunas limitaciónes.
Los diseñadores deben conocer un poco estos lenguajes o mantener una comunicación constante con los maquetadores web.

Muchos diseñadores gráficos entregan diseños imposibles de realizar en Html y CSS, si bien ellos ya cobraron su trabajo se verán perjudicados cuando el diseñador web demuestre que no es posible desarrollar la creatividad entregada.

4 – La estructura de la página web

La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes es muy importante en este punto la usabilidad.

Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas.
Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil navegar por los contenidos.

  • Share/Bookmark

,

Peticiones exitosas Cliente

200 OK
201 Created
202 Accepted
203 Non-Authorative Information
204 No Content
205 Reset Content
206 Partial Content

Solicitud del cliente Redirigido

300 Multiple Choices
301 Moved Permanently
302 Moved Temporarily
303 See Other
304 Not Modified
305 Use Proxy

Errores en la Solicitud del Cliente

400 Bad Request
401 Authorization Required
402 Payment Required (not used yet)
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable (encoding)
407 Proxy Authentication Required
408 Request Timed Out
409 Conflicting Request
410 Gone
411 Content Length Required
412 Precondition Failed
413 Request Entity Too Long
414 Request URI Too Long
415 Unsupported Media Type

Errores de servidor

500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

  • Share/Bookmark

,

  • Share/Bookmark

,

Abr/10

22

Los mejores navegadores ya soportan CSS 3

Acabo de realizar una prueba en http://tools.css3.info/selectors-test/test.html para ver el funcionamiento de los actuales navegadores con los Tags de CSS 3.

  • Firefox 3.6.3
  • Google Chrome 5.0.342.9 beta
  • Safari 4.0.4
  • Opera 9.63

El test prueba 43 selectores y otros 578 cositas, solo  Opera obtiene un 576.

Ninguno presenta errores graves o mínimos.

Me falta probar el Explore 8, pero no dispongo de windons y tendré que usar otro equipo de un amigo. ¿ Quizás alguno tiene los datos y los puede decirlo ?

Ya podemos enredar y aplicar CSS 3 en los nuevos websites que creemos, la nuevas versiones de los mejores navegadores web del mercado soportan muy bien CSS 3 en las hojas de Estilo.

  • Share/Bookmark

, ,

Utilice Javascript para hacer una rápida redirección web.
Hay veces viene muy bien tener este código guardado.

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Tu titulo</title>
<script languaje="JavaScript">
top.location.href="http://www.tuweb.com";
</script>
</head>
<body>
</body>
</html>

Espero le valga a alguien ;)

  • Share/Bookmark

, ,

Según define Wikipedia;

El diseño web es la actividad que planifica el diseño e implementación de sitios web y páginas web.

No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, textos, títulos, imagen y vídeos. Se considera dentro del campo del diseño multimedia.

Por lo contrario un informático lo define Wikipedia como;

Profesional dedicado a la ciencia aplicada que abarca el estudio y aplicación del tratamiento automático de la información, utilizando dispositivos electrónicos y sistemas informáticos. También está definida como el procesamiento automático de la información.

Muchos clientes me llaman y comentan que necesitan una página web y que me encontraron buscando un “informático” en internet.

Con lo cual este pequeño texto va en ayuda de las personas que necesiten un diseñador web o informático, para que después no tengan resultados inesperados si contratas un diseñador para realizar el trabajo de un informático y viceversa.

¡Saludos!


  • Share/Bookmark

, ,

Mar/10

23

Menú de navegación vertical en CSS

Aquí os dejo el código de como hacer un menú vertical sencillo en CSS y Html.

Código CSS;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#menu {
	border: 1px solid #ACCFE8;
	border-width: 1px 1px 0 1px;
	width: 150px;
	font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
        }
 
#menu ul, li { list-style-type: none; }
 
#menu ul { margin: 0; padding: 0; }
 
#menu li { border-bottom: 1px solid #ACCFE8; }
 
#menu a {
	text-decoration: none;
	color: #3366CC;
	background: #F0F7FC;
	display: block;
	padding: 3px 6px;
	width: 138px;
        }
 
#menu a:hover { background: #DBEBF6; }

Aqui el código Html;

2
3
4
5
6
7
8
9
10
11
<body>
	<div id="menu">
		<ul>
			<li><a href="#">Ítem 1</a></li>
			<li><a href="#">Ítem 2</a></li>
			<li><a href="#">Ítem 3</a></li>
			<li><a href="#">Ítem 4</a></li>
               </ul>
</div>
</body>

¡Espero le valga a alguien!

Saludos ; )

  • Share/Bookmark

, ,

Mar/10

23

Centrar contenido en CSS margin:0 auto;

No es la primera vez que me preguntan como centrar un contenido con CSS y no será la ultima.

Un ejemplo común de la utilización de margin para centrar contenido será cuando necesitemos crear el cuerpo de la página y por consiguiente que se mantenga siempre en el centro de la pantalla del navegador del usuario.

Para ello supongamos que tenemos el siguiente código HTML;

1
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body>
<div id=”contenedor”>
<p>nuestro futuro contenido web</p<
</div>
</body>
</html>

El código HTML es muy sencillo, creamos un tag DIV llamado con un identificador único “contenedor” , cual con la ayuda de CSS le daremos estilo y lo centraremos a la pantalla del navegador.

Para ello aplicamos el siguiente código CSS;

Doy por hecho que tienes los margenes y espacios interiores reseteados a 0 por si las moscas.

Ejemplo:

2
* { margin:0; padding:0; }/* Resetea todos los margenes y padding a 0 */

A continuación declaramos el DIV en el archivo CSS.

3
4
5
6
7
8
9
10
11
12
13
div#contenedor {
 
width:960px; /* Anchura de nuestro contenedor centrado */
 
height: 700px; /* Forzar 700px de altura */
 
border:solid 1px #C5C5C5; /* simple borde para saber donde anda el contenedor */
 
margin:0 auto;  /* el culpable de que centremos el contenedor */
 
}

Ya está no necesitas nada más, hemos declarado el ancho de nuestro contenedor a 960px, en este ejemplo ya que no tengo contenido declaramos la altura en 700px pero no lo necesitas poner ya que al disponer de contenido crecerá por si solo el contenedor.

Lo mismo haríamos en caso que trabajemos dentro de otro div dentro de otro y otro y otro…

  • Share/Bookmark

, , ,

Get Adobe Flash playerPlugin by wpburn.com wordpress themes