Router TP-LINK

No fue hace mucho tiempo, que un usuario de MuOnline Tutoriales  nos preguntaba ¿Qué router me sirve para mi servidor MU?
La respuesta rápida sería:
Para tener un servidor MU no es requisito tener un router y si lo tienes no hay problema porque todos los routers sirven.



La respuesta personal sería la siguiente:
Si ya tienes un router, trabaja con el, no es necesario gastar dinero en comprar uno específico, pero si necesitas comprar uno nuevo te recomendaría el siguiente:

ROUTER TP LINK 3G/3.75G Wireless N Router TL-MR3220

Pero ¿Por qué ese router?
1)Las razones son dos configuraciones (Que seguramente también las tengan otros router que no conozco, otras marcas y modelos)
A)Configuración directa a no-ip / dydns
B)Seguridad ANTI-DOS y ANTI-FLOOD para el MuOnline (Proteje tu conexión ante ataques de Denegación de Servicio y flood)
En caso de tener este router, veamos como configurarlo.
Para ingresar en el, escribimos en nuestro navegador por defecto lo siguiente

192.168.1.1

En caso que nos pida un usuario y un password escribimos:
Usuario: admin
Password: admin
(Estos son datos por default)
Al entrar veremos una pantalla como la siguiente:



2)La primera opción que describía se encuentra en la siguiente ruta:

Dynamic DNS

Esta opción tiene disponible el agregado de cuenta directa desde no-ip y desde Dyndns (Que son las más usadas y nombradas en el mundo MuOnline)



3)La siguiente opción, es el anti DDOS y Flood que tiene el router, algo que nos puede servir muchísimo si sufrimos de este tipo de ataques.
Esta opción la encontramos en la siguiente ruta:

Security => Advanced Security

Como pueden observar, todo es configurable, las explicaciones las encontramos del lado derecho de la pantalla.

LEER MAS

Imagen con link

Bienvenidos a un nuevo tutorial, continuando con HTML básico, hoy aprenderemos a agregar una imagen a nuestra web, y luego agregarle un LINK a esa imagen.
Sin perder tiempo en detalles, veamos el primero código, este sirve para agregar una imagen de la manera mas sencilla y prática:

<img src="imagen.jpg">

1)Comenzemos analizar el código, en este caso no es compuesto como habíamos visto en el anterior tutorial, sino que es un código totalmente simple.
La parte editable es la siguiente:

imagen.jpg

2)Lo que debemos hacer ahi, es poner la ruta en donde está nuestra imagen.
Hay que tener mucho cuidado, ya que si la ruta no es la correcta, la imagen no se vera.
Si nuestra imagen está alojada en la red, no abría problemas, ya que simplemente copiamos la URL completa y la pegamos entre las comillas del código.
Si la imagen la alojamos en la misma carpeta del servidor, debemos estar seguro que la ruta sea la correcta.
En mi ejemplo, tomaré la imagen que tenemos en nuestro sitio, el cual muestra una banderas para el traductor del sitio.
El código con la ruta agregada, nos quedaría asi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuFs0r8iDG5mAOAx7-CV4EevO6RlCRNvb8KTFnFGyu6uBzHXPhFp-P0d32DVn0hGjXSg751pwcIg19mvm0Z8FxjQ19JiGR9KDsrfK_AlcHz7-zbkOWFLE3Aalxvz_QrRNxlMAa1oPEfR0/s320/1.jpg">

3)Ahora lo que haré, será ejecutar el código en la siguiente linea.



4)Y efectivamente al ejecutar el código, podemos ver nuestra imagen.
Algo que deben tener en cuenta, es la extensión de nuestra imagen, recuerdo que si es .gif o .png deben agregalo.
Como dije anteriormente, esté código es totalmente básico, pero ¿Qué significa que este código sea básico?
Significa que no tiene atributos o parámetros si es que asi lo desean llamar, este tipo de atributos nos permitirá por ejemplo hacer que la imagen tenga un enlace al hacer clic en ella, indicar su tamaño y otros.
Entre los atributos más usados tenemos:
a)Height: nos indica la altura de la imagen
b)Width: nos indica la anchura de la imagen
c)Border: si agregamos un número mayor a 0, podremos ver un borde que contornea la iamgen, cuanto mayor sea el número, mayor será el grosor
d)Title: Se usa para agregar una descripción al apoyar el mouse sobre la imagen.
e)<a href="direccion": Agrega un enlace a la imagen
A continuación mostraré un ejemplo de como agregar estos atributos:

<a href="http://rankingmu.com"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuFs0r8iDG5mAOAx7-CV4EevO6RlCRNvb8KTFnFGyu6uBzHXPhFp-P0d32DVn0hGjXSg751pwcIg19mvm0Z8FxjQ19JiGR9KDsrfK_AlcHz7-zbkOWFLE3Aalxvz_QrRNxlMAa1oPEfR0/s320/1.jpg" title="descripcion" WIDTH="245" HEIGHT=30 BORDER=3 ></a>

5)En la siguiente linea, mostraré el código ejecutado. Lo que veremos será la misma imagen que el ejemplo anterior con el enlace.

LEER MAS

Crear un link en la web

Bienvenidos al segundo tutorial de HTML básico, lo que veremos hoy en detalle es como agregar una link a nuestra web.

1)Comenzemos por lo primero, "La sintáxis correcta", para agregar un link a una web la sintaxis es la siguiente:

<a href="dirección o URL">Texto del link</a>

2)Analizemos esto: Este código o etiqueta, la llamaremos "compuesta", ¿Por que?,
Es compuesta porque consta de dos partes, una de ellas es la siguiente:

<a href="dirección o URL">>

Aqui, lo que debemos poner o agregar, el la URL o DIRECCION a donde nos llevará el link, supongamos que quiero hacer un link que me lleve a http://www.rankingmu.com, nuestra primera parte quedará asi:

<a href="http://www.rankingmu.com">

3)Con eso, tenemos terminada la primera parte, es decir, ya hemos agregado el link a donde nos llevará nuestro enlace, ahora lo que necesitamos es crear la parte visible, es decir, el texto que será visible.
En mi caso pondré "Visita mi RankingMU", el código quedaría asi:

Visita mi RankingMU</a>

4)Ahora simplemente unimos estas dos partes. El código finalizado quedaría asi:

<a href="http://www.rankingmu.com">Visita mi RankingMU</a>

Podemos ver su funcionamiento en la siguiente linea:

Visita mi RankingMU

Para verificar nuestra trabajo, simplemente hacemos un click en donde dice "Visita mi RankingMU" y este nos debería llevar al enlace que hemos puesto.
Lógicamente, ustede pueden cambiar tanto el enlace como el nombre a mostrar.

LEER MAS

Etiquetas para formatear textos

Bienvenidos a un nuevo tutorial y sección en MuOnline Tutoriales.
En esta nueva sección aprenderemos todo lo relacionado al lenguaje PHP y HTML, de esta manera podrán incrementar sus conocimientos y aplicarlos en sus diseños web para el MuOnline.



Como primer tutorial, lo que veremos será un puñado de etiquetas que sirven para formatear textos. Estas etiquetas lo que nos permite será darle diferentes estilos o como dice el título, formatear los textos.
Por ejemplo, veamos la siguiente imagen:



Y ahora veamos esta otra:



1) ¿Notan la diferencia?, A simple vista pueden ver que el color es diferente, si poner las dos imágenes juntas, tambien podrán ver que el tamaño es totalmente diferente, y finalmente el estilo de letra o fuente es diferente.
¿Qué fue lo que hice?; la respuesta es simple, apliqué etiquetas a mi texto, el cual le dieron el estilo que yo buscaba y queria.
2)¿Cómo es la sintaxis de estas etiquetas?
Por el momento lo que deben saber es que las etiquetas se aplican de la siguiente forma:

<ETIQUETA>Textos Afectados por la Etiqueta</ETIQUETA>

3)Ahora que tenemos un idea básica sobre las etiquetas, veamos la gran diversidad de ellas que podemos emplear:

<b>Este texto se vera en negrita</b>

Entonces todo lo que pongamos entre las etiquetas <b> </b> se verá en negrita, de esta manera podemos resaltar una palabra dentro de un texto o párrafo.
Como podrán observar una etiqueta debe ser abierta y luego cerrada, la sintaxis debe ser exacta, ya que no hay variantes de éstas.
Para cerrar una etiqueta, basta con agregar una "/" delante de ella.
Continuando con el mismo ejemplo, nos quedaría asi </b>
4)A continuación les dejo una lista variada de diferentes etiquetas:
A)

<B>negrita</B>>
Ejemplo: Este texto se ve en negrita

B)

<U>subrayado</U>
Ejemplo: Este texto se vera subrayado

C)

<I>cursiva</I>
Ejemplo: Este texto se vera en cursiva

D)

<S>tachado</S>
Ejemplo: Este texto se vera tachado

E)

<BIG>Texto mas grande</BIG>
Ejemplo: Este texto se vera mas grande

F)

<SMALL>Texto mas pequeño</SMALL>
Ejemplo: Este texto se vera mas pequeño

G)

<center>Este texto se vera centrado </center>>
Ejemplo:
Este texto se vera centrado

H)

<div align="left"> Este rexto se vera alineado a la izquierda </div>
Ejemplo:

Es texto se vera alineado a la izquierda.

I)

<div align="right"> Este rexto se vera alineado a la derecha </div>
Ejemplo:

Es texto se vera alineado a la derecha.

J.1)

<font size="1">Texto </font>
Ejemplo: Este texto tiene un tamaño 1

J.2)

<font size="2">Texto </font>
Ejemplo: Este texto tiene un tamaño 2

J.3)

<font size="3">Texto </font>
Ejemplo: Este texto tiene un tamaño 3

J.4)

<font size="4">Texto </font>
Ejemplo: Este texto tiene un tamaño 4

J.5)

<font size="5">Texto </font>
Ejemplo: Este texto tiene un tamaño 5

J.6)

<font size="6">Texto </font>
Ejemplo: Este texto tiene un tamaño 6

J.7)

<font size="7">Texto </font>
Ejemplo: Este texto tiene un tamaño 7

K)

<font color="blue">Texto de color azul </font>
Ejemplo: Este texto se vera color azul

L)

<font face=”verdana”>Texto escrito en verdana </font>
Ejemplo: Este texto se vera con una fuente verdana

Eso es todo por ahora, más adelante veremos otro tipo de etiquetas, atributos y combinaciones de estas.

LEER MAS