Archivos en la categoría Diseño páginas web

¿Qué son Alojamiento y dominio web?

En varias ocasiones hemos publicado en este blog recomendaciones, consejos y trucos para diseñar una página web. Por fortuna, tanto si el proyecto que queremos abordar es personal (un blog o una fotogalería, por ejemplo), como si es una tienda online, no son necesarios conocimientos técnicos para abordarlos, ya que tenemos a nuestra disposición multitud de recursos online para agilizar el proceso de diseño, optimización y despliegue en un servidor. Para usuarios sin experiencia previa en  crear una pagina web lo más accesible por sencillez y velocidad es utilizar paquetes prefabricados gratuitos (CMS como WordPress) o utilizar servicios online de diseño web profesional a través de plantillas o cartuchos. Sin embargo, si lo que buscamos es crear nuestra propia página web codificando HTML o instalando algún CMS (el mismo WordPress o Prestashop, Drupal…),  necesitamos contratar un servicio de alojamiento web y un dominio.

Alojamiento web

De forma abreviada, podríamos definir un sitio web como un conjunto de ficheros (.htm, hojas de estilo, ficheros javascript, imágenes, documentos descargables, etc) ubicados físicamente en el disco duro de un ordenador. Cuando trabajamos de forma local almacenamos todos estos ficheros en nuestra máquina, pero no es accesible desde internet a no ser que instalemos un servidor web (Apache, Tomcat, Internet Information Server, etc), configuremos el acceso desde el exterior y mantengamos nuestro ordenador encendido las 24 horas del día, disponiendo además del suficiente ancho de banda para que los usuarios no experimenten problemas de conexión. Por suerte, no es necesario condenar a nuestro ordenador a estar enchufado de por vida. En el mercado existen cientos de empresas que alquilan un trocito de disco duro en un ordenador (de ahora en adelante Servidor) que está configurado y optimizado física y virtualmente para ser accesible desde internet. Este tipo de servicio se conoce coloquialmente como Alojamiento Web. Tenemos a nuestra disposición distintos tipos de contrato, donde los más comunes son:

  • Alojamiento compartido: es el más económico, ya que un solo servidor o máquina actúa como granja de muchas páginas web o clientes. Tiene prestaciones aceptables para pequeños proyectos: espacio físico reducido, ancho de banda limitado, imposibilidad de reiniciar el servidor o instalar software. Además, otro hándicap importante es que no conoces a tus “vecinos”, que pueden perjudicar tanto el SEO como consumir el 80% del ancho de banda del servidor y dejar el otro 20% para el resto de vecinos.
  • Servidor dedicado: es la opción más cara. Alquilas un servidor exclusivamente para ti. Tiene todas las ventajas que si tuvieras la máquina en tu casa, puedes gestionar los recursos, instalar software, reiniciarla cuando lo consideres, etc.
  • Servidor Virtual Privado (VPS en sus siglas en inglés): es un punto intermedio entre las dos opciones anteriores. Físicamente sólo hay una máquina o servidor, pero virtualmente existen varios sistemas independientes instalados, por lo que te permite todas las ventajas de un servidor dedicado, pero en un entorno y recursos compartido. Por un precio intermedio es la mejor opción para proyectos importantes.

¿Qué son Alojamiento y dominio web?

Los precios varían en función del servicio a contratar, la cantidad de recursos que nos interesen y la ubicación física del Data Center (por ejemplo, los hosting de EEUU son muy baratos, pero el acceso desde España es mucho más lento que si el servidor estuviese en la península). ¿Qué hay que comprobar cuando se contrata el alojamiento web? Fundamentalmente:

  • Espacio físico: normalmente ofrecen varios paquetes con distinta capacidad, todo depende de lo que vayamos a necesitar.
  • Ancho de banda o Cantidad de transferencia: es un indicador que se utiliza para medir y limitar el número de peticiones de los usuarios a tu sitio web tanto de subida como de bajada. Por ejemplo, cada vez que un usuario accede a tu web se descarga las imágenes y contenido a su navegador.
  • Soporte PHP y MySQL: depende de si utilizas este software en tu web (base de datos, formularios, etc).

Mi recomendación es contratar siempre en compañías cuyo Data Center esté ubicado en el país al que va dirigida la página web. En España el precio medio anual suele rondar los 40 euros.

Dominio web

Los dominios nos permiten acceder de forma sencilla y fácil de memorizar a ese espacio de disco duro del servidor que hemos contratado o alquilado. En realidad, cuando escribimos en la barra de un navegador el dominio de una web, lo que ocurre por detrás es que éste se traduce a través de un servidor DNS y lo convierte en la dirección IP y el puerto de la ruta física donde se encuentra. Por ejemplo, n4gash.com sería un acceso directo a 85.238.8.136. Como memorizar todos estos números para cada web sería imposible, tenemos a nuestra disposición los dominios que nos facilitan la vida.

El proceso de contratación es muy sencillo, normalmente se suele contratar un paquete completo en el proveedor que incluye alojamiento y dominio. Es lo más cómodo porque el dominio ya estaría configurado para que apunte a nuestro alojamiento. En algunas ocasiones, por precio o comodidad, podemos tener el dominio en un proveedor y el alojamiento en otro. En este caso tendríamos que configurar las DNS del dominio para que apunten al otro proveedor.

El precio medio en España de un dominio .com ronda los 10€. Normalmente los dominios nacionales (.es, .eu) son más caros que los estándar .com, .net, .org

Sin Comentarios

Si estáis organizando vuestra boda, ¡no os olvidéis de la página web!

web_bodas

En primer lugar ¡¡enhorabuena!! disfrutad del día al máximo, porque pasará muy rápido. Casi con toda probabilidad tendréis más tareas pendientes de las que podáis abarcar – tranquilos, al final da tiempo a todo – por lo que pensar en montar y publicar una página web para vuestro día sea una de las últimas prioridades, por no mencionar que la hucha para la boda hace tiempo que está en números rojos. En el siguiente artículo voy a intentar demostraros que disfrutar de una página web de vuestra propia boda no requiere una gran inversión de tiempo, y especialmente, de dinero.

Si pensáis que una web de vuestra boda no os va a aportar nada más que otra carga más en la mochila, valoradla como una extensión – de tiempo y esfuerzo – de las invitaciones que vais a entregar a vuestros amigos y familiares.

Por cuestiones de espacio muchas veces nos encontramos con invitaciones que resultan muy pesadas o que parecen una colección de fascículos con la organización del día, el mapa de cómo llegar a la ceremonia, y otro de cómo ir de aquí al convite, una tarjeta con el número de cuenta para los que no saben que regalar, otra tarjeta con un enlace a la lista de regalos, y otra tarjeta más con los códigos de acceso a aplicaciones móviles para compartir la boda en vivo. Los novios quieren meter en media cuartilla absolutamente todo lo necesario para que nadie se pierda un detalle de la ceremonia, el banquete, las horas de vuelta de los autobuses… ¿solución? pensad en una sencilla página web con toda la información del día ampliada al detalle que complemente las invitaciones, con los datos de contacto de todos los implicados, mapas y rutas generadas por Google Maps para que cualquier invitado desde el móvil pueda configurar el GPS con un clic, fotografías de cada enclave que ayuden a identificarlos, ¿viene gente de otra ciudad? indicadles en la web dónde pueden hospedarse, cuáles son los mejores restaurantes y dónde pueden ir de tapas.

web_bodas_2

¿Ya estáis un poco más convencidos? Como veis, la ecuación del esfuerzo invertido y resultado aporta valor añadido para vuestro gran día. Ahora llegamos a la pregunta caliente ¿cuánto me va a costar? Tenemos a nuestra disposición diversas alternativas, todo depende de los conocimientos técnicos, del tiempo disponible para invertir en esta tarea y de vuestra disposición a involucraros en otro tema más de la boda. Pongámonos en el caso de que no tenéis tiempo disponible, nunca habéis hecho una página web pero queréis impresionar a vuestros invitados con una página trabajada y especialmente, no queréis seguir tirando de la hucha. Bajo estas premisas, lo que os interesa es una pagina web gratis con una plantilla pregenerada que podáis modificar a vuestro gusto e introducir toda la información necesaria.

Os propongo Wix, empresa dedicada a comercializar plantillas web de forma gratuita con posibilidad de meter nuevas funcionalidades con micropagos o suscripciones mensuales para ampliar la características del sitio web (mayor capacidad por si queréis almacenar el reportaje de fotos de la boda, dominio personalizado, etc). Podéis seleccionar de entre cientos de plantillas, disponen de una categoría exclusiva para web de bodas y fiestas. Una de las ventajas de este servicio es que las plantillas están diseñadas en HTML 5, por lo que son adaptables a cualquier dispositivo (ordenador, móvil o tablet). Vuestra web se publicará como subdominio de wix.es, aunque podéis pagar un upgrade para tener vuestro propio dominio personal ¿qué os parecería www.marcosynoelia.com?. Podréis utilizar el editor para personalizar todo el contenido de la plantilla: imágenes, cabeceras, textos, contenidos, etc. Además, a través del App Market podéis añadir funcionalidades extra a vuestra web con un presupuesto muy bajo. Por ejemplo, módulos para que los invitados confirmen su asistencia o que compartan vuestra web en redes sociales, para que puedan reservar el hotel el día de la boda y publicar un calendario en el caso de que vuestra celebración esté organizada en varios días (preboda, boda familiar, con los amigos, etc), un libro de firmas donde los amigos y familiares puedan dejaros mensajes o simplemente una galería de fotos que podréis complementar con una selección del reportaje de bodas. En el siguiente video podéis ver en 11 pasos cómo publicar rápidamente vuestra web utilizando la plataforma Wix:

Sin Comentarios

Infografía de los pasos para diseñar una página web

Excelente infografía que muestra de forma muy clara todos los hitos y sus responsables durante el proceso de diseñar  y programar una página web. Pulsa sobre la imagen para verla más grande.

 
Pasos para el diseño de una página web

Sin Comentarios

Flash Builder 4.6 “Workspace in use or cannot be created, chose a different one.”

Flash Builder 4.6 'Workspace in use or cannot be created, chose a different one.'

Este error aparece normalmente cuando cerramos incorrectamente el IDE Flash Builder, por ejemplo, cancelando el proceso desde el Administrador de Tareas de Windows o al producirse algún tipo de error. Hay varios métodos para solucionarlo, en mi caso con la versión 4.6 en una ocasión me funcionó la 1ª y en otra la 2ª:

1. Borrar el fichero .lock ubicado en el directorio .Metadata del workspace de Flash Builder 4.6. Es posible que no os deje borrarlo porque estará siendo utilizado por el proceso de FB, por lo que previamente tenéis que cancelar el proceso y luego podréis borrarlo.

Workspace\.metadata\.lock

2. Borrar el fichero .snap ubicado en:

Workspace\ .metadata\.plugins\org.eclipse.core.resources\.snap

3. Editar el fichero de configuración de preferencias de Flash Builder 4.6 y donde pone RECENT WORKSPACE borramos el que nos está dando error.

UsuarioX/Documents/Adobe Flash Builder 4.5/cascaded/308971/configuration/
.settings/org.eclipse.ui.ide.prefs

Sin Comentarios

Freepik buscador de fotografías y vectores gratuitos para proyectos de diseño gráfico

Freepik buscador de fotografías y vectores gratuitos para proyectos de diseño gráfico

Freepik es un proyecto hispano cuya objetivo es convertirse en un buscador de fotos y vectores gratuitos libres de derechos. Si bien en la red ya existen alternativas, como Iconfinder (buscador de vectores) o Photl (buscador de fotografías), Freepik destaca por aunar bajo el mismo portal, la búsqueda de imágenes y vectores conjuntamente.

Freepik resulta muy sencillo de utilizar. Tenemos a nuestra disposición un buscador por palabra clave o por gama cromática, pudiendo seleccionar que busque sólo fotos, o sólo vectores, o en todo el repositorio. Para controlar las imágenes que ya hemos descargado o las que nos han gustado, podemos utilizar las herramientas Mis descargas y Favoritos (comportamiento similar al Lightbox de portales de pago). Gracias a varios robots que trabajan internamente, el contenido de Freepik se actualiza con gran asiduidad, rastreando la web por fotografías, vectores, imágenes o ilustraciones libres de derechos para utilizar en cualquier proyecto de diseño gráfico.

Los resultados aparecen paginados con una imagen en miniatura de cada creatividad. La primera fila de resultados se corresponde con imágenes y fotografías patrocinadas de Shutterstock, las cuales sí son de pago y en caso de querer descargarlas, tendremos que pagar una suscripción económica. En definitiva, un nuevo proyecto hispano que ofrece recursos gratuitos para cualquier diseñador o creativo garantizando una buena calidad y un repositorio enorme donde podemos encontrar imágenes de cualquier temática.

Más info | http://www.freepik.es

Sin Comentarios

Mejora la usabilidad y accesibilidad de los formularios en HTML 4.0

Acabo de descubrir varias etiquetas para formularios HTML 4.0 que no conocía y que nos permiten  mejorar la usabilidad y la accesibilidad de nuestros formularios considerablemente. Desde Eslomas nos ofrecen una  explicación de éstas y varios ejemplos donde comprobar el resultado. Tal y como nos indican, estas  etiquetas están admitidas por la W3C, por lo que no tendremos ningún problema al validar nuestro formulario.

Fieldset y Legend

Estas etiquetas nos permiten crear un área visible dentro del formulario agrupando varios controles que estén relacionados facilitando al usuario su comprensión y usabilidad, ya que permite desplazarse de un control a otro a través de la tecla TAB. La etiqueta Fieldset crea el recuadro que agrupa a los controles, mientras que Legend nos permite implementar el título del área.

<fieldset>

<legend>Datos personales:</legend>

Nombre: <input size=”20″ type=”text” />

Dirección: <input size=”20″ type=”text” />

Teléfono: <input size=”20″ type=”text” />

</fieldset>

Datos personales:

Nombre:

Dirección: 

Teléfono: 

Label

Aunque no es una etiqueta desconocida, puede que el uso que se la da no sea el apropiado o simplemente que no es explota todo su potencial. Esta etiqueta permite definir un título a un control del formulario. Cada etiqueta label sólo puede estar asignada a un control, y digo asignada porque aquí es donde está el verdadero uso de esta etiqueta. Mediante el atributo for (propio de la etiqueta label) podemos especificar el id del control de formulario al que queremos asignar el label, de esta forma el usuario podrá hacer click sobre el control o sobre el label al realizar las operaciones con el formulario. Donde realmente podemos ver su efecto es en controles radiobutton ó checkbox, ya que para seleccionarlos o chequearlos podremos hacer click sobre el label o sobre los propios controles. De esta forma se mejora considerablemente la usabilidad del formulario. Cabe mencionar que dentro de la etiqueta label podemos incluir tanto texto como imágenes.

Selecciona tu vehículo

<input id=”bmw” name=”coche” type=”radio” />

<label for=”bmw”>BMW

<input id=”audi” name=”coche” type=”radio” />

<label for=”audi”><img src=””/> Audi

Selecciona tu vehículo:

Optgroup

Esta etiqueta nos permite crear grupos dentro de desplegables select. Los grupos están definidos por un título que aparecerá en negrita y cursiva, y que no será seleccionable.

La utilidad de optgroup reside en facilitar al usuario la lectura y comprensión de la lista desplegable.

<select name=”Modelo”>

<option selected=”selected” value=”none”>Seleccione…</option>

<optgroup label=”BMW”>

<option value=”bmw120d”>BMW 116d

<option value=”bmw118d”>BMW 118d

<option value=”bmw120d”>BMW 120d

<option value=”bmw318d”>BMW 318d

<option value=”bmw320d”>BMW 320d

</optgroup>

<optgroup label=”AUDI”>

<option value=”A1″>A1

<option value=”A2″>A2

<option value=”A3″>A3

<option value=”A4″>A5

</optgroup>

</select>

Selecciona el modelo:

Más info | http://www.eslomas.com/campos-fieldset-legend-label-optgroup

1 Comentario