[email protected] telf.: 954 486 800 guillena, 25 de

PRODETUR

Guillena, 25 de septiembre de 2017

[email protected] Telf.: 954 486 800

PRODETUR

PRINCIPIOS BÁSICOS DE HOSTING

PRODETUR

DOMINIOS

Dos tipos de dominios en Internet:

• gTLD.- Dominios genéricos

• ccTLD.- Dominios de países (Country Codes)

Entidad que gestiona los dominios: IANA

Entidad que gestiona los dominios a nivel nacional:Red.es

3

PRODETUR

HOSTING

• Un proveedor de hosting es una empresa que seencarga de gestionar dominios de Internet yeventualmente almacenar la información de esosdominios

• La gestión de un dominio implica:

– Gestión de las direcciones de correo del dominio

– Gestión de la información del dominio

– Gestión de las aplicaciones del dominio

4

PRODETUR

EMPRESAS DE HOSTING

• En España hay muchas empresas para hosting dedominios e información:– AwardSpace, 1and1, loading, hostinger, Octi, …

– En cualquiera de estas empresas se puede dar de alta un dominio consus direcciones de correo y la información asociada al mismo

• Hay varios tipos de hosting, pero lo más habitual será:– Hosting básico: 1 dominios+correo+alojamiento: 50€/año

– Otros tipos de hosting más avanzados pueden llegar a tarifas de 100-250€/año y sólo se justifican cuando se incrementa el tráfico

– Hosting con mucho tráfico precisan de servidores como AWS porejemplo

5

PRODETUR

GESTIÓN DE LA INFORMACIÓN

• Toda la gestión de la información de un dominio serealiza a través de los paneles de control

• Hay varios tipos de paneles de control:– cPanel

– Plesk

– zPanel

– ….

• La gestión de todos los paneles de control es muy similar

6

PRODETUR

HTML – ETIQUETAS BASICAS

PRODETUR

¿QUÉ ES HTML?

El HTML (Hyper Text Markup Language) es un sistemapara estructurar documentos.

Estos documentos pueden ser mostrados por los visoresde páginas Web en Internet, como Firefox, Chrome oMicrosoft Explorer.

Básicamente, HTML consta de una serie de etiquetas,que indican al visor que se esté utilizando, la forma derepresentar los elementos (texto, gráficos, etc...) quecontenga el documento.

8

PRODETUR

¿Qué es HTML?

Las etiquetas de HTML pueden ser de dos tipos,cerradas o abiertas.

Las etiquetas cerradas son aquellas que tienen unapalabra clave que indica el principio de la orden y otraque indica el final.

Entre la etiqueta inicial y la final se pueden encontrarotras etiquetas.

9

PRODETUR

¿Qué es HTML?

Las etiquetas abiertas constan de una sola palabraclave.

Para diferenciar las etiquetas del resto del texto deldocumento se encierran entre los símbolos

< y >Las etiquetas cerradas incluyen el carácter / antes de lapalabra clave para indicar el final de la misma.

Una etiqueta puede contener "parámetros". Estosparámetros se indican a continuación de la palabraclave de la etiqueta.

10

PRODETUR

Página para pruebas

11

https://html-online.com/editor/

PRODETUR

Ejemplos:

•Etiqueta cerrada

<CENTER> Una página ejemplo </CENTER>

•Etiqueta abierta

<HR>

•Etiqueta con parámetros

•<BODY bgcolor="#FF00FF"> </BODY>

12

PRODETUR

Estructura básica de HTML

Un documento escrito en HTML contendríabásicamente las siguientes órdenes:

13

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la cabecera.

<TITLE> Inicio del título del documento.

</TITLE> Final del título del documento.

</HEAD> Final de la cabecera del documento.

<BODY> Inicio del cuerpo del documento.

</BODY> Final del cuerpo del documento.

</HTML> Final del documento.

PRODETUR

ETIQUETAS DE APERTURA

Todo documento HTML debe estar incluido dentro de lasetiquetas <HTML></HTML>. Esto le indica al navegador enque lenguaje está creado el documento.

<HTML>

CENTRO NACIONAL DE ACTUALIZACIÓN DOCENTE

</HTML>

14

PRODETUR

ESTRUCTURA BÁSICA

Dentro de las etiquetas <HTML></HTML>.

Existen dos partes fundamentales la cabecera deldocumento que son:

<HEAD> </HEAD><BODY> </BODY>

15

PRODETUR

EJEMPLO

<HTML> <HEAD>

<TITLE> TÍTULO DEL PROGRAMA</TITLE> (Aparece el nombre del archivo en la barra de título)

</HEAD>

<BODY>Entre estas etiquetas pondremos el contenido de nuestra página

web

</BODY>

</HTML>

16

PRODETUR

COMENTARIOS

Para incluir comentarios en la página Web se utiliza la orden

. Ejemplo:



Los comentarios no serán mostrados por el visor y sonútiles para realizar anotaciones en el documento HTMLque nos indiquen lo que estamos haciendo en unadeterminada parte del documento.

17

PRODETUR

EJEMPLO

<HTML> <HEAD> 

<TITLE> TÍTULO DEL PROGRAMA</TITLE> 

</HEAD>

<BODY>Entre estas etiquetas pondremos el contenido de nuestra página

Web</BODY>

</HTML>

18

PRODETUR

PÁRRAFOS

Cuando llegamos al final de la línea de texto, éstesaltará automáticamente a la línea siguiente, pero siqueremos crear párrafos separados por una línea enblanco utilizaremos la etiqueta

<P>

19

PRODETUR

EJEMPLO

<HTML><HEAD>

<TITLE> Párrafos</TITLE></HEAD><BODY>

<P>Esto es un párrafo dentro de una página Web.

<P> Esto es otro párrafo que está separado del anterior por una línea en blanco.

</BODY>

</HTML>

20

PRODETUR

EJEMPLO

<HTML><HEAD>

<TITLE> Párrafos</TITLE></HEAD><BODY>

<P>Esto es un párrafo dentro de una página Web.</P>

<P> Esto es otro párrafo que está separado del anterior por una línea en blanco.</P>

</BODY>

</HTML>

21

PRODETUR

ALINEACION DE PARRAFOS

Para alinear un párrafo hay que especificar el atributo ALIGN dela siguiente manera:

<P ALIGN=“ValorXXX”>

Los posibles valores para el atributo ALIGN son:

LEFT / RIGHT / CENTER / JUSTIFY

22

PRODETUR

EJEMPLO

23

PRODETUR

ENCABEZADOS

También podemos crear diferentes tamaños de encabezados

(también llamados cabeceras) para el texto por ejemplo para

señalar los distintos encabezados tenemos los siguiente:

<H1><H2><H3><H4><H5><H6>

24

PRODETUR

EJEMPLO

25

PRODETUR

CENTRADO

Para centrar los elementos del documento HTMLutilizamos las etiquetas

<center></center>

26

PRODETUR

SEPARADOR HORIZONTAL

Podemos utilizar una línea horizontal para separardistintas partes de una página Web, y para elloutilizaremos la etiqueta

<HR>

27

PRODETUR

SEPARADOR HORIZONTAL ANCHO

Se puede controlar el ancho horizontal en la paginaweb que ocupará nuestra línea horizontal con elatributo WIDTH:

<HR WIDTH="50%">

28

PRODETUR

SEPARADOR NOSHADE

Si queremos que el separador horizontal aparezcaincrustado en la página, podemos añadir a la etiqueta<HR> el ATRIBUTO NOSHADE

29

PRODETUR

SEPARADOR NOSHADE SIZE

Podemos hacer el que separador horizontal sea másgrueso añadiendo el comando SIZE=“grueso en píxeles”a la etiqueta HR.

Si queremos crear un separador horizontal con ungrosor de 20 píxeles y con sombras tendríamos queescribir la siguiente línea de código

<HR NOSHADE SIZE="20">

30

PRODETUR

EJEMPLO

31

PRODETUR

ALINEACIÓN DEL SEPARADOR HORIZONTAL

Se puede alinear el separador horizontal a la izquierda o a laderecha. Si no se especifica la alineación, el separadoraparecerá siempre centrado.

Para alinearlo a la izquierda utilizaremos el ATRIBUTO

ALIGN=“LEFT”

Añadiendo a la etiqueta <HR>, <HR WIDTH="50%" ALIGN="LEFT">

32

PRODETUR

EJEMPLO

33

PRODETUR

ALINEACIÓN DERECHA

para alinear el separador a la derecha utilizaremos elatributo

ALIGN=" RIGHT"

añadiendolo a la etiqueta <HR>

34

PRODETUR

EJEMPLO

35

PRODETUR

ETIQUETAS ANIDADAS

Son aquellas etiquetas que se encuentran dentro deuna etiqueta general.

36

PRODETUR

SALTO DE LÍNEA

Para conseguir que las líneas no sean continuas,utilizaremos la etiqueta

<BR>

37

PRODETUR

EJEMPLO

38

PRODETUR

TEXTO MONOESPACIADO

Con las etiquetas <TT> y </TT> conseguimos que lasletras ocupen el mismo espacio en pantalla, para estoutilizan la letra courier new.

39

PRODETUR

EJEMPLO

40

PRODETUR

FORMATEAR TEXTO

Se puede aplicar los siguientes formatos al texto:

<B> TEXTO EN NEGRITAS </B> <I> TEXTO EN CURSIVAS </I><U> TEXTO SUBRAYADO </U><BIG> TEXTO GRANDE </BIG>

<SMALL> TEXTO PEQUEÑO </SMALL><SUP> TEXTO EN SUPERINDICE </SUP>

<SUB> TEXTO EN SUBINDICE </SUB>

41

PRODETUR

EJEMPLO

42

PRODETUR

TIPO DE FUENTE

<FONT></FONT>

Esta etiqueta admite varios atributos: tamaño de fuente, tipo defuente añadiremos a esta etiqueta el atributo size=”Número deltamaño de la letra”.

Los tamaños de letras van, de menor a mayor, del 1 al 7. Sidentro del cuerpo del documento escribimos lo siguiente:

<FONT SIZE=”5”>Tamaño 5</FONT>

43

PRODETUR

TIPO DE FUENTE

El tamaño por defecto es el 3 y podemos cambiar el texto conrespecto a este tamaño base utilizando -1 para un tamaño algomenor, +1 para un tamaño algo mayor que el 3 y +2 para untamaño aún mayor.

<FONT>el tamaño base </FONT><FONT SIZE=”-1”>menor</FONT><FONT SIZE=”+1”>mayor</FONT><FONT SIZE=”+2”>grande 5</FONT>

44

PRODETUR

EJEMPLO

45

PRODETUR

ATRIBUTO FACE

Define el tipo de letra:

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>

46

PRODETUR

TEXTO PREFORMATEADO

Podemos crear un texto que aparezca haber sido escrito con unamáquina de escribir, para ello utilizamos las etiquetas

<PRE>…</PRE>

El texto aparecerá con el tipo de letra de las máquinas de escribirantiguas (tipo Courier) Y respetará los espacios en blanco y lossaltos de línea sin necesidad de incluir ninguna etiqueta más.

47

PRODETUR

EJEMPLO

48

PRODETUR

CITA TEXTUAL

Se insertará una cita textual utilizando las etiquetas:

<BLOCKQUOTE>…</BLOCKQUOTE>

49

PRODETUR

EJEMPLO

50

PRODETUR

VIÑETAS

Para poner una lista con viñetas se utilizarán lassiguientes etiquetas:

<UL> <LI><LI><LI>

</UL>

51

PRODETUR

EJEMPLO

52

PRODETUR

TIPOS DE VIÑETAS

Hay tres tipos de viñetas, el cual se especifica con elatributo TYPE:

<UL TYPE=“SQUARE">

<UL TYPE=“DISC”>

<UL TYPE=“CIRCLE”>

53

PRODETUR

EJEMPLO

54

PRODETUR

VIÑETAS ANIDADAS

Son viñetas de varios niveles que pueden combinar diferentestipos de viñetas.

55

Viñeta interiorViñeta interior

Viñeta interiorViñeta interior

PRODETUR

LISTAS NUMERADAS

• Son como las viñetas pero están numeradas. Se usa la etiqueta:

<OL>

…

</OL>

Hay varios tipos de numeración para lo cual se utiliza el atributo TYPE:

56

TIPO ESTILO NUMERACION

1 Números 1,2,3...

A Letras mayúsculas A,B,C...

a Letras minúsculas a,b,c...

I Nros romanos mayúsculas I, II, III...

i Nros romanos minúsculas i, ii, iii...

PRODETUR

EJEMPLO

57

PRODETUR

EJEMPLO

58

PRODETUR

LISTAS NUMERADASATRIBUTO: START

Se puede especificar desde que valor empezará la numeración

de una lista, para esto se utiliza el atributo START:

<OL START=“valorXXX”>

…

</OL>

59

PRODETUR

EJEMPLO

60

PRODETUR

LISTAS NUMERADASATRIBUTO: VALUE

• Se puede especificar el valor específico de un elemento de la lista, para esto se utiliza el atributo VALUE:

61

<OL><LI VALUE=“4”>UN DATO

</OL>

PRODETUR

EJEMPLO

62

PRODETUR

COLORES

PRODETUR

LOS COLORES

Existen diversas etiquetas y atributos en HTML quepermiten dar color a los elementos de una página o inclusoel color de fondo de esta.

Hay dos formas de indicar un color en HTML:

1. Usar un número hexadecimal que identifica a ese color,se basa en los colore ROJO, VERDE y AZUL. El numerohexadecimal empieza en #.

2. Usar uno de los nombres(en inglés) predeterminadospor los navegadores para los colores mas usados.

64

PRODETUR

Colores

65

PRODETUR

Colores

66

PRODETUR

Color de fondo

Si se desea cambiar el color de fondo de toda la páginaweb se utilizará el atributo BGCOLOR dentro de laetiqueta <BODY>.

<BODY BGCOLOR = “red”>…</BODY>

<BODY BGCOLOR = “#FF0000”>…</BODY>

67

PRODETUR

EJEMPLO

68

PRODETUR

COLOR DE TEXTO Y ENLACES

69

<BODY TEXT="#RRVVAA"> Color del texto

<BODY LINK="#RRVVAA"> Color de los enlaces

<BODY VLINK="#RRVVAA"> Color de los enlaces una vez visitados

<BODY ALINK="#RRVVAA"> Color de los enlaces activos(el que se ve al hacer clic sobre él)

Después de ver los vínculos se verá Después de ver los vínculos se verá como modificar el color de los

enlaces

PRODETUR

EJEMPLO

70

PRODETUR

HIPERVINCULOS

PRODETUR

HIPERVÍNCULOS

Una de las características fundamentales de las páginas web es la posibilidadde enlazar distintos documentos.Etiqueta:

<A> </A>Atributos:

HREFNAME

TITLE

La sintaxis para crear un enlace es:

<A HREF=“http://yahoo.com.mx”>texto del enlace</A>

72

PRODETUR

Distintos enlaces

Podemos distinguir 4 tipos de enlaces que son:

• Enlace con una página ya publicada en Internet

• Enlace con otra página de forma local

• Enlaces dentro de la misma página (ANCLA)

• Enlaces con una dirección de correo electrónico

73

PRODETUR

ENLACE CON UNA PÁGINA DE INTERNET

Para crear un enlace que se dirija a una página de internet tendremos que poner entre comillas la dirección de dicha página.

Por ejemplo si queremos hacer un enlace desde nuestra página a la web de facebook escribiremos el siguiente código:

<A HREF=http://www.facebook.com>Facebook</A>

74

PRODETUR

EJEMPLO

75

PRODETUR

ENLACE A UNA PAGINA LOCAL

• La sintaxis para crear un enlace a un archivo existente es la siguiente:

<A href=“paginaVinculos.html">RESUMEN</A>.

Este ejemplo solo funciona si la página donde está este hipervínculo y la pagina paginaVinculos.html están en la misma carpeta.

76

PRODETUR

EJEMPLO

77

PRODETUR

ANCLAS O MARCADORES

Cuando el contenido de una página es muy largo tendremos quefacilitar la navegación al usuario creando enlaces dentro de la propiapágina para que éste pueda ir a una parte concreta del documento.

En este caso, en vez de poner entre comillas el nombre de otra página,pondremos el nombre de la marca que se señale.

Entonces tenemos que crear marcas o anclas en el documento y luegocrear el hipervínculo apuntando a esas anclas.

78

PRODETUR

ANCLAS O MARCADORES

Para crear una marca o ancla, se hace de la siguiente manera:

Y para acceder a esa posición usaremos el siguiente hiperenlace:

<A HREF="#nombreMarca">contenidos</A>

79

<a name=“nombreMarca” /> Si queremos que sea una marca oculta

<a name=“nombreMarca”> texto </a> Si queremos que se muestre un texto en la marca

PRODETUR

EJEMPLO

80

…

PRODETUR

ENLACE DE CORREO ELECTRÓNICO

La sintaxis para crear un enlace a una dirección de correo electrónico es la siguiente:

<A HREF=“mailto:[email protected]”>[email protected]</A>

81

PRODETUR

EJEMPLO

82

PRODETUR

HIPERVINCULO UTILIZANDO UNA IMAGEN

Para enlazar a otra página utilizando una imagen se utilizara la siguiente sintaxis:

<A HREF=”nombre_pagina”>Texto</A>

<A HREF=“nombre_pagina”><img src=”boton.jpg”></A>

83

Reemplazamos el texto por una

etiqueta <img>

PRODETUR

EJEMPLO

84

PRODETUR

ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN

– Este tipo de hipervínculos se suele utilizar cuando generamos una muestra pequeña de una imagen y se permite mostrar la imagen en tamaño completo.

<a href=“fonfo.jpg">

<img src="imagenes/boton.jpg">

</a>

85

PRODETUR

EJEMPLO

86

PRODETUR

HIPERVINCULO A ANCLA DE OTRA PAGINA

87

Nombre del anclaPagina que contiene el ancla

PRODETUR

Hipervínculo usando el atributo ID

• Se puede hacer un hipervínculo a una misma página, pero en lugar de crear un ancla, asignamos un id al elemento al cual queremos apuntar. Por ejemplo:

<p id=“parrafo”>Un párrafo </p>

<h2 id=“titulo2”>Capitulo2 </h2>

El hipervínculo lo crearíamos así:

<a href=“#parrafo”>click aquí</a>

<a href=“#titulo2”>click aquí</a>

88

PRODETUR

Atributo TITLE

• El atributo TITLE permite mostrar información adicional del hipervínculo, se suele mostrar en una pequeña caja de texto la cual es llamada bocadillo.

<a href=“www.Facebook.com” title=“Carga el Facebook”>Facebook</a>

Este atributo TITLE se puede utilizar con cualquiera de los tipos de hipervínculos.

89

PRODETUR

EJEMPLO

90

PRODETUR

IMAGENES

PRODETUR

IMAGENES

• Para insertar imágenes en una página web se usa la etiqueta.

<IMG>

• Los atributos posibles para esta etiqueta son:

1. SRC

2. ALT

3. WIDTH

4. HEIGHT

5. BORDER

6. ALIGN

7. VSPACE, HSPACE 92

PRODETUR

IMAGEN DE FONDO DE LA PAGINA

93

La sintaxis para incluir una imagen como fondo sería:

<BODY BACKGROUND=“IMAGEN.JPEG”>

En este caso el archivo imagen.jpeg se encuentra en el mismo directorio que la página web.

<BODY BACKGROUND=“IMAGENES/IMAGEN.JPEG”>

En este caso el archivo imagen.jpeg se encuentra en una subcarpeta (llamada imágenes) respecto a la ruta donde se

encuentra la página web

PRODETUR

EJEMPLO94

PRODETUR

Atributo SRC

• Para insertar una imagen en una página usamos la etiqueta img junto con el atributo src.

<img src=“poster.jpg” />

<img src = “imágenes/poster.jpg” />

95

PRODETUR

EJEMPLO

96

PRODETUR

Atributo ALT

• Si un navegador no muestra las imágenes, seria deseable que en lugar de no mostrar nada o algún cuadro muestre un texto indicativo de la imagen, esto se logra usando el atributo ALT.

<img src=“logo.jpg” alt = “Logo”>

97

PRODETUR

Ejemplo

98

PRODETUR

Alineación de imágenes y texto

99

PRODETUR

Alineación de imágenes y texto

100

PRODETUR

Atributo ALIGN

• El atributo ALIGN nos permite controlar el alineamiento vertical de la imagen en función del texto que lo rodee o de otras imágenes de la misma linea.

• El atributo ALIGN puede tomar 5 valores diferentes:

1. Top

2. Middle

3. Bottom

4. Left

5. Right

101

PRODETUR

ALIGN = top

102

PRODETUR

ALIGN = middle

103

PRODETUR

ALIGN = bottom

104

PRODETUR

ALIGN = left

105

PRODETUR

ALIGN = right

106

PRODETUR

Align = left (br clear=left)

107

PRODETUR

Align = left (br clear=left)

108

PRODETUR

Align = right (br clear=right)

109

PRODETUR

Align = right (brclear=right)

110

Adicionalmente existe el valor ALL para el atributo CLEAR

PRODETUR

Margen alrededor de las imágenes

111

Margen vertical

Margen horizontal

PRODETUR

HSPACE y VSPACE (Márgenes)

112

PRODETUR

Atributo BORDER

113

PRODETUR

Tamaño de imágenes

• Se puede especificar el tamaño de las imágenes con los atributos WIDTH y HEIGHT.

• TIP: Incluir siempre el tamaño de las imágenes ya que esto nos brinda dos ventajas:

1. Los navegadores cuando les llega una imagen calculan sus dimensiones para saber como deben de mostrarlas, al dárselas directamente en el código ganaremos tiempo que el navegador perdería realizando este cálculo.

2. El navegador podrá colocar todos los elementos de la página desde el principio sin esperar a que lleguen las imágenes.

114

Incluir SIEMPRE el tamaño de las imágenes

PRODETUR

Atributos WIDTH y HEIGHT

115

PRODETUR

Atributos WIDTH y HEIGHT

116

Tener en cuenta que el hecho de reducir la imagen de esta manera, lo único que causa es reducir visualmente el tamaño mas no el tamaño en kilobytes

PRODETUR

TABLAS

PRODETUR

TABLAS

Para crear una tabla se debe de utilizar la etiqueta TABLE.

Esta etiqueta consta de etiqueta de apertura y de cierre.

<TABLE></TABLE>

Entre ambas debemos introducir otras 3 etiquetas que definirán la estructurade la tabla.

118

PRODETUR

TABLAS

• TR: La etiqueta Table Row nos permite insertar filas en la tabla, por cadafila de la tabla habrá una etiqueta TR. Tiene etiqueta de cierre </TR> yentre las etiquetas de apertura y cierre se colocan las etiquetas para lasceldas de la tabla.

• TH: La etiqueta Table Header nos permite insertar celdas en una fila queserá mostradas en negrita o subrayado o centrado.

• TD: La etiqueta Table Data nos permite ingresar el contenido quequeramos. Texto, imágenes, listas, texto formateado, hipervínculos inclusootras tablas.

119

PRODETUR

EJEMPLO

120

Cuando no se coloca ningún atributo a la

tabla, no muestra ningún borde, solo aparece el

texto

PRODETUR

Tabla con bordes

Para agregar los bordes de una página utilizaremos el atributoBORDER:

<TABLE BORDER="2">

121

PRODETUR

EJEMPLO

122

PRODETUR

COLOR DE BORDE

Para dar un color al borde de la tabla, debemos de utilizar el atributo de tablaBORDERCOLOR.

<TABLE BORDER=“2" BORDERCOLOR=“blue”>

<TABLE BORDER=“2" BORDERCOLOR=“#FF6787”>

123

PRODETUR

EJEMPLO

124

PRODETUR

TITULO DE LA TABLA

• El titulo de la tabla es un texto que acompaña a la tabla y puede estar situado encima o debajo de la tabla.

• Para insertar un titulo deberemos de usar la etiqueta CAPTION, la cual debe de estar dentro de las etiquetas <TABLE> y </TABLE>.

• Los títulos de la tabla por defecto serán mostrados en la parte superior de la tabla. Pero la etiqueta CAPTION acepta el atributo ALIGN con los valores top o bottom(alineación debajo de la tabla) para modificar este comportamiento.

125

PRODETUR

EJEMPLO

126

PRODETUR

EJEMPLO

127

PRODETUR

TAMAÑO DE LAS TABLAS

• Cuando un navegar al leer la página encuentra una tabla, este calcula el tamaño horizontal y vertical necesario para mostrar todo el contenido de cada una de las celdas.

• Todas las celdas de una misma columna deben de tener el mismo ancho. El ancho de la columna quedará definido por el elemento mas ancho.

• Todas las celdas de una misma fila deben de tener un mismo alto. La altura quedará definida por el elemento mas alto.

128

PRODETUR

EJEMPLO

129

PRODETUR

ALINEACION DE TABLAS

• Por defecto las tablas se alinean a la izquierda de la pantalla del navegador.

• Podemos alinear a la izquierda, centro y derecha de la pantalla del navegador, para esto utilizamos el atributo de la etiqueta TABLE: ALIGN.

ALIGN = “left”

ALIGN = “center”

ALIGN = “right”

130

PRODETUR

EJEMPLO

131

Align = “right”Align = “right”

PRODETUR

EJEMPLO

132

Align = “center”Align = “center”

PRODETUR

ALINEAMIENTO DE CELDAS Y FILAS

• Se puede alinear los elementos de las diferentes celdas respecto a estas.

• Hay dos tipos de alineamiento vertical y horizontal.

• Alineamiento horizontal: Se utiliza el atributo ALIGN para las etiquetas TD o TH con los siguiente valores: left, center, right.

• Alineamiento vertical: Se utiliza el atributo VALIGN para las etiquetas TD o TH con los siguientes valores: top, middle, bottom.

133

El alineamiento vertical y horizontal se puede aplicar a toda la fila, para esto colocar el atributo en la etiqueta TR

PRODETUR

EJEMPLO

134

PRODETUR

EJEMPLO

135

PRODETUR

ANCHO DE TABLAS Y CELDAS

• Se puede especificar un ancho personalizado para la tabla o las celdas de una tabla.

• El ancho puede ser especificado en pixeles o en porcentaje.

• Si con el ancho especificado no se pudieran mostrar los elementos de la tabla, el navegador ignorará el valor especificado.

• Se utiliza el atributo WIDTH

136

PRODETUR

EJEMPLO

137

Tabla con 50% de tamaño respecto al navegador

350 pixeles350 pixeles

PRODETUR

ALTO DE TABLAS Y CELDAS

• Para especificar el alto de una tabla se utiliza el atributo HEIGHT.

138

50

0 P

IXELES

50

0 P

IXELES

21

0 P

IXELES

PRODETUR

EJEMPLO

139

PRODETUR

NOWRAP

• El atributo NOWRAP ocasiona que el texto de lacelda no sea dividido en varias líneas, ignorará losatributos WIDTH y HEIGHT si fueron usados.

• No es recomendable usarlo cuando el texto es muylargo, ya que esto ocasionaría que aparecieran lasbarras de desplazamiento.

140

PRODETUR

EJEMPLO

141

Aparecerán las barras de desplazamiento

PRODETUR

FUSION DE FILAS Y COLUMNAS

• Podemos hacer que una celda ocupe varias filas o columnas.

• ROWSPAN: la celda se extiende varias filas.

• COLSPAN: la celda se extiende varias columnas.

142

PRODETUR

EJEMPLO

143

PRODETUR

EJEMPLO

144

PRODETUR

EJERCICIO

• CREAR LA SIGUIENTE TABLA

145

PRODETUR

RESPUESTA

146

PRODETUR

ESPACIADO ENTRE CELDAS

• El espaciado entre celdas es la distancia de separación entre celdas adyacentes, por defecto es 1, y se puede aumentar o disminuir ese valor mediante el atributo CELLSPACING.

147

PRODETUR

MARGENES DE CELDAS

• Se puede controlar el margen que existe entre el elemento de la celda y sus bordes(por defecto es nulo el margen). Para esto se utiliza el atributo CELLPADDING.

148

PRODETUR

CELLSPACING Y CELLPADDING

149

PRODETUR

TABLAS ANIDADAS

• Se puede colocar una tabla dentro de otra.

150

PRODETUR

EJEMPLO

151

PRODETUR

IMAGEN DE FONDO EN UNA TABLA

• Podemos colocar una imagen de fondo para una tabla, para esto utilizamos el atributo BACKGROUND a la etiqueta TABLE.

152

PRODETUR

EJEMPLO

153

PRODETUR

FONDO CELDA

• Se aplica el mismo atributo BACKGROUND pero a la celda.

154

PRODETUR

EJEMPLO

155

PRODETUR

FORMULARIOS

PRODETUR

FORMULARIOS

La manera más eficaz de conseguir que los usuarios denuestra página se comuniquen con nosotros es a travésde un formulario.

Hay dos formas de recibir la información que introduceel usuario: recibirla directamente en nuestra direcciónde correo o utilizar un programa que gestione los datosy después nos los incluya en una base de datos.

157

PRODETUR

EJEMPLO

158

PRODETUR

ETIQUETA FORM

• Para crear formulario necesitamos usar la etiqueta FORM

<FORM> … </FORM>

• Dentro de la etiqueta FORM colocamos todos los controles que deseemos.

• Un formulario nos permite enviar datos al servidor…para procesar estos datos se utiliza un lenguaje de servidor (Recordar que HTML es lenguaje de cliente).

159

PRODETUR

EJEMPLO

160

En este ejemplo no podemos enviar los datos, pues no hay botón de

envío

PRODETUR

EJEMPLO

161

¿Dónde se envían los datos?

PRODETUR

BOTON DE ENVIO

• Para insertar un botón de envió en un formulario se utilizar la siguiente etiqueta, que inserta este control:

<INPUT TYPE=“submit” NAME=“Nombre” VALUE=“Texto del boton”>

• TYPE: submit para crear un botón de envió.

• NAME: es el nombre del control.

• VALUE: es el texto que mostrará el botón.

162

PRODETUR

CONTROLES DE FORMULARIOS

• Todos los controles se crean usando al etiqueta INPUT.

• Para diferenciar a los controles se usa el atributo TYPE, que puede tomar los siguiente valores:

1. Text

2. Password

3. Radio

4. Checkbox

5. Submit

6. Image

7. Reset

8. File

9. hidden

163

Aparte del atributo TYPE hay otros atributos que dependerán del tipo de control que estemos insertando, hay atributos que son comunes a

todos como por ejemplo NAME

PRODETUR

CONTROL: TEXT

• Son cajas de texto que nos permiten ingresar datos.

• Para crear una caja de texto se debe asignar el valor TEXT al atributo TYPE de la etiqueta INPUT.

<input type=“text” name=“apellidos”>

• Es conveniente darle un nombre a nuestro control para poder distinguirlos de algún otro.

164

PRODETUR

CONTROL: TEXT

• Si estamos creando cuadros de texto, también se pueden utilizar los siguiente atributos:

• SIZE: Determina la anchura de la caja de texto, por defecto es 20.

• MAXLENGTH: Sirve para limitar el número máximo de caracteres que pueden ser escritos. Si no le asignamos un valor es infinito.

• VALUE: Es el texto por defecto que tendrá el cuadro de texto, antes que el usuario escriba nada.

165

PRODETUR

CONTROL: TEXT

• Un resumen de todas sus propiedades:

166

PRODETUR

EJEMPLO

167

PRODETUR

CONTROL: PASSWORD

• Se utiliza para solicitar claves al usuario, en vez de mostrar el texto se muestran asteriscos.

<input type=“password” name =“clave”>

• Las cajas para password también tienen los atributos SIZE, MAXLENGHT, VALUE.

• NOTA: Las cajas de password solo impiden que se muestre el texto en pantalla, el texto no es codificado cuando se envía al servidor.

168

PRODETUR

CONTROL: PASSWORD

• Un resumen de todas sus características.

169

PRODETUR

EJEMPLO

170

PRODETUR

CONTROL: RADIO

• Estos botones de radio se utilizan para dar la posibilidad de ingresar opciones de las cuales solo es posible seleccionar una.

<input type=“radio”>texto

• Este control tiene dos estados ON (seleccionado) y OFF (no seleccionado).

• Se puede especificar que un botón de radio este inicialmente seleccionado con el atributo CHECKED.

<input type=“radio” checked>texto

171

PRODETUR

CONTROL: RADIO

• Estos botones se suelen ingresar en grupos, para indicar que varios controles de tipo radio pertenecen al mismo grupo se les asigna el mismo nombre con el atributo NAME.

• A cada botón de radio se le debe de asignar un valor al atributo VALUE el cual lo distinguirá de los demás.

• El valor que se envía al servidor el atributo NAME y el VALUE del botón seleccionado.

172

PRODETUR

EJEMPLO

173

PRODETUR

CONTROL: CHECKBOX

• Son similares a los botones de radio pero se utilizan para dar la opción de seleccionar varias opciones.

• Cada uno de estos controles es independiente, y por lo tanto el valor del atributo NAME debe de ser diferente en cada uno de estos.

• Por defecto estos cuadros de selección están sin seleccionar a menos que especifiquemos el atributo CHECKED.

174

PRODETUR

EJEMPLO

175

El valor que se envía al servidor es php=ON y html=si y python=yes

PRODETUR

CONTROL: IMAGE

• Se pueden utilizar como botones de envío imágenes.

• Para indicar la imagen a utilizar se utiliza el atributo SRC.

<input type=“image” name=“nombre” src=“imagen.ext”>

176

PRODETUR

EJEMPLO

177

PRODETUR

PRACTICA

178

COLOR => #b6d6b6

#8080FF

PRODETUR

SOLUCION

179

PRODETUR

CONTROL: RESET

• Este control es un botón que hace que se borre todos los cambios que se haya hecho en los controles y se restauren a sus valores por defecto.

<input type=“reset” />

<input type=“reset” value=“texto_personalizado” />

180

PRODETUR

EJEMPLO

181

PRODETUR

CONTROL: BUTTON

• Este control es un botón generico, es decir no tiene definida una acción especifica sino la que nosotros le demos.

<input type=“button” value=“pulseme” />

• Las acciones que puede llevar a cabo este botón al ser pulsado solo son realizados con lenguajes de script como JAVASCRIPT. Para insertar el codigo de estos lenguaje se utiliza el atributo ONCLICK.

<input type=“button” value=“texto” onclick=“codigo” />

182

PRODETUR

EJEMPLO

183

PRODETUR

CONTROL: ETIQUETA BUTTON

• La etiqueta BUTTON surgió en el estándar HTML 4.0 para poder insertar botones en nuestras páginas.

• Tiene un atributo llamado TYPE que nos permite elegir entre los 3 tipos de botones disponibles:

• Type=submit

• Type=reset

• Type=button

• La innovación de este botón es que podemos meter imágenes o texto formateado.

184

PRODETUR

EJEMPLO

185

PRODETUR

CONTROL: HIDDEN

• Estos son controles ocultos que no se muestran en la pagina web, no se puede interactuar con ellos.

• ¿Para que sirven? Se utilizan generalmente para enviar información al servidor, como resultado quizá de un proceso o de datos provenientes de otro formulario.

• Se deben usar los atributos NAME y VALUE, para indicar su nombre y los datos.

<input type=“hidden” name=“edad” value=“19” />

186

PRODETUR

ATRIBUTO TITLE

• El atributo TITLE se puede aplicar a los controles para mostrar un texto descriptivo llamado “bocadillo” el cual aclare mas su función al usuario.

187

bocadillo

PRODETUR

ATRIBUTOS DISABLED Y READONLY

• El atributo DISABLED se puede aplicar a los controles para que aparezcan deshabilitados y sol sirvan para mostrar información mas no modificarla. Visualmente aparecen los controles grisáceos.

• El atributo REANONLY se aplica a los controles para que muestren la información pero no se pueda modificar pero visualmente no muestra ningún cambio.

188

PRODETUR

EJEMPLO

189

disableddisabled

readonlyreadonly

PRODETUR

CONTROL: TEXTAREA

• Este control se parecen a los cuadros de texto pero estos permiten el ingreso de muchas líneas de texto.

• Para insertar estos controles se utiliza la etiqueta <TEXTAREA> y consta de 3 atributos:

1. NAME: El nombre que queremos asignarles a el control

2. ROWS: El numero de líneas del cuadro de texto

3. COLS: El numero de caracteres visibles en cada línea.

• Consta de una etiqueta de apertura y de una de cierre, siendo obligatorio el uso de ambas. Entre estas solo puede insertarse texto llano, sin etiquetas HTML.

190

PRODETUR

EJEMPLO

191

PRODETUR

CONTROL: CUADROS DE SELECCION

• La función de este control es dar varias opciones al usuario y que pueda elegir una de ellas.

• Estas opciones pueden mostrarse de dos maneras como lista con desplazamiento o como un cuadro desplegable.

• Se utilizará la etiqueta SELECT que consta de una instrucción de apertura y otra de cierre.

• Para insertar las opciones se utilizará la etiqueta OPTION.

192

PRODETUR

EJEMPLO

193

PRODETUR

CONTROL: CUADROS DE SELECCION

• El atributo SELECTED de la etiqueta OPTION permite que dicho elemento aparezca seleccionado por defecto.

• Con el atributo SIZE podemos controlar el numero de opciones que pueden ser vistas simultáneamente.

• Por defecto este control permite la elección de una sola opción pero podemos modificar este comportamiento para que se puedan seleccionar varias con la opción MULTIPLE.

194

PRODETUR

EJEMPLO

195

PRODETUR

ATRIBUTOS DEL FORMULARIO

• El formulario se usa para enviar datos al servidor para que sean procesados, este procesamiento se realiza por un lenguaje que no es HTML (lenguaje de cliente).

• Estos atributos indican como enviar la información, a donde y si se enviará encriptada.

1. ACTION: indica donde se enviará la información

2. METHOD: indica el método HTTP para enviar la información POST o GET

3. ENCTYPE: indica el tipo de codificación de la información.

Text/plain

Multipart/form-data

Application/x-www-form-urlencoded

196

PRODETUR

ATRIBUTOS DEL FORMULARIO

• ENCTYPE se utiliza cuando el valor del atributo METHOD es POST.

• El valor por defecto de este atributo es application/a-www-form-urlencoded

• El valor multipart/form-data debe ser usada en combinación con el elemento INPUT type=“file” que sirve para enviar archivos.

197

PRODETUR

EJEMPLO

198

CHROME

IE

PRODETUR

PARA CUALQUIER CUESTIÓN RELACIONADA CON ESTA SESIÓN PUEDES DIRIGIRTE A:

[email protected] (Dpto. formación)

www.prodetur.es

PRODETUR

DISEÑO DE PÁGINAS WEB – parte 2 - Wordpress

Guillena, septiembre-octubre 2017

Documentación complementaria

PRODETUR

ACCESO A WORDPRESS

www.midominio.com/wp-admin

PRODETUR

PANEL DE CONTROL: ESCRITORIO

PRODETUR

ACCESO A WORDPRESS

www.midominio.com/wp-admin

PRODETUR

Descubriendo el Escritorio

Twitter/MKG20 - Javier Merchán

PRODETUR


Pulsando en el nombre dela web arriba a la izquierdanos lleva al

Front End

PRODETUR

El Escritorio

Así es al principio nuestra web o blog

PRODETUR

Visión del Escritorio


PRODETUR

• Lo usamos para el contenido de actualización periódica como noticias, novedades, artículos, promociones, etc…

• Entran con fuerza pero se diluyen

Entradas

PRODETUR

• Lo usamos para ordenar y clasificar las entradas.

• Pueden dividirse según diferentes criterios que elije el autor: tema, localización, segmento, etc…

• Ej: Futbol,Baloncesto, Motor,

• Ej: Web, SMM, LOPD

Categoría

PRODETUR

• Lo usamos para publicar contenido estático y descriptivo.

• Se trata de páginas HTML reales• Se puede publicar prácticamente cualquier

contenido

• Está siempre a la vista.

• Ej: Acerca de, Aviso Legal, Quienes somos, nuestros productos

Páginas

PRODETUR


Gestión de Entradas

PRODETUR

Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categorías. PodemosAñadir entradas o modificar una existente.

Edición de entradas

PRODETUR

Dependiendo del tema instalado tendremos más o menos funcionespara las entradas. También los plugins que instalamos muestran susherramientas de trabajo en esta pantalla, que se regula en OPCIONESDE PANTALLA


Tipos de Entrada

PRODETUR

Categorías

PRODETUR

Es aquí donde se almacenan y se gestionan las imágenes, pdf, videos y otros documentos

subidos.

Librería Multimedia

PRODETUR

•Podemos subir archivos desde aquí o desde la entrada o página donde irá publicado. Arrastra el archivo y suelta.•Puedes subir varios archivos a la vez

Agregar multimedia

PRODETUR

Organización páginas

PRODETUR

Páginas: Indice, organización y edición rápida de las páginas

Organización de páginas


•En Páginas podemos ordenarlas por autor, fecha u orden alfabético.

•Podemos buscar por palabras o tags.

•Podemos editar rápidamente algunas modificaciones.

PRODETUR

Páginas: La edición es igual a la de una entrada. Se le puede asignar una plantilla predeterminada, que según el TEMA tendrá más variedad.

Edición de páginas

PRODETUR

Características de páginas

Publicar• Para publicar, programar o

guardar borrador. Permite crear entradas privadas.

• Aquí también permite enviarla página a la papelera

Atributos de página

• Ubicación de la página en elmenú.

• Posición que irá en el menu

Imagen destacada• La imagen que se usa para

presentar la página.• En algunos temas sirve

para las miniaturas

PRODETUR

IMAGEN DESTACADA


PRODETUR

Relación de comentarios y gestión de los mismos

Comentarios

PRODETUR

Menús: La barra de Navegación

• Los Menús Personalizados te permiten colocar las páginas ycategorías que deben aparecer en el Menú de Navegación, yordenar su posición en el mismo.

PRODETUR

Apariencia > Menu

•Para crear un menú personalizado dale un nombre y haz clic enCrear menú.•Después elige objetos como páginas, categorías o enlacespersonalizados de la columna izquierda para añadirlos a estemenú.•Después de añadir tus objetos, arrastra y suéltalos en el ordenque desees.•También puedes hacer clic en cada objeto para ver opciones deconfiguración avanzadas.•Cuando hayas terminado de crear tu menú personalizado,asegúrate de hacer clic en el botón Guardar menú.

PRODETUR

Apariencia > Menu

Crear Menu

PRODETUR

Apariencia > Menu

Selecciona elementos Menu

PRODETUR

Apariencia > Menu

Ordenalos y Ubícalos en el tema

PRODETUR

Aquí damos de alta a los administradores, Editores, Autores, Colaboradores o suscriptores

Usuarios

PRODETUR

Publicar esto: Nos permite “coger prestado” facilmente texto de otras fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICAESTO

Herramientas

Importar y Exportar : Muy útil para trasladar los contenidos (entradas, comentarios, …) de un blog a otro.

Por ejemplo de WP.COM a WP.ORG, de BLOGGER a WP, etc…

PRODETUR

USO DE PLANTILLAS

PRODETUR

TEMAS – THEMES – PLANTILLAS - TEMPLATES

PRODETUR

Apariencia > TEMAS

• El diseño que tendrá nuestra web lo define el TEMA que tengamos instalado.

• El tema por defecto que nos viene en Wordpress es el TwentyTen y TwentyEleven

• Existen miles de temas diferentes y cada tema tiene sus propias opciones de personalización.

• Los temas gratuitos dan muy poco juego y NO dan un aspecto profesional.

• Los temas Premium nos proporcionan una web bonita y con muchas posibilidades por poco dinero.

PRODETUR

Plantillas Gratuitas

PRODETUR

Subir una plantilla vía Escritorio

1 2

PRODETUR

Plantillas Premium

• Las principales empresas que diseñan plantillas Premium para Wordpress son las siguientes.

• WOO Themes• Studio Press• Theme Forest• Elegant Themes• Natty WP

PRODETUR

Ejemplo Plantilla Premiun

PRODETUR

Elegir una buena plantilla

• Adaptada a objetivo de la web

• Diseño versátil: Multitud de posibilidades

• Shortcodes

• Responsive Design

PRODETUR

¿Cuál es el objetivo de la web?

PRODETUR

versátil

PRODETUR

shortcodes

• Los shortcodes de WordPress son pequeños códigos que puedes añadir en el editor de WordPress. Se usan para añadir funciones al contenido de tus entradas y páginas sin tener que escribir un script cada vez que necesites hacer esa tarea.

• Son como tags HTML que usan corchetes ([ ]) en vez de los símbolos de “mayor y menor qué” (< >). Vamos, algo así:

[youtube id=“xxxxxxxxx" ancho="600" alto="450"]

PRODETUR

Responsive

PRODETUR

Opciones del Tema: Dependen del tema instalado

PRODETUR

Opciones del Tema: Configuración

PRODETUR

Herramienta de apoyo

INSPECTOR DE ELEMENTOS DE CHROME

PRODETUR

PLUGINS: INSTALACIÓN Y + USADOS

PRODETUR

Son aplicaciones que instalamos y que amplían las funciones de Wordpress.

Plugins y Widgets

PRODETUR

Búsqueda de plugins y widgets

Se pueden buscar por palabras o tags

Se pueden subir si lo tenemos en nuestro PC

Ejemplo: SEO

PRODETUR

Antes de instalar un Plugin

• Tener en cuenta si se actualiza frecuentemente

• Los Plugins pueden hacer nuestro WP más lento o crear errores de funcionamiento.

• Pueden abrir agujeros de seguridad en la web,haciendo nuestro sitio vulnerable y expuesto acualquier tipo de ataque.

PRODETUR

Pregúntate antes de instalar un Plugin

1. ¿Necesito instalar este plugin?

2. ¿Puedo hacer lo que necesito sin este plugin?

3. ¿Es este plugin mejor que otros similares? ¿Cuál autor cuenta con mejor reputación?

4. ¿Cuál de los plugins lleva el mejor registro de actualizaciones?

5. ¿Cuál de los plugins ha sido instalado más veces?

PRODETUR

Repositorio de Plugins

PRODETUR

Los Mejores Plugins

• Akismet

• All in One SEO vs SEOby YOAST

• WPML

• WP Super Cache

• Nexgent Gallery

• WooCommerce

• Contact Form 7 + ReallySimple Captcha

• Google XML Sitemaps

• Google Map for Wordpress

• Twitter Facebook Social Share – Sexy Bookmarks

• Buddy Press

PRODETUR

Vamos a configurar plugins

• Contact Form 7

• Nexgen Gallery

PRODETUR

Plugins Premiun Interesantes

Existen plugins fuera del repositorio por que son de pago, pero que ofrecen un resultado muy profesional.

PRODETUR

WP Sticky

PRODETUR

Foobar

PRODETUR

Social Image Hover

PRODETUR

Pop Up Ninja

PRODETUR

Widgets

Widgets: Los usamos para mostrar en nuestra web las funcionalidades de wordpress, del tema o de los plugins.• Tenemos widgets preinstalados• Generalmente van en el sidebar

o en el Footer.• Se arrastran para activarlos.

PRODETUR

WooCommerce

• Plugin para comercio electrónico

• WooCommerce tiene en realidad muchos más plugins

• Muchos temas específicos para WooCommerce (ejemplo GoodStore)

• Documentación amplia de WooCommerce:

https://www.hosteurope.es/blog/guia-completa-configurar-woocommerce/

PRODETUR

WP MULTILINGÜE: IDIOMAS

PRODETUR

El punto débil de WP: los idiomas

• El mayor quebradero de cabeza de WordPress han sido siempre los sitios multilingües.

• Una alternativa muy usada ha sido crear una instalación independiente para cada idioma

• Esta opción tiene la desventaja del doble trabajo y el doble mantenimiento

PRODETUR

Localización y traducción

• Localización es la traducción de los archivos de código: traducir un plugin, una plantilla, un formulario, etc…

• Traducción: Tener el texto y los metas en varios idiomas en la misma base de datos

PRODETUR

Localización

• Codestyling Localization

• WPML: Incluye todo

PRODETUR

Traducción personalizada

• Qtranslate:– Gratis– El mejor para webs sencillas o blogs.– Ensucia el código y hay que usar etiquetas

• WPML:– El más completo y mejor plugin de idioma hasta el momento.– Más complejo– Mejor para SEO– Más limpio– De pago

PRODETUR

Traducción Automática

PRODETUR

AJUSTES EN WP

PRODETUR

Ajustes Generales


PRODETUR

Ajustes Generales


1. Los campos en esta pantalla determinan algunas configuracionesbásicas de tu sitio.

2. La mayoría de los temas muestran el título del sitio en la partesuperior de cada página, en la barra de título del navegador, ycomo nombre identificativo para los feeds. La descripción cortatambién se muestra en muchos temas.

3. La URL de WordPress y la URL del sitio pueden ser las mismas(ejemplo.com) o diferentes; por ejemplo, puedes tener los archivosdel core de WordPress en un subdirectorio(ejemplo.com/wordpress) en vez de en el directorio raíz.

PRODETUR

Ajustes Generales


4. Si deseas que los visitantes se puedan registrar en tu sitio, en vezde que el administrador del sitio deba registrarlos, marca la casillade miembros. Se otorgará un perfil predeterminado a cada nuevousuario. Da igual que se registren ellos mismos o que les registreel administrador del sitio.

5. UTC quiere decir Hora universal coordinada (CoordinatedUniversal Time)

6. Recuerda hacer clic en la parte inferior de la pantalla sobre elbotón Guardar cambios para que los nuevos ajustes surtanefecto

PRODETUR

Ajustes Generales


IMPORTANTE:

� Dar de alta un buen Título y Descripción (SEO)

� Visibilidad del sitio: Permitir que el Blog sea indexado

� Enlaces permanentes: Colocar en NOMBRE DE ENTRADA(SEO)

Siempre Guardar Cambios antes de salir

PRODETUR

Seguridad: Recomendaciones I

1. Mantener WordPress actualizado a la última versión, única garantía de control de vulnerabilidades conocidas.

PRODETUR

Seguridad: Recomendaciones II

2. Instalar solamente plugins seguros, a ser posible desde el repositorio oficial.

3. Instalar solamente temas seguros, a ser posible desde el repositorio oficial.

4. Revisar la sección de seguridad de Ayuda WordPress para comprobar que has realizado todas las acciones de seguridad necesarias.

5. Suscribirte al feed de Ayuda WordPress para estar informado de las alertas de seguridad.

PRODETUR

Seguridad: Algunos consejos

1. Cambiar el prefijo de la BBDD

2. Bulletproof security Este plugin ofrece un entorno de seguridad muy completo, protegiendo tu WordPress de inyecciones de código y ataques a SQL.

3. Realiza comprobaciones de seguridad del prefijo de la basede datos, seguridad del fichero wp-config.php así como delas carpetas del núcleo de WordPress y ficheros.htaccess.

4. ANTIVIRUS: http://wordpress.org/extend/plugins/antivirus/

PRODETUR

OPTIMIZACIÓN WP

• ENLACES PERMANENTES

• COPIAS DE SEGURIDAD

• TRASLADO DE LOCAL A SERVIDOR

• SOPORTE: TIRA DE FOROS

PRODETUR

Enlaces permanentes

PRODETUR

Como hacer copias de seguridad

1. Hacer copia de los archivos

2. Hacer copias de las BBDD

• Existen Plugins que facilitan la tarea

PRODETUR

Traslado de Local a Servidor

• Trasladar carpeta con archivos via FTP o comprimido en ZIP

• Exportar BBDD de PHPMyadmin local.

• Crear nueva BBDD en servidor e Importar BBDD.

• Modificar archivo WP-CONFIG

• Modificar entrada BBDD WP_OPTIONS:

– SITE URL y HOME

• Revisar links metidos a mano

PRODETUR

Exportar BBDD

1.- Marcar todos2.- Exportar

PRODETUR

Importar BBDD

PRODETUR

Modificar Siteurl y Home (WP_OPTIONS)

PRODETUR

WP CONFIG

PRODETUR

Soporte: Busca en la red

• Si tenemos problemas con nuestra web:

o

PRODETUR

3.SEO PARAWP

PRODETUR

¿Qué es el SEO?

SEM

SEO

PRODETUR

• Más cara la inversión pero más económico a medio/ largo plazo.

• Se amortiza más porque permanece en el tiempo.

• Es más fiable para los navegantes.

PRODETUR

Como funcionan los buscadores

• Índice (o catálogo) que clasifica a partir de las palabras significativas que encuentra en las páginas web

PRODETUR

PRODETUR

¿Cómo sabemos en que puesto estamos?

Whatsmyserp

PRODETUR

Mide tus Progresos

PRODETUR

Añade Google Analytics a WP

PRODETUR

Esquema SEO a seguir

1. Optimización de la web2. Optimización del contenido

3. Incrementar las visitas y la interacción con el exterior

4. Conseguir enlaces

PRODETUR

Arquitectura

PRODETUR

Optimiza tus Metas

• Asegurate que cada página tiene su propio<title>

• Deben ser descriptivos y concisos

• Evita el Keyword Stuffing (repetición innecesaria y pedante con varias formas)

• Utiliza tu marca o tu producto

PRODETUR

Snippets

BUENOS TÍTULOS EXPLICACION

Nudo de corbata: ¿cómo hacer un nudo de corbata?

La palabra clave al principio de la frase (relevancia) y se repite dos veces con manera natural

Colchones de látex: colchón de látex NATURA

Plural y singular cuando se comprueba que ambas son muy demandadas

Instalación de césped sintético o artificial Onlygarden

Título descriptivo. El nombre de la empresa no es relevante para SEO, por lo que va al final

Maleta Spinner 4 ruedas 82cm American Tourister

Título descriptivo y específico para ecommerce

PRODETUR

SEO by YOAST

PRODETUR

PRODETUR

Estilos básicos

•H1

•Title

•Meta

•SiteMap

PRODETUR

Secciones del Plugin

1. Titles & Metas

2. Social

3. Sitemaps XML

4. Enlaces permanentes o permalinks

5. Enlaces Internos

6. RSS

7. Importar y Exportar

8. Editar Archivos

PRODETUR

PRODETUR

Titles & Metas

• La etiqueta <title> y la etiqueta <meta name=”description”>

– General: Fuerza la reescritura de <titles>

– Portada: Títulos Generales. :

– Tipo de Entradas:Plantilla de Pg, Post, MM, ..

– Taxonomías: Plantilla de Categorías, Etiquetas, ..

– Otro: Autor, archivo

PRODETUR

Optimiza cada página o entrada

PRODETUR

Social

PRODETUR

XML Sitemap

Genera automáticamente un resumen de las páginas, entradas, categorías, autores de tu sitio y envíaselas a los principales buscadores.

PRODETUR

Optimiza tu web

• Velocidad de Carga

– WP Cache

– P3- Profiler

• Analiza la velocidad que pierde Wp por los plugins

• BBDD Limpia

– WP CleanFix

PRODETUR

Webmaster Tool

PRODETUR

HTML 5HTML 5 indexa mejor y esta mejor estructurado

Responsive design + tráfico moviles y tablets

PRODETUR

Link Building

“Dime quien te enlaza y te diré quien eres”

•Cómo debe ser un enlace <a href=“url” title=“kw”>kw</a>

•Dónde conseguir enlaces– Inclusión en directorios (gratis y de nicho)

– Altas en foros y blogs

– Notas de prensa

– Redes sociales

– Intercambio de enlaces

• Enlaces rotos: Broken link checker

PRODETUR

PARA CUALQUIER CUESTIÓN RELACIONADA CON ESTA SESIÓN PUEDES DIRIGIRTE A:

Joaquín López Lé[email protected]

[email protected] telf.: 954 486 800 guillena, 25 de

Documents