Por @Dorex89

En este primer tutorial de la serie de introducción al CSS3 estudiaremos las propiedades (la inmensa cantidad de propiedades) de todo tipo para diseñar el aspecto de las páginas HTML que nos ofrece el css3 y que nos muestran recursos gráficos que no se pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografía avanzada.  Estas por supuesto son solo las propiedades básicas, mas adelante estudiaremos las propiedades avanzadas. Antes de comenzar a desglosar las propiedades vamos con lo que nos ofrecen las mismas.

Lo mejor de las propiedades CSS3:

1. Propiedades shorthand para crear hojas de estilos concisas.
2. La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos errores de ese navegador.
3. Limpiar floats, para trabajar correctamente con los elementos posicionados de forma flotante.
4. Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de las páginas.
5. Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS
6. Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el diseño de las páginas.
7. Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas.
8. Técnicas para trabajar con el texto y la tipografía.

Antes de comenzar con las propiedades, para aquellos que estén interesados a fondo en el diseño web con CSS3, les recomiendo visitar esta pagina, en la que encontraran la compatibilidad de la mayoría de los motores de búsqueda de internet con el CSS3, pero no solo con el CSS3 en general sino con cada uno de sus elementos desde lo más grande hasta lo más pequeño:

Compatibilidad CSS3 con los Navegadores

PROPIEDADES CSS3

1. SHORTHAND: permiten crear hojas de estilos mucho más concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia la definición formal de las seispropiedades shorthand estándar disponibles para el CSS3:

• FONT: TIPOGRAFÍA

Valores: ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit

Aplicable a: Todos los elementos

Descripción: Permite indicar de forma directa todas las propiedades de la tipografía de un texto

• MARGIN: MARGEN

Valores: ( <medida> | <porcentaje> | auto ) {1, 4} | inherit

Aplicable a:Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas

Descripción: Establece de forma directa todos los márgenes de un elemento

• PADDING: RELLENO

Valores: ( <medida> | <porcentaje> ){1, 4} | inherit

Aplicable a: Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla

Descripción: Establece de forma directa todos los rellenos de los elementos

• BORDER: ESTILO COMPLETO DE TODOS LOS BORDES

Valores: ( <border-width> || <border-color> || <border-style> ) | inherit

Aplicable a: Todos los elementos

Descripción: Establece el estilo completo de todos los bordes de los elementos

• BACKGROUND: FONDO DE UN ELEMENTO

Valores: ( <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ) | inherit

Aplicable a: Todos los elementos

Descripción: Establece todas las propiedades del fondo de un elemento

• LIST-STYLE: ESTILO DE UNA LISTA

Valores: ( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit

Aplicable a:        Elementos de una lista

 Descripción: Propiedad que permite establecer de forma simultanea todas las opciones de una lista

Si se considera la siguiente hoja de estilos:

p {
 font-style: normal;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 1.5em;
 line-height: 1.5;
 font-family: Arial, sans-serif;
}
div {
 margin-top: 5px;
 margin-right: 10px;
 margin-bottom: 5px;
 margin-left: 10px;
 padding-top: 3px;
 padding-right: 5px;
 padding-bottom: 10px;
 padding-left: 7px;
}
h1 {
 background-color: #FFFFFF;
 background-image: url("imagenes/icono.png");
 background-repeat: no-repeat;
 background-position: 10px 5px;
}

Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:

 
p {
 font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
 margin: 5px 10px;
 padding: 3px 5px 10px 7px;
}
h1 {
 background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}
 

2. CLEANING DE FLOATS: La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor. 

 La solución tradicional de este problema consiste en añadir un elemento invisible después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>. La técnica de corregir los problemas ocasionados por los elementos posicionados de forma flotante se suele denominar “limpiar los float”.

Aunque añadir un elemento invisible corrige correctamente el problema, se trata de una solución poco elegante e incorrecta desde el punto de vista semántico. No tiene ningún sentido añadir un elemento vacío en el códigoHTML, sobre todo si ese elemento se utiliza exclusivamente para corregir el aspecto de los contenidos.

Afortunadamente, existe una solución alternativa para limpiar los float que no obliga a añadir nuevos elementosHTML y que además es elegante y muy sencilla. La solución consiste en utilizar la propiedad overflow de CSSsobre el elemento contenedor. Se modifica el código CSS anterior y se incluye la siguiente regla:

#contenedor {
 border:   thick solid #000;
 overflow: hidden;
}
 

Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no es necesario añadir ningún elemento adicional en el código HTML. Además del valor hidden, también es posible utilizar el valor autoobteniendo el mismo resultado.

Esta solución funciona correctamente en todas las versiones recientes de los navegadores, incluyendo Internet Explorer 7 y 8. No obstante, en las versiones anteriores de Internet Explorer es necesario añadir cualquier propiedad CSS que obligue al navegador a considerar que el elemento contenedor ocupa sitio en la página.

Técnicamente, esta estrategia se conoce como forzar a que Internet Explorer active la propiedad hasLayout sobre el elemento. A continuación se muestran algunas técnicas sencillas para conseguirlo:

 
/* Funciona correctamente con cualquier navegador */
#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 width:    100%;
}
 
/* Funciona correctamente con cualquier navegador */
#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 height:   1%;
}
 
/* La propiedad zoom no es parte del estándar CSS, por lo
  que esta hoja de estilos no validaría */
#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 zoom:     1;
}
 
/* El truco del guión bajo delante de las propiedades CSS sólo
  lo interpreta correctamente la versión 6 de Internet Explorer */
#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 _height:  1%;
}

De todas las soluciones anteriores, la más utilizada es la que establece la propiedad height: 1%, ya que normalmente es la que menos afecta al aspecto del elemento contenedor. Considerando todo lo anterior, a continuación se muestra la solución definitiva para limpiar los floats, que es compatible con todos los navegadores y que hace que la hoja de estilos sea válida:

 
#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 height:   1%;
}
 
#izquierda {
 float: left;
 width: 40%;
}
 
#derecha {
 float: right;
 width: 40%;
}

3. SOMBRAS: La regla CSS 3 necesaria para crear una sombra gris muy difuminada y que se visualice en la esquina inferior derecha de un elemento:

.elemento {
 box-shadow: 2px 2px 5px #999;
}

Desafortunadamente, esta propiedad sólo está disponible en los navegadores que más se preocupan por los estándares. El navegador Safari 3 incluye la propiedad con el nombre -webkit-box-shadow y Firefox 3.1 la incluye con el nombre -moz-box-shadow.

La sintaxis completa de la propiedad box-shadow es muy compleja por lo que existen infinidad de recursos oficiales y no-oficiales para tratar con la misma. A continuación se muestra su sintaxis simplificada habitual:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

• La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
• La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
• La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
• La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
• El color indicado es directamente el color de la sombra que se muestra.

4. @FONT-FACE: La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar la dirección o URL desde la que el navegador se puede descargar la fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de uso de la directiva @font-face:

@font-face {
 font-family: "Fuente muy rara";
 src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf");
}
 
h1 {
 font-family: "Fuente muy rara", sans-serif;
}

La directiva @font-face también permite definir otras propiedades de la fuente, como su formato, grosor y estilo. A continuación se muestran otros ejemplos:

@font-face {
 font-family: Fontinsans;
 src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");
 font-weight: bold;
 font-style: italic;
}
 
@font-face {
 font-family: Tagesschrift;
 src: url("fonts/YanoneTagesschrift.ttf") format("truetype");
}

5. SOLUCIONES FIR: Las siglas FIR (Fahrner Image Replacement) abarcan decenas de técnicas similares que tratan de resolver el problema de utilizar cualquier tipo de letra en una página web. El propósito de estas técnicas es sustituir el texto normal por una imagen que contenga el mismo texto escrito con la tipografía deseada. Si se dispone de un título de sección <h1> que se quiere mostrar con una tipografía muy especial, se puede utilizar el siguiente código HTML y CSS para sustituirlo por una imagen:

<h1><span>Lorem ipsum dolor sit amet</span></h1>
 
h1 {
 width: 450px;
 height: 100px;
 background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
 
h1 span {
 display: none;
}
 

El código anterior muestra como imagen de fondo del elemento <h1> la imagen que contiene el titular escrito con la tipografía deseada. Para sustituir el texto por la imagen, simplemente se oculta el texto mediante la propiedaddisplay: none.

Aunque se trata de una de las técnicas FIR más sencillas, su principal problema es que el texto oculto mediantedisplay no lo leen correctamente los dispositivos lectores de páginas que utilizan las personas con discapacidades visuales.

La evolución de la técnica anterior consiste en reemplazar la propiedad display por text-indent:

<h1>Lorem ipsum dolor sit amet</h1>
 
h1 {
 width: 450px;
 height: 100px;
 background: #FFF url("/imagenes/titular.png") no-repeat top left;
 text-indent: -5000px;
}

Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se quiere reemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores normales no muestran el texto y los lectores de páginas lo leen correctamente porque el texto no está oculto.

El problema de la solución anterior es que si el navegador tiene activado CSS y desactivada la carga de las imágenes, no se muestra nada. La solución consiste en volver a utilizar otro elemento <span> dentro del elemento que se quiere reemplazar:

<h1><span></span>Lorem ipsum dolor sit amet</h1>
 
h1 {
 width: 450px;
 height: 100px;
 position: relative;
}
 
h1 span {
 background: #FFF url("/imagenes/titular.png") no-repeat top left;
 position: absolute;
 width: 100%;
 height: 100%;
}

En esta solución, la imagen se muestra por delante del texto, por lo que aunque el texto no se oculta ni se desplaza, el usuario no puede verlo. El principal problema de esta técnica es que no se pueden utilizar imágenes con transparencias.

Por último, se muestra una versión simplificada de la solución anterior que presenta los mismos problemas con las imágenes transparentes:

<h1><span>Lorem ipsum dolor sit amet</span></h1>
 
h1 {
 width: 450px;
 height: 100px;
 background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
 
h1 span {
 position: relative;
 z-index: -1;
}
 

Independientemente de los problemas técnicos relacionados con CSS y los navegadores, el principal problema de las técnicas FIR anteriores es que se deben crear tantas imágenes como elementos se quieran reemplazar. Aunque el proceso de creación de imágenes sea automático, es un proceso pesado cuando se quiere modificar por ejemplo el tamaño o tipo de letra utilizado.

6. SUSTITUCION DE TEXTO POR FLASH: La solución definitiva de todos los problemas de las soluciones basadas en CSS es la técnica sIFR (Scalable Inman Flash Replacement), que combina CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquier tipografía deseada.

La sustitución requiere que en la función replaceElement() se indique el selector CSS de los elementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en la sustitución. La única opción obligatoria se denomina sFlashSrc e indica la ruta completa hasta el archivo .swf que contiene la tipografía deseada. A continuación se muestra una tabla con todas las propiedades de sFIR:

sSelector

El selector del elemento o elementos que se quieren reemplazar. Se puede indicar mediante esta opción o como primer argumento de la función replaceElement(). Se pueden indicar varios selectores separándolos por comas. Los selectores soportados son los de etiqueta, clase, id y el selector de hijos.

• sColor

Color del texto indicado en formato hexadecimal, como por ejemplo #000000 o #CC0000

• sLinkColor          

Color de los enlaces que puede contener el texto

• sHoverColor     

Color del estado :hover de los enlaces que puede contener el texto

• sBgColor             

Color de fondo del texto indicado en formato hexadecimal

•             nPaddingTop ; nPaddingRight; nPaddingBottom; nPaddingLeft               

Relleno superior, izquierdo, inferior e izquierdo del texto

•  sCase   

Transformación del texto. El valor upper transforma el texto a mayúsculas; el valor lower lo transforma a minúsculas

• sWmode            

Esta opción causa problemas en algunas versiones de algunos navegadores, por lo que no se recomienda su uso. Si se le asigna el valor transparent, el Flash que sustituye al texto tiene un fondo transparente. Si se emplea el valor opaque, el Flash tiene un color de fondo sólido.

• sFlashVars         

Variables adicionales que pueden modificar el aspecto del texto sustituido.

1. textalign=center centra el texto de forma horizontal
2. offsetleft=5 desplaza el texto hacia la derecha los píxeles indicados por el número
3. offsetTop=5 desplaza el texto hacia abajo los píxeles indicados por el número
4.  underline=true muestra los enlaces subrayados en el estado :hover

7. ESQUINAS REDONDEADAS: La propiedad border-radius establece la misma curvatura en todas las esquinas y también se definen las propiedades border-top-right-radius,border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada esquina.

En cada propiedad se debe indicar obligatoriamente una medida y se puede indicar opcionalmente una segunda medida. Cuando se indica una sola medida, la esquina es circular y su radio es igual a la medida indicada. Cuando se indican dos medidas, la esquina es elíptica, siendo la primera medida el radio horizontal de la elipse y la segunda medida su radio vertical.

Aunque faltan muchos años hasta que se publique la versión definitiva de CSS 3, los navegadores que más se preocupan de los estándares ya incluyen soporte para crear esquinas redondeadas. El siguiente ejemplo muestra cómo crear esquinas redondeadas con los navegadores Safari y Firefox:

div {
 -webkit-border-radius: 5px 10px;  /* Safari  */
 -moz-border-radius: 5px 10px;     /* Firefox */
}

La solución basada en CSS 3 es la más sencilla y la mejor técnicamente, pero hasta que todos los navegadores no incluyan soporte para CSS 3, no es posible utilizar esta técnica para crear esquinas redondeadas.

Afortunadamente, las esquinas redondeadas son uno de los recursos más solicitados por los diseñadores web y por eso se han definido decenas de técnicas para mostrarlas. Las técnicas se clasifican en:

• Soluciones basadas en CSS y que no utilizan imágenes.
• Soluciones basadas en CSS y que utilizan imágenes.
• Soluciones basadas en JavaScript.

6. Rollovers y sprites: La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenes consiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo para

La mayoría de sitios web profesionales utilizan sprites para mostrar sus imágenes de adorno. La siguiente imagen muestra el sprite del sitio web YouTube:

Los principales inconvenientes de los sprites CSS son la poca flexibilidad que ofrece (añadir o modificar una imagen individual no es inmediato) y el esfuerzo necesario para crear el sprite.

————-

Como pudieron percatarse, no examinamos en este tutorial la propiedad y los recursos que nos ofrece CSS3 con respecto al texto, eso se debe a que el mismo tiene un tutorial reservado exclusivamente para el, en el cual además de estudiar el código, valores, etc, realizaremos divertidos diseños combinando ciertas propiedades aleatoriamente. Esperenlo!

Recursos Interesantes para trabajar con CSS3:

CSS3 Cheat Sheet Completo  -  Es un cheat sheet de css3 que contiene un listado con todas las propiedades, selectores, pseudo-clases, etc. Se encuentra en ingles.

CSS3 Transforms - Es una herramienta muy interesante, y diseñada en CSS3, que nos permite transformar y jugar con nuestro CSS3 y previsualizarlo. 100% recomendado.

CSS3 Color Names - En esta pagina encontraremos los nombres de los colores para aplicarlos a los diseños, sencillo pero útil para aquellos que no quieren visitar la paleta de colores a cada momento.

CSS3 Canvas Cheat Sheet -En esta pagina podremos descargar otro cheat sheet, pero específicamente para acostumbrarnos al lienzo de trabajo del CSS3. Excelente para practicas.

En cada tutorial dejare links interesantes que correspondan al tema estudiado en el mismo. Au revoir!   

Por @RoberVs Roberto von Schoettler.

Continuación de la Parte II

Una vez preparada cualquier aplicación para ser probada, es necesario iniciar una Máquina Virtual de Android (AVD) para correr las aplicaciones. Para ello haremos lo siguiente:

Creamos una máquina virtual. Nos dirigimos a la barra de menú superior -> Window -> Android SDK and AVD manager:

Nos abrirá una ventana que nos muestra una lista de las máquinas virtuales disponibles. Si no tenemos ninguna, procedemos a crearla

Una ventana emergerá que nos permitirá fijar un nombre, la versión que tendrá el dispositivo y el tamaño en la memoria SD (opcional). En éste caso llamaremos la máquina virtual SrDroid2.2, de versión, Android 2.2 y la memoria SD podría fijarse de 512, con eso será suficiente.

Clic en “Create AVD”. Ahora, aparecerá en lista. La seleccionamos y damos clic a “Start…” Aparece una ventana de opciones, es recomendable que demos “check” a “Scale display to real size” y fijemos un tamaño de pantalla de 7 pulgadas.

Una vez hecho ésto, se iniciará nuestro emulador de Android:

En éste estado, la máquina virtual está lista para trabajar, damos clic derecho al proyecto “Test001” -> Run As -> Android Application:

Al correr la aplicación, podemos probar lo que hemos hecho. Si escribimos algo en el área de texto y le damos clic al botón, vemos que el TextView que se encuentra debajo cambia su texto por lo escrito en el área de texto.

Para hacer ésto más divertido, provoquemos un error. Comentemos la línea que relacionamos el botón declarado en la clase Java con el botón creado en main.xml por medio de su ID en R. Ésto provocará un error en tiempo de ejecución porque a la hora de asignar el evento OnClickListener, el botón no estará relacionado en la interfaz.

    ET = (EditText)findViewById(R.id.editText1);
    TV = (TextView)findViewById(R.id.textView1);
//  BTN = (Button)findViewById(R.id.button1);

Si corremos la aplicación nuevamente, nos encontraremos con ésto:

Así es como se manifiesta un error en tiempo de ejecución (Force Close, vete a bañar). Para saber qué salió mal, necesitamos la pestaña de “LogCat”. La buscamos en las Views, yendo al menú superior Window -> Show View -> Other

Ahora desplegamos la carpeta Android y buscamos LogCat

Por medio de éste Log, podemos hacer seguimiento a lo que hace el emulador. Es ideal para detectar errores en tiempo de ejecución. Si corremos la aplicación una vez más y prestamos atención al Log, podemos ver como nos muestra el error en letras rojas. Si nos enfocamos en la línea que dice “Caused by:” nos dice “java.lang.NullPointerException”, donde haciendo doble clic en la línea que le sigue, nos mostrará qué provocó el error. Nos apunta a la línea en donde asignamos el evento OnClickListener al botón.

Con ésto termina éste tutorial que solo echa un vistazo a la programación para Android en el ambiente Eclipse, cubiertos los aspectos principales, es cuestión de investigación para extender lo aquí demostrado y hacer algo más grande.

Espero que les sea de utilidad :). No duden contactarme por Twitter.

Por Victor Rivas @vctr90.

Hoy en día existen gran cantidad de páginas y aplicaciones en Internet hechas con lenguajes para interacción con servidores PHP, JSP, ASP (los más usados a nivel mundial). Para el desarrollo de este tutorial nos encargarémos de hacer una instalación y configuración de PHP con base de datos MySql para Fedora 15, la razón de este tutorial se debe a que este procedimiento no está bien documentado en algunas páginas (o se encuentra en varias partes dispersas), es por ende que se realiza este documento, con la idea de dejar a los lectores un ABC de cómo comenzar a usar estas herramientas en Fedora 15.

Conceptos básicos

• Servidor web: Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. (Wikipedia) http://bit.ly/5P6rq5
• Aplicación web: Es una aplicación software que se codifica en un lenguaje soportado por los navegadores web en la que se confía la ejecución al navegador. (Wikipedia) http://bit.ly/agTStg
• PHP: Es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Se usa principalmente para la interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+. (Wikipedia) http://bit.ly/bdggo7
• MySql: Es un sistema de gestión de bases de datos relacional, multihilo y multiusuario. (Wikypedia) http://bit.ly/cEpYuS

Fuentes consultadas:

• http://j.mp/pnMBUV
• http://j.mp/nHZayq
• http://j.mp/p6EE05
• http://j.mp/o3Va8l

Primero que todo de vamos a instalar el servidor PHP

1. Abrir una terminal y acceder como super usuario con el siguiente comando:

   su
   

2. posteriormente ingresamos nuestra contraseña. Una vez logueado como super usuario introducimos la siguiente línea:

   yum groupinstall “Web Server”
   

   Con este comando descargamos e instalamos PHP

3. Una vez descargado PHP es necesaria una base de datos para lo cual usamos MySql y lo instalamos poniendo esto en la terminal:

   yum groupinstall “MySQL Database”
   

4. Se deben iniciar los servicios:

   service httpd start
   service mysqld start
   

5. Para manejar MySql con un gestor gráfico utilizamos a PHPyAdmin y lo instalamos de la siguiente manera:

   yum install phpMyAdmin
   

6. Establecemos una contraseña para el usuario root de la base de datos (ya que al entrar al PHPMyAdmin pide autenticación de usuario y contraseña

   mysql -u root mysql
   mysql> UPDATE user SET Password=PASSWORD(‘Tu nueva contraseña’) where USER=’root’;
   mysql> FLUSH PRIVILEGES;
   mysql> exit
   

7. Por defecto no viene habilitada la muestra de errores por pantalla, para esto primero descargamos el editor de textos nano con la siguiente sintaxis:

   yum install nano
   

   vamos al archivo de configuración de PHP que se encuentra en /etc/php.ini y lo abrimos:

   nano /etc/php.ini
   

   NOTA: puede ser abierto con el editor de textos por defecto en Linux que se llma Gedit (para este caso la sintaxis sería: gedit /etc/php.ini), podremos notar que muchas de las líneas de este archivo comienzan con un punto y coma “;”, esto quiere decir que está como comentario lo que le sigue, lo que debemos hacer es ir a las líneas:

   ; display_errors
   ;   Default Value: On
   ;   Development Value: On
   ;   Production Value: Off
   ; display_startup_errors
   ;  Default Value: Off
   ;   Development Value: On
   ;   Production Value: Off
   ; error_reporting
   ;   Default Value: E_ALL & ~E_NOTICE
   ;   Development Value: E_ALL | E_STRICT
   ;   Production Value: E_ALL & ~E_DEPRECATED
   

   y quitarles todos los punto y coma “;”, quedaría de esta manera:

   display_errors
     Default Value: On
     Development Value: On
     Production Value: Off
   display_startup_errors
     Default Value: Off
     Development Value: On
     Production Value: Off
   error_reporting
     Default Value: E_ALL & ~E_NOTICE
     Development Value: E_ALL | E_STRICT
     Production Value: E_ALL & ~E_DEPRECATED
   

   Salvamos y salimos del archivo.

8. Por último reiniciamos los servicios de PHP y MySql para que todos los cambios que hicimos se ejecuten:

   service httpd restart
   service mysqld restart
   

¡Y listo!, ya tenemos configurado nuestro propio servidor web local con PHP y MySql

Realizado por: Victor Rivas. TSU en información de la Universidad Tecnológica del Centro Blog: http://j.mp/pbm1tP @vctr90