Desarrollo y diseño web, desde cero: 2017

miércoles, 8 de febrero de 2017

HTML: nuestra primera página web

Para hacer nuestra primera página web, tan sólo necesitaremos el bloc de notas.

Para ello, abrimos el bloc de notas y escribimos lo siguiente:

<html>
<head>
<title>Este es el titulo de la web</title>
</head>
<body>
<h1>Este texto es un encabezado h1.</h1>
<h2>Este texto es un encabezado h2.</h2>
<p>Esto es un párrafo. <strong>Este texto está en negrita</strong></p>
<h2>Esto es otro encabezado h2</h2>
<p>Esto es otro párrafo. <em>Este texto está en cursiva</em></p>
</body>
</html>

Ahora, lo único que debemos hacer es clickar en: Archivo - Guardar como...

Y acto seguido, ponemos:

Nombre: cualquier nombre terminado en .html o .htm (en nuestro caso, pagina1.html)
Tipo: Todos los archivos (*.*)
Codifiación: UTF-8

Y guardamos.

Se nos generará un archivo que puede abrirse con nuestro navegador favorito, viendo algo parecido a lo siguiente:

sábado, 4 de febrero de 2017

HTML: conceptos básicos

HTML se usa sólo para definir la estructura y el contenido o información de una página web.
Para la presentación visual usamos CSS (Cascading Style Sheets), algo que veremos en futuras entradas.
HTML está formado por etiquetas, que se escriben entre corchetes angulares:

<etiqueta>

Actualmente, HTML5, cuenta con más de 100 etiquetas.

El componente básico de una página web es el elemento. Las páginas web están formadas por un conjunto de elementos escritos en un orden concreto.

Los elementos se componen de una etiqueta inicial o de apertura y una etiqueta final o de cierre, la cual se define con una / y el nombre de la etiqueta inicial.

La etiqueta inicial puede tener atributos, pero la etiqueta final no.
Los atributos pueden llevar un valor.
Las etiquetas pueden tener contenido, que es todo lo que se escribe entre la etiqueta inicial o final.
Dicho contenido puede llevar otras etiquetas HTML.

Los elementos pueden anidarse (ponerse unos dentro de otros), pero respetando ciertas reglas.

A continuación se presentan las etiquetas esenciales de HTML:

<html> es la etiqueta principal y sólo puede existir una. Toda la página web debe ir entre la etiqueta inicial y final de <html>.
<head> define la primera parte de una página web (la cabecera). Normalmente la cabecera no aparece representada en la página web, sino que se emplea para definir los metadatos, información sobre la página o instrucciones sobre cómo procesar la página web.
<title> etiqueta que va dentro de la etiqueta <head>. Es obligatoria, sólo puede haber una, y se emplea para definir el título de una página.
<body> define la segunda parte de una página web (el cuerpo). Esto sí aparece representado en una página web cuando se visualiza en un navegador web.
<h1>, ..., <h6> definen los encabezados o títulos. Existen 6 niveles de importancia, siendo <h1> el más importante y <h6> el menos importante. Normalmente solo se usan los niveles del 1 al 3.
<p> define párrafos de texto
<strong> se usa para destacar un texto. El navegador lo muestra como texto en negrita.
<em> se usa para definir un texto enfatizado. El navegador lo muestra como texto en cursiva

miércoles, 1 de febrero de 2017

El lenguaje HTML y las etiquetas más usadas

HTML (Hyper Text Markup Language) es un lenguaje de marcado o etiquetado empleado para crear páginas web.

HTML tiene un vocabulario y una gramática:

Vocabulario: son las etiquetas que se pueden emplear.
Gramática: son las reglas que establecen cómo se deben emplear las etiquetas para escribir un documento.

El lenguaje HTML tiene muchas etiquetas, aunque tan sólo con un 20% de ellas podemos escribir el 80% del código. Por tanto, deberemos conocer muy bien ese 20% para no tener grandes problemas.

Las etiquetas más importantes de HTML son las siguientes:

html
head
meta
title
link
style
script
body
p
a
strong
em
img
form
input
select
textarea
table
tr
th
td
blockquote
hr
ul
ol
li
div
span

Prototipado Web

Antes de ponernos manos a la obra con la creación de una página o aplicación web, lo más importante es definir exactamente qué es lo que queremos crear.

Para ello deben realizarse prototipos de lo que será la página web. Dichos prototipos pueden realizarse con papel y lápiz, aunque también disponemos de varias aplicaciones para su realización.

Tenemos aplicaciones tanto gratuitas como de pago. Normalmente, las de pago suelen ser más completas y tienen una versión de prueba con ciertas limitaciones, para que así podamos probarlas antes de decidir si comprarlas o no.

A continuación os dejamos algunas aplicaciones que podemos usar para realizar nuestro prototipo:

Aplicaciones gratuitas:

Pencil Project: http://pencil.evolus.vn/

Aplicaciones de pago:

Balsamiq: https://balsamiq.com/
Gliffy: https://www.gliffy.com/

domingo, 15 de enero de 2017

URL amigables

Muchas veces nos encontramos URL excesivamente largas, con letras y números que poco o nada tienen que ver con el contenido de la misma, lo que hace muy difícil memorizar las mismas.

Lo podemos ver mejor con un ejemplo. Supongamos una dirección con el siguiente formato:

http://www.example.com/B001G5ZTLS/ref=sr_1_5?s=foto&ie=UTF8&qid=1398525726&sr=1-5

Esto sería algo imposible de recordar.

Para nuestro caso, lo más lógico sería usar alguna de las siguientes opciones:

http://example.com/nombre-de-la-pagina/
http://example.com/categoria/nombre-de-la-pagina/
http://example.com/2017/01/15/nombre-de-la-pagina/

El primer modo es el más corto y fácil de memorizar de todos.

El segundo es útil sobre todo para tiendas o páginas con distintas categorías bien definidas.

El último está en desuso, aunque puede usarse cuando conocer la fecha de publicación sea algo importante de conocer.

En el siguiente enlace, podemos ver un manual en el que se nos indica cómo optimizar una web dinámica hecha en PHP, cuyas URLs pasadas a los enlaces contengan extensas variables mediante GET, a una web cuyas URL sean amigables:

http://www.maestrosdelweb.com/urlamigable/

Acortadores de URL's

Sobretodo desde la llegada de Twitter, se hicieron muy populares servicios para acortar las direcciones web, debido a que dicha red social limita cada publicación a 140 caracteres.

Entre los más conocidos, podemos nombrar los 3 servicios que mostramos a continuación: