Noticias con php parte I

#codigo{background:#000;color:#FFF;}

Noticias con php

Hola amigos como están, como lo prometí en la entrada anterior aqui en como crear mi web vamos a empezar a crear una aplicación o más bien un sistema de noticias con php el cual podamos administrar de una forma fácil y lo mejor de todo el script creado por nosotros mismos, en esta ocasión vamos a ver el diseño de nuestra página principal la cual nos servirá de plantilla para todo el sistema de noticias.

En esta primera parte si te fijas lo que vamos hacer es una web en blanco y donde va cada datos lo vamos a describir para que sepas que es lo que le corresponde a cada cosa, al final voy a poner todo el código, por ahora solo iremos construyendo nuestra aplicación paso a paso por el lo demás no te preocupes que también te voy a poner un link donde puedes descargar los archivos.

Bueno sin darle mucha vuelta empecemos a crear la primera página de esta aplicación pero primero vamos a crear una carpeta dentro de nuestro servidor llamada noticias-php o le pueden poner el nombre que quieran. Dentro de esta carpeta crea 2 subcarpetas mas una con el nombre de imagen y otra con el nombre de style.

Si ya la creaste abre tu editor de texto y crea 2 documentos un con el nombre de index.php y guárdalo en el directorio raíz o sea en noticias-php y crea otro con el nombre de style.css y guárdalo en la carpeta style.

Con esto hecho correctamente entonces empezamos a programar nuestro index.php con HTML5.

Adjunto el código luego lo explico.

<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <title>Noticiero con php y mysql</title>
    <link rel=”stylesheet” href=”style/stylo.css” type=”text/css” />
</head>
<body>
<header>
    <div id=’titulo’><h1>www.comocrearmiweb.com</h1></div>
    <div id=’sesion’>Inisiar Sesion | Registrarme</div>  
</header>
<nav>
    <menu>Home</menu>
    <menu>Noticias</menu>
    <menu>Facebook</menu>
    <menu>Twitter</menu>
</nav>
<section id=’cuerpo’>
    <section id=’contenido’>
        <article id=’titulo’><h2>Titulo de nuestra noticias con php</h2></article>
        <article id=’foto’>imagen de la noticia</article>      
        <article id=’noticias’><h2>Descripcion de la noticias con php</h2>
        <br>
        Texto de nuestra noticia
        <section id=’paginacion’>Paginacion de noticias</section>
        </article>
    </section> 
    <aside>
<div id=’publicaciones’><h2>Ultimas publicaciones </h2></div>
Noticias mas resientes
</aside>
</section>
<footer>
copiry@2012 | comocrearmiweb.com | Diseñado por Eriberto Peguero
</footer>
</body>
</html>
Si te fijas al momento de empezar a programar con HTML5Siempre empezamos con el DOCTYPE HTML el cual nos indica que vamos a trabajar con etiquetas HTML5, luego ponemos dentro del head el meta charset  utf-8 para los caracteres raros o acentos. Tambien enlazamos nuestra hoja de estilos css que está en nuestra carpeta style <link rel=”stylesheet” href=”style/stylo.css” type=”text/css” />.
Tambien dentro de la etiquetas body creamos la cavezera de nuestra página web con el siguiente código.
<header>
     <div id=’titulo’><h1>www.comocrearmiweb.com</h1></div>
    <div id=’sesion’>Inisiar Sesion | Registrarme</div>   
</header>
Y le agregamos más abajo una botonera donde vamos a poner los enlaces a las redes sociales facebook y twitter.
<nav>
     <menu>Home</menu>
    <menu>Noticias</menu>
    <menu>Facebook</menu>
    <menu>Twitter</menu>
</nav>
Luego creamos un section donde vamos a entrar todo el contenido de nuestra web y dentro de este section creamos varios article y un aside para terminar de crear nuestro diseño. 
<section id=’cuerpo’>
                <section id=’contenido’>
                <article id=’titulo’><h2>Titulo de nuestra noticias con php</h2></article>
                <article id=’foto’>imagen de la noticia</article>       
  <article id=’noticias’><h2>Descripcion de la noticias con php</h2>
        <br>
        Texto de nuestra noticia
        <section id=’paginacion’>Paginacion de noticias</section>
        </article>
    </section>  
                <aside>
<div id=’publicaciones’><h2>Ultimas publicaciones </h2></div>
Noticias mas resientes
</aside>
</section>

Ahora adjunto el código de estylo.css el cual le dara el diseño a nuestro sitio web  no lo explico porque creo que ya bastante hemos hablado de cómo maquetar con CSS si no es así empiezas a leer nuestros tutoriales de css.
Codigo de stylo.css

*{
margin:0px;
padding:0px;
}
h1{
color:blue;
}
h2{font-size:20px;}
body{
background:#f9f9f9;
}
header{
max-width:100%;
height:75px;
font-size:18px;
background:-moz-linear-gradient(#f1f1f1 0%, #f9f9f9 100%);;
}
#sesion{
float:right;
margin-top:30px;
margin-right:10px;
color:#06C;
font-size:14;
}
nav{
background:#000;
height:30px;
max-width:100%;
color:#FFf;
padding-left:10px;
box-shadow:0 0 5px #f2f2f2;
}
menu{
float:left;
margin-left:10px;
height:25px;
width:100px;
text-align:center;
padding-top:5px;
}
menu:hover{
background:#333;
}
#titulo{
padding:5px;
margin:10px;
float:left;
}
section#cuerpo{
max-width:100%;
height:500px;
background:#f9f9f9;
padding:5px;
}
section#contenido{
display:inline-block;
border:solid 1px #DEDEDE;
vertical-align:top;
max-width:700px;
background:#FFF;
}
article#foto{
width:45%;
float:left;
margin-right:10px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:5px;
margin-left:10px;
}
article#titulo{
border-bottom:solid 1px #DEDEDE;
margin-bottom:10px;
width:670px;
}
article#noticias{
text-align:justify;
padding:10px;
}
aside{
background:#fff;
width:260px;
height:auto;
float:right;
margin-right:10px;
border:solid 1px #DEDEDE;
padding:10px;
}
#publicaciones{
text-align:center;
padding:5px;
border-bottom:solid 1px #DEDEDE;
}
#paginacion{
width:700px;
text-align:center;
color:#06F;
margin-top:50px;
}
footer{
width:100%;
height:30px;
text-align:center;
background:#f0f0f0;
padding-top:10px;
color:blue;
font-size:12px;
border-top:solid 1px #DEDEDE;
}

Si copiaste todo el codigo de forma correcta entonces tu pagina tendria que tener esta misma apariencia dale clic noticias con php .

Bueno con esto creo que terminamos nuestra primera parte de nuestra aplicación de noticias con php en la próxima entrada vamos a crear la página con el formulario para agregar nuevas noticias.

Comments

  1. By Cluddj

  2. By Luis

  3. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.