Creación de Sitios Web - Guía USERS 07 - MUESTRA GRATIS by RedUSERS

Creación de sitios web

Recorremos en esta Guía USERS los dos caminos más comunes para diseñar nuestro sitio: hacerlo desde cero con HTML5, CSS y JavaScript o utilizar un CMS como WordPress. Introducimos también el SEO (Search Engine Optimization) o posicionamiento orgánico, para que Google indexe nuestra página. El objetivo es hacerle conocer al lector las diferentes plataformas y acompañarlo en sus primeros pasos en la creación y el posicionamiento de un sitio web.

Entre otros temas, aprenderás: PRIMEROS PASOS

JAVASCRIPT

WORDPRESS

n ¡Hola mundo! n Elegir e instalar un editor web n Diseño responsive n Tecnologías web

n Introducción a JavaScript n Cambiar dinámicamente el tamaño de una imagen n Efectos para nuestra página n Crear un reproductor de audio n Un reproductor de videos embebido

n ¿Qué es un CMS? n Instalar WordPress n Alojamiento web n Hosting gratuito n Instalación manual de WordPress n Instalar mediante Click & Go n Vista general de WordPress n Personalizar WordPress n Aplicar un nuevo tema n Crear páginas y entradas del blog n Configuración de permisos n Posicionamiento SEO

PHOTOSHOP n Crear un fondo n Un collage usando capas n Un fondo abstracto

NIVEL DE USUARIO

CATEGORÍA

Intermedio / Avanzado

Desarrollo

REDUSERS.com En nuestro sitio podrá encontrar noticias relacionadas y también participar de la comunidad de tecnología más importante de América Latina.

DISEÑA & PUBLICA TU SITIO

¡DE CERO A EXPERTO!

Desde cero con HTML5, CSS y JavaScript ISBN: 978-987-4958-13-6

Crear menús, formularios, sliders y más

GU 07

HTML Y CSS n HTML y CSS: atributos y etiquetas n El header n Crear un HTML n Un blog n El body n Formularios n Tablas en HTML5 n Nuevos atributos en CSS3 n Menú expansible responsive solo con CSS3 n Crear un slider con HTML5 y CSS3 n Aplicar CSS3 a otro ejemplo de página web

Creación de sitios web

Publicación con WordPress Photoshop: crear fondos y collages

Ibán José Velázquez De Castro

¡APRENDA TODAS LAS HERRAMIENTAS NECESARIAS!

Bombo RT - GU7 - 195x275.indd 1

18/06/2019 22:56:09

Creación de sitios web Esta publicación tiene la novedad de recorrer un amplio abanico de herramientas para la creación de sitios. Para comenzar, mostramos los dos caminos habituales para diseñar nuestro sitio: hacerlo desde cero con HTML5, CSS y JavaScript, o utilizar un CMS (Content Management System); en esta guía utilizamos el más popular hoy, WordPress. La primera opción nos dará absoluta libertad creativa y control sobre los resultados finales, mientras que la segunda nos permitirá tener un sitio listo para publicar en minutos. Pero ¿de qué sirve un sitio si nadie lo visita? Presentamos entonces una opción para este fin: el posicionamiento orgánico o SEO (Search Engine Optimization).

TÍTULO Creación de sitios web AUTOR Ibán José Velázquez de Castro DISEÑO Y PRODUCCIÓN Gustavo De Matteo COLECCIÓN

Users Guías Prácticas

FORMATO

28 x 20 cm

PÁGINAS 144 ISBN

978-987-4958-13-6

El objetivo de esta Guía USERS es, por lo tanto, mostrarles las diferentes plataformas y acompañar al lector en sus primeros pasos en la creación de un sitio web, además de orientarlo en su posicionamiento.

Miguel Lederkremer (@leder) Director Editorial Copyright © MMXIX. Es una publicación de SIX EDICIONES. Hecho el depósito que marca la ley 11723. Todos los derechos reservados. Esta publicación no puede ser reproducida ni en todo ni en parte, por ningún medio actual o futuro, sin el permiso previo y por escrito de SIX EDICIONES. Su infracción está penada por las leyes 11723 y 25446. La editorial no facebook.com/redusers

twitter.com/redusers

instagram.com/reduserscom/

redaccion@redusers.com

asume responsabilidad alguna por cualquier consecuencia derivada de la fabricación, fun-

Velázquez de Castro, Ibán José Creación de sitios web / Ibán José Velázquez de Castro. - 1a ed . - Ciudad Autónoma de Buenos Aires: Six Ediciones, 2019. 144 p.; 28 x 20 cm. - (Guías USERS; 7) ISBN 978-987-4958-13-6 1. Programación. I. Título. CDD 006.76

cionamiento y/o utilización de los servicios y productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus respectivos dueños. Impreso en Argentina. Libro de edición argentina. Primera impresión realizada en Casano Gráfica S.A. - Ministro Brin 3932 (1826) R. de Escalada (Lanús) Prov. de Buenos Aires - Argentina, en VI, MMXIX.

Creación de sitios web PRIMEROS PASOS

JAVASCRIPT

Introducción......................................................... 4

Introducción a JavaScript.................................. 78

¡Hola mundo!........................................................ 6 Elegir e instalar un editor web............................10

Cambiar dinámicamente el tamaño de una imagen..................................80

Diseño responsive...............................................14

Efectos para nuestra página............................. 84

Tecnologías web................................................ 20

Crear un reproductor de audio..........................90 Un reproductor de videos embebido................ 92

HTML Y CSS

PHOTOSHOP

HTML y CSS: atributos y etiquetas...........................................22

Crear un fondo................................................... 94

El header............................................................. 28

Un collage usando capas.................................. 98

Crear un HTML................................................... 30

Un fondo abstracto.......................................... 100

Un blog .............................................................. 34 El body ............................................................... 38 Formularios ........................................................40 Tablas en HTML5............................................... 48 CSS3....................................................................52 Nuevos atributos en CSS3.................................60 Menú expansible responsive solo con CSS3............................................................ 63 Crear un slider con HTML5 y CSS3................... 67 Aplicar CSS3 a otro ejemplo de página web.....................................................73

WORDPRESS

¿Qué es un CMS?............................................ 108 Instalar WordPress ........................................... 111 Alojamiento web............................................... 112 Hosting gratuito................................................ 115 Instalación manual de WordPress................... 118 Instalar mediante Click & Go........................... 122 Vista general de WordPress.............................124 Personalizar WordPress...................................126 Aplicar un nuevo tema..................................... 130 Crear páginas y entradas del blog................... 132 Configuración de permisos..............................134 Posicionamiento SEO.......................................142

Creación de sitios web > Primeros pasos

Introducción Teniendo en cuenta las necesidades a las que debe responder la Web en la actualidad, el diseño junto con la programación se van convirtiendo en una sola tarea.

Al día de hoy, las diversas caras del mundo web convergen, y la formación completa es cada vez más necesaria. Por eso, en esta obra vamos a abordar distintos aspectos de la programación web y el diseño, que pueden resultarnos de ayuda para tener funcionando un sitio, ya sea creado desde cero, o bien generado a partir de una aplicación como WordPress. Lo que está claro es

que, además de aprender a programar o dar estilo en lenguajes como HTML, CSS y JavaScript, es conveniente tener nociones sobre algún programa de diseño o de retoque como Photoshop. El conocimiento de herramientas como WordPress y el manejo de técnicas SEO puede marcar la diferencia y hacer que nuestra web resulte útil a nuestros propósitos.

Lenguajes del lado cliente

Los tres lenguajes principales del lado cliente son HTML, CSS y JavaScript, que sirven para presentar el contenido al usuario (todos los navegadores son capaces de decodificarlos).

HTML

El HTML o Hypertext Markup Language es un lenguaje de marcas, es decir que marca el texto de modo que la computadora pueda manipularlo. Permite poner títulos, marcar texto en negrita, subrayar, crear enlaces, y más. Aunque hay diferentes lenguajes de marcas, se considera que los tres más importantes para diseñar o desarrollar una página web son HTML, XML y XHTML. Sin embargo, HTML es el auténtico componente estructural de la Web.

CSS

El CSS (del inglés Cascading Style Sheet, u hoja de estilos en cascada) hace posible formatear una página web escrita en HTML. Gracias a este lenguaje, podemos seleccionar un elemento de una página, como un párrafo o un bloque, y definir el color, el tamaño de la letra, las dimensiones, etcétera.

JAVASCRIPT

Es un lenguaje de programación que aporta dinamismo a una página HTML. Se usa, por ejemplo, para crear efectos como animaciones o para modificar un elemento cuando un usuario hace clic en él. Durante mucho tiempo, JavaScript estuvo confinado a la interfaz, pero con la aparición de los servidores Node JS, se ha convertido en un lenguaje popular para la programación.

Otras temas para aprender

Para crear páginas o sitios web que funcionen, además de aprender a usar HTML, CSS y JavaScript, es preciso tener otros conocimientos, a los que nos referiremos a continuación y desarrollaremos a lo largo de la obra.

PHOTOSHOP

Adobe Photoshop es un editor de gráficos rasterizados desarrollado por Adobe Systems Incorporated. Usado principalmente para el retoque de fotografías y gráficos, su nombre en español significa, literalmente, “taller de fotos”. Es líder mundial del mercado de las aplicaciones para la edición de imágenes y domina este sector de tal manera, que su nombre es ampliamente empleado como sinónimo para la edición de imágenes en general.

WORDPRESS

Hace unos años, la elección del lenguaje de programación era un punto crucial en la creación de una web. Dado que muchos de ellos estaban aún poco desarrollados, el lenguaje se escogía en función de las funcionalidades que se quería dar a un sitio. Con los años, sin embargo, los lenguajes han madurado y ya no hace falta que los programadores desarrollen desde cero todas las características de un sitio web (excepto en proyectos muy específicos).

SEO

El posicionamiento en buscadores, optimización en motores de búsqueda o SEO es un conjunto de acciones orientadas a mejorar el posicionamiento de un sitio web en la lista de resultados de Google, Bing u otros buscadores de Internet. El SEO trabaja aspectos técnicos como la optimización de la estructura y los metadatos de una web, pero también se aplica a nivel de contenidos, con el objetivo de volverlos más útiles y relevantes para los usuarios.

Creación de sitios web > Primeros pasos

¡Hola mundo! En programación, hacer que la máquina nos muestre este saludo, es el punto de partida universal para aprender cualquier lenguaje. Aquí vamos a crear nuestro equivalente por medio de HTML en un bloc de notas común y corriente, generando un texto formateado.

Abrimos Notepad o cualquier editor de texto plano y grabamos el archivo creado con el nombre PaginaWeb.html.

Lo primero es escribir el texto para saludar al mundo y demostrar nuestro incipiente conocimiento: Hola mundo. Para crear un párrafo usaremos la etiqueta <p></p>, que creará nuestra primera frase.

Para darle formato al saludo podemos hacer uso de algunas etiquetas básicas, por ejemplo <h1></h1> o <h2></h2>. No olvidemos grabar los cambios en el archivo, luego lo ejecutamos para ver el resultado de este código HTML.

Anatomía de una etiqueta HTML

Visual Studio Code cuenta con un sistema de configuración que permite adaptar el IDE a nuestra necesidad. Pero, a diferencia del resto de las aplicaciones personalizables, en este IDE se modifica un archivo JSoN a nivel código.

Etiqueta de apertura Consiste en el nombre del elemento (en este caso, p), encerrado entre paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza a tener efecto el elemento; en este caso, dónde se inicia el párrafo.

Contenido Es el contenido del elemento, que en este caso es solo texto.

Etiqueta de cierre Es igual que la de apertura, excepto que incluye una barra de cierre (/) antes de su nombre. Establece dónde termina el elemento; en este caso, dónde concluye el párrafo.

<p> Hola mundo </p> Elemento La etiqueta de apertura, más la etiqueta de cierre, más el contenido forman el elemento.

Símbolos

Es posible escribir ciertos signos de puntuación o símbolos extraños que no reconozcan algunos navegadores HTML. Veamos cómo hacerlo:

μ: á: é: í: ó: ú: ñ: ÷: Σ:

&micro; &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; &divide; &#8512;

Creación de sitios web > Primeros pasos

Añadir bloques de un documento HTML

Primero vamos a indicar que estamos en un archivo HTML, de modo que todo el texto debe ir entre las etiquetas <html></html>.

La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta <head></head>. Dentro de ella irá el título de la página con las etiquetas <title></title>.

El cuerpo es el siguiente gran bloque del documento HTML, que quedará delimitado por la etiqueta <body></body>, dentro de la cual irá todo el contenido de la página.

Para seguir escribiendo, agregamos un nuevo párrafo con la etiqueta <p></p> envolviéndolo. Marcamos en negrita parte del texto con <b></b> o ponemos en itálica alguna palabra usando <i></i>. Podemos añadir un pequeño párrafo desplazado indicando una cita mediante <blockquote></blockquote>, y para cambiar de línea usamos </br>.

Para resaltar una jerarquía en el texto se utiliza h1, h2, h3, h4. Esto es equivalente a los títulos 1, 2, 3 de cualquier editor de texto.

De manera muy sencilla, podemos agregar elementos a una lista desordenada con <ul></ul> y, en su interior, identificar cada ítem mediante <li></li>. En caso de querer una lista ordenada, cada elemento debe agregarse con <ol></ol>.

Es importante que recordemos grabar antes de visualizar la página terminada.

HTML4 vs. HTML5

La estructura de una página web tradicional antes del surgimiento de HTML 5 era la siguiente: <html> <head></head> <body>texto</body> </html> En una web HTML5 se usan, en lugar de divs, bloques de significado semántico: hay una cabecera (header), un pie de página (footer), un espacio para el cuerpo de la página (main), un menú de navegación (nav) y un espacio para otros elementos o publicidad (aside).

Creación de sitios web > Primeros pasos

Elegir e instalar un editor web Aunque podemos utilizar cualquer editor de texto plano, se trata de programas con muchas carencias, por lo que resulta mejor elegir un editor web especializado.

¿Qué requisitos debe cumplir?

Es interesante que un editor web ofrezca la mayoría de estas opciones: n Autocompletado de etiquetas, que muestre opciones posibles, y abra y cierre las etiquetas de forma automática. n Posibilidad de usar pestañas para trabajar con varios archivos al mismo tiempo. n Previsualización del código escrito. n Uso de colores para hacer más legible el código HTML, CSS o JavaScript. n Posibilidad de ver la estructura del documento fácilmente. n Marcado de errores HTML, CSS y JavaScript mientras escribimos el código.

En la red vamos a encontrar una gran cantidad de editores web libres y gratuitos, que son los que en principio nos interesan. Mientras más busquemos y miremos, más difícil será avanzar. Por eso, hay que decidir y bajar uno o dos para empezar, y comprobar qué opciones nos ofrecen para escribir nuestros códigos.

En este caso, elegimos Visual Studio Code, uno de los editores de código gratuitos que más se está utilizando hoy. Lo primero es descargar el programa. ¿Cómo?, desde https://code.visualstudio.com. No fue tan difícil ¿verdad? En el sitio web que se abre hacemos clic en Download for Windows o abrimos el menú desplegable y elegimos nuestro sistema operativo.

Buscamos el archivo descargado, que será un *.exe, y lo ejecutamos. En la ventana que nos da la bienvenida presionamos Siguiente y aceptamos el acuerdo de las condiciones de uso.

Presionamos Siguiente y elegimos la ruta donde se instalará el programa.

Pulsamos Siguiente y veremos una ventana con otras opciones de instalación.

Luego pulsamos Instalar; cuando el proceso se complete podremos usar el programa.

Creación de sitios web > Primeros pasos

Abrimos Visual Studio Code y elegimos el apartado Instalar extensiones para seleccionar algunas útiles.

Extensiones útiles Beautify Hace que el código HTML y CSS sea más vistoso. Prettier es otra extensión para estandarizar los estilos de nuestro código que se está haciendo muy popular. IntelliSense for CSS class names in HTML Ayuda a completar comandos o nombres de clases CSS en archivos CSS. Live Server Crea un servidor local para que, desde el programa, podamos lanzar nuestro código a un navegador y ver el resultado. Project Manager Permite cambiar fácilmente entre diferentes proyectos. Trailing Spaces Resalta los espacios en blanco del código y los elimina; es sencillo pero útil.

Creación de sitios web

Entre otros temas, aprenderás: PRIMEROS PASOS

JAVASCRIPT

WORDPRESS

n ¡Hola mundo! n Elegir e instalar un editor web n Diseño responsive n Tecnologías web

n Introducción a JavaScript n Cambiar dinámicamente el tamaño de una imagen n Efectos para nuestra página n Crear un reproductor de audio n Un reproductor de videos embebido

PHOTOSHOP n Crear un fondo n Un collage usando capas n Un fondo abstracto

NIVEL DE USUARIO

CATEGORÍA

Intermedio / Avanzado

Desarrollo

REDUSERS.com En nuestro sitio podrá encontrar noticias relacionadas y también participar de la comunidad de tecnología más importante de América Latina.

DISEÑA & PUBLICA TU SITIO

¡DE CERO A EXPERTO!

Desde cero con HTML5, CSS y JavaScript ISBN: 978-987-4958-13-6

Crear menús, formularios, sliders y más

GU 07

Creación de sitios web

Publicación con WordPress Photoshop: crear fondos y collages

Ibán José Velázquez De Castro

¡APRENDA TODAS LAS HERRAMIENTAS NECESARIAS!