Lo qué se de... Publicar una página web. Hosting Gratuito

Un "Hosting" o alojamiento web es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo o cualquier contenido accesible vía web. Se refiere al lugar que ocupa una página web, sitio web, correo electrónico, archivos, etc. en Internet, o más específicamente, en un servidor.

Las compañías que proporcionan espacio de un servidor a sus clientes se suelen denominar "Web Host". La mayoría de las compañías cobran por adquirir un alojamiento web, aunque se pueden encontrar algunas que ofrecen la posibilidad de obtener un alojamiento web gratuito, pero con muchas limitaciones en el servicio.

Para futuras entradas, en las que se explicará la modificación de páginas web mediante hojas de estilo CSS y JavaScript, vamos a adquirir un "Hosting" web gratuito, que nos permitirá colgar y visualizar los modelos básicos de páginas web que llevemos a cabo en futuras entradas.

Elegimos la empresa de alojamiento web "Hostinger", que nos ofrece una versión limitada gratuita para poder publicar nuestras páginas web en línea.

Los pasos para registrarse son muy sencillos:

1. Buscamos en el navegador la página web de "Hostinger", hostinger.es:

2. Seleccionamos la opción de "Comienza ahora", situada el la parte de la derecha:

3. Elegimos el plan gratuito, que nos permite alojar páginas web sencillas:

4. Introducimos los datos de la cuenta y clicamos en "Completar orden". No debemos preocuparnos, el coste del servicio es de 0,00€, y en ningún momento nos solicitará introducir un número de tarjeta ni de cuenta, por lo que no se producirá ningún cobro por el servicio.

5. Una vez que nos indica que el servicio está pagado, procedemos a verificar la cuenta con nuestro correo electrónico:

6. Tras verificar la cuenta, ya podremos acceder y gestionar nuestro alojamiento web en "Hostinger". 

Es una herramienta muy útil y sencilla de utilizar. En próximas entradas se explicará el proceso de subida de páginas web a nuestro alojamiento, y como gestionarlas.

Como siempre, espero que esta información sirva de ayuda. ¡Muchas gracias!. ¡Hasta pronto!.

Lo que sé de... Creación de páginas web con HTML y hojas de estilo CSS

Vamos a realizar una página web para nuestro blog. Para ello vamos a utilizar una plantilla de hoja de estilo CSS y una plantilla de contenido HTML.

Plantilla de hoja de estilo final.css:

Plantilla para página web en html:

La página web inicial tiene este aspecto:

Introducimos el texto anterior en un nuevo bloc de notas. Cada uno en un documento. El primero lo llamamos "final.css" y el segundo "index.html". Ahora vamos a modificar la nuestra página web.

Modificamos el nombre de la página web:

Modificamos el contenido de la página web:

Modificamos el menú superior:

Enlazamos la URL de nuestro blog en la página web:

Editamos el pie de página para detallar el propietario de la página web:

Resultado final de la página web:

Para modificar la tipografía y los colores, debemos modificar la hoja de estilo final.css. Son necesarias nociones básicas del lenguaje HTML para realizar estas modificaciones de página web y hojas de estilo CSS.

Enlace a la página web: http://anagrv.esy.es/

Lo que se de... Hojas de estilo CSS

Lo que sé de... Modificaciones en HTLM

Después de introducir los conceptos básicos de la creación de páginas web con HTML, vamos a realizar unas modificaciones en este blog. Para ello abriremos el apartado de "Configuración" > "Tema" > "Editar HTML":

Ventana de configuración en Blogger. Elaboración propia.

Una vez abierta esta opción, observamos como está estructurado el blog, y los diferentes elementos que contiene, todo ello definido en lenguaje HTML:

Código HTML en Blogger. Elaboración propia.

Después de analizar el código, seleccionamos algún elemento que deseamos cambiar, y procedemos a cambiar el código HTML correspondiente a ese elemento:

Vista de este blog y ventana de inspección de elemento con código HTML. Elaboración propia.

Primero, en la vista del blog, seleccionamos el elemento que queremos modificar, y pulsando el botón derecho del ratón, seleccionamos inspeccionar elemento. Nos aparece una ventana en la que se muestra el código HTML de la página, y subrayado, podemos observar el código correspondiente al elemento seleccionado. Esto facilita enormemente la búsqueda y modificación de los elementos de una página web o blog.

Seleccionamos el banner de la imagen anterior, y buscamos su código HTML. Ahora ya podemos encontrarlo dentro de nuestro código HTML. Primero introducimos un comentario para indicar las modificaciones que se van a llevar a cabo:

Ventana de modificación del código HTML. Elaboración propia

Antes de aplicar los cambios, hacemos "clic" en la opción "Vista previa del tema", para pre-visualizar nuestro cambio antes de modificar. Si la modificación es adecuada y nos gusta el resultado, se pueden aplicar los cambios clicando en "Guardar Tema":

Vista previa de la modificación realizada. Elaboración propia.

Como podemos observar, la nueva situación del "banner" es mucho más atractiva que la posición anterior:

Posición inicial del banner

Posición después de la modificación.

Lo que sé de ... Creación de una Página Web con HTML

Como ya vimos en entradas anteriores, el HTML es el lenguaje con el que se estructuran internamente las páginas web. Este lenguaje consiste en un conjunto de instrucciones, o etiquetas, que sirven para dar formato al texto y definir donde y como se van a presentar los elementos (texto, imágenes, etc.) en nuestra página web.

En la actualidad, no es necesario saber HTML para elaborar y publicar páginas web sencillas. Existen programas y páginas web que nos ayudan a desarrollar nuestra página web de manera gráfica e intuitiva, sin necesidad de tener conocimientos de programación. Wix.com, Jimdo, Weebly, one.com, etc., son algunos ejemplos de recursos sencillos que se pueden emplear en la actualidad para desarrollar nuestra página web.

Elaborar páginas web con HTML es más complicado, generalmente se seleccionan plantillas base de este lenguaje, a partir de las cuales se realizan modificaciones y añade nuevo código, hasta encontrar el diseño más adecuado para nuestra página web.

Las paginas web en HTML tienen una estructura definida, constan de tres módulos:

1.  Se introduce una línea donde indica la versión de HTML utilizada (.
2.  La cabecera, delimitada por las etiquetas y . 
3.  El cuerpo, delimitado por las etiquetas y

Estructura de una página HTML. Temario SCM - CUM - UEx

La mayoría de plataformas, entre ellas blogger, nos permite realizar modificaciones en nuestro blog o página web en lenguaje HTML, en la opción "Editar HTML", dentro del panel de configuración del blog.

Editar HTML de plantilla con Blogger. Elaboración Propia

Ventana de edición de lenguaje HTML para plantillas de blogger. Elaboración Propia

Para introducirnos en el lenguaje HTML, realizaremos una sencilla página web. Para editar o elaborar un documento HTML se emplean editores de texto como "Bloc de Notas" (para Windows) o "TextEdit" (para Mac). 

Tras abrir el editor de texto, introducimos la siguiente información. Es muy importante respetar los signos, líneas, espacios y letras (mayúsculas o minúsculas), y escribirlo de la manera que se muestra. Estas instrucciones pertenecen a un complejo lenguaje, y si no se transcriben de manera correcta, puede que el navegador no pueda interpretar la información, y no muestre la página web o algunos elementos al usuario. 

Página HTML básica realizada con blog de notas. Temario SCM. CUM. UEx

Después seleccionamos "Archivo" > "Guardar como..." > Escribimos el nombre "MiPrimeraPagina.html" (es muy importante guardarlo en extensión ".htm" o ".html") y en la parte inferior, en la opción de "Codificación" seleccionamos "UTF-8".

Opciones de guardado para HTML. Elaboración Propia.

Ahora ya podemos abrir nuestra página web con el navegador, abrimos la carpeta donde hemos guardado el archivo, y observamos que el documento ya no tiene icono de un documento de texto, si no que aparece el símbolo del navegador predeterminado que utilizamos en nuestro ordenador. Clicamos y nuestra página web se abrirá en el navegador.

Los comentarios son un recurso importante a la hora de elaborar páginas web con HTML. Son líneas de texto incluidas en la estructura de la página web, que ayudan a documentar el código HTML. Sirven como notificaciones, indicaciones o recordatorios en el código HTML de la página. Estos comentarios solo se ven si abrimos el código fuente de la página web, nunca en el navegador. 

Para insertar un comentario se emplean las etiquetas "" al inicio y al final. 

Por ejemplo:

En el desarrollo del código HTML de nuestra página, es necesario tener algunas consideraciones en cuanto a formatos de texto. Para ello, existen blogs y páginas web con información extensa sobre este tipo de consideraciones, como por ejemplo:

http://platea.pntic.mec.es/~abercian/guiahtml/formatos.htm

http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=480:formatos-de-texto-html-negrita-cursiva-tachado-subrayado-superindice-subindice-b-y-strong-cu00713b&catid=69&Itemid=192

Existen otros elementos más complejos que estructuran una página web en HTML. A continuación veremos algunos:

Listas ordenadas: Muestran un conjunto de elementos o sucesos con un orden estricto. Se crean con los pares de etiquetas

Listas no ordenadas: Muestran un conjunto de elementos relacionados entre sí, pero sin ningún orden. Se crean con los pares de etiquetas

Tablas: permiten organizar la información (texto, imágenes, mapas sensibles, hiperenlaces, listas, formularios e incluso otra tabla) en celdas organizadas en filas y columnas. Están definidas por las etiquetas y el comienzo de una fila de la tabla va marcado con la etiqueta y se finaliza con . Las celdas de una fila pueden ser cabeceras, con la etiqueta o Datos
Hipervínculos (o Links): es un enlace a un recurso Web (imágenes, sonidos, videos, documentos HTML). Normalmente aparecen subrayados y con un color distinto al resto del texto. 

Para incluir un hiperenlace de una página a otra se utiliza el formato: Texto , siendo "path" la dirección absoluta o relativa del recurso Web. La dirección absoluta está formada por el nombre del servidor Web que mantiene la página destino, más el nombre de esta (la URL). La dirección relativa define la ubicación de un archivo, basándose en la ubicación del documento actual (.../carpeta1/Archivo.htm).

Imágenes y Objetos: para incluir gráficos e imágenes se debe utilizar la etiqueta . Por ejemplo

De igual manera que ocurre con los formatos de texto, también podemos encontrar mucha información en internet sobre las instrucciones y recursos para la creación de listas, tablas, hipervínculos, imágenes, etc.

También se pueden incluir formularios web en nuestra página con HTML:

Elaboración de formularios con HTML. Temario SCM. CUM. UEx.

En la página web www.w3schools.com/default.asp se pueden encontrar más información, tutoriales y ejemplos sobre HTML, CSS y JavaScript, Estos dos últimos son conceptos sobre los que hablaremos en futuras entradas del blog.

Espero que esta entrada resulte de ayuda para todas esas personas que buscan adentrarse en el mundo de la programación de páginas web con HTML. ¡Hasta pronto!.

Una herramienta muy interesante: html5maker.com

Html5maker.com es una herramienta creada para la elaboración de "sliders", "banners", animaciones, etc. Estos elementos están ideados para aportar a las páginas web dinamismo y creatividad, con el fin de atraer a más usuarios o consumidores a visitar el contenido de nuestra página. 

Para probar esta página, he desarrollado una animación con los elementos básicos que ofrece esta aplicación. En la aplicación se pueden seleccionar diferentes fondos y textos, diferentes escenas en la linea temporal, tiempos de aparición de las diferentes escenas y las transiciones entre ellas, etc.

Se trata de un editor, similar a los editores de vídeos, pero para realizar animaciones para páginas web.

Imagen de la interfaz de la página web html5maker.com . Realización de una animación para página web.

La animación realizada es para animar a los usuarios a descubrir el mundo de la programación de páginas web en HTML, tema sobre el que se trata en la asignatura de Sistemas de Comunicación Multimedia, y veremos en más profundidad en futuras entradas de este blog. 

El resultado final es una animación sencilla y atractiva, que se usará como complemento dinámico de este blog.

Lo que sé de... HTML

¿Qué es HTML?

HTML (HyperText Markup Language, lenguaje de marcas de hipertexto en español), que hace referencia al lenguaje marcado para la elaboración de páginas web. A través de un software se define una estructura y un código, en este caso el código HTML, que definen el contenido de una página web, contenido tal como texto, imágenes, videos, juegos, etc. 

Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la "World Wide Web (WWW)". Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

Este lenguaje HTML se basa en la diferenciación. Para añadir un elemento externo (imagen, vídeo, etc.) no se incrusta en el código de la página, si no que se hace una referencia a la ubicación de dicho elemento mediante texto. La página web contiene solo texto y es el navegador web el que interpreta el código, une todos los elementos y visualiza la página final.

Lo que sé de... Blogger

¿Qué es Blogger?

Se trata de una plataforma que permite crear y publicar contenidos en línea. Para ello el usuario no necesita conocer ningún código o programa especifico. Esta plataforma fue desarrollada por Pyra Labs en 1998 y adquirida por Google en el año 2003.

Los blogs que se encuentran en la plataforma, generalmente están alojados en los servidores de Google, con el dominio "blogspot.com". Se ofrece la opción al usuario de enlazar su blog en esta plataforma a su dominio propio alojado en otro servidor.

La información se organiza en forma de "entradas", en las que el usuario escribe, añade imágenes o vídeos, y quedan registrados en forma de bitácora en línea. El usuario puede personalizar el entorno de su blog gracias al amplio catálogo que blogger ofrece de plantillas, colores, tipografías, etc. Además elementos como la cabecera y el fondo pueden ser modificados con contenido que el usuario sube a la plataforma.

Otras funciones que ofrece blogspot:

- Editor de entradas "WYSIWYG" (" What You See Is What You Get" , "lo que ves es lo que obtienes") que permiten escribir entradas viendo el resultado final y programarlas.

- Acceso público o restringido al blog.

- Archivo anual, mensual, semanal o diario de entradas de blog. Organización de las entradas mediante etiquetas.

- Plantillas para dispositivos móviles.

- Vistas dinámicas que permiten visualizar el contenido de un blog a través de una interfaz desarrollada mediante jQuery, HTML5 y CSS3.

- Comentarios opcionales en entradas y páginas de blog, con función de respuestas en segundo nivel.

- Publicación a través de Smartphones, mediante mensajes de texto, mensajes de texto multimedia y aplicaciones oficiales para sistemas operativos iOS o Android. Publicación mediante correo electrónico.

- Visualizador nativo de imágenes "LightBox", para las publicaciones en el blog.

- Integración de aplicaciones de terceros y una API ("Application Programming Interface") de datos para desarrollar aplicaciones propias.

Primeros pasos para elaborar un blog en Blogger:

Paso 1: Es imprescindible crear una cuenta en Blogger o iniciar sesión con una cuenta de correo para poder crear un blog en esta plataforma.

Paso 2: En la página principal de tu cuenta de Blogger, haz clic sobre el botón "Nuevo Blog" en la parte superior izquierda de la pantalla.

Paso 3: Aparece una ventana con opciones a modificar.

En el campo Título, escribe el nombre que deseas darle a tu blog.

En el campo Dirección, incluye la URL que deseas para tu blog en internet. Si en la parte derecha aparece un cuadro amarillo con un signo de exclamación, es que la dirección introducida ya esta siendo utilizada por otro usuario. Se deberá modificar la dirección hasta encontrar una URL libre.

Paso 4: Se selecciona una de las plantillas de muestra que aparecen en esta ventana, para el diseño inicial del blog. Cuando el blog esté creado, las plantillas se pueden cambiar y modificar a gusto del usuario.

Paso 5: Para terminar, se pulsa sobre el botón "Crear Blog", en la parte inferior derecha de la pantalla. El nuevo blog en la plataforma "Blogger" ya está creado.

Fuentes:

Wikipedia (contrastada con otras fuentes)

https://www.gcfaprendelibre.org/tecnologia/curso/crear_un_blog_en_internet/crear_un_blog_con_blogger/2.do

Lo que sé de... Diseño Industrial

Bocetos "Diseño de reloj". Autor: Desconocido.

En la actualidad existe cierto desconocimiento sobre el campo del diseño industrial en nuestra sociedad. Incluso en nuestro entorno cercano, al comentar que estudiamos diseño industrial, se produce en muchas ocasiones desconcierto, al no comprender a que se refiere exactamente el término o que competencias comprende.

El diseño industrial busca satisfacer las necesidades de los usuarios, mediante una actividad proyectiva de diseño de productos seriados y/o industriales, enfatizando en la forma, función y uso con un enfoque prioritario hacia el usuario. También es importante estudiar el ciclo de vida del producto, el uso de los materiales y recursos en su fabricación, las relaciones socioculturales del objeto en su entorno social, envases, embalajes, ergonomía, marketing, etc.

Bocetos "Diseño de Vehículo". Autor: Desconocido.

En otras palabras, el diseño industrial es una actividad creativa y técnica que consiste en idear un objeto para que sea producido en serie por medios industriales, que busca mejorar los productos, comunicar y documentar ideas con un lenguaje sencillo y eficaz.

Actualmente es un campo fundamental en el sector automovilístico, aeronáutico, la industria electrónica o el sector del mueble, entre otros muchos campos. 

Proceso CAD. Autor: Desconocido

El proceso proyectivo del diseño industrial comienza con las ideas previas y el bocetaje, dibujos a mano alzada en los que se materializan las ideas acordadas para la realización del producto. Estos dibujos previos conceptuales son traducidos al lenguaje digital, mediante el uso de software 3D, para la realización de maquetas y prototipos finales. A este proceso se le denomina CAD. También se estudian durante el proceso de diseño industrial los denominados CAE (Ingeniería Asistida por Computadora) y CAM (Fabricación Asistida por Computadora), en los que se comprueba la resistencia o posibles fallos de diseño en el producto, y la fabricación adecuada o más idónea para hacer realidad el diseño.

En la actualidad, en las universidades españolas, el Grado en Diseño Industrial y Desarrollo del Producto es uno de los grados con mayor aceptación y mayor crecimiento de los últimos años. En el caso de la Universidad de Extremadura, es uno de los grados con mayores posibilidades laborales dentro del territorio nacional, como se puede leer en el artículo publicado por el periódico HOY de Extremadura:

"Diseño Industrial de Mérida es la titulación con mejor perspectiva de empleo de España"

http://www.hoy.es/extremadura/201504/01/diseno-industrial-merida-titulacion-20150401143855.html

A continuación un vídeo realizado por un alumno del Centro Universitario de Mérida, en esta titulación, en el que se muestran diferentes procesos y metodologías aplicadas durante el proceso de diseño industrial en el centro.

Vídeo de difusión del Grado en Diseño Industrial y Desarrollo del Producto, en el Centro Universitario de Mérida, Universidad de Extremadura (España):

“Todo es diseño. ¡todo!.”     Paul Rand

Elementos imprescindibles para un blog

Cuando se crea un blog, es importante tener en cuenta algunos aspectos que harán que este nuevo espacio de creación sea mucho más atractivo e interesante para los usuarios. 

1. Personalización de nuestro blog.

Es importante cuidar el aspecto de nuestro blog, adaptarlo a la temática de las futuras entradas o del ámbito sobre el cual se va a tratar. Elegir una plantilla atractiva e intuitiva para la navegación es un factor muy importante a tener en cuenta en los pasos iniciales de creación.

Cuanto más atractivo para el usuario sea nuestro blog, más veces visitará este nuestro blog, y lo recomendará. Así se puede llegar a un público mayor y promocionar el blog.

Es tan importante el contenido como el espacio en el que se encuentra.

2. Favicon

El favicon es un elemento indispensable, que aporta una identidad a nuestro blog. Se trata de una imagen que aparecerá en la parte superior del navegador, cuando el usuario tenga abierta la página web con nuestro blog, o al añadirla a marcadores.

Esta imagen permite al usuario distinguir nuestro blog de otras páginas que tenga abiertas, o dentro de otros marcadores. 

Los usuarios perciben el favicon como un elemento añadido que aporta profesionalidad y dedicación a nuestro blog. Lo aprecian como un espacio cuidado y más profesional, y esto aumenta su interés por la información que aparece en la página.

¿Cómo elaborar un favicon?

Para desarrollar un favicon es necesaria una imagen identificativa, que funcionará como "logotipo" del blog. En el caso de nuestro blog hemos desarrollado una imagen con las letras "LS" debido al nombre de este espacio "Lo que se de..."

Para poder ser empleada como favicon, es necesario reducir la resolución de la imagen, para que el navegador pueda reproducirla. 

En internet hay muchas páginas disponibles en las que se puede introducir nuestra imagen, y automáticamente te genera una imagen de baja calidad apta para utilizarla como favicon.

Algunas páginas para generar favicon:

http://www.favicon-generator.org/

http://www.genfavicon.com/es/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.cc/

3. Blogs de interés

Si nuestro blog está enmarcado en una o varias temáticas definidas, es interesante para el usuario incluir una sección de blogs de interés. Si visita nuestro blog con frecuencia, seguramente le interesen otros artículos o entradas publicadas en blogs similares.

Estos son algunos pasos que consideramos imprescindibles para la creación de un blog. Hay muchos elementos más que mejoran enormemente la experiencia del usuario, dependiendo de la temática del blog.

Es muy importante tener en cuenta que tampoco es necesario sobrecargar el blog y llenarlo de elementos. Los espacios en los que está la información necesaria y organizada de la manera correcta son los más atractivos para el usuario.

Bienvenido/a a mi blog

Mi nombre es Ana González Rivas. Actualmente, estudio Ingeniería de Diseño Industrial y Desarrollo del Producto en el Centro Universitario de Mérida, perteneciente a la Universidad de Extremadura. Hoy comenzamos nuestra aventura con este blog, hablaremos sobre otros blogs, noticias, y en especial, los Sistemas de Comunicación Multimedia y el Diseño Industrial.

Centro Universitario de Mérida. Universidad de Extremadura.

Anfiteatro Romano de la ciudad de Mérida