[email protected] Telf.: 954 486 800 Guillena, 25 de ...
Transcript of [email protected] Telf.: 954 486 800 Guillena, 25 de ...
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:
<!-- Esto es un comentario sobre mi página Web -->
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> <!-- Cabecera del documento -->
<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>
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
Descubriendo el Escritorio
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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
•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
Descubriendo el Escritorio
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
Traducción Automática
PRODETUR
AJUSTES EN WP
PRODETUR
Ajustes Generales
Twitter/MKG20 - Javier Merchán
PRODETUR
Ajustes Generales
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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]